/* =================================================================
   Industry Dar ERP - Main Stylesheet (RTL & Modern Design System)
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* Layout Sizes */
    --sidebar-width-expanded: 210px;
    --sidebar-width-collapsed: 60px;
    --topbar-height: 38px;
    --bottombar-height: 24px;
    
    /* Transitions & Shadows */
    --transition-speed: 0.25s;
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.25);
    --radius-card: 16px;
    --radius-btn: 10px;

    /* Theme 1: Default (Industry Slate Navy) */
    --sidebar-bg: #0b132b;
    --sidebar-hover: #1c2541;
    --sidebar-active: #2563eb;
    --sidebar-text: rgba(255, 255, 255, 0.88);
    --sidebar-text-hover: #ffffff;
    --sidebar-section-title: rgba(255, 255, 255, 0.45);

    --topbar-bg: #0f172a;
    --topbar-title-color: #ffffff;
    --topbar-desc-color: rgba(255, 255, 255, 0.65);

    --bottombar-bg: #0b132b;
    --workspace-bg: #090d16;
    
    --card-bg: rgba(26, 35, 58, 0.75);
    --card-hover-bg: rgba(32, 44, 74, 0.9);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(59, 130, 246, 0.4);
    
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --secondary-color: #64748b;
    
    --text-color: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #06b6d4;

    --modal-bg: #1e293b;
    --modal-footer-bg: rgba(15, 23, 42, 0.4);
    --table-th-bg: rgba(15, 23, 42, 0.8);
    --table-hover-bg: rgba(255, 255, 255, 0.03);
    --input-bg: rgba(15, 23, 42, 0.6);
    --input-border: rgba(255, 255, 255, 0.08);
    --btn-theme-bg: rgba(255, 255, 255, 0.08);
    --btn-theme-border: rgba(255, 255, 255, 0.18);
    --company-badge-bg: rgba(255, 255, 255, 0.12);
    --company-badge-color: #e2e8f0;
    --company-badge-border: rgba(255, 255, 255, 0.15);
}

/* Theme 2: Daftra Blue */
html[data-theme="daftra"], body[data-theme="daftra"] {
    --sidebar-bg: #13294b;
    --sidebar-hover: #1b3a6b;
    --sidebar-active: #1e50bc;
    --topbar-bg: #10223e;
    --bottombar-bg: #0e1b30;
    --workspace-bg: #0b192e;
    --primary-color: #1e50bc;
    --primary-hover: #18429c;
    --card-bg: rgba(24, 49, 87, 0.75);
    --card-hover-bg: rgba(30, 60, 105, 0.9);
    --card-border-hover: rgba(30, 80, 188, 0.5);
}

/* Theme 3: Professional Green */
html[data-theme="pro-green"], body[data-theme="pro-green"] {
    --sidebar-bg: #062e24;
    --sidebar-hover: #0b4335;
    --sidebar-active: #059669;
    --topbar-bg: #04231b;
    --bottombar-bg: #031a14;
    --workspace-bg: #02140f;
    --primary-color: #059669;
    --primary-hover: #047857;
    --card-bg: rgba(10, 52, 41, 0.75);
    --card-hover-bg: rgba(15, 68, 54, 0.9);
    --card-border-hover: rgba(5, 150, 105, 0.5);
}

/* Theme 4: Odoo Purple */
html[data-theme="odoo"], body[data-theme="odoo"] {
    --sidebar-bg: #231724;
    --sidebar-hover: #352336;
    --sidebar-active: #714b67;
    --topbar-bg: #1c121d;
    --bottombar-bg: #160e17;
    --workspace-bg: #120a13;
    --primary-color: #714b67;
    --primary-hover: #5c3c54;
    --card-bg: rgba(43, 28, 44, 0.75);
    --card-hover-bg: rgba(56, 36, 57, 0.9);
    --card-border-hover: rgba(113, 75, 103, 0.5);
}

/* Theme 5: Professional Neutral */
html[data-theme="neutral"], body[data-theme="neutral"] {
    --sidebar-bg: #18181b;
    --sidebar-hover: #27272a;
    --sidebar-active: #4b5563;
    --topbar-bg: #121215;
    --bottombar-bg: #0d0d0f;
    --workspace-bg: #09090b;
    --primary-color: #6b7280;
    --primary-hover: #4b5563;
    --card-bg: rgba(30, 30, 35, 0.75);
    --card-hover-bg: rgba(42, 42, 48, 0.9);
    --card-border-hover: rgba(107, 114, 128, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   Theme 6: Sky-Blue Theme (سيم الأزرق السماوي - مثل شاشة استلام الشيكات)
   خلفيات سماوي فاتح نقية، كروت بيضاء ناصعة، أشرطة وأزرار مميزة عالية التباين،
   قوائم جانبية ملكية سماوية، خانات بيضاء ناصعة وكتابة داكنة شديدة الوضوح
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="glass-3d-blue"], body[data-theme="glass-3d-blue"] {
    /* Chrome bars - أزرق ملكي سماوي عميق وراقي عالي التباين */
    --sidebar-bg: linear-gradient(180deg, #0369a1 0%, #0284c7 45%, #075985 100%);
    --sidebar-hover: rgba(255, 255, 255, 0.18);
    --sidebar-active: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    --sidebar-text: #ffffff;
    --sidebar-text-hover: #ffffff;
    --sidebar-section-title: #e0f2fe;

    --topbar-bg: linear-gradient(135deg, #0369a1 0%, #0284c7 60%, #075985 100%);
    --topbar-title-color: #ffffff;
    --topbar-desc-color: #e0f2fe;

    --bottombar-bg: linear-gradient(90deg, #075985 0%, #0369a1 50%, #0284c7 100%);

    /* Workspace — خلفية سماوي فاتح نقية تماماً مثل شاشة استلام الشيكات */
    --workspace-bg: #e0f2fe;

    /* Cards & Panels — كروت بيضاء ناصعة نقية مع حدود سماوية أنيقة */
    --card-bg: #ffffff;
    --card-hover-bg: #f8fafc;
    --card-border: #bae6fd;
    --card-border-hover: #0284c7;

    /* Primary & Accents */
    --primary-color: #0284c7;
    --primary-hover: #0369a1;
    --secondary-color: #64748b;

    /* Text — كحلي داكن شديد الوضوح وعالي التباين */
    --text-color: #0f172a;
    --text-muted: #334155;
    --text-dim: #475569;

    --success-color: #10b981;
    --warning-color: #d97706;
    --danger-color: #ef4444;
    --info-color: #0284c7;

    /* Modals & tables */
    --modal-bg: #ffffff;
    --modal-footer-bg: #f0f9ff;
    --table-th-bg: #0369a1;
    --table-hover-bg: #e0f2fe;

    /* Inputs — بيضاء ناصعة مع إطار واضح وكتابة سوداء داكنة جداً */
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-text: #0f172a;

    /* ERP Local Variables */
    --pr-input-bg: #ffffff;
    --pr-input-border: #cbd5e1;
    --pr-input-text: #0f172a;
    --pr-label-color: #1e293b;
    --pr-drop-bg: #ffffff;
    --pr-drop-border: #0284c7;
    --pr-drop-text: #0f172a;
    --pr-drop-hover: #e0f2fe;

    --cp-input-bg: #ffffff;
    --cp-input-text: #0f172a;
    --cp-input-border: #cbd5e1;
    --cp-th-bg: #0369a1;
    --cp-th-text: #ffffff;
    --cp-tr-selected: #bae6fd;
    --cp-tr-selected-text: #0369a1;
    --cp-tr-even: #ffffff;
    --cp-tr-odd: #f8fafc;
    --cp-card-bg: #ffffff;
    --cp-card-border: #bae6fd;
    --cp-label-color: #1e293b;
    --cp-summary-bg: #0f172a;
    --cp-summary-text: #f8fafc;

    --shadow-card: 0 4px 16px rgba(2, 132, 199, 0.10), 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.35);

    scrollbar-color: #0284c7 #cbd5e1;
}

/* ─── Sky-Blue Theme — Workspace Background (الأرضيات والخلفيات) ─── */
html[data-theme="glass-3d-blue"] .app-workspace,
body[data-theme="glass-3d-blue"] .app-workspace,
html[data-theme="glass-3d-blue"] .pr-workspace,
body[data-theme="glass-3d-blue"] .pr-workspace,
html[data-theme="glass-3d-blue"] .cp-workspace,
body[data-theme="glass-3d-blue"] .cp-workspace,
html[data-theme="glass-3d-blue"] #mainWorkspaceContainer,
body[data-theme="glass-3d-blue"] #mainWorkspaceContainer {
    background:
        radial-gradient(circle at 12% 15%, rgba(56, 189, 248, 0.30) 0%, transparent 45%),
        radial-gradient(circle at 88% 85%, rgba(2, 132, 199, 0.20) 0%, transparent 45%),
        linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%) !important;
    background-attachment: fixed !important;
}

/* ─── Sky-Blue Theme — Chrome Bars (الأشرطة والقوائم العلوية والسفلية والجانبية) ─── */
html[data-theme="glass-3d-blue"] .app-topbar,
body[data-theme="glass-3d-blue"] .app-topbar {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 60%, #075985 100%) !important;
    border-bottom: 2px solid #38bdf8 !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35) !important;
}
html[data-theme="glass-3d-blue"] .app-topbar .topbar-title,
body[data-theme="glass-3d-blue"] .app-topbar .topbar-title {
    color: #ffffff !important;
    font-weight: 800 !important;
}
html[data-theme="glass-3d-blue"] .app-topbar .topbar-desc,
body[data-theme="glass-3d-blue"] .app-topbar .topbar-desc {
    color: #e0f2fe !important;
}

html[data-theme="glass-3d-blue"] .app-sidebar,
body[data-theme="glass-3d-blue"] .app-sidebar {
    background: linear-gradient(180deg, #0369a1 0%, #0284c7 45%, #075985 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: -4px 0 20px rgba(2, 132, 199, 0.25) !important;
}
html[data-theme="glass-3d-blue"] .app-sidebar .nav-section-title,
body[data-theme="glass-3d-blue"] .app-sidebar .nav-section-title {
    color: #e0f2fe !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
}
html[data-theme="glass-3d-blue"] .app-sidebar .nav-link,
body[data-theme="glass-3d-blue"] .app-sidebar .nav-link {
    color: #ffffff !important;
    font-weight: 600 !important;
}
html[data-theme="glass-3d-blue"] .app-sidebar .nav-link:hover,
body[data-theme="glass-3d-blue"] .app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: translateX(-3px);
}
html[data-theme="glass-3d-blue"] .app-sidebar .nav-link.active,
body[data-theme="glass-3d-blue"] .app-sidebar .nav-link.active {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.5) !important;
}

html[data-theme="glass-3d-blue"] .app-bottombar,
body[data-theme="glass-3d-blue"] .app-bottombar {
    background: linear-gradient(90deg, #075985 0%, #0369a1 50%, #0284c7 100%) !important;
    border-top: 1.5px solid #38bdf8 !important;
    color: #ffffff !important;
}
html[data-theme="glass-3d-blue"] .app-bottombar .status-label,
body[data-theme="glass-3d-blue"] .app-bottombar .status-label {
    color: #bae6fd !important;
    font-weight: 700 !important;
}
html[data-theme="glass-3d-blue"] .app-bottombar .status-val,
body[data-theme="glass-3d-blue"] .app-bottombar .status-val {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* ─── Sky-Blue Theme — Cards & Surfaces (الأرضيات والكروت والحاويات) ─── */
html[data-theme="glass-3d-blue"] .erp-card,
body[data-theme="glass-3d-blue"] .erp-card,
html[data-theme="glass-3d-blue"] .top-header-form-card,
body[data-theme="glass-3d-blue"] .top-header-form-card,
html[data-theme="glass-3d-blue"] .grid-card-container,
body[data-theme="glass-3d-blue"] .grid-card-container,
html[data-theme="glass-3d-blue"] .modal-container,
body[data-theme="glass-3d-blue"] .modal-container,
html[data-theme="glass-3d-blue"] .modal-drawer-box,
body[data-theme="glass-3d-blue"] .modal-drawer-box,
html[data-theme="glass-3d-blue"] .pr-readonly-info-box,
body[data-theme="glass-3d-blue"] .pr-readonly-info-box,
html[data-theme="glass-3d-blue"] .pr-layout-left,
body[data-theme="glass-3d-blue"] .pr-layout-left,
html[data-theme="glass-3d-blue"] .pr-grid-card,
body[data-theme="glass-3d-blue"] .pr-grid-card,
html[data-theme="glass-3d-blue"] .cp-header-card,
body[data-theme="glass-3d-blue"] .cp-header-card,
html[data-theme="glass-3d-blue"] .cp-grid-container,
body[data-theme="glass-3d-blue"] .cp-grid-container,
html[data-theme="glass-3d-blue"] .pr-sec-card,
body[data-theme="glass-3d-blue"] .pr-sec-card,
html[data-theme="glass-3d-blue"] .si-sec-card,
body[data-theme="glass-3d-blue"] .si-sec-card,
html[data-theme="glass-3d-blue"] .card,
body[data-theme="glass-3d-blue"] .card,
html[data-theme="glass-3d-blue"] .pr-kpi-card,
body[data-theme="glass-3d-blue"] .pr-kpi-card {
    background: #ffffff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ─── Sky-Blue Theme — Action Toolbars (مثل شاشة استلام الشيكات) ─── */
html[data-theme="glass-3d-blue"] .pr-details-toolbar,
body[data-theme="glass-3d-blue"] .pr-details-toolbar,
html[data-theme="glass-3d-blue"] .coa-details-toolbar,
body[data-theme="glass-3d-blue"] .coa-details-toolbar,
html[data-theme="glass-3d-blue"] .cc-details-toolbar,
body[data-theme="glass-3d-blue"] .cc-details-toolbar,
html[data-theme="glass-3d-blue"] .irt-toolbar,
body[data-theme="glass-3d-blue"] .irt-toolbar,
html[data-theme="glass-3d-blue"] .cp-grid-toolbar,
body[data-theme="glass-3d-blue"] .cp-grid-toolbar,
html[data-theme="glass-3d-blue"] .pr-grid-toolbar,
body[data-theme="glass-3d-blue"] .pr-grid-toolbar,
html[data-theme="glass-3d-blue"] .erp-toolbar,
body[data-theme="glass-3d-blue"] .erp-toolbar,
html[data-theme="glass-3d-blue"] .sales-action-bar,
body[data-theme="glass-3d-blue"] .sales-action-bar,
html[data-theme="glass-3d-blue"] .po-tabs-bar,
body[data-theme="glass-3d-blue"] .po-tabs-bar {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 55%, #bae6fd 100%) !important;
    border: 1px solid #7dd3fc !important;
    border-bottom: 2px solid #0284c7 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="glass-3d-blue"] .toolbar-divider,
body[data-theme="glass-3d-blue"] .toolbar-divider {
    background: #7dd3fc !important;
}

html[data-theme="glass-3d-blue"] .record-counter-badge,
body[data-theme="glass-3d-blue"] .record-counter-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #7dd3fc !important;
    color: #0369a1 !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 2px rgba(2, 132, 199, 0.08) !important;
}

/* ─── Sky-Blue Theme — Tile & Action Buttons (الازرار - واضحة ومميزة وبارزة) ─── */
html[data-theme="glass-3d-blue"] .erp-tile-btn,
body[data-theme="glass-3d-blue"] .erp-tile-btn,
html[data-theme="glass-3d-blue"] .erp-grid-btn,
body[data-theme="glass-3d-blue"] .erp-grid-btn,
html[data-theme="glass-3d-blue"] .toolbar-btn-classic,
body[data-theme="glass-3d-blue"] .toolbar-btn-classic,
html[data-theme="glass-3d-blue"] .btn-action,
body[data-theme="glass-3d-blue"] .btn-action,
html[data-theme="glass-3d-blue"] .btn-grid-act,
body[data-theme="glass-3d-blue"] .btn-grid-act,
html[data-theme="glass-3d-blue"] .cp-cell-btn,
body[data-theme="glass-3d-blue"] .cp-cell-btn,
html[data-theme="glass-3d-blue"] .po-tab-btn,
body[data-theme="glass-3d-blue"] .po-tab-btn {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(2, 132, 199, 0.32) !important;
    border-radius: 6px !important;
    color: #0f172a !important;
    box-shadow: 0 1.5px 3px rgba(2, 132, 199, 0.12), inset 0 1px 0 #ffffff !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="glass-3d-blue"] .erp-tile-btn span,
body[data-theme="glass-3d-blue"] .erp-tile-btn span,
html[data-theme="glass-3d-blue"] .toolbar-btn-classic span,
body[data-theme="glass-3d-blue"] .toolbar-btn-classic span {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 0.70rem !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] .erp-tile-btn:hover:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-tile-btn:hover:not(:disabled),
html[data-theme="glass-3d-blue"] .erp-grid-btn:hover:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-grid-btn:hover:not(:disabled),
html[data-theme="glass-3d-blue"] .toolbar-btn-classic:hover:not(:disabled),
body[data-theme="glass-3d-blue"] .toolbar-btn-classic:hover:not(:disabled),
html[data-theme="glass-3d-blue"] .btn-action:hover:not(:disabled),
body[data-theme="glass-3d-blue"] .btn-action:hover:not(:disabled),
html[data-theme="glass-3d-blue"] .btn-grid-act:hover:not(:disabled),
body[data-theme="glass-3d-blue"] .btn-grid-act:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25), inset 0 1px 0 #ffffff !important;
    background: #ffffff !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}

/* Specific Action Button Styling (Matching Sales & Cheques screens) */
html[data-theme="glass-3d-blue"] .erp-btn-new:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-new:not(:disabled) {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-new:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-new:not(:disabled) i { color: #059669 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-save:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-save:not(:disabled) {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-save:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-save:not(:disabled) i { color: #0284c7 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-edit:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-edit:not(:disabled) {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-edit:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-edit:not(:disabled) i { color: #d97706 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-delete:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-delete:not(:disabled) {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-delete:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-delete:not(:disabled) i { color: #dc2626 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-cancel:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-cancel:not(:disabled) {
    background: #f8fafc !important;
    border-color: #64748b !important;
    color: #334155 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-cancel:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-cancel:not(:disabled) i { color: #64748b !important; }

html[data-theme="glass-3d-blue"] .erp-btn-preview:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-preview:not(:disabled) {
    background: #ecfeff !important;
    border-color: #06b6d4 !important;
    color: #0e7490 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-preview:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-preview:not(:disabled) i { color: #0891b2 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-print:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-print:not(:disabled) {
    background: #f5f3ff !important;
    border-color: #8b5cf6 !important;
    color: #6d28d9 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-print:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-print:not(:disabled) i { color: #7c3aed !important; }

html[data-theme="glass-3d-blue"] .erp-btn-gl:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-gl:not(:disabled) {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border-color: #6366f1 !important;
    color: #3730a3 !important;
    font-weight: 800 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-gl:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-gl:not(:disabled) i { color: #4f46e5 !important; }

html[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled),
body[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled),
html[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled),
body[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled),
html[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled),
body[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled),
html[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled),
body[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled),
html[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled) {
    background: #ffffff !important;
    border-color: #38bdf8 !important;
    color: #0369a1 !important;
}
html[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled) i,
body[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled) i,
html[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled) i,
body[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled) i,
html[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled) i,
body[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled) i,
html[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled) i,
body[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled) i,
html[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled) i {
    color: #0284c7 !important;
}
html[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled) span,
body[data-theme="glass-3d-blue"] #btnNavFirst:not(:disabled) span,
html[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled) span,
body[data-theme="glass-3d-blue"] #btnNavPrev:not(:disabled) span,
html[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled) span,
body[data-theme="glass-3d-blue"] #btnNavNext:not(:disabled) span,
html[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled) span,
body[data-theme="glass-3d-blue"] #btnNavLast:not(:disabled) span,
html[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled) span,
body[data-theme="glass-3d-blue"] .erp-btn-nav:not(:disabled) span {
    color: #075985 !important;
    font-weight: 800 !important;
    font-size: 0.70rem !important;
}

html[data-theme="glass-3d-blue"] .erp-btn-advsearch:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-advsearch:not(:disabled) {
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-settings:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-settings:not(:disabled) {
    background: #fdf2f8 !important;
    border-color: #ec4899 !important;
    color: #be185d !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-settings:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-settings:not(:disabled) i { color: #db2777 !important; }

html[data-theme="glass-3d-blue"] .erp-btn-audit:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-audit:not(:disabled) {
    background: #faf5ff !important;
    border-color: #a855f7 !important;
    color: #7e22ce !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-audit:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-audit:not(:disabled) i { color: #9333ea !important; }

html[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled),
body[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled) {
    background: #ffe4e6 !important;
    border-color: #e11d48 !important;
    color: #9f1239 !important;
}
html[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled) i,
body[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled) i { color: #e11d48 !important; }
html[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled) span,
body[data-theme="glass-3d-blue"] .erp-btn-close:not(:disabled) span {
    color: #9f1239 !important;
    font-weight: 900 !important;
    font-size: 0.71rem !important;
}

html[data-theme="glass-3d-blue"] .btn-primary,
body[data-theme="glass-3d-blue"] .btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: 1px solid #0284c7 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
}
html[data-theme="glass-3d-blue"] .btn-secondary,
body[data-theme="glass-3d-blue"] .btn-secondary {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

/* ─── Sky-Blue Theme — Form Inputs (ألوان ووضوح الخانات) ─── */
html[data-theme="glass-3d-blue"] input[type="text"],
html[data-theme="glass-3d-blue"] input[type="number"],
html[data-theme="glass-3d-blue"] input[type="date"],
html[data-theme="glass-3d-blue"] input[type="datetime-local"],
html[data-theme="glass-3d-blue"] input[type="email"],
html[data-theme="glass-3d-blue"] input[type="password"],
html[data-theme="glass-3d-blue"] select,
html[data-theme="glass-3d-blue"] textarea,
html[data-theme="glass-3d-blue"] .form-control,
body[data-theme="glass-3d-blue"] input[type="text"],
body[data-theme="glass-3d-blue"] input[type="number"],
body[data-theme="glass-3d-blue"] input[type="date"],
body[data-theme="glass-3d-blue"] input[type="datetime-local"],
body[data-theme="glass-3d-blue"] input[type="email"],
body[data-theme="glass-3d-blue"] input[type="password"],
body[data-theme="glass-3d-blue"] select,
body[data-theme="glass-3d-blue"] textarea,
body[data-theme="glass-3d-blue"] .form-control {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    border-radius: 5px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

html[data-theme="glass-3d-blue"] input::placeholder,
body[data-theme="glass-3d-blue"] input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

html[data-theme="glass-3d-blue"] input:focus,
html[data-theme="glass-3d-blue"] select:focus,
html[data-theme="glass-3d-blue"] textarea:focus,
body[data-theme="glass-3d-blue"] input:focus,
body[data-theme="glass-3d-blue"] select:focus,
body[data-theme="glass-3d-blue"] textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.20), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
}

/* Readonly Inputs — واضحة ومميزة */
html[data-theme="glass-3d-blue"] input[readonly],
html[data-theme="glass-3d-blue"] input:disabled,
html[data-theme="glass-3d-blue"] select:disabled,
html[data-theme="glass-3d-blue"] textarea:disabled,
body[data-theme="glass-3d-blue"] input[readonly],
body[data-theme="glass-3d-blue"] input:disabled,
body[data-theme="glass-3d-blue"] select:disabled,
body[data-theme="glass-3d-blue"] textarea:disabled {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    cursor: default !important;
}

/* ─── Sky-Blue Theme — Typography & Text Clarity (ألوان الكتابة ووضوحها) ─── */
html[data-theme="glass-3d-blue"] label,
html[data-theme="glass-3d-blue"] .pr-field-label,
html[data-theme="glass-3d-blue"] .pr-field-group label,
html[data-theme="glass-3d-blue"] .form-group label,
html[data-theme="glass-3d-blue"] .form-group-micro label,
html[data-theme="glass-3d-blue"] .info-data-label,
html[data-theme="glass-3d-blue"] .cp-field-inline label,
body[data-theme="glass-3d-blue"] label,
body[data-theme="glass-3d-blue"] .pr-field-label,
body[data-theme="glass-3d-blue"] .pr-field-group label,
body[data-theme="glass-3d-blue"] .form-group label,
body[data-theme="glass-3d-blue"] .form-group-micro label,
body[data-theme="glass-3d-blue"] .info-data-label,
body[data-theme="glass-3d-blue"] .cp-field-inline label {
    color: #1e293b !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] h1,
html[data-theme="glass-3d-blue"] h2,
html[data-theme="glass-3d-blue"] h3,
html[data-theme="glass-3d-blue"] h4,
html[data-theme="glass-3d-blue"] h5,
html[data-theme="glass-3d-blue"] h6,
html[data-theme="glass-3d-blue"] .grid-card-header,
html[data-theme="glass-3d-blue"] .pr-grid-header,
html[data-theme="glass-3d-blue"] .card-title,
html[data-theme="glass-3d-blue"] .info-header-title,
body[data-theme="glass-3d-blue"] h1,
body[data-theme="glass-3d-blue"] h2,
body[data-theme="glass-3d-blue"] h3,
body[data-theme="glass-3d-blue"] h4,
body[data-theme="glass-3d-blue"] h5,
body[data-theme="glass-3d-blue"] h6,
body[data-theme="glass-3d-blue"] .grid-card-header,
body[data-theme="glass-3d-blue"] .pr-grid-header,
body[data-theme="glass-3d-blue"] .card-title,
body[data-theme="glass-3d-blue"] .info-header-title {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] .info-data-val,
html[data-theme="glass-3d-blue"] .pr-kpi-val,
body[data-theme="glass-3d-blue"] .info-data-val,
body[data-theme="glass-3d-blue"] .pr-kpi-val {
    color: #0f172a !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] .pr-kpi-label,
body[data-theme="glass-3d-blue"] .pr-kpi-label {
    color: #475569 !important;
    font-weight: 600 !important;
}

/* ─── Sky-Blue Theme — Tables (الجداول) ─── */
html[data-theme="glass-3d-blue"] table th,
body[data-theme="glass-3d-blue"] table th,
html[data-theme="glass-3d-blue"] .po-grid-table th,
body[data-theme="glass-3d-blue"] .po-grid-table th,
html[data-theme="glass-3d-blue"] .pr-table th,
body[data-theme="glass-3d-blue"] .pr-table th {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="glass-3d-blue"] table td,
body[data-theme="glass-3d-blue"] table td,
html[data-theme="glass-3d-blue"] .po-grid-table td,
body[data-theme="glass-3d-blue"] .po-grid-table td,
html[data-theme="glass-3d-blue"] .pr-table td,
body[data-theme="glass-3d-blue"] .pr-table td {
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] table tr:nth-child(even) td,
body[data-theme="glass-3d-blue"] table tr:nth-child(even) td,
html[data-theme="glass-3d-blue"] .po-grid-table tr:nth-child(even) td,
body[data-theme="glass-3d-blue"] .po-grid-table tr:nth-child(even) td {
    background: #ffffff !important;
}

html[data-theme="glass-3d-blue"] table tr:nth-child(odd) td,
body[data-theme="glass-3d-blue"] table tr:nth-child(odd) td,
html[data-theme="glass-3d-blue"] .po-grid-table tr:nth-child(odd) td,
body[data-theme="glass-3d-blue"] .po-grid-table tr:nth-child(odd) td {
    background: #f8fafc !important;
}

html[data-theme="glass-3d-blue"] table tr:hover td,
body[data-theme="glass-3d-blue"] table tr:hover td,
html[data-theme="glass-3d-blue"] .po-grid-table tr:hover td,
body[data-theme="glass-3d-blue"] .po-grid-table tr:hover td {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

html[data-theme="glass-3d-blue"] table tr.selected td,
body[data-theme="glass-3d-blue"] table tr.selected td,
html[data-theme="glass-3d-blue"] .po-grid-table tr.selected td,
body[data-theme="glass-3d-blue"] .po-grid-table tr.selected td,
html[data-theme="glass-3d-blue"] .table-row-selected td,
body[data-theme="glass-3d-blue"] .table-row-selected td {
    background: #bae6fd !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
}

html[data-theme="glass-3d-blue"] .grid-summary-footer,
body[data-theme="glass-3d-blue"] .grid-summary-footer,
html[data-theme="glass-3d-blue"] .pr-line-count-bar,
body[data-theme="glass-3d-blue"] .pr-line-count-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%) !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

/* ─── Sky-Blue Theme — Dropdowns & Custom Combos (القوائم المنسدلة) ─── */
html[data-theme="glass-3d-blue"] .combo-dropdown,
body[data-theme="glass-3d-blue"] .combo-dropdown,
html[data-theme="glass-3d-blue"] .dropdown-menu,
body[data-theme="glass-3d-blue"] .dropdown-menu {
    background: #ffffff !important;
    border: 1.5px solid #0284c7 !important;
    box-shadow: 0 12px 35px rgba(2, 132, 199, 0.22) !important;
    border-radius: 6px !important;
    color: #0f172a !important;
}

html[data-theme="glass-3d-blue"] .combo-item,
body[data-theme="glass-3d-blue"] .combo-item,
html[data-theme="glass-3d-blue"] .dropdown-item,
body[data-theme="glass-3d-blue"] .dropdown-item {
    color: #0f172a !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-shadow: none !important;
}

html[data-theme="glass-3d-blue"] .combo-item:hover,
html[data-theme="glass-3d-blue"] .combo-item.selected,
body[data-theme="glass-3d-blue"] .combo-item:hover,
body[data-theme="glass-3d-blue"] .combo-item.selected,
html[data-theme="glass-3d-blue"] .dropdown-item:hover,
body[data-theme="glass-3d-blue"] .dropdown-item:hover {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Theme 7: Crystal Dark & Royal Gold (سيم الكريستال الأسود الشفاف والذهب الملكي)
   شاشات داكنة شفافة كالكريستال، أزرار وخانات بارزة طافية 3D، أيقونات وفواصل ذهبية
   كتابة بيضاء ناصعة في الوضع الداكن، وكتابة سوداء في وضع الورك سبيس الفاتح
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="crystal-gold"], body[data-theme="crystal-gold"] {
    /* Chrome Bars: Deep Obsidian Crystal Glass with Gold Highlights */
    --sidebar-bg: rgba(8, 8, 12, 0.92);
    --sidebar-hover: rgba(255, 215, 0, 0.15);
    --sidebar-active: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(15, 15, 20, 0.95));
    --sidebar-text: #ffffff;
    --sidebar-text-hover: #ffd700;
    --sidebar-section-title: #d4af37;

    --topbar-bg: linear-gradient(135deg, rgba(8, 8, 12, 0.96), rgba(18, 18, 26, 0.94));
    --topbar-title-color: #ffd700;
    --topbar-desc-color: #fcf6ba;

    --bottombar-bg: rgba(8, 8, 12, 0.96);

    /* Workspace: Pure Deep Crystal Obsidian Black with subtle golden ambient light */
    --workspace-bg: #07070a;

    /* Cards: Dark Crystal Translucent Glass */
    --card-bg: rgba(15, 15, 22, 0.82);
    --card-hover-bg: rgba(24, 24, 34, 0.90);
    --card-border: rgba(212, 175, 55, 0.40);
    --card-border-hover: #ffd700;

    /* Colors: Pure Royal Gold Accents */
    --primary-color: #d4af37;
    --primary-hover: #ffd700;
    --secondary-color: #a1a1aa;

    /* Text: Ultra-Bright White in dark crystal mode */
    --text-color: #ffffff;
    --text-muted: #e4e4e7;
    --text-dim: #d4d4d8;

    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #ffd700;

    /* Modals & Tables */
    --modal-bg: rgba(12, 12, 18, 0.96);
    --modal-footer-bg: rgba(18, 18, 26, 0.96);
    --table-th-bg: rgba(24, 24, 34, 0.95);
    --table-hover-bg: rgba(212, 175, 55, 0.14);

    /* Inputs: Raised Floating Dark Glass with Gold Rim */
    --input-bg: rgba(12, 12, 18, 0.85);
    --input-border: rgba(212, 175, 55, 0.45);
    --input-text: #ffffff;

    /* Local ERP variables */
    --cp-card-bg: rgba(15, 15, 22, 0.82);
    --cp-card-border: rgba(212, 175, 55, 0.40);
    --cp-input-bg: rgba(12, 12, 18, 0.85);
    --cp-input-text: #ffffff;
    --cp-input-border: rgba(212, 175, 55, 0.45);
    --cp-th-bg: rgba(24, 24, 34, 0.95);
    --cp-th-text: #ffd700;
    --cp-tr-selected: rgba(212, 175, 55, 0.28);
    --cp-tr-selected-text: #ffffff;
    --cp-tr-even: rgba(14, 14, 20, 0.65);
    --cp-tr-odd: rgba(22, 22, 30, 0.65);
    --cp-tr-hover: rgba(212, 175, 55, 0.16);
    --cp-label-color: #ffffff;
    --cp-summary-bg: rgba(10, 10, 16, 0.95);
    --cp-summary-text: #ffffff;

    --shadow-card: 0 10px 32px -4px rgba(0, 0, 0, 0.90), 0 4px 10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 235, 150, 0.35);
    --shadow-glow: 0 0 25px rgba(255, 215, 0, 0.40);

    scrollbar-color: #ffd700 rgba(10, 10, 15, 0.9);
}

/* Crystal Dark Background with subtle luxury golden aura */
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .app-workspace,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .app-workspace {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.16) 0%, transparent 60%),
        radial-gradient(circle at 10% 90%, rgba(180, 140, 30, 0.08) 0%, transparent 45%),
        linear-gradient(180deg, #07070a 0%, #0d0d14 50%, #050508 100%) !important;
    background-attachment: fixed !important;
}

/* Glassmorphism & Crystal Blur on Chrome Bars */
html[data-theme="crystal-gold"] .app-topbar,
body[data-theme="crystal-gold"] .app-topbar,
html[data-theme="crystal-gold"] .app-sidebar,
body[data-theme="crystal-gold"] .app-sidebar,
html[data-theme="crystal-gold"] .app-bottombar,
body[data-theme="crystal-gold"] .app-bottombar {
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border-color: rgba(212, 175, 55, 0.38) !important;
}

/* 3D Raised Floating Cards & Panels (بارزة طافية كالكريستال الأسود) */
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .erp-card,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .erp-card,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .top-header-form-card,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .top-header-form-card,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-header-card,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-header-card,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .grid-card-container,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .grid-card-container,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-grid-container,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-grid-container,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .modal-container,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .modal-container,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .modal-drawer-box,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .modal-drawer-box,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cc-modal-window,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cc-modal-window,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-alloc-panel,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-alloc-panel,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-top-status-bar,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-top-status-bar,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-summary-bar,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-summary-bar,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .pr-details-toolbar,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .pr-details-toolbar,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .erp-top-toolbar,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .erp-top-toolbar,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-table-wrapper,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) .cp-table-wrapper {
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    background: rgba(14, 14, 22, 0.82) !important;
    border: 1px solid rgba(212, 175, 55, 0.40) !important;
    box-shadow:
        0 12px 36px -4px rgba(0, 0, 0, 0.90),
        0 4px 12px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 rgba(255, 235, 150, 0.40),
        inset 0 0 16px rgba(212, 175, 55, 0.06) !important;
    border-radius: 8px;
    position: relative;
}

/* 3D Floating Buttons (أزرار بارزة طافية ثلاثية الأبعاد) */
html[data-theme="crystal-gold"] .erp-tile-btn,
body[data-theme="crystal-gold"] .erp-tile-btn,
html[data-theme="crystal-gold"] .btn-grid-act,
body[data-theme="crystal-gold"] .btn-grid-act,
html[data-theme="crystal-gold"] .btn-status-act,
body[data-theme="crystal-gold"] .btn-status-act,
html[data-theme="crystal-gold"] .btn-check-creator-trigger,
body[data-theme="crystal-gold"] .btn-check-creator-trigger,
html[data-theme="crystal-gold"] .btn,
body[data-theme="crystal-gold"] .btn,
html[data-theme="crystal-gold"] .cp-cell-btn,
body[data-theme="crystal-gold"] .cp-cell-btn {
    box-shadow:
        0 6px 16px -1px rgba(0, 0, 0, 0.75),
        0 2px 5px rgba(0, 0, 0, 0.5),
        inset 0 1px 0.5px rgba(255, 235, 150, 0.45) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html[data-theme="crystal-gold"] .erp-tile-btn:hover:not(:disabled),
body[data-theme="crystal-gold"] .erp-tile-btn:hover:not(:disabled),
html[data-theme="crystal-gold"] .btn-grid-act:hover:not(:disabled),
body[data-theme="crystal-gold"] .btn-grid-act:hover:not(:disabled),
html[data-theme="crystal-gold"] .btn-status-act:hover,
body[data-theme="crystal-gold"] .btn-status-act:hover,
html[data-theme="crystal-gold"] .btn:hover:not(:disabled),
body[data-theme="crystal-gold"] .btn:hover:not(:disabled),
html[data-theme="crystal-gold"] .cp-cell-btn:hover:not(:disabled),
body[data-theme="crystal-gold"] .cp-cell-btn:hover:not(:disabled) {
    transform: translateY(-2.5px) scale(1.03) !important;
    box-shadow:
        0 12px 26px -2px rgba(0, 0, 0, 0.92),
        0 0 18px rgba(255, 215, 0, 0.48),
        inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    border-color: #ffd700 !important;
}

html[data-theme="crystal-gold"] .erp-tile-btn:active:not(:disabled),
body[data-theme="crystal-gold"] .erp-tile-btn:active:not(:disabled),
html[data-theme="crystal-gold"] .btn-grid-act:active:not(:disabled),
body[data-theme="crystal-gold"] .btn-grid-act:active:not(:disabled),
html[data-theme="crystal-gold"] .btn:active:not(:disabled),
body[data-theme="crystal-gold"] .btn:active:not(:disabled),
html[data-theme="crystal-gold"] .cp-cell-btn:active:not(:disabled),
body[data-theme="crystal-gold"] .cp-cell-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.97) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* 3D Floating Raised Inputs & Selects & Textareas (خانات بارزة طافية) */
html[data-theme="crystal-gold"] input[type="text"],
html[data-theme="crystal-gold"] input[type="number"],
html[data-theme="crystal-gold"] input[type="date"],
html[data-theme="crystal-gold"] input[type="datetime-local"],
html[data-theme="crystal-gold"] input[type="email"],
html[data-theme="crystal-gold"] input[type="password"],
html[data-theme="crystal-gold"] select,
html[data-theme="crystal-gold"] textarea,
body[data-theme="crystal-gold"] input[type="text"],
body[data-theme="crystal-gold"] input[type="number"],
body[data-theme="crystal-gold"] input[type="date"],
body[data-theme="crystal-gold"] input[type="datetime-local"],
body[data-theme="crystal-gold"] input[type="email"],
body[data-theme="crystal-gold"] input[type="password"],
body[data-theme="crystal-gold"] select,
body[data-theme="crystal-gold"] textarea {
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 5px !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 235, 150, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: all 0.2s ease !important;
}

html[data-theme="crystal-gold"] input:focus,
html[data-theme="crystal-gold"] select:focus,
html[data-theme="crystal-gold"] textarea:focus,
body[data-theme="crystal-gold"] input:focus,
body[data-theme="crystal-gold"] select:focus,
body[data-theme="crystal-gold"] textarea:focus {
    border-color: #ffd700 !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.70),
        0 0 14px rgba(255, 215, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
    outline: none !important;
    transform: translateY(-1px) !important;
}

/* All Icons in Pure Royal Gold (كل الأيقونات باللون الذهب) */
html[data-theme="crystal-gold"] i,
body[data-theme="crystal-gold"] i,
html[data-theme="crystal-gold"] .fas,
body[data-theme="crystal-gold"] .fas,
html[data-theme="crystal-gold"] .far,
body[data-theme="crystal-gold"] .far,
html[data-theme="crystal-gold"] .fa,
body[data-theme="crystal-gold"] .fa,
html[data-theme="crystal-gold"] svg.trash-svg,
body[data-theme="crystal-gold"] svg.trash-svg {
    color: #ffd700 !important;
    fill: #ffd700 !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75)) !important;
}

/* Lines, Dividers and Borders in Pure Gold (كل الخطوط والفواصل باللون الذهب) */
html[data-theme="crystal-gold"] hr,
body[data-theme="crystal-gold"] hr,
html[data-theme="crystal-gold"] .toolbar-divider,
body[data-theme="crystal-gold"] .toolbar-divider,
html[data-theme="crystal-gold"] .toolbar-screen-divider,
body[data-theme="crystal-gold"] .toolbar-screen-divider,
html[data-theme="crystal-gold"] .top-status-sep,
body[data-theme="crystal-gold"] .top-status-sep,
html[data-theme="crystal-gold"] .summary-sep,
body[data-theme="crystal-gold"] .summary-sep {
    background: linear-gradient(90deg, transparent 0%, #ffd700 50%, transparent 100%) !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.45) !important;
    opacity: 0.9 !important;
}

html[data-theme="crystal-gold"] .cp-table th,
body[data-theme="crystal-gold"] .cp-table th {
    background: linear-gradient(180deg, rgba(32, 28, 14, 0.95) 0%, rgba(16, 16, 22, 0.95) 100%) !important;
    color: #ffd700 !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    border-bottom: 2.5px solid #ffd700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

html[data-theme="crystal-gold"] .cp-table td,
body[data-theme="crystal-gold"] .cp-table td {
    border-color: rgba(212, 175, 55, 0.32) !important;
}

/* Ultra-Bright Pure White Typography in Dark Mode (كتابة شديدة البياض والوضوح) */
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode),
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode),
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) label,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) label,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) select,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) select,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) textarea,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) textarea,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) td,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) td,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) span:not(.color-preview):not(.badge):not(.status-pill-badge),
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) span:not(.color-preview):not(.badge):not(.status-pill-badge),
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) strong,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) strong,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) p,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) p,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h1,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h2,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h3,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h4,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h5,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) select,
html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) textarea,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) select,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) textarea {
    background: rgba(14, 14, 22, 0.88) !important;
    color: #ffffff !important;
}

html[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input::placeholder,
body[data-theme="crystal-gold"]:not(.white-workspace-mode):not(.light-full-mode) input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Crystal Gold — White / Light Workspace Variant
   "وعند اختيار نفس الوضع ولكن ورك اسبيس فاتح اجعل كل شي كما هو ولكن الكتابه تكون باللون الاسود"
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace,
html[data-theme="crystal-gold"].light-full-mode .app-workspace,
body[data-theme="crystal-gold"].light-full-mode .app-workspace {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%) !important;
    background-attachment: fixed !important;
}

/* Cards become White Crystal Glass with Gold Rims & Raised 3D Floating Shadow */
html[data-theme="crystal-gold"].white-workspace-mode .erp-card,
body[data-theme="crystal-gold"].white-workspace-mode .erp-card,
html[data-theme="crystal-gold"].white-workspace-mode .top-header-form-card,
body[data-theme="crystal-gold"].white-workspace-mode .top-header-form-card,
html[data-theme="crystal-gold"].white-workspace-mode .cp-header-card,
body[data-theme="crystal-gold"].white-workspace-mode .cp-header-card,
html[data-theme="crystal-gold"].white-workspace-mode .grid-card-container,
body[data-theme="crystal-gold"].white-workspace-mode .grid-card-container,
html[data-theme="crystal-gold"].white-workspace-mode .cp-grid-container,
body[data-theme="crystal-gold"].white-workspace-mode .cp-grid-container,
html[data-theme="crystal-gold"].white-workspace-mode .cp-alloc-panel,
body[data-theme="crystal-gold"].white-workspace-mode .cp-alloc-panel,
html[data-theme="crystal-gold"].white-workspace-mode .cp-top-status-bar,
body[data-theme="crystal-gold"].white-workspace-mode .cp-top-status-bar,
html[data-theme="crystal-gold"].white-workspace-mode .cp-summary-bar,
body[data-theme="crystal-gold"].white-workspace-mode .cp-summary-bar,
html[data-theme="crystal-gold"].light-full-mode .erp-card,
body[data-theme="crystal-gold"].light-full-mode .erp-card,
html[data-theme="crystal-gold"].light-full-mode .cp-header-card,
body[data-theme="crystal-gold"].light-full-mode .cp-header-card,
html[data-theme="crystal-gold"].light-full-mode .cp-grid-container,
body[data-theme="crystal-gold"].light-full-mode .cp-grid-container {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
    box-shadow:
        0 10px 30px -4px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 12px rgba(255, 215, 0, 0.18) !important;
    border-radius: 8px;
}

/* In White Workspace: ALL Writing becomes Ultra-Sharp Deep Black (الكتابة باللون الأسود شديد الوضوح) */
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace label,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace label,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace input,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace input,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace select,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace select,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace textarea,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace textarea,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace td,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace td,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace span:not(.color-preview):not(.badge):not(.status-pill-badge),
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace span:not(.color-preview):not(.badge):not(.status-pill-badge),
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace strong,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace strong,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace p,
body[data-theme="crystal-gold"].white-workspace-mode .app-workspace p,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h1,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h2,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h3,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h4,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h5,
html[data-theme="crystal-gold"].white-workspace-mode .app-workspace h6,
html[data-theme="crystal-gold"].light-full-mode .app-workspace,
body[data-theme="crystal-gold"].light-full-mode .app-workspace,
html[data-theme="crystal-gold"].light-full-mode .app-workspace label,
body[data-theme="crystal-gold"].light-full-mode .app-workspace label,
html[data-theme="crystal-gold"].light-full-mode .app-workspace input,
body[data-theme="crystal-gold"].light-full-mode .app-workspace input,
html[data-theme="crystal-gold"].light-full-mode .app-workspace select,
body[data-theme="crystal-gold"].light-full-mode .app-workspace select,
html[data-theme="crystal-gold"].light-full-mode .app-workspace td,
body[data-theme="crystal-gold"].light-full-mode .app-workspace td,
html[data-theme="crystal-gold"].light-full-mode .app-workspace span:not(.color-preview):not(.badge):not(.status-pill-badge) {
    color: #000000 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Inputs in White Workspace: Crisp white background, black text, gold border */
html[data-theme="crystal-gold"].white-workspace-mode input,
html[data-theme="crystal-gold"].white-workspace-mode select,
html[data-theme="crystal-gold"].white-workspace-mode textarea,
body[data-theme="crystal-gold"].white-workspace-mode input,
body[data-theme="crystal-gold"].white-workspace-mode select,
body[data-theme="crystal-gold"].white-workspace-mode textarea,
html[data-theme="crystal-gold"].light-full-mode input,
html[data-theme="crystal-gold"].light-full-mode select,
html[data-theme="crystal-gold"].light-full-mode textarea,
body[data-theme="crystal-gold"].light-full-mode input,
body[data-theme="crystal-gold"].light-full-mode select,
body[data-theme="crystal-gold"].light-full-mode textarea {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1.5px solid rgba(212, 175, 55, 0.60) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 #ffffff !important;
}

html[data-theme="crystal-gold"].white-workspace-mode input::placeholder,
body[data-theme="crystal-gold"].white-workspace-mode input::placeholder {
    color: #64748b !important;
}

/* In White Workspace: All Icons, Dividers, and Borders still remain Gold! */
html[data-theme="crystal-gold"].white-workspace-mode i,
body[data-theme="crystal-gold"].white-workspace-mode i,
html[data-theme="crystal-gold"].light-full-mode i,
body[data-theme="crystal-gold"].light-full-mode i {
    color: #d4af37 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important;
}

html[data-theme="crystal-gold"].white-workspace-mode .cp-table th,
body[data-theme="crystal-gold"].white-workspace-mode .cp-table th {
    background: linear-gradient(180deg, #fefce8 0%, #fef08a 100%) !important;
    color: #713f12 !important;
    border-color: rgba(212, 175, 55, 0.50) !important;
    border-bottom: 2px solid #d4af37 !important;
}

/* Mode 2: Full Light Mode (Sidebar & Workspace Light; Topbar & Bottombar remain in chosen Dark Theme) */
html.light-full-mode, body.light-full-mode {
    --sidebar-bg: #ffffff !important;
    --sidebar-hover: #f1f5f9 !important;
    --sidebar-active: var(--primary-color) !important;
    --sidebar-text: #334155 !important;
    --sidebar-text-hover: var(--primary-color) !important;
    --sidebar-section-title: #64748b !important;

    --workspace-bg: #f8fafc !important;
}

html.light-full-mode .app-workspace,
body.light-full-mode .app-workspace {
    --card-bg: #ffffff !important;
    --card-hover-bg: #f8fafc !important;
    --card-border: #cbd5e1 !important;
    --card-border-hover: var(--primary-color) !important;
    
    --text-color: #0f172a !important;
    --text-muted: #475569 !important;
    --text-dim: #64748b !important;

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04) !important;

    --table-th-bg: #f8fafc !important;
    --table-hover-bg: #f1f5f9 !important;
    --input-bg: #ffffff !important;
    --input-border: #cbd5e1 !important;
    color: #0f172a;
}

html.light-full-mode .modal-container,
body.light-full-mode .modal-container {
    --modal-bg: #ffffff !important;
    --modal-footer-bg: #f8fafc !important;
    --card-bg: #ffffff !important;
    --card-border: #cbd5e1 !important;
    --text-color: #0f172a !important;
    --text-muted: #475569 !important;
    --text-dim: #64748b !important;
    --input-bg: #ffffff !important;
    --input-border: #cbd5e1 !important;
    color: #0f172a;
}

/* Mode 3: White Workspace ONLY */
/* Topbar, Sidebar, and Bottombar remain 100% untouched in their Dark Theme colors/fonts; ONLY Workspace turns White */
html.white-workspace-mode, body.white-workspace-mode {
    --workspace-bg: #f8fafc !important;
}

html.white-workspace-mode .app-workspace,
body.white-workspace-mode .app-workspace {
    --card-bg: #ffffff !important;
    --card-hover-bg: #f8fafc !important;
    --card-border: #cbd5e1 !important;
    --card-border-hover: var(--primary-color) !important;
    
    --text-color: #0f172a !important;
    --text-muted: #475569 !important;
    --text-dim: #64748b !important;

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04) !important;

    --table-th-bg: #f8fafc !important;
    --table-hover-bg: #f1f5f9 !important;
    --input-bg: #ffffff !important;
    --input-border: #cbd5e1 !important;
    color: #0f172a;
}

html.white-workspace-mode .modal-container,
body.white-workspace-mode .modal-container {
    --modal-bg: #ffffff !important;
    --modal-footer-bg: #f8fafc !important;
    --card-bg: #ffffff !important;
    --card-border: #cbd5e1 !important;
    --text-color: #0f172a !important;
    --text-muted: #475569 !important;
    --text-dim: #64748b !important;
    --input-bg: #ffffff !important;
    --input-border: #cbd5e1 !important;
    color: #0f172a;
}

/* Reset & Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    background-color: var(--workspace-bg);
    color: var(--text-color);
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
}

/* Universal Typography Enforcement matching Payment Methods screen */
button, input, select, textarea, optgroup, option, label, table, th, td, .btn, .simple-button, .md-btn, .tab-btn, .nav-text, .page-title, .page-desc {
    font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* App Shell Structure */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    position: relative;
    padding-bottom: var(--bottombar-height);
}

/* Sidebar */
.app-sidebar {
    width: var(--sidebar-width-expanded);
    background-color: var(--sidebar-bg);
    border-left: 1px solid var(--card-border);
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    bottom: var(--bottombar-height);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Collapsed Sidebar State */
html.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .app-sidebar {
    width: var(--sidebar-width-collapsed);
    overflow: visible !important;
}

html.sidebar-collapsed .sidebar-nav,
body.sidebar-collapsed .sidebar-nav {
    overflow: visible !important;
}

/* Sidebar Header */
.sidebar-header {
    height: var(--topbar-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--card-border);
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-color);
    overflow: hidden;
    white-space: nowrap;
}

.brand-icon {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.brand-icon svg {
    width: 22px;
    height: 22px;
    fill: #ffffff;
}

.brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.sidebar-collapsed .brand-name {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.sidebar-toggle-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text-color);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 6px 4px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 3px;
}

.nav-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sidebar-section-title);
    padding: 6px 10px 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity var(--transition-speed);
    white-space: nowrap;
}

body.sidebar-collapsed .nav-section-title {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.nav-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-hover);
}

.nav-link.active {
    background: var(--primary-color);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-icon {
    font-size: 1.25rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-text {
    transition: opacity var(--transition-speed);
}

body.sidebar-collapsed .nav-text {
    opacity: 0;
    pointer-events: none;
    width: 0;
}

/* Tooltip for Collapsed Sidebar - High Contrast & Pointer Arrow */
html.sidebar-collapsed .nav-item[data-tooltip]:hover::after,
body.sidebar-collapsed .nav-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 68px;
    top: 50%;
    transform: translateY(-50%);
    background: #0f172a;
    color: #ffffff !important;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), 0 0 10px rgba(59, 130, 246, 0.3);
    border: 1px solid var(--primary-color);
    z-index: 9999;
    pointer-events: none;
    animation: fadeInTooltip 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

html.sidebar-collapsed .nav-item[data-tooltip]:hover::before,
body.sidebar-collapsed .nav-item[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 5px 0 5px 8px;
    border-style: solid;
    border-color: transparent transparent transparent var(--primary-color);
    z-index: 10000;
    pointer-events: none;
    animation: fadeInTooltip 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateY(-50%) translateX(8px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Main Content Area */
.app-main {
    flex: 1;
    margin-right: var(--sidebar-width-expanded);
    padding-top: var(--topbar-height);
    padding-bottom: var(--bottombar-height);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-right var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    width: calc(100% - var(--sidebar-width-expanded));
}

html.sidebar-collapsed .app-main,
body.sidebar-collapsed .app-main {
    margin-right: var(--sidebar-width-collapsed);
    width: calc(100% - var(--sidebar-width-collapsed));
}

/* Topbar Header (Fixed Full-Width 100% Wall-to-Wall Edge-to-Edge) */
.app-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: var(--topbar-height);
    background-color: var(--topbar-bg) !important;
    border-bottom: 1px solid var(--card-border);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1100;
    color: #ffffff !important;
}

.topbar-vdivider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 6px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 34px;
    overflow: hidden;
}

.topbar-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-title {
    font-weight: 800;
    font-size: 0.78rem !important;
    color: #ffffff !important;
    letter-spacing: -0.2px;
    line-height: 1.1;
    white-space: nowrap;
}

.topbar-desc {
    font-size: 0.62rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    white-space: nowrap;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    line-height: 1.1;
}

.company-badge {
    font-size: 0.58rem !important;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: #f1f5f9 !important;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}

/* Sidebar Toggle Button (Topbar Icon - Ghost / Icon Only at Rest, Box on Hover) */
.app-topbar .sidebar-toggle-btn {
    width: 32px;
    height: 32px;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
    flex-shrink: 0;
}

.app-topbar .sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Quick Search Input - High Prominence (Halved Width 160px) */
.topbar-search {
    position: relative;
    width: 160px !important;
}

.topbar-search input {
    width: 100%;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 6px;
    padding: 0 30px 0 10px !important;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 0.76rem !important;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.topbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.topbar-search input:focus {
    border-color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35) !important;
}

.topbar-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #38bdf8 !important;
    font-size: 0.95rem;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Theme & Appearance Trigger Button - Prominent Pill Gradient */
.btn-theme-trigger {
    padding: 0 10px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-theme-trigger i {
    color: #38bdf8 !important;
    font-size: 1.1rem !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

.btn-theme-trigger:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55) !important;
    transform: translateY(-2px);
}

.btn-theme-trigger:hover i {
    color: #ffffff !important;
    filter: none;
}

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.theme-color-option, .theme-mode-option {
    padding: 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.theme-color-option:hover, .theme-mode-option:hover {
    border-color: var(--primary-color);
    background: var(--sidebar-hover);
}

.theme-color-option.active, .theme-mode-option.active {
    border-color: var(--primary-color);
    background: rgba(59, 130, 246, 0.12);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
    color: var(--primary-color);
    font-weight: 700;
}

.color-preview {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* User Profile Badge (Top Left) - Glass Pill */
.user-profile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px 0 4px;
    height: 26px !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.user-profile:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--topbar-title-color, #ffffff);
}

.user-role {
    font-size: 0.75rem;
    color: var(--topbar-desc-color, #94a3b8);
}

/* Workspace Area */
.app-workspace {
    flex: 1;
    padding: 10px 16px;
}

/* Page Header Component */
.page-header {
    margin-bottom: 0;
    display: none;
}

.page-header-text {
    flex: 1;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-separator {
    color: var(--text-dim);
    font-size: 0.75rem;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.5px;
}

.page-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 4px;
}

.page-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
    border: 1px solid var(--card-border);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

.btn-icon-only {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* Toolbar & Filters */
.toolbar-container {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    backdrop-filter: blur(12px);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.search-input-wrap {
    position: relative;
    min-width: 260px;
    flex: 1;
}

.search-input-wrap input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 38px 10px 14px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input-wrap input:focus {
    border-color: var(--primary-color);
}

.search-input-wrap .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}

.form-select {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

.form-select option {
    background: var(--modal-bg);
    color: var(--text-color);
}

/* Data Table Component */
.table-container {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

.data-table th {
    background: var(--table-th-bg);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--card-border);
    font-size: 0.92rem;
    color: var(--text-color);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table td:hover {
    background: var(--table-hover-bg);
}

/* Status Badges */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

.badge-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-status.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-type-pill {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Action Buttons */
.actions-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-action {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-color);
}

.btn-action.edit:hover { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); }
.btn-action.toggle:hover { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); }
.btn-action.delete:hover { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); }

/* Empty Table State */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* Modal Overlay & Box */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-container {
    background: var(--modal-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 20px;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.25s ease;
    overflow: hidden;
}

.modal-overlay.active .modal-container {
    transform: scale(1);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-color);
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text-color);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--card-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--modal-footer-bg);
}

/* Form Controls */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-color);
}

.form-label .required {
    color: var(--danger-color);
    margin-right: 2px;
}

.form-control {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.form-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 8px;
}

.form-checkbox-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: #1e293b;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 14px 20px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    animation: toastIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast.success { border-right: 4px solid var(--success-color); }
.toast.error { border-right: 4px solid var(--danger-color); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Module Section & Cards */
.module-section {
    margin-bottom: 36px;
}

.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.module-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    padding: 24px;
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.module-card:hover {
    transform: translateY(-4px);
    background-color: var(--card-hover-bg);
    border-color: var(--card-border-hover);
    box-shadow: var(--shadow-card);
}

.module-card:hover::before {
    opacity: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary-color);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-badge {
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.card-body {
    flex: 1;
    margin-bottom: 16px;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.card-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.88rem;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.card-arrow {
    transition: transform 0.2s ease;
}

.module-card:hover .card-arrow {
    transform: translateX(-4px);
}

/* Bottom Status Bar - Compact & Refined Typography */
.app-bottombar {
    height: var(--bottombar-height, 24px) !important;
    background-color: var(--bottombar-bg, #0b132b);
    border-top: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px !important;
    font-size: 0.65rem !important;
    color: var(--text-muted, #94a3b8);
    box-sizing: border-box;
    user-select: none;
}

.app-bottombar .status-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-bottombar .status-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem !important;
    font-weight: 600;
    line-height: 1;
}

.app-bottombar .status-icon {
    font-size: 0.62rem !important;
    opacity: 0.7;
}

.app-bottombar .status-label {
    font-size: 0.63rem !important;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    opacity: 0.85;
}

.app-bottombar .status-val {
    font-size: 0.65rem !important;
    font-weight: 800;
    color: var(--text-color, #f8fafc);
}

.app-bottombar .status-online-text {
    color: #34d399 !important;
}

.app-bottombar .status-vdivider {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.15);
}

.app-bottombar .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--success-color, #10b981);
    box-shadow: 0 0 6px var(--success-color, #10b981);
}

/* Icon Color Helpers for Vibrant Professional Icons & Buttons */
.icon-blue    { color: #60a5fa !important; }
.icon-emerald { color: #34d399 !important; }
.icon-amber   { color: #fbbf24 !important; }
.icon-purple  { color: #c084fc !important; }
.icon-pink    { color: #f472b6 !important; }
.icon-cyan    { color: #22d3ee !important; }
.icon-orange  { color: #fb923c !important; }
.icon-indigo  { color: #818cf8 !important; }
.icon-red     { color: #f87171 !important; }
.icon-teal    { color: #2dd4bf !important; }
.icon-rose    { color: #fb7185 !important; }
.icon-sky     { color: #38bdf8 !important; }
.icon-lime    { color: #a3e635 !important; }
.icon-gold    { color: #facc15 !important; }
.icon-slate   { color: #94a3b8 !important; }
.icon-violet  { color: #a78bfa !important; }

/* Force active sidebar icon to white */
.nav-link.active .nav-icon,
.nav-link.active .nav-icon i {
    color: #ffffff !important;
}

/* =================================================================
   Global Universal Form Control & Input Field High-Clarity Design System
   Applies across ALL screens without exception:
   - Dark Mode (Default)
   - Full Light Mode (light-full-mode / data-mode="light-full")
   - White Workspace Mode (white-workspace-mode / data-mode="white-ws")
   ================================================================= */

/* 1. Default (Dark Theme) High-Clarity Input Borders */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control,
.form-select,
.cg-input-box input,
.cg-input-box select,
.cg-input-box textarea,
.sg-input-box input,
.sg-input-box select,
.sg-input-box textarea,
.cust-input-box input,
.cust-input-box select,
.cust-input-box textarea,
.supp-input-box input,
.supp-input-box select,
.supp-input-box textarea,
.ig-input-box input,
.ig-input-box select,
.ig-input-box textarea,
.acc-input-box input,
.acc-input-box select,
.acc-input-box textarea,
.item-input-box input,
.item-input-box select,
.item-input-box textarea,
.search-box-micro input,
.filter-select-micro {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="time"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover,
.cg-input-box input:hover,
.cg-input-box select:hover,
.cg-input-box textarea:hover,
.sg-input-box input:hover,
.sg-input-box select:hover,
.sg-input-box textarea:hover,
.cust-input-box input:hover,
.cust-input-box select:hover,
.cust-input-box textarea:hover,
.supp-input-box input:hover,
.supp-input-box select:hover,
.supp-input-box textarea:hover,
.ig-input-box input:hover,
.ig-input-box select:hover,
.ig-input-box textarea:hover,
.acc-input-box input:hover,
.acc-input-box select:hover,
.acc-input-box textarea:hover,
.item-input-box input:hover,
.item-input-box select:hover,
.item-input-box textarea:hover,
.search-box-micro input:hover,
.filter-select-micro:hover {
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.cg-input-box input:focus,
.cg-input-box select:focus,
.cg-input-box textarea:focus,
.sg-input-box input:focus,
.sg-input-box select:focus,
.sg-input-box textarea:focus,
.cust-input-box input:focus,
.cust-input-box select:focus,
.cust-input-box textarea:focus,
.supp-input-box input:focus,
.supp-input-box select:focus,
.supp-input-box textarea:focus,
.ig-input-box input:focus,
.ig-input-box select:focus,
.ig-input-box textarea:focus,
.acc-input-box input:focus,
.acc-input-box select:focus,
.acc-input-box textarea:focus,
.item-input-box input:focus,
.item-input-box select:focus,
.item-input-box textarea:focus,
.search-box-micro input:focus,
.filter-select-micro:focus {
    border-color: #0284c7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.3);
}

/* 2. Full Light Mode & White Workspace Mode Overrides across ALL screens */
html.light-full-mode input[type="text"],
html.light-full-mode input[type="number"],
html.light-full-mode input[type="email"],
html.light-full-mode input[type="password"],
html.light-full-mode input[type="search"],
html.light-full-mode input[type="date"],
html.light-full-mode input[type="datetime-local"],
html.light-full-mode input[type="time"],
html.light-full-mode input[type="tel"],
html.light-full-mode input[type="url"],
html.light-full-mode select,
html.light-full-mode textarea,
html.light-full-mode .form-control,
html.light-full-mode .form-select,
html.light-full-mode .cg-input-box input,
html.light-full-mode .cg-input-box select,
html.light-full-mode .cg-input-box textarea,
html.light-full-mode .sg-input-box input,
html.light-full-mode .sg-input-box select,
html.light-full-mode .sg-input-box textarea,
html.light-full-mode .cust-input-box input,
html.light-full-mode .cust-input-box select,
html.light-full-mode .cust-input-box textarea,
html.light-full-mode .supp-input-box input,
html.light-full-mode .supp-input-box select,
html.light-full-mode .supp-input-box textarea,
html.light-full-mode .ig-input-box input,
html.light-full-mode .ig-input-box select,
html.light-full-mode .ig-input-box textarea,
html.light-full-mode .acc-input-box input,
html.light-full-mode .acc-input-box select,
html.light-full-mode .acc-input-box textarea,
html.light-full-mode .item-input-box input,
html.light-full-mode .item-input-box select,
html.light-full-mode .item-input-box textarea,
html.light-full-mode .search-box-micro input,
html.light-full-mode .filter-select-micro,

html.white-workspace-mode input[type="text"],
html.white-workspace-mode input[type="number"],
html.white-workspace-mode input[type="email"],
html.white-workspace-mode input[type="password"],
html.white-workspace-mode input[type="search"],
html.white-workspace-mode input[type="date"],
html.white-workspace-mode input[type="datetime-local"],
html.white-workspace-mode input[type="time"],
html.white-workspace-mode input[type="tel"],
html.white-workspace-mode input[type="url"],
html.white-workspace-mode select,
html.white-workspace-mode textarea,
html.white-workspace-mode .form-control,
html.white-workspace-mode .form-select,
html.white-workspace-mode .cg-input-box input,
html.white-workspace-mode .cg-input-box select,
html.white-workspace-mode .cg-input-box textarea,
html.white-workspace-mode .sg-input-box input,
html.white-workspace-mode .sg-input-box select,
html.white-workspace-mode .sg-input-box textarea,
html.white-workspace-mode .cust-input-box input,
html.white-workspace-mode .cust-input-box select,
html.white-workspace-mode .cust-input-box textarea,
html.white-workspace-mode .supp-input-box input,
html.white-workspace-mode .supp-input-box select,
html.white-workspace-mode .supp-input-box textarea,
html.white-workspace-mode .ig-input-box input,
html.white-workspace-mode .ig-input-box select,
html.white-workspace-mode .ig-input-box textarea,
html.white-workspace-mode .acc-input-box input,
html.white-workspace-mode .acc-input-box select,
html.white-workspace-mode .acc-input-box textarea,
html.white-workspace-mode .item-input-box input,
html.white-workspace-mode .item-input-box select,
html.white-workspace-mode .item-input-box textarea,
html.white-workspace-mode .search-box-micro input,
html.white-workspace-mode .filter-select-micro,

body.light-full-mode input[type="text"],
body.light-full-mode input[type="number"],
body.light-full-mode input[type="email"],
body.light-full-mode input[type="password"],
body.light-full-mode input[type="search"],
body.light-full-mode input[type="date"],
body.light-full-mode input[type="datetime-local"],
body.light-full-mode input[type="time"],
body.light-full-mode input[type="tel"],
body.light-full-mode input[type="url"],
body.light-full-mode select,
body.light-full-mode textarea,
body.light-full-mode .form-control,
body.light-full-mode .form-select,
body.light-full-mode .cg-input-box input,
body.light-full-mode .cg-input-box select,
body.light-full-mode .cg-input-box textarea,
body.light-full-mode .sg-input-box input,
body.light-full-mode .sg-input-box select,
body.light-full-mode .sg-input-box textarea,
body.light-full-mode .cust-input-box input,
body.light-full-mode .cust-input-box select,
body.light-full-mode .cust-input-box textarea,
body.light-full-mode .supp-input-box input,
body.light-full-mode .supp-input-box select,
body.light-full-mode .supp-input-box textarea,
body.light-full-mode .ig-input-box input,
body.light-full-mode .ig-input-box select,
body.light-full-mode .ig-input-box textarea,
body.light-full-mode .acc-input-box input,
body.light-full-mode .acc-input-box select,
body.light-full-mode .acc-input-box textarea,
body.light-full-mode .item-input-box input,
body.light-full-mode .item-input-box select,
body.light-full-mode .item-input-box textarea,
body.light-full-mode .search-box-micro input,
body.light-full-mode .filter-select-micro,

body.white-workspace-mode input[type="text"],
body.white-workspace-mode input[type="number"],
body.white-workspace-mode input[type="email"],
body.white-workspace-mode input[type="password"],
body.white-workspace-mode input[type="search"],
body.white-workspace-mode input[type="date"],
body.white-workspace-mode input[type="datetime-local"],
body.white-workspace-mode input[type="time"],
body.white-workspace-mode input[type="tel"],
body.white-workspace-mode input[type="url"],
body.white-workspace-mode select,
body.white-workspace-mode textarea,
body.white-workspace-mode .form-control,
body.white-workspace-mode .form-select,
body.white-workspace-mode .cg-input-box input,
body.white-workspace-mode .cg-input-box select,
body.white-workspace-mode .cg-input-box textarea,
body.white-workspace-mode .sg-input-box input,
body.white-workspace-mode .sg-input-box select,
body.white-workspace-mode .sg-input-box textarea,
body.white-workspace-mode .cust-input-box input,
body.white-workspace-mode .cust-input-box select,
body.white-workspace-mode .cust-input-box textarea,
body.white-workspace-mode .supp-input-box input,
body.white-workspace-mode .supp-input-box select,
body.white-workspace-mode .supp-input-box textarea,
body.white-workspace-mode .ig-input-box input,
body.white-workspace-mode .ig-input-box select,
body.white-workspace-mode .ig-input-box textarea,
body.white-workspace-mode .acc-input-box input,
body.white-workspace-mode .acc-input-box select,
body.white-workspace-mode .acc-input-box textarea,
body.white-workspace-mode .item-input-box input,
body.white-workspace-mode .item-input-box select,
body.white-workspace-mode .item-input-box textarea,
body.white-workspace-mode .search-box-micro input,
body.white-workspace-mode .filter-select-micro,

[data-mode="light-full"] input[type="text"],
[data-mode="light-full"] input[type="number"],
[data-mode="light-full"] input[type="email"],
[data-mode="light-full"] input[type="password"],
[data-mode="light-full"] input[type="search"],
[data-mode="light-full"] input[type="date"],
[data-mode="light-full"] input[type="datetime-local"],
[data-mode="light-full"] input[type="time"],
[data-mode="light-full"] input[type="tel"],
[data-mode="light-full"] input[type="url"],
[data-mode="light-full"] select,
[data-mode="light-full"] textarea,
[data-mode="light-full"] .form-control,
[data-mode="light-full"] .form-select,
[data-mode="light-full"] .cg-input-box input,
[data-mode="light-full"] .cg-input-box select,
[data-mode="light-full"] .cg-input-box textarea,
[data-mode="light-full"] .sg-input-box input,
[data-mode="light-full"] .sg-input-box select,
[data-mode="light-full"] .sg-input-box textarea,
[data-mode="light-full"] .cust-input-box input,
[data-mode="light-full"] .cust-input-box select,
[data-mode="light-full"] .cust-input-box textarea,
[data-mode="light-full"] .supp-input-box input,
[data-mode="light-full"] .supp-input-box select,
[data-mode="light-full"] .supp-input-box textarea,
[data-mode="light-full"] .ig-input-box input,
[data-mode="light-full"] .ig-input-box select,
[data-mode="light-full"] .ig-input-box textarea,
[data-mode="light-full"] .acc-input-box input,
[data-mode="light-full"] .acc-input-box select,
[data-mode="light-full"] .acc-input-box textarea,
[data-mode="light-full"] .item-input-box input,
[data-mode="light-full"] .item-input-box select,
[data-mode="light-full"] .item-input-box textarea,
[data-mode="light-full"] .search-box-micro input,
[data-mode="light-full"] .filter-select-micro,

[data-mode="white-ws"] input[type="text"],
[data-mode="white-ws"] input[type="number"],
[data-mode="white-ws"] input[type="email"],
[data-mode="white-ws"] input[type="password"],
[data-mode="white-ws"] input[type="search"],
[data-mode="white-ws"] input[type="date"],
[data-mode="white-ws"] input[type="datetime-local"],
[data-mode="white-ws"] input[type="time"],
[data-mode="white-ws"] input[type="tel"],
[data-mode="white-ws"] input[type="url"],
[data-mode="white-ws"] select,
[data-mode="white-ws"] textarea,
[data-mode="white-ws"] .form-control,
[data-mode="white-ws"] .form-select,
[data-mode="white-ws"] .cg-input-box input,
[data-mode="white-ws"] .cg-input-box select,
[data-mode="white-ws"] .cg-input-box textarea,
[data-mode="white-ws"] .sg-input-box input,
[data-mode="white-ws"] .sg-input-box select,
[data-mode="white-ws"] .sg-input-box textarea,
[data-mode="white-ws"] .cust-input-box input,
[data-mode="white-ws"] .cust-input-box select,
[data-mode="white-ws"] .cust-input-box textarea,
[data-mode="white-ws"] .supp-input-box input,
[data-mode="white-ws"] .supp-input-box select,
[data-mode="white-ws"] .supp-input-box textarea,
[data-mode="white-ws"] .ig-input-box input,
[data-mode="white-ws"] .ig-input-box select,
[data-mode="white-ws"] .ig-input-box textarea,
[data-mode="white-ws"] .acc-input-box input,
[data-mode="white-ws"] .acc-input-box select,
[data-mode="white-ws"] .acc-input-box textarea,
[data-mode="white-ws"] .item-input-box input,
[data-mode="white-ws"] .item-input-box select,
[data-mode="white-ws"] .item-input-box textarea,
[data-mode="white-ws"] .search-box-micro input,
[data-mode="white-ws"] .filter-select-micro {
    border: 1.5px solid #0f172a !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15) !important;
}

html.light-full-mode input:hover,
html.light-full-mode select:hover,
html.light-full-mode textarea:hover,
html.light-full-mode .form-control:hover,
html.light-full-mode .form-select:hover,
html.white-workspace-mode input:hover,
html.white-workspace-mode select:hover,
html.white-workspace-mode textarea:hover,
html.white-workspace-mode .form-control:hover,
html.white-workspace-mode .form-select:hover,
body.light-full-mode input:hover,
body.light-full-mode select:hover,
body.light-full-mode textarea:hover,
body.white-workspace-mode input:hover,
body.white-workspace-mode select:hover,
body.white-workspace-mode textarea:hover,
[data-mode="light-full"] input:hover,
[data-mode="light-full"] select:hover,
[data-mode="light-full"] textarea:hover,
[data-mode="white-ws"] input:hover,
[data-mode="white-ws"] select:hover,
[data-mode="white-ws"] textarea:hover {
    border-color: #000000 !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

html.light-full-mode input:focus,
html.light-full-mode select:focus,
html.light-full-mode textarea:focus,
html.light-full-mode .form-control:focus,
html.light-full-mode .form-select:focus,
html.white-workspace-mode input:focus,
html.white-workspace-mode select:focus,
html.white-workspace-mode textarea:focus,
html.white-workspace-mode .form-control:focus,
html.white-workspace-mode .form-select:focus,
body.light-full-mode input:focus,
body.light-full-mode select:focus,
body.light-full-mode textarea:focus,
body.white-workspace-mode input:focus,
body.white-workspace-mode select:focus,
body.white-workspace-mode textarea:focus,
[data-mode="light-full"] input:focus,
[data-mode="light-full"] select:focus,
[data-mode="light-full"] textarea:focus,
[data-mode="white-ws"] input:focus,
[data-mode="white-ws"] select:focus,
[data-mode="white-ws"] textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
    outline: none !important;
}

/* =================================================================
   OPEN SCREENS MANAGER (مُدير الشاشات المفتوحة والتبويب المتعدد)
   ================================================================= */
.btn-open-screens-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    height: 32px;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--topbar-title-color, #ffffff);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    box-shadow: none !important;
}

.btn-open-screens-trigger:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.btn-open-screens-trigger i {
    font-size: 0.88rem;
    color: var(--primary-color, #38bdf8);
}
.btn-open-screens-trigger:hover i {
    color: #ffffff;
}

.open-screens-count-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Open Screens Overlay & Dropdown Menu */
.open-screens-dropdown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: calc(var(--topbar-height, 48px) + 6px);
    padding-left: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.open-screens-dropdown-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.open-screens-menu {
    width: 440px;
    max-width: calc(100vw - 32px);
    background: var(--modal-bg, #0f172a);
    border: 1px solid var(--card-border, #1e293b);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    transform: translateY(-10px) scale(0.98);
    transition: transform 0.2s ease;
    direction: rtl;
    color: var(--text-color, #f8fafc);
}

.open-screens-dropdown-overlay.active .open-screens-menu {
    transform: translateY(0) scale(1);
}

.open-screens-header {
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95));
    border-bottom: 1px solid var(--card-border, #334155);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.open-screens-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--primary-color, #38bdf8);
}

.open-screens-count-pill {
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--primary-color, #38bdf8);
    padding: 2px 8px;
    border-radius: 12px;
}

.open-screens-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-all-screens {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-close-all-screens:hover {
    background: #ef4444;
    color: #ffffff;
}

.open-screens-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}
.open-screens-close-btn:hover { color: #ffffff; }

.open-screens-search-bar {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.6);
    border-bottom: 1px solid var(--card-border, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}
.open-screens-search-bar i { color: var(--text-muted, #64748b); font-size: 0.8rem; }
.open-screens-search-bar input {
    width: 100%;
    background: var(--input-bg, #1e293b);
    border: 1px solid var(--input-border, #334155);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.74rem;
    color: var(--text-color, #f8fafc);
    outline: none;
}
.open-screens-search-bar input:focus {
    border-color: #0284c7;
}

.open-screens-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    max-height: 380px;
}

.open-screen-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--card-bg, rgba(30, 41, 59, 0.7));
    border: 1px solid var(--card-border, #334155);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.open-screen-item:hover {
    background: var(--card-hover-bg, #1e293b);
    border-color: var(--primary-color, #0284c7);
    transform: translateX(-2px);
}

.open-screen-item.is-active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25), rgba(15, 23, 42, 0.9));
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.open-screen-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.open-screen-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(2, 132, 199, 0.15);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.open-screen-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.open-screen-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.open-screen-name {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-color, #f8fafc);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instance-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(2, 132, 199, 0.3);
    padding: 0px 5px;
    border-radius: 4px;
}

.unsaved-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    animation: unsavedPulse 1.5s infinite;
}
@keyframes unsavedPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.open-screen-meta {
    font-size: 0.64rem;
    color: var(--text-muted, #94a3b8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-action-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-item-close {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.12s ease;
}
.btn-item-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.open-screens-footer {
    padding: 8px 12px;
    background: rgba(15, 23, 42, 0.9);
    border-top: 1px solid var(--card-border, #1e293b);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
}
.open-screens-footer .hint-text { color: var(--text-muted, #64748b); }
.open-screens-footer .hint-text b { color: var(--primary-color, #38bdf8); }

.btn-new-instance-trigger {
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #0369a1;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.67rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}
.btn-new-instance-trigger:hover {
    background: #0369a1;
}

/* Ctrl + Tab HUD Overlay */
.ctrl-tab-hud-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.ctrl-tab-hud-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.ctrl-tab-hud-box {
    width: 480px;
    max-width: 90vw;
    background: var(--modal-bg, #0f172a);
    border: 1px solid var(--primary-color, #0284c7);
    border-radius: 12px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    direction: rtl;
    color: var(--text-color, #f8fafc);
}

.ctrl-tab-hud-header {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary-color, #38bdf8);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.3);
    padding-bottom: 8px;
}

.ctrl-tab-hud-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ctrl-tab-hud-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.1s ease;
}

.ctrl-tab-hud-item.selected {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    transform: scale(1.02);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.ctrl-tab-hud-footer {
    font-size: 0.67rem;
    color: var(--text-muted, #94a3b8);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
}

/* =================================================================
   DESKTOP & LAPTOP ENFORCER SYSTEM (MIN-WIDTH: 769px)
   Forces 100% Full Desktop ERP View on PCs, Laptops & Desktops
   Strictly suppresses all Mobile Native UI, Bottom Dock & Mobile Drawer
   ================================================================= */
@media (min-width: 769px) {
    /* 1. Strictly hide all mobile-only UI components on PC/Laptop */
    .mobile-app-header,
    .mobile-nav-dock,
    .mobile-pwa-install-banner,
    .mobile-sidebar-backdrop,
    .pwa-guide-modal-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 2. Topbar MUST be fixed wall-to-wall at top of viewport */
    .app-topbar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: var(--topbar-height, 42px) !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 1100 !important;
        box-sizing: border-box !important;
    }

    .topbar-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .topbar-title-wrap {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .topbar-heading {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .topbar-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 280px !important;
    }

    .topbar-search {
        position: relative !important;
        width: 170px !important;
        flex: 0 0 170px !important;
        margin: 0 10px !important;
    }

    .topbar-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
    }

    /* 3. Sidebar MUST be fixed on right side */
    .app-sidebar {
        position: fixed !important;
        top: var(--topbar-height, 42px) !important;
        right: 0 !important;
        bottom: var(--bottombar-height, 24px) !important;
        z-index: 1000 !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. App Main Workspace MUST align right next to sidebar without white gaps */
    .app-main {
        display: flex !important;
        flex-direction: column !important;
        margin-right: var(--sidebar-width-expanded, 220px) !important;
        padding-top: var(--topbar-height, 42px) !important;
        padding-bottom: var(--bottombar-height, 24px) !important;
        width: calc(100% - var(--sidebar-width-expanded, 220px)) !important;
        min-height: 100vh !important;
        box-sizing: border-box !important;
        transition: margin-right var(--transition-speed, 0.2s) cubic-bezier(0.4, 0, 0.2, 1), width var(--transition-speed, 0.2s) cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html.sidebar-collapsed .app-main,
    body.sidebar-collapsed .app-main {
        margin-right: var(--sidebar-width-collapsed, 52px) !important;
        width: calc(100% - var(--sidebar-width-collapsed, 52px)) !important;
    }

    .app-workspace {
        width: 100% !important;
        padding: 2px 10px !important;
        padding-bottom: 2px !important;
        box-sizing: border-box !important;
    }

    /* 5. Bottom Status Bar */
    .app-bottombar, .bottom-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        height: var(--bottombar-height, 24px) !important;
        z-index: 1100 !important;
    }

    .company-badge, .topbar-desc {
        display: inline-flex !important;
    }

    /* 6. Form Grids & 3-Column Header Cards */
    .pi-header-3col {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.25fr) 1px minmax(0, 1.15fr) !important;
    }
    
    .pi-header-3col > .pi-v-divider,
    .pi-header-3col > .si-v-divider,
    .pi-header-3col > .pi-sec-card,
    .pi-header-3col > .si-sec-card {
        display: block !important;
    }
}

@media (max-width: 768px) {
    /* 1. Page Body & Workspace Scrolling Fixes */
    html, body, .app-container, .app-main, .app-workspace, .pr-workspace, .pr-main-grid, .pr-details-panel, .pr-form-body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    .app-workspace {
        padding: 6px 4px !important;
        min-height: calc(100vh - 46px) !important;
    }

    /* 2. Mobile Topbar Header Layout */
    .app-topbar {
        padding: 4px 6px !important;
        gap: 4px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
    }

    .topbar-title-wrap {
        max-width: 140px !important;
        overflow: hidden !important;
    }

    .topbar-title {
        font-size: 0.76rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .topbar-search {
        width: 100% !important;
        order: 3 !important;
        margin-top: 2px !important;
    }

    .global-search-dropdown {
        width: 95vw !important;
        right: -10px !important;
        left: auto !important;
    }

    .btn-open-screens-trigger span:not(.open-screens-count-badge),
    .btn-theme-trigger span,
    .user-info {
        display: none !important;
    }

    .btn-open-screens-trigger,
    .btn-theme-trigger {
        padding: 4px 8px !important;
    }

    /* 3. Mobile Sidebar Drawer Overlay (Slide-In RTL Drawer) */
    .app-sidebar {
        position: fixed !important;
        top: var(--topbar-height, 42px) !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        width: 230px !important;
        background: var(--sidebar-bg, #0b132b) !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5) !important;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body:not(.sidebar-collapsed) .app-sidebar,
    html:not(.sidebar-collapsed) .app-sidebar {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .app-main {
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* 4. Action Toolbar Tiles Row (Purchases, Sales, Cash/Banks, Masterdata) */
    .pr-details-toolbar, .action-toolbar, .po-tabs-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 4px 6px !important;
        height: auto !important;
        min-height: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .erp-tile-btn {
        flex: 0 0 auto !important;
        min-width: 52px !important;
        height: 40px !important;
        padding: 2px 6px !important;
    }

    .erp-tile-btn i {
        font-size: 0.95rem !important;
        margin-bottom: 1px !important;
    }

    .erp-tile-btn span {
        font-size: 0.60rem !important;
    }

    .po-blue-act-btn {
        flex: 0 0 auto !important;
        height: 28px !important;
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
    }

    .toolbar-divider {
        display: none !important;
    }

    /* 5. Top Form Header Cards & 3-Column Grids (Purchases, Sales, Cash/Banks, Masterdata) */
    .top-header-form-card {
        padding: 6px !important;
        overflow: visible !important;
    }

    .pi-header-3col, .top-header-form-card .form-grid, .pr-header-grid, .top-form-grid, .invoice-header-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .pi-v-divider, .si-v-divider {
        display: none !important;
    }

    .pi-sec-card, .si-sec-card {
        width: 100% !important;
        padding: 4px 0 !important;
        border-bottom: 1px dashed var(--card-border, #cbd5e1);
    }

    .pi-sec-card:last-child, .si-sec-card:last-child {
        border-bottom: none;
    }

    .pr-field-group, .form-group-micro {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .pr-field-label, .form-group-micro label, .info-data-label {
        width: 100% !important;
        min-width: 0 !important;
        text-align: right !important;
        font-size: 0.72rem !important;
        margin-bottom: 1px !important;
    }

    .pr-input-micro, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea {
        width: 100% !important;
        max-width: 100% !important;
        height: 32px !important;
        font-size: 0.82rem !important;
        box-sizing: border-box !important;
    }

    .pr-readonly-info-box {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 4px 6px !important;
    }

    /* 6. ERP Data Tables & Item Detail Grids */
    .pr-table-container, .table-responsive, .grid-card-body, .pr-grid-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        border-radius: 6px !important;
        margin-top: 4px !important;
    }

    .pr-items-table, .table, .items-grid-table {
        min-width: 750px !important;
        width: 100% !important;
    }

    .pr-items-table th, .pr-items-table td, .table th, .table td {
        padding: 4px 6px !important;
        font-size: 0.74rem !important;
        white-space: nowrap !important;
    }

    /* 7. Bottom Summary Footer Cards & KPIs */
    .grid-summary-footer, .pr-summary-bar, .invoice-footer-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: stretch !important;
        height: auto !important;
        padding: 8px !important;
        width: 100% !important;
    }

    .summary-box, .stat-pill {
        width: 100% !important;
        justify-content: space-between !important;
    }

    /* 8. Modal Dialogs on Mobile */
    .modal-dialog, .modal-container, .modal-drawer-box, .erp-modal-box {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 5px auto !important;
        padding: 10px !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }

    /* 9. Welcome Landing & Workspace Grids */
    .welcome-top-info-bar, .devexpress-compact-workspace, .dashboard-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .welcome-tiles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .welcome-title-main {
        font-size: 1.7rem !important;
        letter-spacing: 1px !important;
    }
    .welcome-title-sub1 {
        font-size: 1.05rem !important;
    }
    .welcome-title-sub2 {
        font-size: 1.25rem !important;
    }
}

/* =================================================================
   NATIVE MOBILE APP NAVIGATION DOCK & TOUCH APPS STYLING
   ================================================================= */
.mobile-nav-dock {
    display: none;
}

.mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mobile-sidebar-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 768px) {
    /* Hide desktop bottom status bar on mobile */
    .app-bottombar, .bottom-bar {
        display: none !important;
    }

    /* Fixed Glassmorphic Mobile App Bottom Navigation Dock */
    .mobile-nav-dock {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: rgba(15, 23, 42, 0.95) !important;
        backdrop-filter: blur(20px) saturate(1.5) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
        border-top: 1px solid rgba(56, 189, 248, 0.3) !important;
        z-index: 10000 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
        padding: 0 4px !important;
        align-items: center !important;
        justify-content: space-around !important;
        direction: rtl !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        color: #94a3b8 !important;
        text-decoration: none !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        padding: 4px 0 !important;
        transition: all 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }

    .mobile-nav-item:active {
        transform: scale(0.92) !important;
    }

    .mobile-nav-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }

    .mobile-nav-label {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .mobile-nav-item.active {
        color: #38bdf8 !important;
    }

    .mobile-nav-item.active .mobile-nav-icon {
        transform: translateY(-2px) scale(1.1) !important;
        color: #38bdf8 !important;
    }

    /* Padding bottom on main workspace so content isn't covered by mobile dock */
    .app-workspace {
        padding-bottom: 66px !important;
    }

    .mobile-sidebar-backdrop {
        display: block !important;
    }
}

/* =================================================================
   NATIVE MOBILE APP HEADER & PWA BANNER STYLING
   ================================================================= */
.mobile-app-header {
    display: none;
}

.mobile-pwa-install-banner {
    display: none;
}

@media (max-width: 768px) {
    /* Hide Desktop Topbar Header on Mobile to free screen real-estate */
    .app-topbar {
        display: none !important;
    }

    /* Native App Mobile Top Header Bar */
    .mobile-app-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 48px !important;
        padding: 0 10px !important;
        background: var(--topbar-bg, #0f172a) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10001 !important;
        direction: rtl !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    }

    .mobile-header-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-header-menu-btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 6px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }
    .mobile-header-menu-btn:hover {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 6px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    }

    .mobile-brand-box {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .mobile-brand-icon {
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        color: #38bdf8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }
    .mobile-brand-box:hover .mobile-brand-icon {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 6px !important;
        color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    }

    .mobile-brand-title {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }

    .mobile-header-center {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        max-width: 140px !important;
    }

    .mobile-page-badge {
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        background: rgba(56, 189, 248, 0.18) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(56, 189, 248, 0.3) !important;
        padding: 2px 8px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .mobile-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-pwa-install-icon-btn {
        display: none !important;
    }

    .mobile-header-avatar {
        font-size: 1.4rem !important;
        color: #cbd5e1 !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    /* PWA Install Bottom Sheet Card Prompt */
    .mobile-pwa-install-banner {
        position: fixed !important;
        bottom: 62px !important;
        left: 8px !important;
        right: 8px !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
        border: 1px solid #0284c7 !important;
        border-radius: 12px !important;
        padding: 12px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        z-index: 10002 !important;
        display: none !important;
        flex-direction: column !important;
        gap: 10px !important;
        direction: rtl !important;
        backdrop-filter: blur(16px) !important;
    }

    .pwa-banner-content {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .pwa-banner-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        background: rgba(2, 132, 199, 0.2) !important;
        border: 1px solid #0284c7 !important;
        color: #38bdf8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.3rem !important;
        flex-shrink: 0 !important;
    }

    .pwa-banner-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .pwa-banner-title {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
    }

    .pwa-banner-desc {
        font-size: 0.70rem !important;
        color: #94a3b8 !important;
        line-height: 1.3 !important;
    }

    .pwa-banner-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .btn-pwa-install {
        flex: 1 !important;
        background: linear-gradient(135deg, #0284c7, #0369a1) !important;
        color: #ffffff !important;
        border: 1px solid #38bdf8 !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        font-size: 0.80rem !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4) !important;
    }

    .btn-pwa-dismiss {
        background: transparent !important;
        color: #94a3b8 !important;
        border: 1px solid #334155 !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        cursor: pointer !important;
    }
}

/* =================================================================
   PWA INSTALLATION VISUAL GUIDE MODAL STYLING
   ================================================================= */
.pwa-guide-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    direction: rtl;
}

.pwa-guide-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.pwa-guide-modal-box {
    width: 440px;
    max-width: 95vw;
    background: #0f172a;
    border: 1px solid #0284c7;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #f8fafc;
}

.pwa-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.3);
    padding-bottom: 10px;
}

.pwa-guide-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pwa-guide-close-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.4rem;
    cursor: pointer;
}

.pwa-guide-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 65vh;
    overflow-y: auto;
}

.pwa-guide-section {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pwa-guide-sec-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pwa-step-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: #cbd5e1;
    line-height: 1.4;
}

.pwa-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    font-size: 0.70rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.pwa-guide-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

.btn-pwa-guide-ok {
    width: 100%;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: 1px solid #38bdf8;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

/* =================================================================
   Master Data Screen High-Density Compact Layout & Zero Horizontal Scroll
   ================================================================= */
html, body {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    height: 100% !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.app-container, .app-main, .app-workspace, #mainWorkspaceContainer {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app-container::-webkit-scrollbar,
.app-main::-webkit-scrollbar,
.app-workspace::-webkit-scrollbar,
#mainWorkspaceContainer::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Master Data Workspace Wrappers (All 22 Screens) */
.cb-workspace, .om-workspace, .unit-workspace, .unit-master-workspace,
.cust-workspace, .sup-workspace, .item-workspace, .wh-workspace,
.bank-workspace, .curr-workspace, .entity-workspace, .pl-workspace,
.pb-workspace, .pit-workspace, .sb-workspace, .sit-workspace,
.sg-workspace, .cg-workspace, .ig-workspace, .lpg-workspace,
.lp-workspace, .upm-workspace, .wcm-workspace {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    padding-bottom: 2px !important;
}

/* Inputs & Form Fields - Ultra High Density Compact (Height 24px) */
.cb-workspace input:not([type="checkbox"]):not([type="radio"]), .cb-workspace select,
.om-workspace input:not([type="checkbox"]):not([type="radio"]), .om-workspace select,
.unit-workspace input:not([type="checkbox"]):not([type="radio"]), .unit-workspace select,
.unit-master-workspace input:not([type="checkbox"]):not([type="radio"]), .unit-master-workspace select,
.cust-workspace input:not([type="checkbox"]):not([type="radio"]), .cust-workspace select,
.sup-workspace input:not([type="checkbox"]):not([type="radio"]), .sup-workspace select,
.item-workspace input:not([type="checkbox"]):not([type="radio"]), .item-workspace select,
.wh-workspace input:not([type="checkbox"]):not([type="radio"]), .wh-workspace select,
.bank-workspace input:not([type="checkbox"]):not([type="radio"]), .bank-workspace select,
.curr-workspace input:not([type="checkbox"]):not([type="radio"]), .curr-workspace select,
.entity-workspace input:not([type="checkbox"]):not([type="radio"]), .entity-workspace select,
.pl-workspace input:not([type="checkbox"]):not([type="radio"]), .pl-workspace select,
.pb-workspace input:not([type="checkbox"]):not([type="radio"]), .pb-workspace select,
.pit-workspace input:not([type="checkbox"]):not([type="radio"]), .pit-workspace select,
.sb-workspace input:not([type="checkbox"]):not([type="radio"]), .sb-workspace select,
.sit-workspace input:not([type="checkbox"]):not([type="radio"]), .sit-workspace select,
.sg-workspace input:not([type="checkbox"]):not([type="radio"]), .sg-workspace select,
.cg-workspace input:not([type="checkbox"]):not([type="radio"]), .cg-workspace select,
.ig-workspace input:not([type="checkbox"]):not([type="radio"]), .ig-workspace select,
.lpg-workspace input:not([type="checkbox"]):not([type="radio"]), .lpg-workspace select,
.lp-workspace input:not([type="checkbox"]):not([type="radio"]), .lp-workspace select,
.upm-workspace input:not([type="checkbox"]):not([type="radio"]), .upm-workspace select,
.wcm-workspace input:not([type="checkbox"]):not([type="radio"]), .wcm-workspace select,
.cb-input-box input, .cb-input-box select,
.om-input-box input, .om-input-box select,
.cust-input-box input, .cust-input-box select,
.sup-input-box input, .sup-input-box select,
.item-input-box input, .item-input-box select,
.unit-input-box input, .unit-input-box select,
.wh-input-box input, .wh-input-box select,
.combo-input, .search-box-micro input, .filter-select-micro {
    height: 24px !important;
    padding: 1px 5px !important;
    font-size: 0.74rem !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

/* Textareas in Master Data screens */
.cb-workspace textarea, .om-workspace textarea, .unit-workspace textarea,
.unit-master-workspace textarea, .cust-workspace textarea, .sup-workspace textarea,
.item-workspace textarea, .wh-workspace textarea, .bank-workspace textarea,
.curr-workspace textarea, .entity-workspace textarea, .pl-workspace textarea,
.pb-workspace textarea, .pit-workspace textarea, .sb-workspace textarea,
.sit-workspace textarea, .sg-workspace textarea, .cg-workspace textarea,
.ig-workspace textarea, .lpg-workspace textarea, .lp-workspace textarea,
.upm-workspace textarea, .wcm-workspace textarea,
.cb-input-box textarea, .om-input-box textarea, .cust-input-box textarea,
.sup-input-box textarea, .item-input-box textarea, .wh-input-box textarea {
    min-height: 36px !important;
    max-height: 52px !important;
    padding: 2px 5px !important;
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
}

/* Field Groups & Labels Sizing */
[class*="-field-group"],
.cb-field-group, .om-field-group, .cust-field-group,
.sup-field-group, .item-field-group, .wh-field-group, .unit-field-group {
    gap: 1px !important;
    margin-bottom: 2px !important;
}

[class*="-field-label"],
.cb-field-label, .om-field-label, .cust-field-label,
.sup-field-label, .item-field-label, .wh-field-label, .unit-field-label {
    font-size: 0.70rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
}

/* Single Row Action Toolbar Buttons - Fixed Top Sticky Position & Zero Horizontal Scrollbar */
[class*="-details-toolbar"],
[class*="-action-bar"],
[class*="-action-toolbar"],
[class*="-toolbar-card"],
[class*="-toolbar-container"],
.cg-details-toolbar, .sg-details-toolbar, .ig-details-toolbar, .cust-details-toolbar,
.sup-details-toolbar, .wh-details-toolbar, .item-details-toolbar, .unit-details-toolbar,
.cb-details-toolbar, .om-details-toolbar, .pl-details-toolbar, .pb-details-toolbar,
.pit-details-toolbar, .sb-details-toolbar, .sit-details-toolbar, .lpg-details-toolbar,
.curr-details-toolbar, .bank-details-toolbar, .rfq-details-toolbar, .rp-toolbar,
.erp-toolbar, .erp-action-bar, .erp-action-toolbar, .top-action-bar, .action-toolbar,
.workspace-toolbar, .masterdata-toolbar, .toolbar-actions, .page-toolbar, .document-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    padding: 3px 5px !important;
    gap: 3px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: var(--topbar-bg, #0f172a) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

[class*="-details-toolbar"]::-webkit-scrollbar,
.cg-details-toolbar::-webkit-scrollbar,
.sg-details-toolbar::-webkit-scrollbar,
.ig-details-toolbar::-webkit-scrollbar,
.cust-details-toolbar::-webkit-scrollbar,
.sup-details-toolbar::-webkit-scrollbar,
.wh-details-toolbar::-webkit-scrollbar,
.item-details-toolbar::-webkit-scrollbar,
.unit-details-toolbar::-webkit-scrollbar,
.cb-details-toolbar::-webkit-scrollbar,
.om-details-toolbar::-webkit-scrollbar,
.pl-details-toolbar::-webkit-scrollbar,
.pb-details-toolbar::-webkit-scrollbar,
.pit-details-toolbar::-webkit-scrollbar,
.sb-details-toolbar::-webkit-scrollbar,
.sit-details-toolbar::-webkit-scrollbar,
.lpg-details-toolbar::-webkit-scrollbar,
.curr-details-toolbar::-webkit-scrollbar,
.bank-details-toolbar::-webkit-scrollbar,
.erp-toolbar::-webkit-scrollbar,
.erp-action-bar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.erp-tile-btn {
    height: 36px !important;
    min-width: 0 !important;
    flex: 1 1 0px !important;
    padding: 1px 3px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.erp-tile-btn i {
    font-size: 0.88rem !important;
    margin-bottom: 1px !important;
}

.erp-tile-btn span {
    font-size: 0.62rem !important;
}

/* KPI Summary Cards - Compact Height 32px */
[class*="-kpi-row"],
.cb-kpi-row, .om-kpi-row, .cust-kpi-row, .sup-kpi-row, .wh-kpi-row, .item-kpi-row {
    gap: 4px !important;
}

[class*="-kpi-card"],
.cb-kpi-card, .om-kpi-card, .cust-kpi-card, .sup-kpi-card, .wh-kpi-card, .item-kpi-card {
    height: 32px !important;
    padding: 3px 6px !important;
}

[class*="-kpi-icon"],
.cb-kpi-icon, .om-kpi-icon, .cust-kpi-icon, .sup-kpi-icon, .wh-kpi-icon, .item-kpi-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.72rem !important;
}

[class*="-kpi-label"],
.cb-kpi-label, .om-kpi-label, .cust-kpi-label, .sup-kpi-label, .wh-kpi-label, .item-kpi-label {
    font-size: 0.62rem !important;
}

[class*="-kpi-val"],
.cb-kpi-val, .om-kpi-val, .cust-kpi-val, .sup-kpi-val, .wh-kpi-val, .item-kpi-val {
    font-size: 0.82rem !important;
}

/* Card Container Paddings & Sub-boxes */
.top-header-form-card, .cb-left-side, .om-left-side, .cust-left-side,
.wh-left-side, .sup-left-side, .item-left-side {
    padding: 4px 6px !important;
}

.ac-routing-box {
    padding: 3px 5px !important;
    margin-top: 2px !important;
}

.ac-routing-title {
    font-size: 0.70rem !important;
    margin-bottom: 2px !important;
}

/* Master Data Screens Split Grid Heights (Only Master Data Screens, NOT Transaction screens) */
.cb-main-grid, .om-main-grid, .cust-main-grid, .wh-main-grid,
.sup-main-grid, .item-main-grid, .unit-main-grid, .curr-main-grid,
.bank-main-grid, .pl-main-grid, .pb-main-grid, .pit-main-grid,
.sb-main-grid, .sit-main-grid, .sg-main-grid, .cg-main-grid,
.ig-main-grid, .lpg-main-grid, .lp-main-grid, .upm-main-grid,
.wcm-main-grid {
    min-height: calc(100vh - 145px) !important;
    max-height: calc(100vh - 145px) !important;
    overflow: hidden !important;
}

/* Master Data Tree / Directory Panel Max-Heights */
.cb-workspace [class*="-tree-panel"], .om-workspace [class*="-tree-panel"],
.cust-workspace [class*="-tree-panel"], .wh-workspace [class*="-tree-panel"],
.sup-workspace [class*="-tree-panel"], .item-workspace [class*="-tree-panel"],
.unit-workspace [class*="-tree-panel"], .curr-workspace [class*="-tree-panel"],
.bank-workspace [class*="-tree-panel"], .pl-workspace [class*="-tree-panel"],
.pb-workspace [class*="-tree-panel"], .pit-workspace [class*="-tree-panel"],
.sb-workspace [class*="-tree-panel"], .sit-workspace [class*="-tree-panel"],
.sg-workspace [class*="-tree-panel"], .cg-workspace [class*="-tree-panel"],
.ig-workspace [class*="-tree-panel"], .lpg-workspace [class*="-tree-panel"],
.lp-workspace [class*="-tree-panel"], .upm-workspace [class*="-tree-panel"],
.wcm-workspace [class*="-tree-panel"], [class*="-directory-panel"] {
    max-height: calc(100vh - 145px) !important;
    overflow: hidden !important;
}

/* Master Data Details Panel Max-Heights */
.cb-details-panel, .om-details-panel, .cust-details-panel, .wh-details-panel,
.sup-details-panel, .item-details-panel, .unit-details-panel, .curr-details-panel,
.bank-details-panel, .pl-details-panel, .pb-details-panel, .pit-details-panel,
.sb-details-panel, .sit-details-panel, .sg-details-panel, .cg-details-panel,
.ig-details-panel, .lpg-details-panel, .lp-details-panel, .upm-details-panel,
.wcm-details-panel {
    max-height: calc(100vh - 145px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Transaction Screens (Sales Invoices, Purchases, Inventory, Cash, Journal): Full Workspace Stretch down to Status Bar (Strict 2px gap) */
.pr-main-grid,
.pr-details-panel,
.pr-form-body,
#siForm,
#piForm,
#poForm,
#prForm,
#grForm,
#giForm,
#cpForm,
#crForm,
#mjeForm,
.sales-main-grid,
.po-main-grid,
.pi-main-grid {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =================================================================
   GLOBAL DYNAMIC INTERACTIVE HOVER & MICRO-ANIMATION SYSTEM 
   Matches Cash Payment Vouchers Workspace (شاشة المدفوعات النقدية) Dynamic Style
   ================================================================= */

@keyframes globalButtonShimmer {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(300%) rotate(25deg); }
}

@keyframes globalGlowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(2, 132, 199, 0.3); }
    50% { box-shadow: 0 0 16px rgba(2, 132, 199, 0.75); }
}

@keyframes dynamicRippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.dynamic-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: dynamicRippleAnim 0.6s linear;
    background-color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* 1. Universal Spring Physics & Smooth Transitions for ALL Buttons & Clickables */
button,
.btn,
.simple-button,
.welcome-tile,
.shortcut-btn,
.erp-tile-btn,
.po-blue-act-btn,
.btn-grid-act,
.cp-cell-btn,
.btn-disc-modal-trigger,
.cp-grid-btn,
.dev-action-btn,
.dev-search-btn,
.action-btn,
.nav-link,
.badge-interactive,
input[type="submit"],
input[type="button"],
input[type="reset"],
.inv-num-interactive-badge,
.table-action-btn,
.btn-action,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-outline-primary,
.btn-outline-secondary,
[class*="-btn"] {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.22s ease, 
                background-color 0.22s ease, 
                border-color 0.22s ease, 
                color 0.22s ease, 
                filter 0.22s ease !important;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* Hover effect on ALL buttons: Dynamic Spring Physics Lift + Glow */
button:hover:not(:disabled),
.btn:hover:not(:disabled),
.simple-button:hover:not(:disabled),
.welcome-tile:hover:not(:disabled),
.shortcut-btn:hover:not(:disabled),
.erp-tile-btn:hover:not(:disabled),
.po-blue-act-btn:hover:not(:disabled),
.btn-grid-act:hover:not(:disabled),
.cp-cell-btn:hover:not(:disabled),
.btn-disc-modal-trigger:hover:not(:disabled),
.cp-grid-btn:hover:not(:disabled),
.dev-action-btn:hover:not(:disabled),
.dev-search-btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled),
.table-action-btn:hover:not(:disabled),
.btn-action:hover:not(:disabled),
[class*="-btn"]:hover:not(:disabled) {
    transform: translateY(-2.5px) scale(1.025) !important;
    box-shadow: 0 6px 18px -2px rgba(2, 132, 199, 0.38), 0 2px 6px -1px rgba(0, 0, 0, 0.12) !important;
    filter: brightness(1.06) !important;
}

/* Active Press Effect on ALL buttons */
button:active:not(:disabled),
.btn:active:not(:disabled),
.simple-button:active:not(:disabled),
.welcome-tile:active:not(:disabled),
.shortcut-btn:active:not(:disabled),
.erp-tile-btn:active:not(:disabled),
.po-blue-act-btn:active:not(:disabled),
.btn-grid-act:active:not(:disabled),
.cp-cell-btn:active:not(:disabled),
.dev-action-btn:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
input[type="button"]:active:not(:disabled),
[class*="-btn"]:active:not(:disabled) {
    transform: translateY(1px) scale(0.97) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Micro-animations on icons inside buttons when hovering */
button i, .btn i, .simple-button i, .welcome-tile i, .shortcut-btn i, .erp-tile-btn i, 
.po-blue-act-btn i, .btn-grid-act i, .cp-cell-btn i, .dev-action-btn i, .action-btn i,
button svg, .btn svg, [class*="-btn"] i {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block;
}

button:hover:not(:disabled) i,
.btn:hover:not(:disabled) i,
.simple-button:hover:not(:disabled) i,
.welcome-tile:hover:not(:disabled) i,
.shortcut-btn:hover:not(:disabled) i,
.erp-tile-btn:hover:not(:disabled) i,
.po-blue-act-btn:hover:not(:disabled) i,
.btn-grid-act:hover:not(:disabled) i,
.cp-cell-btn:hover:not(:disabled) i,
.dev-action-btn:hover:not(:disabled) i,
.action-btn:hover:not(:disabled) i,
[class*="-btn"]:hover:not(:disabled) i {
    transform: scale(1.22) rotate(-5deg) !important;
}

/* Disabled buttons dimmed & inactive appearance */
button:disabled, .btn:disabled, .erp-tile-btn.disabled, [class*="-btn"]:disabled {
    opacity: 0.42 !important;
    filter: grayscale(85%) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* 2. Cards, Containers, Form Cards & Toolbars 3D Elevation */
.card, .panel, .stat-card, .chart-card, .form-card, .master-card, 
.dev-toolbar, .table-container, .tree-container, .top-header-form-card,
[class*="-header-card"], [class*="-grid-container"], [class*="-details-toolbar"],
[class*="-alloc-panel"], [class*="-summary-bar"] {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.25s ease, 
                border-color 0.25s ease !important;
}

.card:hover, .panel:hover, .stat-card:hover, .form-card:hover, 
.master-card:hover, .tree-container:hover, [class*="-header-card"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px -4px rgba(0, 0, 0, 0.14), 0 2px 8px -1px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(2, 132, 199, 0.45) !important;
}

/* 3. Inputs, Selects & Textareas Interactive Hover & Focus Feedback */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control,
.form-select,
[class*="-input"] input,
[class*="-input"] select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
}

input:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
    border-color: rgba(2, 132, 199, 0.55) !important;
    transform: translateY(-0.5px) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22), 0 3px 8px rgba(2, 132, 199, 0.12) !important;
    transform: translateY(-1.5px) !important;
}

/* 4. Individual Cell Hover Highlight (ع مستوى الخانة فقط وليس كل الخانات) */
table tbody tr td, .table tbody tr td, [class*="-table"] tbody tr td {
    transition: background-color 0.12s ease, outline 0.12s ease !important;
}

table tbody tr:not(.selected-row) td:hover,
.table tbody tr:not(.selected-row) td:hover,
[class*="-table"] tbody tr:not(.selected-row) td:hover {
    background-color: var(--cp-tr-hover, #e0f2fe) !important;
    outline: 1.5px solid #0284c7 !important;
    outline-offset: -1.5px;
    z-index: 1;
    position: relative;
}

table tbody tr td:hover input,
table tbody tr td:hover select,
.table tbody tr td:hover input,
.table tbody tr td:hover select,
[class*="-table"] tbody tr td:hover input,
[class*="-table"] tbody tr td:hover select {
    border-color: #0284c7 !important;
}

/* 5. KPI Badges & Counters Scale Hover */
.badge, .stat-badge, .status-badge, .record-counter-badge, .screen-mode-text, .gl-badge, [class*="-kpi-card"] {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
}

.badge:hover, .stat-badge:hover, .status-badge:hover, .record-counter-badge:hover, .screen-mode-text:hover, [class*="-kpi-card"]:hover {
    transform: scale(1.05) translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
}

/* 6. Shimmer Reflection Effect on Hover for Buttons */
button::after, .btn::after, .simple-button::after, .dev-action-btn::after, .welcome-tile::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        60deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

button:hover:not(:disabled)::after, 
.btn:hover:not(:disabled)::after, 
.simple-button:hover:not(:disabled)::after,
.dev-action-btn:hover:not(:disabled)::after,
.welcome-tile:hover:not(:disabled)::after {
    opacity: 1;
    animation: globalButtonShimmer 0.8s ease forwards;
}

/* 8. Unified Navigation Buttons System (Clean White Style across all screens) */
#btnFirst, #btnPrev, #btnNext, #btnLast,
#btnNavFirst, #btnNavPrev, #btnNavNext, #btnNavLast,
button[id*="First"], button[id*="Prev"], button[id*="Next"], button[id*="Last"],
.btn-nav-first, .btn-nav-prev, .btn-nav-next, .btn-nav-last {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

#btnFirst:hover:not(:disabled), #btnPrev:hover:not(:disabled), #btnNext:hover:not(:disabled), #btnLast:hover:not(:disabled),
#btnNavFirst:hover:not(:disabled), #btnNavPrev:hover:not(:disabled), #btnNavNext:hover:not(:disabled), #btnNavLast:hover:not(:disabled),
button[id*="First"]:hover:not(:disabled), button[id*="Prev"]:hover:not(:disabled), button[id*="Next"]:hover:not(:disabled), button[id*="Last"]:hover:not(:disabled),
.btn-nav-first:hover:not(:disabled), .btn-nav-prev:hover:not(:disabled), .btn-nav-next:hover:not(:disabled), .btn-nav-last:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) scale(1.03) !important;
}

#btnFirst i, #btnPrev i, #btnNext i, #btnLast i,
#btnNavFirst i, #btnNavPrev i, #btnNavNext i, #btnNavLast i,
button[id*="First"] i, button[id*="Prev"] i, button[id*="Next"] i, button[id*="Last"] i,
.btn-nav-first i, .btn-nav-prev i, .btn-nav-next i, .btn-nav-last i {
    color: #ffffff !important;
    opacity: 1 !important;
    transition: transform 0.22s ease !important;
}

#btnFirst span, #btnPrev span, #btnNext span, #btnLast span,
#btnNavFirst span, #btnNavPrev span, #btnNavNext span, #btnNavLast span,
button[id*="First"] span, button[id*="Prev"] span, button[id*="Next"] span, button[id*="Last"] span,
.btn-nav-first span, .btn-nav-prev span, .btn-nav-next span, .btn-nav-last span {
    color: #ffffff !important;
}

#btnFirst:disabled, #btnPrev:disabled, #btnNext:disabled, #btnLast:disabled,
#btnNavFirst:disabled, #btnNavPrev:disabled, #btnNavNext:disabled, #btnNavLast:disabled,
button[id*="First"]:disabled, button[id*="Prev"]:disabled, button[id*="Next"]:disabled, button[id*="Last"]:disabled,
.btn-nav-first:disabled, .btn-nav-prev:disabled, .btn-nav-next:disabled, .btn-nav-last:disabled {
    opacity: 0.52 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#btnFirst:disabled i, #btnPrev:disabled i, #btnNext:disabled i, #btnLast:disabled i,
#btnNavFirst:disabled i, #btnNavPrev:disabled i, #btnNavNext:disabled i, #btnNavLast:disabled i,
#btnFirst:disabled span, #btnPrev:disabled span, #btnNext:disabled span, #btnLast:disabled span,
#btnNavFirst:disabled span, #btnNavPrev:disabled span, #btnNavNext:disabled span, #btnNavLast:disabled span {
    color: #cbd5e1 !important;
}

/* ====================================================================================
   UNIFIED SYSTEM-WIDE CASH PAYMENTS DESIGN SYSTEM & BUTTON STYLING (شاشة المدفوعات النقدية)
   ==================================================================================== */

/* 1. Global Micro-Interactions, Spring Physics & Animations */
@keyframes buttonShimmer {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(200%) rotate(25deg); }
}

@keyframes buttonGlowPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(2, 132, 199, 0.4); }
    50% { box-shadow: 0 0 14px rgba(2, 132, 199, 0.85); }
}

/* Universal Smooth Spring Physics Transition for all Buttons across all screens */
button, .btn, .erp-tile-btn, .po-blue-act-btn, .btn-grid-act, .cp-cell-btn, .btn-disc-modal-trigger, .cp-grid-btn, .dev-action-btn, .simple-button, .btn-add-record, .btn-action {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.22s ease, 
                background-color 0.22s ease, 
                border-color 0.22s ease, 
                color 0.22s ease, 
                filter 0.22s ease !important;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* Icon micro-interactions on button hover */
button i, .btn i, .erp-tile-btn i, .po-blue-act-btn i, .btn-grid-act i, .cp-cell-btn i, .btn-disc-modal-trigger i, .cp-grid-btn i, .dev-action-btn i, .simple-button i, .btn-add-record i {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block;
}

button:hover:not(:disabled) i, 
.btn:hover:not(:disabled) i,
.erp-tile-btn:hover:not(:disabled) i, 
.po-blue-act-btn:hover:not(:disabled) i, 
.btn-grid-act:hover:not(:disabled) i, 
.cp-cell-btn:hover:not(:disabled) i, 
.btn-disc-modal-trigger:hover:not(:disabled) i, 
.cp-grid-btn:hover:not(:disabled) i,
.dev-action-btn:hover:not(:disabled) i,
.simple-button:hover:not(:disabled) i,
.btn-add-record:hover:not(:disabled) i {
    transform: scale(1.18) rotate(-4deg);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
.erp-tile-btn:active:not(:disabled),
.po-blue-act-btn:active:not(:disabled),
.btn-grid-act:active:not(:disabled),
.cp-cell-btn:active:not(:disabled),
.cp-grid-btn:active:not(:disabled) {
    transform: translateY(1.5px) scale(0.96) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(0.93);
}

/* Disabled button state */
button:disabled, button[disabled], button.disabled,
.btn:disabled, .btn[disabled], .btn.disabled,
.erp-tile-btn:disabled, .erp-tile-btn[disabled], .erp-tile-btn.disabled,
.po-blue-act-btn:disabled, .cp-grid-btn:disabled, .btn-add-record:disabled {
    opacity: 0.52 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(80%) contrast(90%) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. Top Action Toolbar (Wall-to-wall Dark Modern Topbar - 100% Fixed Top Sticky Position) */
.pr-details-toolbar, .top-action-bar, .toolbar-actions, .masterdata-toolbar, .action-toolbar, .workspace-toolbar, [class*="-details-toolbar"], [class*="-action-bar"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: var(--topbar-bg, #0f172a) !important;
    border: 1px solid var(--card-border, #1e293b) !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Unified ERP Tile Buttons System (.erp-tile-btn) */
.erp-tile-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 42px;
    height: 40px;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    box-sizing: border-box;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    position: relative;
    overflow: hidden;
}

.erp-tile-btn i {
    font-size: 1.02rem;
    margin-bottom: 2px;
}

.erp-tile-btn span {
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.erp-tile-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.04) !important;
    box-shadow: 0 8px 20px -2px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.15) !important;
    filter: brightness(1.12);
}

/* Color Variations for Tile Buttons */
.erp-btn-new:not(:disabled), .btn-new:not(:disabled), button[id*="btnNew"]:not(:disabled) { background: rgba(16, 185, 129, 0.2) !important; border-color: #10b981 !important; color: #6ee7b7 !important; }
.erp-btn-new:hover:not(:disabled), .btn-new:hover:not(:disabled), button[id*="btnNew"]:hover:not(:disabled), a[id*="btnNew"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(16, 185, 129, 0.65) !important;
}
.erp-btn-new:hover i, .btn-new:hover i, button[id*="btnNew"]:hover i, a[id*="btnNew"]:hover i { color: #ffffff !important; }

.erp-btn-save:not(:disabled), .btn-save:not(:disabled), button[id*="btnSave"]:not(:disabled) { background: rgba(14, 165, 233, 0.2) !important; border-color: #0ea5e9 !important; color: #7dd3fc !important; }
.erp-btn-save:hover:not(:disabled), .btn-save:hover:not(:disabled), button[id*="btnSave"]:hover:not(:disabled), a[id*="btnSave"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #075985 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(2, 132, 199, 0.65) !important;
}
.erp-btn-save:hover i, .btn-save:hover i, button[id*="btnSave"]:hover i, a[id*="btnSave"]:hover i { color: #ffffff !important; }

.erp-btn-edit:not(:disabled), .btn-edit:not(:disabled), button[id*="btnEdit"]:not(:disabled) { background: rgba(245, 158, 11, 0.2) !important; border-color: #f59e0b !important; color: #fde047 !important; }
.erp-btn-edit:hover:not(:disabled), .btn-edit:hover:not(:disabled), button[id*="btnEdit"]:hover:not(:disabled), a[id*="btnEdit"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(245, 158, 11, 0.65) !important;
}
.erp-btn-edit:hover i, .btn-edit:hover i, button[id*="btnEdit"]:hover i, a[id*="btnEdit"]:hover i { color: #ffffff !important; }

.erp-btn-delete:not(:disabled), .btn-delete:not(:disabled), button[id*="btnDelete"]:not(:disabled) { background: rgba(239, 68, 68, 0.2) !important; border-color: #ef4444 !important; color: #fca5a5 !important; }
.erp-btn-delete:hover:not(:disabled), .btn-delete:hover:not(:disabled), button[id*="btnDelete"]:hover:not(:disabled), a[id*="btnDelete"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(239, 68, 68, 0.65) !important;
}
.erp-btn-delete:hover i, .btn-delete:hover i, button[id*="btnDelete"]:hover i, a[id*="btnDelete"]:hover i { color: #ffffff !important; }

.erp-btn-cancel:not(:disabled), .btn-cancel:not(:disabled), button[id*="btnCancel"]:not(:disabled), button[id*="btnUndo"]:not(:disabled) { background: rgba(100, 116, 139, 0.2) !important; border-color: #64748b !important; color: #cbd5e1 !important; }
.erp-btn-cancel:hover:not(:disabled), .btn-cancel:hover:not(:disabled), button[id*="btnCancel"]:hover:not(:disabled), button[id*="btnUndo"]:hover:not(:disabled), a[id*="btnCancel"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(100, 116, 139, 0.65) !important;
}
.erp-btn-cancel:hover i, .btn-cancel:hover i, button[id*="btnCancel"]:hover i, button[id*="btnUndo"]:hover i, a[id*="btnCancel"]:hover i { color: #ffffff !important; }

.erp-btn-print:not(:disabled), .btn-print:not(:disabled), button[id*="btnPrint"]:not(:disabled) { background: rgba(139, 92, 246, 0.2) !important; border-color: #8b5cf6 !important; color: #c4b5fd !important; }
.erp-btn-print:hover:not(:disabled), .btn-print:hover:not(:disabled), button[id*="btnPrint"]:hover:not(:disabled), a[id*="btnPrint"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    border-color: #6d28d9 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(139, 92, 246, 0.65) !important;
}
.erp-btn-print:hover i, .btn-print:hover i, button[id*="btnPrint"]:hover i, a[id*="btnPrint"]:hover i { color: #ffffff !important; }

.erp-btn-preview:not(:disabled), .btn-preview:not(:disabled), button[id*="btnPreview"]:not(:disabled) { background: rgba(6, 182, 212, 0.2) !important; border-color: #06b6d4 !important; color: #67e8f9 !important; }
.erp-btn-preview:hover:not(:disabled), .btn-preview:hover:not(:disabled), button[id*="btnPreview"]:hover:not(:disabled), a[id*="btnPreview"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    border-color: #0e7490 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(6, 182, 212, 0.65) !important;
}
.erp-btn-preview:hover i, .btn-preview:hover i, button[id*="btnPreview"]:hover i, a[id*="btnPreview"]:hover i { color: #ffffff !important; }

.erp-btn-gl:not(:disabled), button[id*="btnGLEntry"]:not(:disabled) { background: linear-gradient(135deg, rgba(2,132,199,0.3), rgba(15,23,42,0.8)) !important; border-color: #38bdf8 !important; color: #38bdf8 !important; font-weight: 800 !important; }
.erp-btn-gl:hover:not(:disabled), button[id*="btnGLEntry"]:hover:not(:disabled), a[id*="btnGLEntry"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7, #1e293b) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(2, 132, 199, 0.65) !important;
}
.erp-btn-gl:hover i, button[id*="btnGLEntry"]:hover i, a[id*="btnGLEntry"]:hover i { color: #ffffff !important; }

.erp-btn-advsearch:not(:disabled), button[id*="btnAdvSearch"]:not(:disabled) { background: rgba(14, 165, 233, 0.25) !important; border-color: #0284c7 !important; color: #38bdf8 !important; }
.erp-btn-advsearch:hover:not(:disabled), button[id*="btnAdvSearch"]:hover:not(:disabled), a[id*="btnAdvSearch"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #075985 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(14, 165, 233, 0.65) !important;
}
.erp-btn-advsearch:hover i, button[id*="btnAdvSearch"]:hover i, a[id*="btnAdvSearch"]:hover i { color: #ffffff !important; }

.erp-btn-settings:not(:disabled), button[id*="btnGridSettings"]:not(:disabled) { background: rgba(236, 72, 153, 0.2) !important; border-color: #ec4899 !important; color: #f472b6 !important; }
.erp-btn-settings:hover:not(:disabled), button[id*="btnGridSettings"]:hover:not(:disabled), a[id*="btnGridSettings"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-color: #be185d !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(236, 72, 153, 0.65) !important;
}
.erp-btn-settings:hover i, button[id*="btnGridSettings"]:hover i, a[id*="btnGridSettings"]:hover i { color: #ffffff !important; }

.erp-btn-audit:not(:disabled), button[id*="btnAuditLog"]:not(:disabled) { background: rgba(168, 85, 247, 0.2) !important; border-color: #a855f7 !important; color: #e9d5ff !important; }
.erp-btn-audit:hover:not(:disabled), button[id*="btnAuditLog"]:hover:not(:disabled), a[id*="btnAuditLog"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #a855f7, #9333ea) !important;
    border-color: #7e22ce !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(168, 85, 247, 0.65) !important;
}
.erp-btn-audit:hover i, button[id*="btnAuditLog"]:hover i, a[id*="btnAuditLog"]:hover i { color: #ffffff !important; }

.erp-btn-attach-top:not(:disabled), button[id*="btnAttachments"]:not(:disabled) { background: rgba(20, 184, 166, 0.2) !important; border-color: #14b8a6 !important; color: #5eead4 !important; }
.erp-btn-attach-top:hover:not(:disabled), button[id*="btnAttachments"]:hover:not(:disabled), a[id*="btnAttachments"]:hover:not(:disabled) {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(20, 184, 166, 0.65) !important;
}
.erp-btn-attach-top:hover i, button[id*="btnAttachments"]:hover i, a[id*="btnAttachments"]:hover i { color: #ffffff !important; }

/* Navigation Buttons Hover */
button[id*="btnFirst"]:hover:not(:disabled), button[id*="btnPrev"]:hover:not(:disabled),
button[id*="btnNext"]:hover:not(:disabled), button[id*="btnLast"]:hover:not(:disabled),
a[id*="btnFirst"]:hover:not(:disabled), a[id*="btnPrev"]:hover:not(:disabled),
a[id*="btnNext"]:hover:not(:disabled), a[id*="btnLast"]:hover:not(:disabled),
.erp-tile-btn.erp-btn-nav:hover:not(:disabled) {
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(56, 189, 248, 0.55) !important;
}
button[id*="btnFirst"]:hover i, button[id*="btnPrev"]:hover i,
button[id*="btnNext"]:hover i, button[id*="btnLast"]:hover i,
a[id*="btnFirst"]:hover i, a[id*="btnPrev"]:hover i,
a[id*="btnNext"]:hover i, a[id*="btnLast"]:hover i,
.erp-tile-btn.erp-btn-nav:hover i {
    color: #38bdf8 !important;
}

button[id*="btnRefresh"]:hover:not(:disabled), a[id*="btnRefresh"]:hover:not(:disabled),
.erp-tile-btn#btnRefresh:hover:not(:disabled), .erp-btn-refresh:hover:not(:disabled) {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(2, 132, 199, 0.65) !important;
}
button[id*="btnRefresh"]:hover i, a[id*="btnRefresh"]:hover i,
.erp-tile-btn#btnRefresh:hover i, .erp-btn-refresh:hover i {
    color: #ffffff !important;
}

button[id*="btnBack"]:hover:not(:disabled), a[id*="btnBack"]:hover:not(:disabled),
.erp-tile-btn#btnBack:hover:not(:disabled), .erp-btn-back:hover:not(:disabled) {
    background: linear-gradient(135deg, #475569, #334155) !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(71, 85, 105, 0.65) !important;
}
button[id*="btnBack"]:hover i, a[id*="btnBack"]:hover i,
.erp-tile-btn#btnBack:hover i, .erp-btn-back:hover i {
    color: #ffffff !important;
}

/* Red Styling for Close Button across all screens (.erp-btn-close) */
.erp-btn-close:not(:disabled),
.btn-close-page:not(:disabled),
.erp-tile-btn#btnClosePage:not(:disabled),
.erp-tile-btn#btnClose:not(:disabled),
button#btnClosePage:not(:disabled),
button#btnClose:not(:disabled),
a#btnClosePage:not(:disabled),
a#btnClose:not(:disabled) {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.erp-btn-close:hover:not(:disabled),
.btn-close-page:hover:not(:disabled),
.erp-tile-btn#btnClosePage:hover:not(:disabled),
.erp-tile-btn#btnClose:hover:not(:disabled),
button#btnClosePage:hover:not(:disabled),
button#btnClose:hover:not(:disabled),
a#btnClosePage:hover:not(:disabled),
a#btnClose:hover:not(:disabled) {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #b91c1c !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px -2px rgba(239, 68, 68, 0.6) !important;
}

.erp-btn-close i,
.btn-close-page i,
button#btnClosePage i,
button#btnClose i,
a#btnClosePage i,
a#btnClose i {
    color: #ef4444 !important;
}

.erp-btn-close:hover i,
.btn-close-page:hover i,
button#btnClosePage:hover i,
button#btnClose:hover i,
a#btnClosePage:hover i,
a#btnClose:hover i {
    color: #ffffff !important;
}

/* 4. Secondary & Table Action Buttons (.po-blue-act-btn, .cp-grid-btn, .btn-add-record) */
.po-blue-act-btn, .cp-grid-btn, .btn-grid-act, .btn-add-record, .btn-action {
    background: #0284c7 !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25) !important;
    text-decoration: none !important;
}

.po-blue-act-btn:hover:not(:disabled), 
.cp-grid-btn:hover:not(:disabled), 
.btn-grid-act:hover:not(:disabled),
.btn-add-record:hover:not(:disabled),
.btn-action:hover:not(:disabled) {
    background: #0369a1 !important;
    border-color: #075985 !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.4) !important;
}

/* 4.1 Table Row Distinct Cell Buttons (أزرار السطور بألوانها الطبيعية المستقلة) */
.cp-cell-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    height: 22px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* زر مركز التكلفة - أخضر زمردي طبيعي */
.cp-cell-btn.btn-cc {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}
.cp-cell-btn.btn-cc i {
    color: #16a34a !important;
}
.cp-cell-btn.btn-cc:hover:not(:disabled) {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
    color: #14532d !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35) !important;
}

/* زر الفواتير - أزرق سماوي ناعم */
.cp-cell-btn.btn-inv {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
}
.cp-cell-btn.btn-inv i {
    color: #0284c7 !important;
}
.cp-cell-btn.btn-inv:hover:not(:disabled) {
    background: #bae6fd !important;
    border-color: #38bdf8 !important;
    color: #075985 !important;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35) !important;
}

/* زر المرفقات - بنفسجي أنيق */
.cp-cell-btn.btn-attach {
    background: #f3e8ff !important;
    color: #7e22ce !important;
    border: 1px solid #d8b4fe !important;
}
.cp-cell-btn.btn-attach i {
    color: #9333ea !important;
}
.cp-cell-btn.btn-attach:hover:not(:disabled) {
    background: #e9d5ff !important;
    border-color: #c084fc !important;
    color: #6b21a8 !important;
    box-shadow: 0 4px 10px rgba(147, 51, 234, 0.35) !important;
}

/* زر الحذف - أحمر طبيعي ناعم */
.cp-cell-btn.btn-del {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}
.cp-cell-btn.btn-del i {
    color: #dc2626 !important;
}
.cp-cell-btn.btn-del:hover:not(:disabled) {
    background: #fecaca !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4) !important;
}

/* زر إدخال الخصم بالسطر - كهرماني / ذهبي طبيعي */
.btn-disc-modal-trigger {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    border: 1px solid #fcd34d !important;
    color: #b45309 !important;
    background: #fef3c7 !important;
    border-radius: 3px !important;
    padding: 1px 4px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    width: 100% !important;
    height: 22px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.btn-disc-modal-trigger i {
    color: #d97706 !important;
}
.btn-disc-modal-trigger:hover:not(:disabled) {
    background: #fde68a !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3) !important;
}

/* 5. Modern Card Panels & Form Containers depth interaction */
.cp-header-card, .card, .panel, .data-table-container, .cp-grid-container {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.cp-header-card:hover, .card:hover, .panel:hover, .data-table-container:hover {
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.04) !important;
}

/* 6. Form Field Focus & Hover Micro-Interactions */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
}

input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: rgba(2, 132, 199, 0.5) !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22), 0 3px 8px rgba(2, 132, 199, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* 7. Table Rows Hover Accent (Localized to individual cell) */
table tbody tr, [class*="-table"] tbody tr {
    transition: none !important;
}
table tbody tr:hover:not(.selected-row) td,
[class*="-table"] tbody tr:hover:not(.selected-row) td {
    background-color: inherit !important;
}
table tbody tr:not(.selected-row) td:hover,
[class*="-table"] tbody tr:not(.selected-row) td:hover {
    background-color: var(--cp-tr-hover, #e0f2fe) !important;
    outline: 1.5px solid #0284c7 !important;
    outline-offset: -1.5px;
}
table tbody tr:hover td:first-child,
[class*="-table"] tbody tr:hover td:first-child {
    box-shadow: none !important;
}

/* 8. Interactive Badges & Screen Mode Text */
.inv-num-interactive-badge {
    width: 100% !important;
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
    border: 1px solid #0284c7 !important;
    color: #0369a1 !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-family: 'Roboto', monospace, inherit !important;
    cursor: pointer !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15) !important;
    user-select: none !important;
}
.inv-num-interactive-badge:hover {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    border-color: #075985 !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

.record-counter-badge {
    font-size: 0.72rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    color: #e2e8f0 !important;
    font-family: monospace !important;
    white-space: nowrap !important;
}

.screen-mode-text {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}

/* Auto-Generated Document Lock Banner Styling */
.auto-gen-lock-banner {
    background: linear-gradient(135deg, #7c2d12, #991b1b) !important;
    border: 1px solid #f87171 !important;
    color: #fef2f2 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    animation: lockBannerFadeIn 0.3s ease !important;
}

.auto-gen-lock-banner .lock-banner-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.auto-gen-lock-banner i {
    font-size: 1.1rem !important;
    color: #fef08a !important;
}

.screen-mode-text.mode-locked {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
}

.view-mode-locked {
    opacity: 0.88 !important;
    cursor: not-allowed !important;
    background-color: var(--cp-input-bg, #f1f5f9) !important;
}

.disabled-action-btn {
    opacity: 0.68 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

@keyframes lockBannerFadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   SYSTEM-WIDE GRID TOOLBAR, BUTTON STYLING & MOTION ANIMATIONS
   Matched 1:1 to Manual Journal Entry Screen (شاشة قيود اليومية اليدوية)
   ================================================================= */

/* 1. Universal Spring Physics Motion Animation for Grid & Action Buttons */
button:not(.erp-tile-btn), 
.btn-grid-act, 
.cp-grid-btn, 
.erp-grid-btn, 
.cp-cell-btn,
.btn-add-row,
.btn-del-selected-row,
.btn-del-row,
.btn-excel-grid,
.btn-import-grid {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.22s ease, 
                background-color 0.22s ease, 
                border-color 0.22s ease, 
                color 0.22s ease, 
                filter 0.22s ease !important;
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
}

/* Icon micro-interactions on button hover */
button:not(.erp-tile-btn) i, 
.btn-grid-act i, 
.cp-grid-btn i, 
.erp-grid-btn i, 
.cp-cell-btn i {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-block;
}

button:not(.erp-tile-btn):hover:not(:disabled) i, 
.btn-grid-act:hover:not(:disabled) i, 
.cp-grid-btn:hover:not(:disabled) i, 
.erp-grid-btn:hover:not(:disabled) i, 
.cp-cell-btn:hover:not(:disabled) i {
    transform: scale(1.18) rotate(-4deg);
}

/* 2. Grid Header Toolbar Standard (Dark Slate Gradient Header) - Isolated, No Whole-Bar Reaction */
.cp-grid-toolbar, .erp-grid-toolbar, .grid-header-toolbar, .grid-card-header {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #ffffff !important;
    padding: 2px 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 28px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    border-bottom: 1px solid #334155 !important;
    transform: none !important;
    transition: none !important;
}

.cp-grid-toolbar:hover,
.erp-grid-toolbar:hover,
.grid-header-toolbar:hover,
.grid-card-header:hover,
.grid-action-btns:hover,
.cp-grid-actions:hover,
.pr-grid-actions:hover,
.pr-grid-header:hover,
.report-toolbar-card:hover,
.report-act-btns:hover,
.pr-details-toolbar:hover,
.toolbar-actions:hover,
[class*="-details-toolbar"]:hover,
[class*="-grid-container"]:hover,
[class*="-grid-header"]:hover {
    transform: none !important;
    box-shadow: inherit !important;
    transition: none !important;
}

/* 3. Base Grid Buttons Layout & Hover Physics - Strictly Individual */
.btn-grid-act, .cp-grid-btn, .erp-grid-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    height: 22px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    white-space: nowrap !important;
    background: #334155;
    color: #ffffff;
    position: relative !important;
    overflow: hidden !important;
}

.btn-grid-act:hover:not(:disabled),
.cp-grid-btn:hover:not(:disabled),
.erp-grid-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25) !important;
    filter: brightness(1.15) !important;
}

.btn-grid-act:active:not(:disabled),
.cp-grid-btn:active:not(:disabled),
.erp-grid-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.96) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Exact Color Palette from Manual Journal Entries for Grid Action Buttons */
.btn-add-row, button.btn-add-row { background: #10b981 !important; color: white !important; }
.btn-add-row:hover:not(:disabled), button.btn-add-row:hover:not(:disabled) { background: #059669 !important; box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45) !important; }

.btn-del-selected-row, button.btn-del-selected-row, .btn-del-row, button.btn-del-row { background: #ef4444 !important; color: white !important; }
.btn-del-selected-row:hover:not(:disabled), button.btn-del-selected-row:hover:not(:disabled), .btn-del-row:hover:not(:disabled), button.btn-del-row:hover:not(:disabled) { background: #dc2626 !important; box-shadow: 0 6px 14px rgba(239, 68, 68, 0.45) !important; }

.btn-excel-grid, button.btn-excel-grid { background: #0284c7 !important; color: white !important; }
.btn-excel-grid:hover:not(:disabled), button.btn-excel-grid:hover:not(:disabled) { background: #0369a1 !important; box-shadow: 0 6px 14px rgba(2, 132, 199, 0.45) !important; }

.btn-import-grid, button.btn-import-grid { background: #64748b !important; color: white !important; }
.btn-import-grid:hover:not(:disabled), button.btn-import-grid:hover:not(:disabled) { background: #475569 !important; box-shadow: 0 6px 14px rgba(100, 116, 139, 0.45) !important; }

/* Base Styling for Insertion Action Buttons (.po-blue-act-btn) */
.po-blue-act-btn {
    background: #0284c7;
    color: #ffffff;
    border: 1px solid #0369a1;
    border-radius: 3px;
    padding: 1px 5px !important;
    font-size: 0.65rem !important;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center;
    gap: 3px;
    height: 22px !important;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.po-blue-act-btn:hover:not(:disabled) {
    background: #0369a1;
    border-color: #075985;
    transform: translateY(-1px);
}

/* 5. Non-Topbar Buttons Disabled State: High Visibility (Vibrant Colors Visible) + Unclickable */
button:not(.erp-tile-btn):disabled,
button:not(.erp-tile-btn)[disabled],
button:not(.erp-tile-btn).disabled,
.po-blue-act-btn:disabled,
.po-blue-act-btn[disabled],
.po-blue-act-btn.disabled,
.btn-grid-act:disabled,
.btn-grid-act[disabled],
.btn-grid-act.disabled,
.cp-grid-btn:disabled,
.cp-grid-btn[disabled],
.cp-grid-btn.disabled,
.erp-grid-btn:disabled,
.erp-grid-btn[disabled],
.erp-grid-btn.disabled,
.cp-cell-btn:disabled,
.cp-cell-btn[disabled],
.cp-cell-btn.disabled,
.btn-add-row:disabled,
.btn-add-row[disabled],
.btn-add-row.disabled,
.btn-del-selected-row:disabled,
.btn-del-selected-row[disabled],
.btn-del-selected-row.disabled,
.btn-del-row:disabled,
.btn-del-row[disabled],
.btn-del-row.disabled,
.btn-remove-line:disabled,
.btn-remove-line[disabled],
.btn-remove-line.disabled {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 0.78 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
}

button:not(.erp-tile-btn):disabled i,
.po-blue-act-btn:disabled i,
.btn-grid-act:disabled i,
.cp-grid-btn:disabled i,
.erp-grid-btn:disabled i,
.cp-cell-btn:disabled i,
.btn-add-row:disabled i,
.btn-del-selected-row:disabled i,
.btn-remove-line:disabled i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.95 !important;
    transform: none !important;
}

button:not(.erp-tile-btn):disabled span,
.po-blue-act-btn:disabled span,
.btn-grid-act:disabled span,
.cp-grid-btn:disabled span,
.erp-grid-btn:disabled span,
.cp-cell-btn:disabled span,
.btn-add-row:disabled span,
.btn-del-selected-row:disabled span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 0.95 !important;
}

/* =================================================================
   ENTERPRISE UNIVERSAL BLUE SCROLLBARS & FLUSH GRID SUMMARY FOOTER
   Matches Sales Invoices (sales_invoices.php) 100%
   - No outer scrollbars on the left of any screen.
   - Blue scrollbars inside all grids, tables, and internal panels.
   - Horizontal scrollbar directly flush on top of bottom summary bar with 0 gap.
   ================================================================= */
* {
    scrollbar-color: #0284c7 #cbd5e1;
}

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
::-webkit-scrollbar-track {
    background: #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.12);
}
::-webkit-scrollbar-thumb {
    background: #0284c7 !important;
    border-radius: 6px !important;
    border: 2px solid #cbd5e1 !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #0369a1 !important;
}

/* Explicit targeting for grid & table containers to guarantee 100% blue scrollbar matching Sales Invoices */
.grid-table-wrapper::-webkit-scrollbar,
.pr-table-wrap::-webkit-scrollbar,
.grn-table-wrap::-webkit-scrollbar,
.gin-table-wrap::-webkit-scrollbar,
.mje-table-wrapper::-webkit-scrollbar,
.po-table-container::-webkit-scrollbar,
.cp-table-wrapper::-webkit-scrollbar,
.dir-list::-webkit-scrollbar,
.tree-body::-webkit-scrollbar,
[class*="table-wrapper"]::-webkit-scrollbar,
[class*="table-wrap"]::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.grid-table-wrapper::-webkit-scrollbar-track,
.pr-table-wrap::-webkit-scrollbar-track,
.grn-table-wrap::-webkit-scrollbar-track,
.gin-table-wrap::-webkit-scrollbar-track,
.mje-table-wrapper::-webkit-scrollbar-track,
.po-table-container::-webkit-scrollbar-track,
.cp-table-wrapper::-webkit-scrollbar-track,
.dir-list::-webkit-scrollbar-track,
.tree-body::-webkit-scrollbar-track,
[class*="table-wrapper"]::-webkit-scrollbar-track,
[class*="table-wrap"]::-webkit-scrollbar-track {
    background: #cbd5e1 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15) !important;
}

.grid-table-wrapper::-webkit-scrollbar-thumb,
.pr-table-wrap::-webkit-scrollbar-thumb,
.grn-table-wrap::-webkit-scrollbar-thumb,
.gin-table-wrap::-webkit-scrollbar-thumb,
.mje-table-wrapper::-webkit-scrollbar-thumb,
.po-table-container::-webkit-scrollbar-thumb,
.cp-table-wrapper::-webkit-scrollbar-thumb,
.dir-list::-webkit-scrollbar-thumb,
.tree-body::-webkit-scrollbar-thumb,
[class*="table-wrapper"]::-webkit-scrollbar-thumb,
[class*="table-wrap"]::-webkit-scrollbar-thumb {
    background: #0284c7 !important;
    border-radius: 6px !important;
    border: 2px solid #cbd5e1 !important;
}

.grid-table-wrapper::-webkit-scrollbar-thumb:hover,
.pr-table-wrap::-webkit-scrollbar-thumb:hover,
.grn-table-wrap::-webkit-scrollbar-thumb:hover,
.gin-table-wrap::-webkit-scrollbar-thumb:hover,
.mje-table-wrapper::-webkit-scrollbar-thumb:hover,
.po-table-container::-webkit-scrollbar-thumb:hover,
.cp-table-wrapper::-webkit-scrollbar-thumb:hover,
.dir-list::-webkit-scrollbar-thumb:hover,
.tree-body::-webkit-scrollbar-thumb:hover,
[class*="table-wrapper"]::-webkit-scrollbar-thumb:hover,
[class*="table-wrap"]::-webkit-scrollbar-thumb:hover {
    background: #0369a1 !important;
}

/* Flush Grid Summary Footer across all screens: zero gaps between grid scrollbar and summary bar, docked directly above status bar */
.grid-summary-footer,
.pr-line-count-bar,
.cp-summary-bar,
.cr-summary-bar,
.po-summary-bar,
.gr-summary-bar,
.gi-summary-bar,
.summary-bar-global,
.bottom-bar-summary,
.mje-summary-bar,
.items-summary-bar,
.irt-toolbar-summary {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    margin-bottom: 0px !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    box-sizing: border-box !important;
}

html.sidebar-collapsed .grid-summary-footer,
body.sidebar-collapsed .grid-summary-footer,
html.sidebar-collapsed .pr-line-count-bar,
body.sidebar-collapsed .pr-line-count-bar,
html.sidebar-collapsed .cp-summary-bar,
body.sidebar-collapsed .cp-summary-bar {
    width: 100% !important;
    right: auto !important;
    left: auto !important;
}

.grid-table-wrapper,
.pr-table-wrap,
.grn-table-wrap,
.gin-table-wrap,
.mje-table-wrapper,
.po-table-container,
.cp-table-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* ========================================================================= */
/* UNIVERSAL MODAL & SWEETALERT TOP-LAYER ENFORCEMENT                      */
/* ========================================================================= */
.swal2-container {
    z-index: 2147483647 !important;
}
.swal2-backdrop {
    z-index: 2147483646 !important;
}
.swal2-popup {
    z-index: 2147483647 !important;
}
.modal-drawer-overlay {
    z-index: 2000000000 !important;
}
.modal-backdrop {
    z-index: 1999999990 !important;
}
.modal {
    z-index: 1999999995 !important;
}

/* ========================================================================= */
/* UNIVERSAL TOP-LAYER DROPDOWNS & LIST SELECTIONS (فوق أي عنصر في الشاشة)  */
/* ========================================================================= */
.combo-dropdown,
.dropdown-menu,
.cr-dropdown-menu,
.cr-export-menu,
.actions-dropdown,
.export-menu,
.custom-select-menu,
.select2-dropdown,
.autocomplete-dropdown,
.search-results-dropdown,
.picker-dropdown,
.combo-list {
    z-index: 1000000 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Elevate parent containers when a dropdown or input inside them is active */
.searchable-combo:focus-within,
.combo-wrapper:focus-within,
.pr-input-box:focus-within,
.form-group:focus-within,
.pr-field-group:focus-within,
.searchable-combo:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.combo-wrapper:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-input-box:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-field-group:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.form-group:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.si-sec-card:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pi-sec-card:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pi-header-3col:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-split-layout:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-right-side:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-header-compact-row1:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pr-header-compact-row2:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.top-header-form-card:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.card:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
td:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
tr:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.is-combo-active,
.combo-elevated-parent,
.combo-elevated {
    z-index: 100000000 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Ensure tables, cells, cards, headers, and modal drawers don't clip active dropdowns */
td:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
tr:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.pi-header-3col,
.si-sec-card,
.pi-sec-card,
.pr-sec-card,
.pr-split-layout,
.pr-right-side,
.top-header-form-card,
.card:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.modal-body:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.modal-drawer-box:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])),
.drawer-body:has(.combo-dropdown:not([style*="display: none"]):not([style*="display:none"])) {
    overflow: visible !important;
}

/* Dedicated styling for customer & supplier header combo dropdowns and searchable combos */
#dropCustomerCode, #dropCustomerName,
#dropSupplierCode, #dropSupplierName,
#dropEntityCode, #dropEntityName,
.searchable-combo:not(td *) > .combo-dropdown {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 380px !important;
    max-width: 580px !important;
    width: 100% !important;
    min-height: 180px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #0284c7 !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(2, 132, 199, 0.25) !important;
    z-index: 100000002 !important;
    padding: 2px 0 !important;
}

/* Open upward when input is near bottom of viewport or container */
.combo-dropdown.open-upward,
.searchable-combo:not(td *) > .combo-dropdown.open-upward {
    top: auto !important;
    bottom: calc(100% + 4px) !important;
    box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.45), 0 -4px 12px rgba(2, 132, 199, 0.35) !important;
}

html[data-mode="dark-full"] #dropCustomerCode,
html[data-mode="dark-full"] #dropCustomerName,
html[data-mode="dark-full"] #dropSupplierCode,
html[data-mode="dark-full"] #dropSupplierName,
html[data-mode="dark-full"] #dropEntityCode,
html[data-mode="dark-full"] #dropEntityName,
html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerCode,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerName,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierCode,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierName,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityCode,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityName,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(56, 189, 248, 0.3) !important;
}

html[data-mode="dark-full"] .combo-dropdown.open-upward,
html:not(.light-full-mode):not(.white-workspace-mode) .combo-dropdown.open-upward,
html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown.open-upward,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown.open-upward {
    box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.85), 0 -4px 12px rgba(56, 189, 248, 0.4) !important;
}

#dropCustomerCode .combo-item,
#dropCustomerName .combo-item,
#dropSupplierCode .combo-item,
#dropSupplierName .combo-item,
#dropEntityCode .combo-item,
#dropEntityName .combo-item,
.searchable-combo:not(td *) > .combo-dropdown .combo-item {
    padding: 7px 12px !important;
    cursor: pointer !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background 0.12s ease !important;
    user-select: none !important;
}

html[data-mode="dark-full"] #dropCustomerCode .combo-item,
html[data-mode="dark-full"] #dropCustomerName .combo-item,
html[data-mode="dark-full"] #dropSupplierCode .combo-item,
html[data-mode="dark-full"] #dropSupplierName .combo-item,
html[data-mode="dark-full"] #dropEntityCode .combo-item,
html[data-mode="dark-full"] #dropEntityName .combo-item,
html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerCode .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerName .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierCode .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierName .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityCode .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityName .combo-item,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown .combo-item {
    color: #f8fafc !important;
    border-bottom-color: #1e293b !important;
    background: transparent !important;
}

html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown .combo-item .combo-item-name,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown .combo-item .combo-item-name {
    color: #f8fafc !important;
}

#dropCustomerCode .combo-item:hover,
#dropCustomerCode .combo-item.selected,
#dropCustomerName .combo-item:hover,
#dropCustomerName .combo-item.selected,
#dropSupplierCode .combo-item:hover,
#dropSupplierCode .combo-item.selected,
#dropSupplierName .combo-item:hover,
#dropSupplierName .combo-item.selected,
#dropEntityCode .combo-item:hover,
#dropEntityCode .combo-item.selected,
#dropEntityName .combo-item:hover,
#dropEntityName .combo-item.selected,
.searchable-combo:not(td *) > .combo-dropdown .combo-item:hover,
.searchable-combo:not(td *) > .combo-dropdown .combo-item.keyboard-active {
    background: #e0f2fe !important;
    color: #0284c7 !important;
}

html[data-mode="dark-full"] #dropCustomerCode .combo-item:hover,
html[data-mode="dark-full"] #dropCustomerName .combo-item:hover,
html[data-mode="dark-full"] #dropSupplierCode .combo-item:hover,
html[data-mode="dark-full"] #dropSupplierName .combo-item:hover,
html[data-mode="dark-full"] #dropEntityCode .combo-item:hover,
html[data-mode="dark-full"] #dropEntityName .combo-item:hover,
html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown .combo-item:hover,
html[data-mode="dark-full"] .searchable-combo:not(td *) > .combo-dropdown .combo-item.keyboard-active,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerCode .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) #dropCustomerName .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierCode .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) #dropSupplierName .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityCode .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) #dropEntityName .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown .combo-item:hover,
html:not(.light-full-mode):not(.white-workspace-mode) .searchable-combo:not(td *) > .combo-dropdown .combo-item.keyboard-active {
    background: #0369a1 !important;
    color: #ffffff !important;
}


/* When a modal or SweetAlert is displayed, reset any page-level focus elevations and hide open dropdowns */
body.swal2-shown .combo-dropdown,
body.modal-open .combo-dropdown,
.modal-drawer-overlay.open ~ * .combo-dropdown {
    display: none !important;
}
body.swal2-shown .searchable-combo:focus-within,
body.swal2-shown .combo-wrapper:focus-within,
body.swal2-shown .pr-input-box:focus-within,
body.swal2-shown .form-group:focus-within,
body.swal2-shown .pr-field-group:focus-within,
body.swal2-shown .combo-elevated-parent,
body.swal2-shown td,
body.swal2-shown tr,
body.modal-open .searchable-combo:focus-within,
body.modal-open .combo-wrapper:focus-within,
body.modal-open .pr-input-box:focus-within,
body.modal-open .combo-elevated-parent,
body.modal-open td,
body.modal-open tr {
    z-index: auto !important;
}