/* ═══════════════════════════════════════════════════════════════════ ERP OVERRIDES — Component styles + Modern Visual Polish Theme variables + dark mode overrides are in erp-themes.css ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ TAILWIND V4 COMPATIBILITY All JS visibility toggling uses style.display instead of hidden class. The hidden class is only used for responsive breakpoints (hidden sm:flex etc.) which Tailwind v4 handles natively. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ GLOBAL POLISH — depth, hover, transitions ═══════════════════════════════════════════════════════════════════ */ /* Cards: glass shadow + hover lift */ .rounded-lg.border.bg-white, .rounded-lg.border.shadow-sm { box-shadow: var(--erp-glass-shadow), 0 0 0 1px var(--erp-glass-border); transition: box-shadow 0.2s ease, transform 0.2s ease; } .rounded-lg.border.shadow-sm:hover { transform: translateY(-2px); border-color: rgba(var(--erp-primary-glow-rgb), 0.2) !important; box-shadow: 0 2px 4px rgba(var(--erp-primary-deep-rgb), 0.06), 0 12px 32px rgba(var(--erp-primary-deep-rgb), 0.1), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.08), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.9); } /* ── Apple-style Frosted Glass ────────────────────────────────── */ /* Shared glass mixin via variables from erp-themes.css */ /* Header: solid backgrounds — hardcoded to avoid dark/light transition glitches */ .erp-header { backdrop-filter: blur(20px) saturate(200%); -webkit-backdrop-filter: blur(20px) saturate(200%); background-color: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid rgba(61, 82, 160, 0.1) !important; box-shadow: 0 1px 3px rgba(61, 82, 160, 0.06), 0 4px 12px rgba(61, 82, 160, 0.03); } html.dark .erp-header { background-color: rgba(53, 46, 72, 0.95) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 0 16px rgba(127, 110, 200, 0.04), 0 2px 8px rgba(0, 0, 0, 0.15); } /* Sidebar: solid backgrounds — hardcoded to avoid CSS variable transition glitches */ .erp-sidebar { background-color: var(--erp-bg) !important; border-right: 1px solid rgba(61, 82, 160, 0.1) !important; box-shadow: 1px 0 3px rgba(61, 82, 160, 0.05), 4px 0 12px rgba(61, 82, 160, 0.03); } html.dark .erp-sidebar { background-color: var(--erp-bg-page) !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 0 16px rgba(127, 110, 200, 0.04), 4px 0 12px rgba(0, 0, 0, 0.15); } /* Logo wrap — env-driven background per placement (see /css/erp-config.css) */ .erp-logo-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; padding: 2px; transition: background-color 0.2s ease; } .erp-logo-wrap--login-card { background: var(--erp-logo-bg-login-card, transparent); } .erp-logo-wrap--horizontal { background: var(--erp-logo-bg-horizontal, transparent); } .erp-logo-wrap--sidebar { background: var(--erp-logo-bg-sidebar, transparent); } .erp-logo-wrap--sidebar-sm { background: var(--erp-logo-bg-sidebar-sm, transparent); } .erp-logo-wrap--mobile { background: var(--erp-logo-bg-mobile, transparent); } /* Cards: warm off-white — distinct from header/sidebar (blue tint) and page bg */ .rounded-lg.border.bg-white, .rounded-lg.border.shadow-sm { background-color: var(--erp-bg) !important; border: 1px solid rgba(var(--erp-primary-deep-rgb), 0.1) !important; box-shadow: 0 1px 3px rgba(var(--erp-primary-deep-rgb), 0.06), 0 4px 12px rgba(var(--erp-primary-deep-rgb), 0.04); } html.dark .rounded-lg.border.bg-white, html.dark .rounded-lg.border.shadow-sm { background: linear-gradient(145deg, rgba(var(--erp-surface-glass-rgb), 0.45) 0%, rgba(var(--erp-glass-tint-rgb), 0.3) 100%) !important; backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); border: 1px solid rgba(var(--erp-white-rgb), 0.1) !important; box-shadow: 0 0 20px rgba(var(--erp-primary-glow-rgb), 0.06), 0 4px 16px rgba(var(--erp-black-rgb), 0.15), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.06), inset 0 0 0 1px rgba(var(--erp-white-rgb), 0.03); transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.3s ease; } /* Cards with charts: disable backdrop-filter to prevent canvas issues */ html.dark .rounded-lg.border.shadow-sm:has(canvas) { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(145deg, rgba(var(--erp-surface-glass-rgb), 0.85) 0%, rgba(var(--erp-glass-tint-rgb), 0.75) 100%) !important; } /* Modal: frosted glass panel */ .erp-modal-content { backdrop-filter: blur(24px) saturate(200%) !important; -webkit-backdrop-filter: blur(24px) saturate(200%) !important; background-color: var(--erp-glass-strong) !important; border: 1px solid var(--erp-glass-border) !important; box-shadow: 0 24px 80px rgba(var(--erp-black-rgb), 0.12), 0 0 0 1px var(--erp-glass-border) !important; } html.dark .erp-modal-content { box-shadow: 0 24px 80px rgba(var(--erp-black-rgb), 0.4), 0 0 0 1px var(--erp-glass-border) !important; } /* Dropdown menus: opaque glass — must be readable over any content */ .erp-dropdown.show { backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); background-color: rgba(var(--erp-white-rgb), 0.92) !important; border: 1px solid var(--erp-glass-border) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.1), 0 0 0 1px var(--erp-glass-border); } html.dark .erp-dropdown.show { background-color: rgba(var(--erp-surface-glass-rgb), 0.95) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.25), 0 0 0 1px var(--erp-glass-border); } /* Toast: opaque glass */ .erp-toast { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.12), 0 0 0 1px var(--erp-glass-border) !important; } /* Command palette: opaque glass panel */ .erp-command-palette>div>div { backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); background-color: rgba(var(--erp-white-rgb), 0.92) !important; border: 1px solid var(--erp-glass-border) !important; box-shadow: 0 16px 64px rgba(var(--erp-black-rgb), 0.15), 0 0 0 1px var(--erp-glass-border) !important; } html.dark .erp-command-palette>div>div { background-color: rgba(var(--erp-surface-glass-rgb), 0.95) !important; } /* Mega dropdown: opaque glass — overlaps page content, must be clearly readable */ #hnav-mega-dropdown.show { backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); background-color: rgba(var(--erp-white-rgb), 0.95) !important; border-bottom: 1px solid var(--erp-glass-border) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.1), 0 0 0 1px var(--erp-glass-border); } html.dark #hnav-mega-dropdown.show { background-color: rgba(var(--erp-surface-glass-rgb), 0.95) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.25), 0 0 0 1px var(--erp-glass-border); } /* Horizontal nav row: theme-tinted solid */ .erp-hnav-wrapper { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background-color: rgba(var(--erp-primary-glow-rgb), 0.05) !important; border-bottom: 1px solid rgba(var(--erp-primary-deep-rgb), 0.1) !important; } html.dark .erp-hnav-wrapper { background-color: rgba(var(--erp-surface-glass-rgb), 0.92) !important; border-bottom: 1px solid rgba(var(--erp-white-rgb), 0.08) !important; } /* Footer: frosted glass — theme-tinted solid */ .erp-footer { backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); background-color: rgba(var(--erp-primary-glow-rgb), 0.06) !important; border-top: 1px solid rgba(var(--erp-primary-deep-rgb), 0.1) !important; box-shadow: 0 -1px 3px rgba(var(--erp-primary-deep-rgb), 0.05), 0 -4px 12px rgba(var(--erp-primary-deep-rgb), 0.02); } html.dark .erp-footer { background-color: rgba(var(--erp-surface-glass-rgb), 0.9) !important; border-top: 1px solid rgba(var(--erp-white-rgb), 0.08) !important; box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.03), 0 -2px 8px rgba(var(--erp-black-rgb), 0.12); } /* Theme picker / user dropdown: opaque glass */ #theme-picker-dropdown, #user-menu-dropdown { backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); background-color: rgba(var(--erp-white-rgb), 0.92) !important; border: 1px solid var(--erp-glass-border) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.1), 0 0 0 1px var(--erp-glass-border); } html.dark #theme-picker-dropdown, html.dark #user-menu-dropdown { background-color: rgba(var(--erp-surface-glass-rgb), 0.95) !important; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.25), 0 0 0 1px var(--erp-glass-border); } /* All buttons: subtle shadow + transition */ button, [role="button"], a.inline-flex { transition: all 0.15s ease; } /* Solid buttons: depth + hover lift + active press (only actual buttons/links, not badge dots) */ button.bg-zinc-900[class*="rounded"], a.bg-zinc-900[class*="rounded"], button.bg-emerald-600[class*="rounded"], a.bg-emerald-600[class*="rounded"], button.bg-emerald-700[class*="rounded"], a.bg-emerald-700[class*="rounded"], button.bg-red-500[class*="rounded"], a.bg-red-500[class*="rounded"], button.bg-red-600[class*="rounded"], a.bg-red-600[class*="rounded"], button.bg-amber-500[class*="rounded"], a.bg-amber-500[class*="rounded"], button.bg-amber-600[class*="rounded"], a.bg-amber-600[class*="rounded"], button.bg-blue-500[class*="rounded"], a.bg-blue-500[class*="rounded"], button.bg-blue-600[class*="rounded"], a.bg-blue-600[class*="rounded"] { box-shadow: 0 1px 2px rgba(var(--erp-black-rgb), 0.15), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08); position: relative; overflow: hidden; } button.bg-zinc-900[class*="rounded"]:hover, a.bg-zinc-900[class*="rounded"]:hover, button.bg-emerald-600[class*="rounded"]:hover, a.bg-emerald-600[class*="rounded"]:hover, button.bg-emerald-700[class*="rounded"]:hover, a.bg-emerald-700[class*="rounded"]:hover, button.bg-red-500[class*="rounded"]:hover, a.bg-red-500[class*="rounded"]:hover, button.bg-red-600[class*="rounded"]:hover, a.bg-red-600[class*="rounded"]:hover, button.bg-amber-500[class*="rounded"]:hover, a.bg-amber-500[class*="rounded"]:hover, button.bg-amber-600[class*="rounded"]:hover, a.bg-amber-600[class*="rounded"]:hover, button.bg-blue-500[class*="rounded"]:hover, a.bg-blue-500[class*="rounded"]:hover, button.bg-blue-600[class*="rounded"]:hover, a.bg-blue-600[class*="rounded"]:hover { box-shadow: 0 2px 8px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08); transform: translateY(-0.5px); } button.bg-zinc-900[class*="rounded"]:active, a.bg-zinc-900[class*="rounded"]:active, button.bg-emerald-600[class*="rounded"]:active, a.bg-emerald-600[class*="rounded"]:active, button.bg-emerald-700[class*="rounded"]:active, a.bg-emerald-700[class*="rounded"]:active, button.bg-red-500[class*="rounded"]:active, a.bg-red-500[class*="rounded"]:active, button.bg-red-600[class*="rounded"]:active, a.bg-red-600[class*="rounded"]:active, button.bg-amber-500[class*="rounded"]:active, a.bg-amber-500[class*="rounded"]:active, button.bg-amber-600[class*="rounded"]:active, a.bg-amber-600[class*="rounded"]:active, button.bg-blue-500[class*="rounded"]:active, a.bg-blue-500[class*="rounded"]:active, button.bg-blue-600[class*="rounded"]:active, a.bg-blue-600[class*="rounded"]:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(var(--erp-black-rgb), 0.15), inset 0 1px 3px rgba(var(--erp-black-rgb), 0.15); } /* Outline buttons: hover border darkens */ .border.bg-white[class*="rounded"]:hover, .border.bg-white[class*="rounded-md"]:hover { border-color: var(--erp-border-strong); box-shadow: 0 1px 3px rgba(var(--erp-black-rgb), 0.04); } /* Inputs: subtle inner shadow */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { box-shadow: inset 0 1px 2px rgba(var(--erp-black-rgb), 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--erp-primary-ring), inset 0 1px 2px rgba(var(--erp-black-rgb), 0.04) !important; } /* Status badges: slight shadow */ .inline-flex.items-center.rounded-md.border[class*="px-2"] { box-shadow: 0 1px 2px rgba(var(--erp-black-rgb), 0.06); } /* KPI cards: icon container — primary-tinted */ .rounded-md.bg-zinc-100.flex.items-center.justify-center { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; border: 1px solid rgba(var(--erp-primary-glow-rgb), 0.1); box-shadow: none; } html.dark .rounded-md.bg-zinc-100.flex.items-center.justify-center { background-color: rgba(var(--erp-primary-glow-rgb), 0.15) !important; box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.08); } /* Light mode: input fields — faint gray background */ :root input, :root select, :root textarea { background-color: var(--erp-bg); } /* Solid buttons: depth gradient from theme token */ button.bg-zinc-900[class*="rounded"], a.bg-zinc-900[class*="rounded"], button.bg-emerald-600[class*="rounded"], a.bg-emerald-600[class*="rounded"], button.bg-emerald-700[class*="rounded"], a.bg-emerald-700[class*="rounded"], button.bg-red-500[class*="rounded"], a.bg-red-500[class*="rounded"], button.bg-red-600[class*="rounded"], a.bg-red-600[class*="rounded"], button.bg-amber-500[class*="rounded"], a.bg-amber-500[class*="rounded"], button.bg-amber-600[class*="rounded"], a.bg-amber-600[class*="rounded"], button.bg-blue-500[class*="rounded"], a.bg-blue-500[class*="rounded"], button.bg-blue-600[class*="rounded"], a.bg-blue-600[class*="rounded"] { background-image: var(--erp-primary-gradient) !important; } /* DataTable row hover: smooth */ table.dataTable tbody tr { transition: background-color 0.15s ease; } /* Sidebar nav items: smooth transitions */ .erp-sidebar a, .erp-sidebar button { transition: all 0.15s ease; } /* Sidebar active page: stronger highlight */ .erp-sidebar a.bg-zinc-900 { box-shadow: 0 1px 3px rgba(var(--erp-black-rgb), 0.12); } /* (Dropdown, modal, toast, command palette glass is in the frosted glass section above) */ /* Tab active: bottom border thicker */ [data-tab-target].border-b-2.border-zinc-900 { border-bottom-width: 2.5px; } /* Scrollable areas */ .overflow-y-auto { scrollbar-gutter: stable; } /* Circular progress: shadow on ring */ svg circle[stroke-dasharray] { filter: drop-shadow(0 1px 2px rgba(var(--erp-black-rgb), 0.1)); } /* File/folder items: hover lift */ .hover\:shadow-md:hover { box-shadow: 0 4px 12px rgba(var(--erp-black-rgb), 0.08), 0 1px 4px rgba(var(--erp-black-rgb), 0.04) !important; transform: translateY(-1px); } /* Kanban cards: glass + hover */ .kanban-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: var(--erp-glass-strong) !important; box-shadow: var(--erp-glass-shadow), 0 0 0 1px var(--erp-glass-border); transition: box-shadow 0.2s ease, transform 0.15s ease; } .kanban-card:hover { box-shadow: 0 8px 24px rgba(var(--erp-black-rgb), 0.08), 0 0 0 1px var(--erp-glass-border) !important; transform: translateY(-1px); } /* Avatar: subtle ring */ .rounded-full[class*="bg-"][class*="-200"], .rounded-full[class*="bg-"][class*="-100"] { box-shadow: 0 0 0 1px var(--erp-glass-border), 0 1px 2px rgba(var(--erp-black-rgb), 0.06); } /* Horizontal nav items: subtle bottom border on hover */ .erp-hnav-item:hover { box-shadow: inset 2px -2px 2px 2px var(--erp-glass-border); } /* ═══════════════════════════════════════════════════════════════════ DATATABLES ═══════════════════════════════════════════════════════════════════ */ .dataTables_wrapper { font-size: 0.8125rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* DT 1.x and 2.x wrapper elements */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dt-length, .dataTables_wrapper .dt-search, .dataTables_wrapper .dt-info, .dataTables_wrapper .dt-paging { padding: 0.25rem 0; color: var(--erp-text-secondary); font-size: 0.8125rem; } .dataTables_wrapper .dataTables_length select { padding: 0.25rem 1.75rem 0.25rem 0.5rem; border: 1px solid var(--erp-border); border-radius: 0.375rem; font-size: 0.8125rem; background-color: var(--erp-bg); outline: none; } .dataTables_wrapper .dataTables_length select:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 2px var(--erp-primary-ring); } .dataTables_wrapper .dataTables_filter input { padding: 0.25rem 0.5rem; border: 1px solid var(--erp-border); border-radius: 0.375rem; font-size: 0.8125rem; margin-left: 0.5rem; outline: none; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 2px var(--erp-primary-ring); } table.dataTable { border-collapse: collapse !important; width: 100% !important; min-width: 0; } table.dataTable thead th, table.dataTable thead td { border-bottom: 2px solid var(--erp-border) !important; padding: 0.625rem 0.75rem !important; font-weight: 600; color: var(--erp-text) !important; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; background-color: transparent !important; } table.dataTable tbody td { padding: 0.5rem 0.75rem !important; border-bottom: 1px solid var(--erp-border-row) !important; color: var(--erp-text-medium); font-size: 0.8125rem; vertical-align: middle; } table.dataTable tbody tr:hover { background-color: var(--erp-bg-page) !important; } table.dataTable tbody tr.selected { background-color: var(--erp-bg-muted) !important; } /* Pagination — DataTables 2.x (dt-paging-button) with high specificity */ div.dt-container .dt-paging .dt-paging-button { padding: 0.25rem 0.625rem !important; margin: 0 2px !important; border: 1px solid var(--erp-border) !important; border-radius: 0.375rem !important; background: var(--erp-bg) !important; color: var(--erp-text-medium) !important; font-size: 0.75rem !important; cursor: pointer; min-width: auto !important; transition: all 0.15s ease; } div.dt-container .dt-paging .dt-paging-button:hover { background: var(--erp-primary-light) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary) !important; box-shadow: 0 0 0 1px var(--erp-primary); } div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; box-shadow: 0 2px 8px rgba(var(--erp-primary-deep-rgb), 0.2) !important; } div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active { opacity: 0.4 !important; cursor: not-allowed !important; background: transparent !important; border-color: var(--erp-border) !important; color: var(--erp-text-tertiary) !important; box-shadow: none !important; } /* DT2 layout wrappers */ div.dt-container .dt-layout-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; } /* Hide empty DT top/bottom rows (when search/length are disabled) — but keep the table row */ div.dt-container .dt-layout-row:not(:has(table)):not(:has(.dt-info)):not(:has(.dt-paging)):not(:has(.dt-search)):not(:has(.dt-length)) { display: none; } div.dt-container .dt-layout-cell { color: var(--erp-text-secondary); font-size: 0.8125rem; } div.dt-container .dt-search input { padding: 0.25rem 0.5rem; border: 1px solid var(--erp-border); border-radius: 0.375rem; font-size: 0.8125rem; margin-left: 0.5rem; outline: none; background: var(--erp-bg); color: var(--erp-text); } div.dt-container .dt-search input:focus { border-color: var(--erp-primary); box-shadow: 0 0 0 2px var(--erp-primary-ring); } div.dt-container .dt-length select { padding: 0.25rem 1.75rem 0.25rem 0.5rem; border: 1px solid var(--erp-border); border-radius: 0.375rem; font-size: 0.8125rem; background: var(--erp-bg); color: var(--erp-text); outline: none; } div.dt-container .dt-info { color: var(--erp-text-secondary); font-size: 0.8125rem; } /* DT2 paging container */ div.dt-container .dt-paging { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } /* Responsive child rows */ table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control { position: relative; padding-left: 2rem !important; cursor: pointer; } table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control::before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control::before { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; font-size: 0.625rem; color: var(--erp-text-secondary); background: var(--erp-bg-muted); border: 1px solid var(--erp-border); border-radius: 0.25rem; transition: transform 0.15s ease, background-color 0.15s ease; } table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control::before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control::before { content: '\f107'; background: var(--erp-primary); border-color: var(--erp-primary); color: var(--erp-primary-fg); } table.dataTable>tbody>tr.child ul.dtr-details { display: block; width: 100%; padding: 0; margin: 0; } table.dataTable>tbody>tr.child ul.dtr-details>li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--erp-border-row); font-size: 0.875rem; } table.dataTable>tbody>tr.child ul.dtr-details>li:last-child { border-bottom: none; } table.dataTable>tbody>tr.child span.dtr-title { font-weight: 500; color: var(--erp-text-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; min-width: 100px; } table.dataTable>tbody>tr.child span.dtr-data { color: var(--erp-text); text-align: right; } table.dataTable>tbody>tr.child td.child { padding: 0 !important; background: var(--erp-bg-page); border-left: 3px solid var(--erp-primary); } table.dataTable>tbody>tr.child:hover { background-color: transparent !important; } /* Sorting icons */ table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { opacity: 0.3; font-size: 0.625rem; } table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before { opacity: 0.8; } /* Hide sorting arrows on checkbox / non-sortable columns (DT 2.x uses span.dt-column-order) */ table.dataTable thead th:has(input[type="checkbox"]) span.dt-column-order, table.dataTable thead td:has(input[type="checkbox"]) span.dt-column-order { display: none !important; } table.dataTable thead th:has(input[type="checkbox"]) { padding-right: 10px !important; } /* Also hide pseudo-element arrows (DT 1.x fallback) on non-sortable columns */ table.dataTable thead th.sorting_disabled::before, table.dataTable thead th.sorting_disabled::after, table.dataTable thead th:has(input[type="checkbox"])::before, table.dataTable thead th:has(input[type="checkbox"])::after { display: none !important; } /* Mobile stacking */ @media (max-width: 639px) { .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { text-align: left; width: 100%; } .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; margin-top: 0.25rem; } .dataTables_wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.25rem 0.5rem !important; font-size: 0.75rem; } .dataTables_wrapper .dataTables_info { text-align: center; font-size: 0.75rem; } } /* ═══════════════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--erp-scrollbar); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--erp-scrollbar-hover); } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════════════ */ .erp-sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: erpSidebarIn 0.4s ease-out; } @keyframes erpSidebarIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Sidebar nav groups: stagger entrance */ .erp-nav-group { animation: erpNavGroupIn 0.3s ease-out forwards; } .erp-nav-group:nth-child(1) { animation-delay: 0.05s; } .erp-nav-group:nth-child(2) { animation-delay: 0.08s; } .erp-nav-group:nth-child(3) { animation-delay: 0.11s; } .erp-nav-group:nth-child(4) { animation-delay: 0.14s; } .erp-nav-group:nth-child(5) { animation-delay: 0.17s; } .erp-nav-group:nth-child(6) { animation-delay: 0.20s; } .erp-nav-group:nth-child(7) { animation-delay: 0.23s; } .erp-nav-group:nth-child(8) { animation-delay: 0.26s; } .erp-nav-group:nth-child(9) { animation-delay: 0.29s; } @keyframes erpNavGroupIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } .erp-sidebar.collapsed { width: 64px; overflow-x: hidden; } /* Collapsed: ensure nav groups are visible (skip entrance animation) */ .erp-sidebar.collapsed .erp-nav-group { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .erp-sidebar.collapsed .erp-sidebar-label, .erp-sidebar.collapsed .erp-sidebar-group-title, .erp-sidebar.collapsed .erp-sidebar-submenu, .erp-sidebar.collapsed .erp-module-pages, .erp-sidebar.collapsed .erp-module-chevron, .erp-sidebar.collapsed .erp-subpage-list, .erp-sidebar.collapsed .erp-page-chevron { display: none; } /* Collapsed: center all nav icons, remove gap/padding */ .erp-sidebar.collapsed .erp-sidebar-link { justify-content: center !important; padding: 0.5rem 0 !important; gap: 0 !important; position: relative; } .erp-sidebar.collapsed .erp-nav-icon { width: 1.25rem !important; height: 1.25rem !important; font-size: 1.25rem !important; flex-shrink: 0 !important; display: inline-block !important; color: inherit !important; visibility: visible !important; opacity: 1 !important; } /* Expanded: consistent icon sizing */ .erp-sidebar:not(.collapsed) .erp-nav-icon { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; flex-shrink: 0; } /* Hover-expand: when sidebar is collapsed and hovered, temporarily expand */ .erp-sidebar.collapsed.hover-expanded { width: 256px !important; z-index: 60; background-color: #eceaf4 !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); } html.dark .erp-sidebar.collapsed.hover-expanded { background-color: var(--erp-bg-page) !important; } .erp-sidebar.collapsed.hover-expanded .erp-sidebar-label, .erp-sidebar.collapsed.hover-expanded .erp-sidebar-group-title { display: inline !important; } .erp-sidebar.collapsed.hover-expanded .erp-sidebar-submenu { display: block; } .erp-sidebar.collapsed.hover-expanded .erp-sidebar-link { justify-content: flex-start !important; padding: 0.5rem !important; gap: 0.5rem !important; } .erp-sidebar.collapsed.hover-expanded .erp-chevron { display: inline-block !important; } .erp-sidebar.collapsed.hover-expanded #sidebar-expanded-header { display: flex !important; } .erp-sidebar.collapsed.hover-expanded #sidebar-collapsed-header { display: none !important; } .erp-content-area { transition: margin-left 0.2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(61,82,160,0.09)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(61,82,160,0.06)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(61,82,160,0.2)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(61,82,160,0.2)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(61,82,160,0.07)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(61,82,160,0.22)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(61,82,160,0.16)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(61,82,160,0.16)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(61,82,160,0.12)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(61,82,160,0.12)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(112,145,230,0.2)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(112,145,230,0.2)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3C/svg%3E"), radial-gradient(ellipse at 10% 85%, rgba(var(--erp-primary-deep-rgb), 0.05) 0%, transparent 50%), radial-gradient(ellipse at 90% 15%, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 50%); background-size: 200px 200px, 100% 100%, 100% 100%; } /* Dark mode: purple network */ html.dark .erp-content-area { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(127,110,200,0.1)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(127,110,200,0.07)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(127,110,200,0.18)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(127,110,200,0.18)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(127,110,200,0.08)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(127,110,200,0.2)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(127,110,200,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(127,110,200,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(127,110,200,0.1)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(127,110,200,0.1)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(157,140,220,0.18)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(157,140,220,0.18)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3C/svg%3E"), radial-gradient(ellipse at 10% 85%, rgba(var(--erp-primary-deep-rgb), 0.05) 0%, transparent 50%), radial-gradient(ellipse at 90% 15%, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 50%); background-size: 200px 200px, 100% 100%, 100% 100%; } .erp-overlay { position: fixed; inset: 0; background: var(--erp-overlay); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .erp-overlay.active { opacity: 1; pointer-events: auto; animation: erpOverlayIn 0.3s ease-out; } @keyframes erpOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* Footer: slide up entrance */ .erp-footer { animation: erpFooterIn 0.4s ease-out 0.2s forwards; } @keyframes erpFooterIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════ HORIZONTAL NAV — full animations & hover states ═══════════════════════════════════════════════════════════════════ */ .erp-hnav-wrapper { position: relative; } .erp-hnav-scroll { scrollbar-width: none; -ms-overflow-style: none; } .erp-hnav-scroll::-webkit-scrollbar { display: none; } /* Nav item: animated underline + hover bg */ .erp-hnav-item { position: relative; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0.375rem; margin: 0 1px; } .erp-hnav-item::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%) scaleX(0); width: 70%; height: 2px; border-radius: 1px; background: var(--erp-primary); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .erp-hnav-item:hover { color: var(--erp-text); background-color: var(--erp-bg-muted); } .erp-hnav-item:hover::after { transform: translateX(-50%) scaleX(1); } /* Active group: primary-tinted bg + underline + bold */ .erp-hnav-active { background-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; font-weight: 600; border-radius: 0.375rem; } .erp-hnav-active i { color: var(--erp-primary-fg) !important; } .erp-hnav-active::after { transform: translateX(-50%) scaleX(1); background: var(--erp-primary-fg) !important; } html.dark .erp-hnav-active { background-color: rgba(var(--erp-primary-glow-rgb), 0.15) !important; color: var(--erp-text-medium) !important; box-shadow: inset 2px -2px 2px 2px var(--erp-glass-border); } html.dark .erp-hnav-active i { color: var(--erp-text-medium) !important; } html.dark .erp-hnav-active::after { background: var(--erp-primary) !important; } /* Horizontal nav dropdown — compact, positioned under button */ .erp-hnav-dropdown { position: absolute; z-index: 40; background-color: var(--erp-bg); border: 1px solid var(--erp-border); border-radius: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06); padding: 0.5rem; animation: erpHnavDropIn 0.15s ease-out; max-height: 70vh; overflow-y: auto; } .erp-hnav-dropdown-grid { display: grid; gap: 1rem; } html.dark .erp-hnav-dropdown { background-color: var(--erp-bg); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2); } html.dark .erp-hnav-dropdown .border-zinc-100 { border-color: rgba(255, 255, 255, 0.08); } @keyframes erpHnavDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Scroll arrow buttons */ #hnav-left, #hnav-right { background-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; cursor: pointer; top: 50%; transform: translateY(-50%) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } #hnav-left:hover, #hnav-right:hover { background-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; transform: translateY(-50%) !important; opacity: 1 !important; } #hnav-left i, #hnav-right i, #hnav-left:hover i, #hnav-right:hover i { color: var(--erp-primary-fg) !important; } html.dark #hnav-left, html.dark #hnav-right { background-color: #ffffff !important; color: #18181b !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } html.dark #hnav-left:hover, html.dark #hnav-right:hover { background-color: #ffffff !important; color: #18181b !important; transform: translateY(-50%) !important; } html.dark #hnav-left i, html.dark #hnav-right i, html.dark #hnav-left:hover i, html.dark #hnav-right:hover i { color: #18181b !important; } /* Mega dropdown: slide down animation */ #hnav-mega-dropdown.show { animation: erpMegaIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes erpMegaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Mega dropdown module title: hover accent */ .erp-mega-module { position: relative; padding: 0.25rem 0.5rem; margin: -0.25rem -0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; } .erp-mega-module:hover { background-color: var(--erp-bg-muted); } /* Mega dropdown links: animated hover bar + bg */ .erp-mega-link { position: relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .erp-mega-link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 2px; height: 50%; border-radius: 1px; background: var(--erp-primary); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .erp-mega-link:hover { padding-left: 0.75rem !important; background-color: var(--erp-bg-muted) !important; } .erp-mega-link:hover::before { transform: translateY(-50%) scaleY(1); } /* Active mega link: permanent bar */ .erp-mega-link.bg-zinc-900::before, .erp-mega-link[class*="bg-zinc-900"]::before { transform: translateY(-50%) scaleY(1) !important; background: var(--erp-primary-fg) !important; } /* Mega dropdown: stagger children */ #hnav-mega-content>div>div { animation: erpMegaItemIn 0.3s ease-out forwards; } #hnav-mega-content>div>div:nth-child(1) { animation-delay: 0.03s; } #hnav-mega-content>div>div:nth-child(2) { animation-delay: 0.06s; } #hnav-mega-content>div>div:nth-child(3) { animation-delay: 0.09s; } #hnav-mega-content>div>div:nth-child(4) { animation-delay: 0.12s; } #hnav-mega-content>div>div:nth-child(5) { animation-delay: 0.15s; } #hnav-mega-content>div>div:nth-child(6) { animation-delay: 0.18s; } #hnav-mega-content>div>div:nth-child(7) { animation-delay: 0.21s; } @keyframes erpMegaItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Horizontal header: entrance animation */ .erp-header { animation: erpHeaderIn 0.4s ease-out; } @keyframes erpHeaderIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════ DROPDOWNS, TOAST, MODAL, COMMAND PALETTE ═══════════════════════════════════════════════════════════════════ */ .erp-dropdown { display: none; position: absolute; z-index: 50; } .erp-dropdown.show { display: block; animation: fadeIn 0.15s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .erp-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .erp-toast { pointer-events: auto; animation: slideInRight 0.2s ease-out; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .erp-toast.removing { animation: slideOutRight 0.2s ease-in forwards; } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes erpToastProgress { from { width: 100%; } to { width: 0%; } } .erp-toast-progress { transition: none; } .erp-modal-backdrop { position: fixed; inset: 0; background: var(--erp-overlay); z-index: 9998; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease-out; } .erp-modal-content { animation: modalIn 0.15s ease-out; } @keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .erp-command-palette { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 20vh; background: var(--erp-overlay); } .erp-command-input:focus { outline: none; } /* ═══════════════════════════════════════════════════════════════════ BADGE, WIZARD, FOCUS ═══════════════════════════════════════════════════════════════════ */ .erp-badge { display: inline-flex; align-items: center; border-radius: 0.375rem; border: 1px solid; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; } .erp-wizard-step { position: relative; } .erp-wizard-step::after { content: ''; position: absolute; top: 50%; left: 100%; width: 100%; height: 2px; background: var(--erp-border); transform: translateY(-50%); } .erp-wizard-step:last-child::after { display: none; } .erp-wizard-step.completed::after { background: var(--erp-primary); } .erp-focus-ring:focus { outline: none; box-shadow: 0 0 0 2px var(--erp-bg), 0 0 0 4px var(--erp-primary); } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR NAV STYLING ═══════════════════════════════════════════════════════════════════ */ /* Accordion expand animation */ .erp-anim-expand { animation: erpSlideDown 0.25s ease-out; } @keyframes erpSlideDown { from { opacity: 0; max-height: 0; transform: translateY(-4px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } } /* Active parent menu item — primary-tinted bg in both modes */ .erp-nav-parent-active { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; border-left: 2px solid var(--erp-primary); border-radius: 0 0.375rem 0.375rem 0; } html.dark .erp-nav-parent-active { background-color: rgba(var(--erp-primary-glow-rgb), 0.18) !important; color: var(--erp-text) !important; border-left-color: var(--erp-primary); } html.dark .erp-nav-parent-active span, html.dark .erp-nav-parent-active i, html.dark .erp-nav-parent-active .erp-module-chevron, html.dark .erp-nav-parent-active .erp-page-chevron { color: var(--erp-text) !important; } /* Light mode: force darker text on inactive sidebar nav items */ .erp-sidebar .erp-nav-link:not(.erp-nav-active) { color: var(--erp-text-secondary) !important; } .erp-sidebar .erp-nav-link:not(.erp-nav-active) span { color: var(--erp-text-secondary) !important; } .erp-sidebar .erp-module-toggle:not(.erp-nav-parent-active) { color: var(--erp-text) !important; } .erp-sidebar .erp-module-toggle:not(.erp-nav-parent-active) span { color: var(--erp-text) !important; } .erp-sidebar .erp-page-toggle:not(.erp-nav-parent-active) { color: var(--erp-text-secondary) !important; } :root .erp-sidebar .erp-sidebar-group:not(.erp-nav-parent-active) { color: var(--erp-text-tertiary) !important; } html.dark .erp-sidebar .erp-sidebar-group:not(.erp-nav-parent-active) { color: var(--erp-text-tertiary) !important; } html.dark .erp-sidebar .erp-sidebar-group.erp-group-active { color: var(--erp-text) !important; } .erp-sidebar .erp-module-chevron, .erp-sidebar .erp-page-chevron { color: var(--erp-text-faint) !important; } /* Dark mode: revert to theme colors for sidebar */ html.dark .erp-sidebar .erp-nav-link:not(.erp-nav-active), html.dark .erp-sidebar .erp-nav-link:not(.erp-nav-active) span { color: var(--erp-text-secondary) !important; } html.dark .erp-sidebar .erp-module-toggle:not(.erp-nav-parent-active), html.dark .erp-sidebar .erp-module-toggle:not(.erp-nav-parent-active) span { color: var(--erp-text-medium) !important; } html.dark .erp-sidebar .erp-page-toggle:not(.erp-nav-parent-active) { color: var(--erp-text-secondary) !important; } /* Active sidebar group: bright text + children in dark mode */ html.dark .erp-sidebar .erp-sidebar-group.erp-group-active, html.dark .erp-sidebar .erp-sidebar-group.erp-group-active span, html.dark .erp-sidebar .erp-sidebar-group.erp-group-active i { color: var(--erp-text) !important; } html.dark .erp-sidebar .erp-module-chevron, html.dark .erp-sidebar .erp-page-chevron { color: var(--erp-text-tertiary) !important; } /* Chevron transitions */ .erp-module-chevron, .erp-page-chevron, .fa-chevron-down { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Nav link: hover background with theme tint */ .erp-nav-link { position: relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .erp-nav-link:hover { background-color: var(--erp-bg-muted) !important; padding-left: 0.75rem; } .erp-nav-link::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0); width: 3px; height: 60%; border-radius: 0 2px 2px 0; background: var(--erp-primary); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .erp-nav-link:hover::before { transform: translateY(-50%) scaleY(1); } /* Active nav link: permanent indicator + white text/icons */ .erp-nav-active { box-shadow: 0 1px 3px rgba(var(--erp-black-rgb), 0.1); } html.dark .erp-nav-active { color: #ffffff !important; } html.dark .erp-nav-active span { color: #ffffff !important; } html.dark .erp-nav-active .bg-white { background-color: #ffffff !important; } .erp-nav-active::before { transform: translateY(-50%) scaleY(1) !important; background: var(--erp-primary-fg) !important; } /* Module toggle hover */ .erp-module-toggle:hover, .erp-page-toggle:hover { background-color: var(--erp-bg-muted) !important; } /* Sidebar group hover */ .erp-sidebar-group:hover { background-color: var(--erp-bg-muted) !important; } /* Mega dropdown link hover */ .erp-mega-link { transition: all 0.15s ease; } .erp-mega-link:hover { padding-left: 0.75rem; } /* ═══════════════════════════════════════════════════════════════════ PREMIUM ANIMATIONS — Stripe/Linear level polish ═══════════════════════════════════════════════════════════════════ */ :root { --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0, 1); } html { scroll-behavior: smooth; } /* ── AMBIENT: floating gradient orb behind content ────────────── */ body.bg-zinc-50::before { content: ''; position: fixed; top: -20%; left: -10%; width: 60vw; height: 60vh; background: radial-gradient(circle, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: -1; animation: erpOrbFloat 20s ease-in-out infinite alternate; } body.bg-zinc-50::after { content: ''; position: fixed; bottom: -30%; right: -15%; width: 50vw; height: 50vh; background: radial-gradient(circle, rgba(var(--erp-primary-deep-rgb), 0.03) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: -1; animation: erpOrbFloat2 25s ease-in-out infinite alternate; } @keyframes erpOrbFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 10vh) scale(1.1); } 100% { transform: translate(-5vw, 5vh) scale(0.95); } } @keyframes erpOrbFloat2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10vw, -8vh) scale(1.15); } 100% { transform: translate(5vw, -5vh) scale(0.9); } } /* Dark mode orbs — rich ambient glow visible through glass */ html.dark body.bg-zinc-50::before { background: radial-gradient(circle, rgba(var(--erp-primary-glow-rgb), 0.2) 0%, transparent 60%); width: 85vw; height: 85vh; } html.dark body.bg-zinc-50::after { background: radial-gradient(circle, rgba(var(--erp-primary-deep-rgb), 0.18) 0%, transparent 60%); width: 75vw; height: 60vh; } /* ── PAGE ENTRANCE: orchestrated cascade ──────────────────────── */ .erp-content-area { animation: erpPageIn 0.6s var(--ease-smooth) forwards; } @keyframes erpPageIn { from { opacity: 0; filter: blur(4px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } /* Heading: typewriter-feel entrance */ .erp-content-area h1 { animation: erpHeadReveal 0.7s var(--ease-spring) 0.1s forwards; } @keyframes erpHeadReveal { 0% { opacity: 0; transform: translateY(8px); clip-path: inset(0 100% 0 0); } 60% { clip-path: inset(0 0% 0 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0% 0 0); } } /* Description text: fade after heading */ .erp-content-area h1+p, .erp-content-area h1~.text-sm { animation: erpSubFade 0.5s var(--ease-smooth) 0.3s forwards; } @keyframes erpSubFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── CARDS: stagger with blur + scale ─────────────────────────── */ .erp-content-area .rounded-lg.border { animation: erpCardReveal 0.55s var(--ease-spring) forwards; } .erp-content-area .rounded-lg.border:nth-child(1) { animation-delay: 0.06s; } .erp-content-area .rounded-lg.border:nth-child(2) { animation-delay: 0.12s; } .erp-content-area .rounded-lg.border:nth-child(3) { animation-delay: 0.18s; } .erp-content-area .rounded-lg.border:nth-child(4) { animation-delay: 0.24s; } .erp-content-area .rounded-lg.border:nth-child(5) { animation-delay: 0.30s; } .erp-content-area .rounded-lg.border:nth-child(6) { animation-delay: 0.36s; } @keyframes erpCardReveal { 0% { opacity: 0; filter: blur(6px); transform: translateY(20px) scale(0.97); } 70% { filter: blur(0); } 100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } } /* Card hover: premium lift + glow */ .rounded-lg.border.shadow-sm { transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring), border-color 0.3s ease; } /* ── KPI NUMBERS: counter-style pop ───────────────────────────── */ .text-2xl.font-bold, .text-xl.font-bold { animation: erpKpiReveal 0.7s var(--ease-bounce) 0.2s forwards; } @keyframes erpKpiReveal { 0% { opacity: 0; transform: scale(0.7) translateY(8px); filter: blur(4px); } 50% { filter: blur(0); } 70% { transform: scale(1.05) translateY(-2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* ── CHARTS: no CSS animation on canvas — can break Chart.js rendering ── */ /* ── TABLE ROWS: wave stagger ─────────────────────────────────── */ table.dataTable tbody tr { animation: erpRowWave 0.4s var(--ease-spring) forwards; } table.dataTable tbody tr:nth-child(1) { animation-delay: 0.03s; } table.dataTable tbody tr:nth-child(2) { animation-delay: 0.06s; } table.dataTable tbody tr:nth-child(3) { animation-delay: 0.09s; } table.dataTable tbody tr:nth-child(4) { animation-delay: 0.12s; } table.dataTable tbody tr:nth-child(5) { animation-delay: 0.15s; } table.dataTable tbody tr:nth-child(6) { animation-delay: 0.18s; } table.dataTable tbody tr:nth-child(7) { animation-delay: 0.21s; } table.dataTable tbody tr:nth-child(8) { animation-delay: 0.24s; } table.dataTable tbody tr:nth-child(9) { animation-delay: 0.27s; } table.dataTable tbody tr:nth-child(10) { animation-delay: 0.30s; } @keyframes erpRowWave { 0% { opacity: 0; transform: translateX(-10px) scaleX(0.98); } 60% { transform: translateX(2px) scaleX(1.001); } 100% { opacity: 1; transform: translateX(0) scaleX(1); } } /* Row hover: glow band */ table.dataTable tbody tr { transition: background-color 0.2s ease, box-shadow 0.2s ease; } table.dataTable tbody tr:hover { box-shadow: inset 3px 0 0 var(--erp-primary), 0 1px 4px rgba(var(--erp-primary-deep-rgb), 0.04); } /* ── BADGES: staggered pop ────────────────────────────────────── */ .inline-flex.items-center.rounded-md.border[class*="px-2"] { animation: erpBadgeBounce 0.4s var(--ease-bounce) forwards; } @keyframes erpBadgeBounce { 0% { opacity: 0; transform: scale(0.6); filter: blur(2px); } 60% { transform: scale(1.08); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } } /* ── BUTTONS: premium press + shimmer ─────────────────────────── */ button, [role="button"], a.inline-flex { transition: transform 0.25s var(--ease-spring), box-shadow 0.3s ease, background-color 0.25s ease, color 0.2s ease; } /* Shimmer needs overflow:hidden + position:relative — only on actual buttons/links, not badge dots */ button.bg-zinc-900[class*="rounded"], a.bg-zinc-900[class*="rounded"], button.bg-emerald-600[class*="rounded"], a.bg-emerald-600[class*="rounded"], button.bg-emerald-700[class*="rounded"], a.bg-emerald-700[class*="rounded"], button.bg-red-500[class*="rounded"], a.bg-red-500[class*="rounded"], button.bg-red-600[class*="rounded"], a.bg-red-600[class*="rounded"], button.bg-amber-500[class*="rounded"], a.bg-amber-500[class*="rounded"], button.bg-amber-600[class*="rounded"], a.bg-amber-600[class*="rounded"], button.bg-blue-500[class*="rounded"], a.bg-blue-500[class*="rounded"], button.bg-blue-600[class*="rounded"], a.bg-blue-600[class*="rounded"] { position: relative; overflow: hidden; } button:active:not(:disabled), [role="button"]:active:not(:disabled) { transform: scale(0.95); transition: transform 0.1s ease; } /* Shimmer effect on solid buttons only (not badge dots/spans) */ button.bg-zinc-900[class*="rounded"]::after, a.bg-zinc-900[class*="rounded"]::after, button.bg-emerald-600[class*="rounded"]::after, a.bg-emerald-600[class*="rounded"]::after, button.bg-emerald-700[class*="rounded"]::after, a.bg-emerald-700[class*="rounded"]::after, button.bg-red-500[class*="rounded"]::after, a.bg-red-500[class*="rounded"]::after, button.bg-red-600[class*="rounded"]::after, a.bg-red-600[class*="rounded"]::after, button.bg-amber-500[class*="rounded"]::after, a.bg-amber-500[class*="rounded"]::after, button.bg-amber-600[class*="rounded"]::after, a.bg-amber-600[class*="rounded"]::after, button.bg-blue-500[class*="rounded"]::after, a.bg-blue-500[class*="rounded"]::after, button.bg-blue-600[class*="rounded"]::after, a.bg-blue-600[class*="rounded"]::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--erp-white-rgb), 0.12), transparent); transition: left 0.5s ease; pointer-events: none; } button.bg-zinc-900[class*="rounded"]:hover::after, a.bg-zinc-900[class*="rounded"]:hover::after, button.bg-emerald-600[class*="rounded"]:hover::after, a.bg-emerald-600[class*="rounded"]:hover::after, button.bg-emerald-700[class*="rounded"]:hover::after, a.bg-emerald-700[class*="rounded"]:hover::after, button.bg-red-500[class*="rounded"]:hover::after, a.bg-red-500[class*="rounded"]:hover::after, button.bg-red-600[class*="rounded"]:hover::after, a.bg-red-600[class*="rounded"]:hover::after, button.bg-amber-500[class*="rounded"]:hover::after, a.bg-amber-500[class*="rounded"]:hover::after, button.bg-amber-600[class*="rounded"]:hover::after, a.bg-amber-600[class*="rounded"]:hover::after, button.bg-blue-500[class*="rounded"]:hover::after, a.bg-blue-500[class*="rounded"]:hover::after, button.bg-blue-600[class*="rounded"]:hover::after, a.bg-blue-600[class*="rounded"]:hover::after { left: 120%; } /* ── INPUT FOCUS: glow ring expand ────────────────────────────── */ input, select, textarea { transition: border-color 0.3s ease, box-shadow 0.3s var(--ease-spring), transform 0.2s ease; } input:focus, select:focus, textarea:focus { transform: scale(1.005); } /* ── CHECKBOX/RADIO: spring tick ──────────────────────────────── */ input[type="checkbox"]:checked, input[type="radio"]:checked { animation: erpTickSpring 0.3s var(--ease-bounce); } @keyframes erpTickSpring { 0% { transform: scale(0.7) rotate(-5deg); } 50% { transform: scale(1.15) rotate(2deg); } 100% { transform: scale(1) rotate(0); } } /* ── TOGGLE: elastic slide ────────────────────────────────────── */ .erp-toggle span { transition: transform 0.3s var(--ease-bounce); } .erp-toggle { transition: background-color 0.3s ease; } /* ── DROPDOWN: perspective reveal ─────────────────────────────── */ .erp-dropdown.show { animation: erpDropReveal 0.25s var(--ease-spring); transform-origin: top center; } @keyframes erpDropReveal { 0% { opacity: 0; transform: perspective(600px) rotateX(-6deg) translateY(-6px) scale(0.98); } 100% { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0) scale(1); } } /* ── MODAL: cinematic entrance ────────────────────────────────── */ .erp-modal-backdrop { animation: erpBackdropIn 0.3s ease-out; } @keyframes erpBackdropIn { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } } .erp-modal-content { animation: erpModalReveal 0.4s var(--ease-spring); } @keyframes erpModalReveal { 0% { opacity: 0; transform: scale(0.9) translateY(20px); filter: blur(4px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* ── TOAST: elastic slide ─────────────────────────────────────── */ .erp-toast { animation: erpToastElastic 0.5s var(--ease-bounce); } @keyframes erpToastElastic { 0% { opacity: 0; transform: translateX(120%) scale(0.9); } 40% { transform: translateX(-8px) scale(1.02); } 70% { transform: translateX(3px) scale(0.99); } 100% { opacity: 1; transform: translateX(0) scale(1); } } .erp-toast.removing { animation: erpToastOut 0.3s var(--ease-smooth) forwards; } @keyframes erpToastOut { 0% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(80px) scale(0.95); } } /* ── SIDEBAR: cascade in ──────────────────────────────────────── */ .erp-nav-group { animation: erpNavGroupSlide 0.35s var(--ease-spring) forwards; } .erp-nav-group:nth-child(1) { animation-delay: 0.05s; } .erp-nav-group:nth-child(2) { animation-delay: 0.08s; } .erp-nav-group:nth-child(3) { animation-delay: 0.11s; } .erp-nav-group:nth-child(4) { animation-delay: 0.14s; } .erp-nav-group:nth-child(5) { animation-delay: 0.17s; } .erp-nav-group:nth-child(6) { animation-delay: 0.20s; } .erp-nav-group:nth-child(7) { animation-delay: 0.23s; } .erp-nav-group:nth-child(8) { animation-delay: 0.26s; } .erp-nav-group:nth-child(9) { animation-delay: 0.29s; } @keyframes erpNavGroupSlide { 0% { opacity: 0; transform: translateX(-16px); filter: blur(3px); } 100% { opacity: 1; transform: translateX(0); filter: blur(0); } } /* Nav link: press ripple */ .erp-nav-link:active, .erp-module-toggle:active, .erp-page-toggle:active { transform: scale(0.97); transition: transform 0.08s ease; } /* Accordion expand: spring */ .erp-anim-expand { animation: erpSpringExpand 0.35s var(--ease-spring); } @keyframes erpSpringExpand { 0% { opacity: 0; max-height: 0; transform: translateY(-8px); } 70% { transform: translateY(1px); } 100% { opacity: 1; max-height: 2000px; transform: translateY(0); } } /* ── KANBAN: drag physics ─────────────────────────────────────── */ .kanban-card { transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease; } .kanban-card:hover { transform: translateY(-2px) rotate(-0.3deg); } .kanban-card[draggable="true"]:active { transform: rotate(1.5deg) scale(1.04); box-shadow: 0 16px 40px rgba(var(--erp-primary-deep-rgb), 0.15); z-index: 100; transition: transform 0.1s ease, box-shadow 0.1s ease; } /* ── AVATARS: ring pulse ──────────────────────────────────────── */ .rounded-full[class*="bg-"]:hover { animation: erpRingPulse 0.6s ease-out; } @keyframes erpRingPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--erp-primary-glow-rgb), 0.4); } 100% { box-shadow: 0 0 0 8px rgba(var(--erp-primary-glow-rgb), 0); } } /* ── HEADER/FOOTER: slide entrance — no transform persistence ─── */ .erp-header { animation: erpHeaderFade 0.4s ease-out; } @keyframes erpHeaderFade { from { opacity: 0; } to { opacity: 1; } } .erp-footer { animation: erpFooterSlide 0.5s var(--ease-smooth) 0.3s forwards; } @keyframes erpFooterSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Sidebar entrance: only on desktop, never override JS transform */ @media (min-width: 1024px) { .erp-sidebar { animation: erpSidebarSlide 0.5s var(--ease-smooth) 0.1s forwards; } } @keyframes erpSidebarSlide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } /* ── ICON BUTTONS: micro interactions ─────────────────────────── */ button[title]:hover i.fa-solid, button[title]:hover i.fa-regular { transition: transform 0.25s var(--ease-bounce); transform: scale(1.15); } /* Dark mode toggle: spin */ #dark-mode-btn:hover .erp-dark-icon, #dark-mode-btn:hover .erp-light-icon { animation: erpMoonSpin 0.4s var(--ease-spring); } @keyframes erpMoonSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(15deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } } /* Notification bell: ring on hover */ #notification-btn:hover i { animation: erpBellRing 0.5s var(--ease-bounce); } @keyframes erpBellRing { 0% { transform: rotate(0); } 20% { transform: rotate(12deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } } /* ── PROGRESS BARS: smooth fill ───────────────────────────────── */ .h-2.rounded-full>div, .h-1\.5.rounded-full>div, .h-1.rounded-full>div { transition: width 0.8s var(--ease-spring); } /* ── LINKS: smart underline ───────────────────────────────────── */ a[href]:not(.erp-nav-link):not(.erp-mega-link):not([class*="rounded"]):not([class*="flex"]) { text-decoration-color: transparent; transition: text-decoration-color 0.3s ease, color 0.2s ease; } a[href]:not(.erp-nav-link):not(.erp-mega-link):not([class*="rounded"]):not([class*="flex"]):hover { text-decoration-color: var(--erp-primary); } /* ── FOCUS: ring glow ─────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--erp-bg), 0 0 0 4px var(--erp-primary); transition: box-shadow 0.3s var(--ease-spring); } /* ── DARK MODE TOGGLE: smooth theme shift ─────────────────────── */ body, .erp-header, .erp-sidebar, .erp-footer, .erp-content-area, .rounded-lg.border, .erp-hnav-wrapper { transition: background-color 0.5s var(--ease-smooth), color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* ── SKELETON SHIMMER: premium loading ────────────────────────── */ .animate-pulse { animation: erpShimmer 1.5s ease-in-out infinite !important; background-size: 200% 100% !important; } @keyframes erpShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .animate-pulse .bg-zinc-200, .animate-pulse .bg-zinc-100 { background-image: linear-gradient(90deg, var(--erp-bg-muted), var(--erp-bg), var(--erp-bg-muted)) !important; background-size: 200% 100%; animation: erpShimmer 1.5s ease-in-out infinite; } /* ── COMMAND PALETTE: dramatic entrance ───────────────────────── */ .erp-command-palette>div>div { animation: erpCommandIn 0.35s var(--ease-spring); } @keyframes erpCommandIn { 0% { opacity: 0; transform: translateY(-20px) scale(0.95); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ── MEGA DROPDOWN: cascade columns ───────────────────────────── */ #hnav-mega-dropdown.show { animation: erpMegaReveal 0.3s var(--ease-spring); } @keyframes erpMegaReveal { 0% { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0% 0); } } #hnav-mega-content>div>div { animation: erpMegaColIn 0.35s var(--ease-spring) forwards; } #hnav-mega-content>div>div:nth-child(1) { animation-delay: 0.04s; } #hnav-mega-content>div>div:nth-child(2) { animation-delay: 0.08s; } #hnav-mega-content>div>div:nth-child(3) { animation-delay: 0.12s; } #hnav-mega-content>div>div:nth-child(4) { animation-delay: 0.16s; } #hnav-mega-content>div>div:nth-child(5) { animation-delay: 0.20s; } #hnav-mega-content>div>div:nth-child(6) { animation-delay: 0.24s; } #hnav-mega-content>div>div:nth-child(7) { animation-delay: 0.28s; } @keyframes erpMegaColIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* ── OVERLAY: fade + blur ─────────────────────────────────────── */ .erp-overlay.active { animation: erpOverlayReveal 0.3s ease-out; } @keyframes erpOverlayReveal { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(4px); } } /* ── WIZARD STEP: glow transition ─────────────────────────────── */ .wizard-circle { transition: background-color 0.3s ease, transform 0.3s var(--ease-bounce), box-shadow 0.3s ease; } .wizard-circle:not(.bg-zinc-100) { box-shadow: 0 0 12px rgba(var(--erp-primary-deep-rgb), 0.2); } /* ═══════════════════════════════════════════════════════════════════ DARK MODE — enhanced animation visibility + hover effects ═══════════════════════════════════════════════════════════════════ */ /* Card hover: lift + enhanced glow in dark mode — main rules in HOVER: CARDS section */ /* Solid buttons: glowing aura in dark */ html.dark .bg-zinc-900[class*="rounded"] { box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.2), 0 2px 4px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } html.dark .bg-zinc-900[class*="rounded"]:hover { box-shadow: 0 0 24px rgba(var(--erp-primary-glow-rgb), 0.3), 0 4px 16px rgba(var(--erp-black-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } html.dark .bg-emerald-600[class*="rounded"], html.dark .bg-emerald-700[class*="rounded"] { box-shadow: 0 0 12px rgba(var(--erp-success-rgb), 0.2), 0 2px 4px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } html.dark .bg-emerald-600[class*="rounded"]:hover, html.dark .bg-emerald-700[class*="rounded"]:hover { box-shadow: 0 0 24px rgba(var(--erp-success-rgb), 0.3), 0 4px 16px rgba(var(--erp-black-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } html.dark .bg-red-500[class*="rounded"], html.dark .bg-red-600[class*="rounded"] { box-shadow: 0 0 12px rgba(var(--erp-danger-rgb), 0.2), 0 2px 4px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } html.dark .bg-red-500[class*="rounded"]:hover, html.dark .bg-red-600[class*="rounded"]:hover { box-shadow: 0 0 24px rgba(var(--erp-danger-rgb), 0.3), 0 4px 16px rgba(var(--erp-black-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } html.dark .bg-amber-500[class*="rounded"], html.dark .bg-amber-600[class*="rounded"] { box-shadow: 0 0 12px rgba(var(--erp-warning-rgb), 0.2), 0 2px 4px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } html.dark .bg-amber-500[class*="rounded"]:hover, html.dark .bg-amber-600[class*="rounded"]:hover { box-shadow: 0 0 24px rgba(var(--erp-warning-rgb), 0.3), 0 4px 16px rgba(var(--erp-black-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } html.dark .bg-blue-500[class*="rounded"], html.dark .bg-blue-600[class*="rounded"] { box-shadow: 0 0 12px rgba(var(--erp-info-blue-rgb), 0.2), 0 2px 4px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } html.dark .bg-blue-500[class*="rounded"]:hover, html.dark .bg-blue-600[class*="rounded"]:hover { box-shadow: 0 0 24px rgba(var(--erp-info-blue-rgb), 0.3), 0 4px 16px rgba(var(--erp-black-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } /* Shimmer on dark solid buttons: brighter streak */ html.dark .bg-zinc-900[class*="rounded"]::after, html.dark .bg-emerald-600[class*="rounded"]::after, html.dark .bg-emerald-700[class*="rounded"]::after, html.dark .bg-red-500[class*="rounded"]::after, html.dark .bg-red-600[class*="rounded"]::after, html.dark .bg-amber-500[class*="rounded"]::after, html.dark .bg-amber-600[class*="rounded"]::after, html.dark .bg-blue-500[class*="rounded"]::after, html.dark .bg-blue-600[class*="rounded"]::after { background: linear-gradient(90deg, transparent, rgba(var(--erp-white-rgb), 0.2), transparent); } /* Subtle top-edge shimmer on dark cards — runs once on page load */ html.dark .rounded-lg.border.shadow-sm { position: relative; overflow: hidden; } html.dark .rounded-lg.border.shadow-sm::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(var(--erp-white-rgb), 0.15) 20%, rgba(var(--erp-primary-glow-rgb), 0.2) 50%, rgba(var(--erp-white-rgb), 0.15) 80%, transparent 100%); opacity: 0; animation: erpShimmerOnce 1.5s ease 0.8s forwards; pointer-events: none; border-radius: inherit; } @keyframes erpShimmerOnce { 0% { opacity: 0; transform: translateX(-100%); } 40% { opacity: 1; } 100% { opacity: 0.4; transform: translateX(0); } } /* Table row hover: glowing left bar + bg */ html.dark table.dataTable tbody tr:hover { box-shadow: inset 3px 0 0 var(--erp-primary), 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.06); background-color: rgba(var(--erp-primary-glow-rgb), 0.05) !important; } /* Sidebar active nav: glow */ html.dark .erp-sidebar a.bg-zinc-900 { box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.2), 0 2px 6px rgba(var(--erp-black-rgb), 0.2) !important; } /* Sidebar nav link hover: visible bg + left bar glow */ html.dark .erp-nav-link:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; } html.dark .erp-nav-link:hover::before { box-shadow: 0 0 6px rgba(var(--erp-primary-glow-rgb), 0.4); } /* Input focus: neon ring */ html.dark input:focus, html.dark select:focus, html.dark textarea:focus { box-shadow: 0 0 0 2px rgba(var(--erp-primary-glow-rgb), 0.3), 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.1), inset 0 1px 2px rgba(var(--erp-black-rgb), 0.2) !important; } /* Checkbox/radio: glow on check */ html.dark input[type="checkbox"]:checked, html.dark input[type="radio"]:checked { box-shadow: 0 0 8px rgba(var(--erp-primary-glow-rgb), 0.3); } /* Dropdown: dark glow border */ html.dark .erp-dropdown.show { box-shadow: 0 0 20px rgba(var(--erp-primary-glow-rgb), 0.08), 0 8px 32px rgba(var(--erp-black-rgb), 0.4), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.1); } /* Modal: dark dramatic glow */ html.dark .erp-modal-content { box-shadow: 0 0 30px rgba(var(--erp-primary-glow-rgb), 0.1), 0 24px 80px rgba(var(--erp-black-rgb), 0.5), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.08) !important; } /* Toast: dark glow */ html.dark .erp-toast { box-shadow: 0 0 16px rgba(var(--erp-primary-glow-rgb), 0.08), 0 8px 32px rgba(var(--erp-black-rgb), 0.4) !important; } /* Command palette: dark glow */ html.dark .erp-command-palette>div>div { box-shadow: 0 0 40px rgba(var(--erp-primary-glow-rgb), 0.1), 0 16px 64px rgba(var(--erp-black-rgb), 0.5), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.08) !important; } /* Mega dropdown: dark edge glow */ html.dark #hnav-mega-dropdown.show { box-shadow: 0 0 20px rgba(var(--erp-primary-glow-rgb), 0.06), 0 8px 32px rgba(var(--erp-black-rgb), 0.4); } /* Avatar hover: brighter pulse in dark */ html.dark .rounded-full[class*="bg-"]:hover { animation: erpDarkRingPulse 0.6s ease-out; } @keyframes erpDarkRingPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--erp-primary-glow-rgb), 0.5); } 100% { box-shadow: 0 0 0 10px rgba(var(--erp-primary-glow-rgb), 0); } } /* Kanban card hover: dark glow */ html.dark .kanban-card:hover { box-shadow: 0 0 16px rgba(var(--erp-primary-glow-rgb), 0.1), 0 8px 24px rgba(var(--erp-black-rgb), 0.3); } html.dark .kanban-card[draggable="true"]:active { box-shadow: 0 0 24px rgba(var(--erp-primary-glow-rgb), 0.2), 0 16px 40px rgba(var(--erp-black-rgb), 0.4); } /* Wizard circle: dark glow */ html.dark .wizard-circle:not(.bg-zinc-100) { box-shadow: 0 0 16px rgba(var(--erp-primary-glow-rgb), 0.25); } /* Tab active: dark bottom glow */ html.dark [data-tab-target].border-b-2.border-zinc-900 { text-shadow: 0 0 8px rgba(var(--erp-primary-glow-rgb), 0.3); } /* Dark hover on hnav items: visible bg */ html.dark .erp-hnav-item:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; } html.dark .erp-hnav-item::after { background: var(--erp-primary); box-shadow: 0 0 6px rgba(var(--erp-primary-glow-rgb), 0.4); } /* Mega dropdown links hover in dark */ html.dark .erp-mega-link:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; } /* Badge: subtle glow in dark */ html.dark .inline-flex.items-center.rounded-md.border[class*="px-2"] { box-shadow: 0 0 6px rgba(var(--erp-primary-glow-rgb), 0.05); } /* Dark scrollbar glow on hover */ html.dark ::-webkit-scrollbar-thumb:hover { box-shadow: 0 0 4px rgba(var(--erp-primary-glow-rgb), 0.2); } /* ═══════════════════════════════════════════════════════════════════ SITE-WIDE HOVER + CLICK EFFECTS — Light & Dark ═══════════════════════════════════════════════════════════════════ */ /* ── UNIVERSAL: every interactive element ─────────────────────── */ button, a, [role="button"], select, input, textarea, .rounded-lg.border, .rounded-md.border, label[class*="cursor"], .cursor-pointer, .cursor-move { transition: transform 0.25s var(--ease-spring), box-shadow 0.3s var(--ease-spring), border-color 0.25s ease, background-color 0.25s ease, color 0.2s ease; } /* ═══ HOVER: BORDERS ══════════════════════════════════════════════ */ /* All bordered elements: border brightens on hover */ .rounded-lg.border:hover, .rounded-md.border:hover { border-color: var(--erp-primary) !important; } /* Inputs/selects/textareas: border glows on hover (before focus) */ input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--erp-border-strong) !important; } /* Bordered items in lists */ .divide-y>div, .divide-y>a, .space-y-1>div, .space-y-2>div { transition: transform 0.2s var(--ease-spring), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ═══ HOVER: CARDS & PANELS ══════════════════════════════════════ */ /* Cards: shimmer setup — needs position relative + overflow hidden */ .rounded-lg.border.shadow-sm { position: relative; overflow: hidden; } /* Cards: shimmer pseudo-element */ .rounded-lg.border.shadow-sm::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(var(--erp-primary-glow-rgb), 0.06), transparent); transition: left 0.6s ease; pointer-events: none; z-index: 1; } .rounded-lg.border.shadow-sm:hover::after { left: 120%; } /* Light mode: card hover — lift + prominent border glow + shadow */ .rounded-lg.border.shadow-sm:hover { transform: translateY(-2px); border-color: rgba(var(--erp-primary-glow-rgb), 0.2) !important; box-shadow: 0 2px 4px rgba(var(--erp-primary-deep-rgb), 0.06), 0 12px 32px rgba(var(--erp-primary-deep-rgb), 0.1), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.08), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.9); background-image: linear-gradient(135deg, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 50%); } /* Dark mode: card hover — lift + glow aura */ html.dark .rounded-lg.border.shadow-sm::after { background: linear-gradient(90deg, transparent, rgba(var(--erp-primary-glow-rgb), 0.1), transparent); } html.dark .rounded-lg.border.shadow-sm:hover { border-color: rgba(var(--erp-primary-glow-rgb), 0.25) !important; box-shadow: 0 0 30px rgba(var(--erp-primary-glow-rgb), 0.12), 0 8px 32px rgba(var(--erp-black-rgb), 0.25), 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.12), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1); background-image: linear-gradient(145deg, rgba(var(--erp-primary-glow-rgb), 0.06) 0%, transparent 50%); } /* ═══ HOVER: LIST ITEMS ══════════════════════════════════════════ */ /* List items: slide + left accent + tinted bg */ .divide-y>div:hover, .divide-y>a:hover { transform: translateX(3px); background-color: var(--erp-primary-light) !important; box-shadow: inset 3px 0 0 var(--erp-primary); border-radius: 0.375rem; } html.dark .divide-y>div:hover, html.dark .divide-y>a:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; box-shadow: inset 3px 0 0 var(--erp-primary), 0 0 10px rgba(var(--erp-primary-glow-rgb), 0.04); } /* ═══ HOVER: BUTTONS — glow + tint for ALL variants ═════════════ */ /* All buttons: lift on hover */ button:hover:not(:disabled), [role="button"]:hover, a.inline-flex:hover { transform: translateY(-1px); } /* ── PRIMARY: deeper glow ─────────────────────────────────────── */ .bg-zinc-900[class*="rounded"]:hover { box-shadow: 0 4px 16px rgba(var(--erp-primary-deep-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important; } html.dark .bg-zinc-900[class*="rounded"]:hover { box-shadow: 0 0 20px rgba(var(--erp-primary-glow-rgb), 0.25), 0 4px 16px rgba(var(--erp-black-rgb), 0.2), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.08) !important; } /* ── OUTLINE / SECONDARY: tinted bg + border glow ─────────────── */ button.border.bg-white:hover, a.border.bg-white:hover, button.border.hover\:bg-zinc-50:hover, a.border.hover\:bg-zinc-50:hover, .h-9.border.hover\:bg-zinc-50:hover, .h-8.border.hover\:bg-zinc-50:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; box-shadow: 0 0 0 1px var(--erp-primary), 0 4px 12px rgba(var(--erp-primary-deep-rgb), 0.12); } button.border.bg-white:hover i, a.border.bg-white:hover i, button.border.hover\:bg-zinc-50:hover i, a.border.hover\:bg-zinc-50:hover i { color: var(--erp-primary) !important; } html.dark button.border:hover, html.dark a.border:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary) !important; box-shadow: 0 0 0 1px var(--erp-primary), 0 0 16px rgba(var(--erp-primary-glow-rgb), 0.12); } html.dark button.border:hover i, html.dark a.border:hover i { color: var(--erp-primary) !important; } /* ── GHOST: bg appears + subtle glow ──────────────────────────── */ button.hover\:bg-zinc-100:hover, a.hover\:bg-zinc-100:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; box-shadow: 0 2px 8px rgba(var(--erp-primary-deep-rgb), 0.08); } html.dark button.hover\:bg-zinc-100:hover, html.dark a.hover\:bg-zinc-100:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; color: var(--erp-primary) !important; box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.08); } /* ── DESTRUCTIVE (bg-red-500): red glow ───────────────────────── */ .bg-red-500:hover, .bg-red-600:hover, button.hover\:bg-red-600:hover, button.hover\:bg-red-500:hover { box-shadow: 0 0 0 1px rgba(var(--erp-danger-rgb), 0.3), 0 4px 16px rgba(var(--erp-danger-rgb), 0.2) !important; } html.dark .bg-red-500:hover, html.dark .bg-red-600:hover { box-shadow: 0 0 16px rgba(var(--erp-danger-rgb), 0.2), 0 4px 16px rgba(var(--erp-black-rgb), 0.2) !important; } /* ── SUCCESS (bg-emerald): green glow ─────────────────────────── */ .bg-emerald-600:hover, .bg-emerald-700:hover, button.hover\:bg-emerald-700:hover { box-shadow: 0 0 0 1px rgba(var(--erp-success-rgb), 0.3), 0 4px 16px rgba(var(--erp-success-rgb), 0.2) !important; } html.dark .bg-emerald-600:hover, html.dark .bg-emerald-700:hover { box-shadow: 0 0 16px rgba(var(--erp-success-rgb), 0.2), 0 4px 16px rgba(var(--erp-black-rgb), 0.2) !important; } /* ── WARNING (bg-amber): amber glow ───────────────────────────── */ .bg-amber-500:hover, .bg-amber-600:hover, button.hover\:bg-amber-600:hover { box-shadow: 0 0 0 1px rgba(var(--erp-warning-rgb), 0.3), 0 4px 16px rgba(var(--erp-warning-rgb), 0.2) !important; } html.dark .bg-amber-500:hover, html.dark .bg-amber-600:hover { box-shadow: 0 0 16px rgba(var(--erp-warning-rgb), 0.2), 0 4px 16px rgba(var(--erp-black-rgb), 0.2) !important; } /* ── INFO (bg-blue): blue glow ────────────────────────────────── */ .bg-blue-500:hover, .bg-blue-600:hover, button.hover\:bg-blue-600:hover { box-shadow: 0 0 0 1px rgba(var(--erp-info-blue-rgb), 0.3), 0 4px 16px rgba(var(--erp-info-blue-rgb), 0.2) !important; } html.dark .bg-blue-500:hover, html.dark .bg-blue-600:hover { box-shadow: 0 0 16px rgba(var(--erp-info-blue-rgb), 0.2), 0 4px 16px rgba(var(--erp-black-rgb), 0.2) !important; } /* ── LINK style: underline glow ───────────────────────────────── */ button.underline:hover, a.underline:hover { text-shadow: 0 0 8px rgba(var(--erp-primary-deep-rgb), 0.15); color: var(--erp-primary) !important; } html.dark button.underline:hover, html.dark a.underline:hover { text-shadow: 0 0 8px rgba(var(--erp-primary-glow-rgb), 0.2); } /* ── SECONDARY (bg-zinc-100): subtle glow ─────────────────────── */ .bg-zinc-100:hover:is(button, a) { box-shadow: 0 2px 8px rgba(var(--erp-primary-deep-rgb), 0.06); border-color: var(--erp-border-strong) !important; } html.dark .bg-zinc-100:hover:is(button, a) { box-shadow: 0 0 10px rgba(var(--erp-primary-glow-rgb), 0.06); } /* ── ICON-ONLY buttons: scale + tint + glow ───────────────────── */ button.h-9.w-9:hover, button.h-8.w-8:hover { transform: scale(1.08); background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; box-shadow: 0 0 0 1px var(--erp-primary), 0 4px 12px rgba(var(--erp-primary-deep-rgb), 0.1); } button.h-9.w-9:hover i, button.h-8.w-8:hover i { color: var(--erp-primary) !important; } html.dark button.h-9.w-9:hover, html.dark button.h-8.w-8:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.12) !important; color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; box-shadow: 0 0 0 1px var(--erp-primary), 0 0 14px rgba(var(--erp-primary-glow-rgb), 0.1); } html.dark button.h-9.w-9:hover i, html.dark button.h-8.w-8:hover i { color: var(--erp-primary) !important; } /* Action buttons (view/edit/delete): tinted bg + colored icon */ button[data-action="view"]:hover, button[data-action="edit"]:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; } button[data-action="view"]:hover i, button[data-action="edit"]:hover i { color: var(--erp-primary) !important; } button[data-action="delete"]:hover { background-color: var(--erp-danger-bg) !important; color: var(--erp-danger-icon) !important; } button[data-action="delete"]:hover i { color: var(--erp-danger-icon) !important; } html.dark button[data-action="view"]:hover, html.dark button[data-action="edit"]:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; color: var(--erp-primary) !important; } html.dark button[data-action="view"]:hover i, html.dark button[data-action="edit"]:hover i { color: var(--erp-primary) !important; } html.dark button[data-action="delete"]:hover { background-color: rgba(var(--erp-danger-rgb), 0.12) !important; color: var(--erp-danger-icon) !important; } html.dark button[data-action="delete"]:hover i { color: var(--erp-danger-icon) !important; } /* ═══ HOVER: FORM CONTROLS ═══════════════════════════════════════ */ /* Select trigger */ .erp-select-wrapper>div:first-child:hover { border-color: var(--erp-primary) !important; box-shadow: 0 0 0 1px rgba(var(--erp-primary-glow-rgb), 0.1); } /* Toggle switch hover: preview state */ .erp-toggle:hover { box-shadow: 0 0 0 3px rgba(var(--erp-primary-glow-rgb), 0.1); } html.dark .erp-toggle:hover { box-shadow: 0 0 0 3px rgba(var(--erp-primary-glow-rgb), 0.15); } /* Checkbox/radio hover */ input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--erp-primary) !important; box-shadow: 0 0 0 2px rgba(var(--erp-primary-glow-rgb), 0.1); } /* Range slider: thumb glow on hover */ input[type="range"]:hover { filter: brightness(1.05); } /* ═══ HOVER: NAVIGATION ═════════════════════════════════════════ */ /* Horizontal nav: tinted bg + primary text */ .erp-hnav-item:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; border-radius: 0.375rem; } .erp-hnav-item:hover i { color: var(--erp-primary) !important; } html.dark .erp-hnav-item:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; color: var(--erp-text-medium) !important; } html.dark .erp-hnav-item:hover i { color: var(--erp-text-medium) !important; } /* Mega dropdown links: tinted bg */ .erp-mega-link:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; border-radius: 0.375rem; } .erp-mega-module:hover { background-color: var(--erp-primary-light) !important; border-radius: 0.375rem; } html.dark .erp-mega-link:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; color: var(--erp-primary) !important; } html.dark .erp-mega-module:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.06) !important; } /* Sidebar links: tinted bg + primary text */ .erp-nav-link:hover { background-color: var(--erp-primary-light) !important; color: var(--erp-primary) !important; } .erp-nav-link:hover span { color: var(--erp-primary) !important; } .erp-nav-link:hover .bg-zinc-300 { background-color: var(--erp-primary) !important; } html.dark .erp-nav-link:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.1) !important; color: var(--erp-primary) !important; } html.dark .erp-nav-link:hover span { color: var(--erp-primary) !important; } /* ═══ HOVER: TABLE ROWS ═════════════════════════════════════════ */ table.dataTable tbody tr:hover { background-color: var(--erp-primary-light) !important; box-shadow: inset 3px 0 0 var(--erp-primary); } html.dark table.dataTable tbody tr:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.08) !important; box-shadow: inset 3px 0 0 var(--erp-primary), 0 0 10px rgba(var(--erp-primary-glow-rgb), 0.04); } /* ═══ HOVER: MISC ELEMENTS ══════════════════════════════════════ */ /* Sortable/draggable items */ .cursor-move:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--erp-primary-deep-rgb), 0.06); } html.dark .cursor-move:hover { box-shadow: 0 0 12px rgba(var(--erp-primary-glow-rgb), 0.08); } /* Breadcrumb links */ #erp-breadcrumb a { transition: color 0.2s ease; } #erp-breadcrumb a:hover { color: var(--erp-primary) !important; } /* Notification dot: pulse */ #notification-btn .bg-red-500 { animation: erpNotifPulse 2s ease-in-out infinite; } @keyframes erpNotifPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--erp-danger-rgb), 0.4); } 50% { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(var(--erp-danger-rgb), 0); } } /* Tags: border glow on hover */ .inline-flex.items-center.gap-1\.5:hover { border-color: var(--erp-primary) !important; } /* ═══ CLICK/ACTIVE — targeted control feedback only ══════════════ No card/panel animations. Only the specific control responds. Subtle, fast, enterprise-grade. ═══════════════════════════════════════════════════════════════════ */ /* ── Buttons: subtle press ────────────────────────────────────── */ button:active:not(:disabled):not(.rounded-lg):not(.erp-sidebar-group), a.inline-flex:active { transform: scale(0.97) translateY(0.5px); transition: transform 0.08s ease; } /* Primary buttons: press + brief shadow collapse */ .bg-zinc-900[class*="rounded"]:active { transform: scale(0.97) translateY(1px) !important; box-shadow: 0 1px 2px rgba(var(--erp-primary-deep-rgb), 0.15), inset 0 1px 3px rgba(var(--erp-black-rgb), 0.1) !important; transition: transform 0.08s ease, box-shadow 0.08s ease !important; } /* ── Inputs: ring flash on click ──────────────────────────────── */ input:active:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:active, textarea:active { box-shadow: 0 0 0 3px var(--erp-primary-ring); transition: box-shadow 0.1s ease; } /* ── Checkbox / Radio: quick press + spring back ──────────────── */ input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(0.88); transition: transform 0.06s ease; } /* ── Toggle: horizontal squish ────────────────────────────────── */ .erp-toggle:active { transform: scaleX(0.93); transition: transform 0.06s ease; } /* ── Sidebar nav: subtle indent ───────────────────────────────── */ .erp-nav-link:active, .erp-module-toggle:active, .erp-page-toggle:active { transform: translateX(2px) scale(0.98); transition: transform 0.06s ease; } /* ── Sidebar group: subtle press ──────────────────────────────── */ .erp-sidebar-group:active { transform: scale(0.98); transition: transform 0.06s ease; } /* ── Horizontal nav item: press ───────────────────────────────── */ .erp-hnav-item:active { transform: scale(0.97); transition: transform 0.06s ease; } /* ── Tabs: press ──────────────────────────────────────────────── */ [data-tab-target]:active { transform: scale(0.97); transition: transform 0.06s ease; } /* ── Pagination: press ────────────────────────────────────────── */ .paginate_button:active { transform: scale(0.92); transition: transform 0.06s ease; } /* ── Dropzone: border flash ───────────────────────────────────── */ .border-dashed:active { border-color: var(--erp-primary) !important; background-color: var(--erp-primary-light) !important; transition: border-color 0.08s ease, background-color 0.08s ease; } /* ── Kanban card: pick up ─────────────────────────────────────── */ .kanban-card[draggable="true"]:active { transform: rotate(1deg) scale(1.02) translateY(-3px); box-shadow: 0 12px 32px rgba(var(--erp-primary-deep-rgb), 0.1); z-index: 100; transition: transform 0.1s ease, box-shadow 0.1s ease; } html.dark .kanban-card[draggable="true"]:active { box-shadow: 0 0 20px rgba(var(--erp-primary-glow-rgb), 0.12), 0 12px 32px rgba(var(--erp-black-rgb), 0.25); } /* ── Sortable item: lift ──────────────────────────────────────── */ .cursor-move:active { transform: scale(1.01) translateY(-2px); box-shadow: 0 6px 16px rgba(var(--erp-primary-deep-rgb), 0.08); z-index: 100; transition: transform 0.1s ease, box-shadow 0.1s ease; } /* ── Wizard circle: tap ───────────────────────────────────────── */ .wizard-circle:active { transform: scale(0.92); transition: transform 0.06s ease; } /* ── REDUCED MOTION ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body.bg-zinc-50::before, body.bg-zinc-50::after { display: none; } } /* ═══════════════════════════════════════════════════════════════════ CIRCULAR PROGRESS — theme-aware SVG colors ═══════════════════════════════════════════════════════════════════ */ .erp-progress-track { stroke: var(--erp-border); } .erp-progress-primary { stroke: var(--erp-primary); } /* ═══════════════════════════════════════════════════════════════════ ICONS — theme-colored instead of gray/black ═══════════════════════════════════════════════════════════════════ */ /* KPI card icons (inside icon containers) */ .rounded-md.bg-zinc-100 i.fa-solid, .rounded-md.bg-zinc-100 i.fa-regular { color: var(--erp-primary) !important; } html.dark .rounded-md.bg-zinc-100 i.fa-solid, html.dark .rounded-md.bg-zinc-100 i.fa-regular { color: var(--erp-primary-hover) !important; } /* Sidebar nav group icons */ .erp-sidebar-group i.fa-solid { color: var(--erp-text-tertiary); } /* Header action icons: search, bell, layout toggle, dark mode */ .erp-header button i.fa-solid, .erp-header button i.fa-regular { color: var(--erp-text-secondary); transition: color 0.2s ease; } .erp-header button:hover i.fa-solid, .erp-header button:hover i.fa-regular { color: var(--erp-text); } /* Quick link icons — exclude primary buttons */ a.rounded-md.border:not(.bg-zinc-900) i.fa-solid { color: var(--erp-text-tertiary); } a.rounded-md.border:not(.bg-zinc-900):hover i.fa-solid { color: var(--erp-text); } /* Approval queue / activity feed icons in circles */ .rounded-full i.fa-solid, .rounded-full i.fa-regular { opacity: 1; } /* Page header titles — always single line, truncate if too long */ .erp-content-area>div:first-child h1, .erp-content-area>div:first-child h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Page header action buttons icons — EXCLUDE primary buttons (.bg-zinc-900) */ .erp-content-area>div:first-child button:not(.bg-zinc-900) i.fa-solid, .erp-content-area>div:first-child a:not(.bg-zinc-900) i.fa-solid { color: var(--erp-text-secondary); } .erp-content-area>div:first-child button:not(.bg-zinc-900):hover i.fa-solid, .erp-content-area>div:first-child a:not(.bg-zinc-900):hover i.fa-solid { color: var(--erp-text); } /* Primary buttons: icons MUST stay white/primary-fg */ .bg-zinc-900 i.fa-solid, .bg-zinc-900 i.fa-regular { color: var(--erp-primary-fg) !important; opacity: 1 !important; } /* Breadcrumb home icon */ #erp-breadcrumb i.fa-solid { color: var(--erp-text-tertiary); } #erp-breadcrumb a:hover i.fa-solid { color: var(--erp-text); } /* Form field icons (search, calendar, currency prefix) */ .relative>i.fa-solid.absolute, .relative>i.fa-regular.absolute { color: var(--erp-text-tertiary); } /* Table action icons — distinct colors */ button[data-action="view"] i.fa-solid { color: var(--erp-info-icon); transition: color 0.2s ease; } button[data-action="view"]:hover i.fa-solid { color: var(--erp-info-light); } button[data-action="edit"] i.fa-solid { color: var(--erp-warning-icon); transition: color 0.2s ease; } button[data-action="edit"]:hover i.fa-solid { color: var(--erp-warning-text); } button[data-action="delete"] i.fa-solid { color: var(--erp-danger-icon); transition: color 0.2s ease; } button[data-action="delete"]:hover i.fa-solid { color: var(--erp-danger-text); } /* Chevron icons in dropdowns/selects */ .fa-chevron-down, .fa-chevron-right, .fa-chevron-left { color: var(--erp-text-tertiary); } /* File type icons keep their own colors (red for PDF, blue for DOC, etc.) */ .fa-file-pdf { color: #ef4444 !important; } .fa-file-word { color: #3b82f6 !important; } .fa-file-excel { color: #10b981 !important; } .fa-file-image { color: #7091E6 !important; } /* Wizard check icon */ .wizard-circle i.fa-solid { color: inherit; } /* Logo block icon keeps white */ .bg-zinc-900>.text-white { color: var(--erp-primary-fg) !important; } /* ═══════════════════════════════════════════════════════════════════ SWEETALERT-STYLE ALERTS ═══════════════════════════════════════════════════════════════════ */ .erp-sweetalert-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; animation: erpSweetBounce 0.4s ease-out; } .erp-sweetalert-icon.success { background: var(--erp-success-bg); border: 3px solid var(--erp-success-border); color: var(--erp-success-icon); } .erp-sweetalert-icon.error { background: var(--erp-danger-bg); border: 3px solid var(--erp-danger-border); color: var(--erp-danger-icon); } .erp-sweetalert-icon.warning { background: var(--erp-warning-bg); border: 3px solid var(--erp-warning-border); color: var(--erp-warning-icon); } .erp-sweetalert-icon.info { background: var(--erp-info-bg); border: 3px solid var(--erp-info-border); color: var(--erp-info-icon); } @keyframes erpSweetBounce { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════ SELECT2-STYLE SEARCHABLE SELECT ═══════════════════════════════════════════════════════════════════ */ .erp-select-wrapper { position: relative; } /* Dropdown is appended to document.body with position:fixed — no overflow clipping issues */ .erp-select-dropdown { /* position/z-index set inline by JS */ z-index: 9999; margin-top: 4px; backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); background: rgba(var(--erp-white-rgb), 0.92); border: 1px solid var(--erp-glass-border); border-radius: 0.375rem; box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.1), 0 0 0 1px var(--erp-glass-border); max-height: 240px; overflow: hidden; display: flex; flex-direction: column; } html.dark .erp-select-dropdown { background: rgba(var(--erp-surface-glass-rgb), 0.95); box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.25), 0 0 0 1px var(--erp-glass-border); } .erp-select-dropdown.hidden { display: none; } .erp-select-search { border-bottom: 1px solid var(--erp-border); padding: 0.5rem; } .erp-select-search input { width: 100%; height: 2rem; border: 1px solid var(--erp-border); border-radius: 0.25rem; padding: 0 0.5rem; font-size: 0.8125rem; background: var(--erp-bg); color: var(--erp-text); outline: none; } .erp-select-search input:focus { border-color: var(--erp-primary); } .erp-select-options { overflow-y: auto; flex: 1; padding: 0.25rem; } .erp-select-option { padding: 0.375rem 0.5rem; border-radius: 0.25rem; font-size: 0.8125rem; color: var(--erp-text); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; } .erp-select-option:hover { background: var(--erp-bg-muted); } .erp-select-option.selected { background: var(--erp-primary-light); font-weight: 500; } .erp-select-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; } .erp-select-tag { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--erp-bg-muted); border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.75rem; color: var(--erp-text); } /* ═══════════════════════════════════════════════════════════════════ FLATPICKR THEME OVERRIDES ═══════════════════════════════════════════════════════════════════ */ .flatpickr-calendar { border: 1px solid var(--erp-border) !important; box-shadow: var(--erp-shadow-lg) !important; border-radius: 0.5rem !important; font-family: 'Inter', sans-serif !important; } .flatpickr-months .flatpickr-month { background: var(--erp-bg) !important; color: var(--erp-text) !important; } .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--erp-bg) !important; color: var(--erp-text) !important; } .flatpickr-current-month input.cur-year { color: var(--erp-text) !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--erp-text-secondary) !important; fill: var(--erp-text-secondary) !important; } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--erp-text) !important; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--erp-text-secondary) !important; } span.flatpickr-weekday { color: var(--erp-text-secondary) !important; background: var(--erp-bg) !important; font-weight: 500 !important; } .flatpickr-day { color: var(--erp-text) !important; border-radius: 0.375rem !important; } .flatpickr-day:hover { background: var(--erp-bg-muted) !important; border-color: var(--erp-bg-muted) !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; } .flatpickr-day.inRange { background: var(--erp-bg-muted) !important; border-color: var(--erp-bg-muted) !important; box-shadow: -5px 0 0 var(--erp-bg-muted), 5px 0 0 var(--erp-bg-muted) !important; } .flatpickr-day.today { border-color: var(--erp-primary) !important; } .flatpickr-day.today:hover { background: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--erp-text-tertiary) !important; } .flatpickr-innerContainer { background: var(--erp-bg) !important; border-bottom: 1px solid var(--erp-border) !important; } .flatpickr-rContainer { background: var(--erp-bg) !important; } .flatpickr-time { background: var(--erp-bg) !important; border-top: 1px solid var(--erp-border) !important; } .flatpickr-time input { color: var(--erp-text) !important; background: var(--erp-bg) !important; } .flatpickr-time .flatpickr-am-pm { color: var(--erp-text) !important; background: var(--erp-bg) !important; } .numInputWrapper:hover { background: var(--erp-bg-muted) !important; } /* jQuery Validation error styling */ p.erp-jqv-error { display: flex !important; align-items: center; gap: 0.25rem; } /* ═══════════════════════════════════════════════════════════════════ BODY BACKGROUND — subtle gradient for glass depth ═══════════════════════════════════════════════════════════════════ */ /* Light: subtle blue-lavender gradient blobs */ body.bg-zinc-50 { background-color: var(--erp-bg-page) !important; background-image: radial-gradient(ellipse 90% 70% at 50% 80%, rgba(var(--erp-primary-glow-rgb), 0.05), transparent 60%), radial-gradient(ellipse 80% 60% at 5% -10%, rgba(var(--erp-primary-deep-rgb), 0.04), transparent 50%), radial-gradient(ellipse 60% 50% at 95% 15%, rgba(var(--erp-muted-glow-rgb), 0.04), transparent 50%) !important; background-attachment: fixed !important; min-height: 100vh; } /* Dark: rich ambient glows visible through glass cards */ html.dark body.bg-zinc-50 { background-color: var(--erp-bg-page) !important; background-image: radial-gradient(ellipse 70% 55% at 15% 85%, rgba(var(--erp-primary-deep-rgb), 0.25), transparent 50%), radial-gradient(ellipse 65% 50% at 85% 5%, rgba(var(--erp-primary-glow-rgb), 0.18), transparent 45%), radial-gradient(ellipse 50% 40% at 50% 50%, rgba(var(--erp-primary-deep-rgb), 0.06), transparent 60%), radial-gradient(ellipse 55% 45% at 5% 25%, rgba(var(--erp-muted-glow-rgb), 0.1), transparent 45%), radial-gradient(ellipse 45% 35% at 95% 75%, rgba(var(--erp-primary-glow-rgb), 0.08), transparent 45%) !important; } /* ═══════════════════════════════════════════════════════════════════ MOBILE RESPONSIVENESS ═══════════════════════════════════════════════════════════════════ */ /* Prevent horizontal scroll on all pages */ html, body { overflow-x: hidden; max-width: 100vw; } /* ── Content spacing per layout mode + device ──────────────────── */ /* Vertical layout — desktop: header 56px + sidebar offset handled by JS */ .erp-layout-vertical .erp-content-area { margin-top: 56px !important; padding-top: 1rem !important; } /* Horizontal layout — desktop: top bar 56px + nav 40px = 96px */ .erp-layout-horizontal .erp-content-area { margin-top: 96px !important; margin-left: 0 !important; padding-top: 1rem !important; } /* Horizontal layout — hide on small screens, header becomes single row */ @media (max-width: 1023px) { .erp-layout-horizontal .erp-content-area { margin-top: 56px !important; padding-top: 1rem !important; } } /* Mobile: hide sidebar instantly on load — no animation, no flash */ @media (max-width: 1023px) { #erp-sidebar-nav { transform: translateX(-100%) !important; animation: none !important; } #erp-sidebar-nav[data-mobile-open="1"] { transform: translateX(0px) !important; } } /* Mobile: content area full width, no sidebar margin */ @media (max-width: 1023px) { .erp-content-area { margin-left: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; } .erp-layout-vertical .erp-content-area { margin-top: 56px !important; padding-top: 1rem !important; } /* Header: full width, no left offset */ .erp-header, #erp-top-bar { left: 0 !important; right: 0 !important; } /* Cards: no hover lift on mobile (touch devices) */ .rounded-lg.border.shadow-sm:hover { transform: none; } /* Grid: stack on mobile */ .grid.grid-cols-2, .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; } /* Components page sections: reduce padding */ section .rounded-lg.border { padding: 1rem !important; } /* Tables: smaller font on mobile */ table.dataTable tbody td { font-size: 0.75rem !important; padding: 0.375rem 0.5rem !important; } table.dataTable thead th { font-size: 0.625rem !important; padding: 0.375rem 0.5rem !important; } /* Kanban: smaller cards */ .kanban-column { min-width: 240px !important; } /* Calendar: allow horizontal scroll */ #cal-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hide mega dropdown on mobile */ .erp-hnav-wrapper { display: none !important; } /* Action buttons: 2 per row on mobile */ .erp-action-buttons { display: grid !important; grid-template-columns: 1fr 1fr; } /* Notification dropdown: full width on mobile */ #notification-dropdown { position: fixed !important; left: 0.5rem !important; right: 0.5rem !important; width: auto !important; top: 3.5rem !important; } } /* ═══════════════════════════════════════════════════════════════════ BUTTON ICONS — inherit color from parent button type ═══════════════════════════════════════════════════════════════════ */ /* All button icons inherit the button's text color */ button i, a.inline-flex i, button svg, a.inline-flex svg { color: inherit !important; } /* Small mobile: tighter layout */ @media (max-width: 639px) { .erp-content-area { padding-left: 0.75rem !important; padding-right: 0.75rem !important; padding-bottom: 0.75rem !important; } /* Stack flex layouts */ .flex.flex-col.sm\:flex-row { flex-direction: column !important; } /* Buttons on mobile — shrink to fit, wrap if needed, never full-width stack */ .erp-content-area .flex.items-center.gap-2 { flex-wrap: wrap; gap: 0.375rem !important; } .erp-content-area .flex.items-center.gap-2>button, .erp-content-area .flex.items-center.gap-2>a { flex-shrink: 1; min-width: 0; padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 0.75rem !important; } /* KPI cards: tighter padding on small mobile */ .erp-content-area .grid>.rounded-lg.border.shadow-sm { padding: 1rem !important; } /* Reduce vertical gaps on small mobile */ .erp-content-area .mb-6 { margin-bottom: 1rem !important; } .erp-content-area .gap-4 { gap: 0.75rem !important; } /* Pagination: wrap */ .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dt-paging { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dt-info { text-align: center; font-size: 0.75rem; } } /* ═══════════════════════════════════════════════════════════════════ PRINT ═══════════════════════════════════════════════════════════════════ */ @media print { .erp-sidebar, .erp-header, .erp-footer, .erp-hnav-wrapper, .no-print { display: none !important; } .erp-content-area { margin-left: 0 !important; } body { background: white !important; } } /* ═══════════════════════════════════════════════════════════════════ DARK MODE — Final sidebar color overrides (must be last to win cascade) ═══════════════════════════════════════════════════════════════════ */ html.dark .erp-sidebar .erp-sidebar-group, html.dark .erp-sidebar .erp-sidebar-group span, html.dark .erp-sidebar .erp-sidebar-group i { color: var(--erp-text-faint) !important; } html.dark .erp-sidebar .erp-sidebar-group.erp-group-active, html.dark .erp-sidebar .erp-sidebar-group.erp-group-active span, html.dark .erp-sidebar .erp-sidebar-group.erp-group-active i { color: var(--erp-text) !important; } html.dark .erp-sidebar .erp-module-toggle, html.dark .erp-sidebar .erp-module-toggle span, html.dark .erp-sidebar .erp-module-toggle i { color: var(--erp-text-secondary) !important; } html.dark .erp-sidebar .erp-module-toggle.erp-nav-parent-active, html.dark .erp-sidebar .erp-module-toggle.erp-nav-parent-active span, html.dark .erp-sidebar .erp-module-toggle.erp-nav-parent-active i { color: var(--erp-text) !important; } html.dark .erp-sidebar .erp-page-toggle, html.dark .erp-sidebar .erp-page-toggle span, html.dark .erp-sidebar .erp-page-toggle i { color: var(--erp-text-secondary) !important; } html.dark .erp-sidebar .erp-page-toggle.erp-nav-parent-active, html.dark .erp-sidebar .erp-page-toggle.erp-nav-parent-active span, html.dark .erp-sidebar .erp-page-toggle.erp-nav-parent-active i { color: var(--erp-text) !important; } html.dark .erp-sidebar .erp-nav-link, html.dark .erp-sidebar .erp-nav-link span { color: var(--erp-text-secondary) !important; } html.dark .erp-sidebar .erp-nav-link.erp-nav-active, html.dark .erp-sidebar .erp-nav-link.erp-nav-active span { color: #ffffff !important; } html.dark .erp-sidebar .erp-module-chevron, html.dark .erp-sidebar .erp-page-chevron { color: var(--erp-text-faint) !important; } html.dark .erp-sidebar .erp-sidebar-group i.fa-solid { color: inherit !important; } html.dark .erp-sidebar .erp-sidebar-group i.text-emerald-500 { color: var(--color-emerald-500) !important; } /* ═══════════════════════════════════════════════════════════════════ THEME IMPROVEMENTS — Typography, Texture, Color, Polish ═══════════════════════════════════════════════════════════════════ */ /* ── 1.1 DISPLAY FONT — Plus Jakarta Sans for headings ────────── */ h1, h2, h3, .wizard-label, .erp-sidebar-header span { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; } /* ── 1.3 PAGE TEXTURE — CSS noise grain ───────────────────────── */ body.bg-zinc-50 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } html.dark body.bg-zinc-50 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); } /* ── 1.5 TABLE HEADER & ROW ENHANCEMENT ──────────────────────── */ table.dataTable thead th, table.dataTable thead td { background: linear-gradient(180deg, var(--erp-bg) 0%, var(--erp-bg-muted) 100%) !important; } table.dataTable thead th:first-child { border-radius: 0.375rem 0 0 0; } table.dataTable thead th:last-child { border-radius: 0 0.375rem 0 0; } table.dataTable tbody tr:hover { background-color: rgba(var(--erp-primary-glow-rgb), 0.04) !important; } table.dataTable tbody tr:nth-child(even) { background-color: rgba(var(--erp-primary-glow-rgb), 0.02); } /* ── 1.6 SIDEBAR VISUAL REFINEMENT ───────────────────────────── */ .erp-nav-group+.erp-nav-group { border-top: 1px solid rgba(var(--erp-primary-deep-rgb), 0.06); padding-top: 0.5rem; margin-top: 0.25rem; } html.dark .erp-nav-group+.erp-nav-group { border-top-color: rgba(var(--erp-white-rgb), 0.06); } .erp-sidebar .erp-nav-active { position: relative; } .erp-sidebar .erp-nav-active::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 60%; border-radius: 0 3px 3px 0; background: var(--erp-primary-fg); } .erp-sidebar-group-title, .erp-sidebar .erp-sidebar-group>span:first-child { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; } /* ── 1.7 SCROLL-TRIGGERED REVEAL ─────────────────────────────── */ .erp-scroll-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .erp-scroll-reveal.erp-in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .erp-scroll-reveal { opacity: 1; transform: none; transition: none; } } /* ── 2.1 KPI CARD COLOR ACCENTS ──────────────────────────────── */ [data-kpi="revenue"] { border-left: 3px solid var(--erp-info-icon) !important; background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 60%) !important; } [data-kpi="orders"] { border-left: 3px solid var(--erp-success-icon) !important; background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, transparent 60%) !important; } [data-kpi="customers"] { border-left: 3px solid var(--erp-chart-6) !important; background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.03) 0%, transparent 60%) !important; } [data-kpi="approvals"] { border-left: 3px solid var(--erp-warning-icon) !important; background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.03) 0%, transparent 60%) !important; } html.dark [data-kpi="revenue"] { background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 60%) !important; } html.dark [data-kpi="orders"] { background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, transparent 60%) !important; } html.dark [data-kpi="customers"] { background-image: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, transparent 60%) !important; } html.dark [data-kpi="approvals"] { background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, transparent 60%) !important; } /* ── 2.1 CHART TOOLTIP — glassmorphism ───────────────────────── */ .erp-chart-tooltip { position: absolute; pointer-events: none; z-index: 100; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: var(--erp-glass-strong); border: 1px solid var(--erp-glass-border); border-radius: 0.5rem; padding: 0.5rem 0.75rem; box-shadow: 0 8px 24px rgba(var(--erp-black-rgb), 0.12); font-size: 0.8125rem; color: var(--erp-text); transition: opacity 0.15s ease, transform 0.15s ease; opacity: 0; } .erp-chart-tooltip.active { opacity: 1; } .erp-chart-tooltip-title { font-weight: 600; font-size: 0.75rem; color: var(--erp-text-secondary); margin-bottom: 0.25rem; } .erp-chart-tooltip-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0; } .erp-chart-tooltip-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .erp-chart-tooltip-value { font-weight: 600; margin-left: auto; } /* ── 2.3 WIZARD STEPPER ENHANCEMENT ──────────────────────────── */ .wizard-circle { transition: box-shadow 0.3s ease, background-color 0.3s ease; } .erp-wizard-step.active .wizard-circle { box-shadow: 0 0 0 4px rgba(var(--erp-primary-deep-rgb), 0.15); } .erp-wizard-step.completed .wizard-circle { background-color: var(--erp-success-bg-solid) !important; border-color: var(--erp-success-bg-solid) !important; } .erp-wizard-step::after { transition: background-color 0.4s ease; } .erp-wizard-step .wizard-label { font-weight: 600; } /* ── 2.3 FILE UPLOAD DROPZONE ────────────────────────────────── */ .border-dashed { transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .border-dashed:hover { transform: scale(1.01); background-color: rgba(var(--erp-primary-glow-rgb), 0.03); } .border-dashed.drag-over { border-color: var(--erp-primary) !important; background-color: rgba(var(--erp-primary-glow-rgb), 0.06); transform: scale(1.01); } /* ── 2.4 DETAIL PAGE — Summary card accents ──────────────────── */ [data-accent="blue"] { border-left: 3px solid var(--erp-info-icon) !important; } [data-accent="amber"] { border-left: 3px solid var(--erp-warning-icon) !important; } [data-accent="zinc"] { border-left: 3px solid var(--erp-border-strong) !important; } [data-accent="red"] { border-left: 3px solid var(--erp-danger-icon) !important; } /* ── 2.4 TIMELINE ENHANCEMENT ────────────────────────────────── */ [data-tab-panel="history"] .absolute.left-3 { background: linear-gradient(to bottom, var(--erp-border) 70%, transparent 100%) !important; } [data-tab-panel="history"] .flex.gap-4:first-child .rounded-full { animation: erpTimelinePulse 2s ease-in-out infinite; } @keyframes erpTimelinePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--erp-warning-rgb), 0.3); } 50% { box-shadow: 0 0 0 6px rgba(var(--erp-warning-rgb), 0); } } /* ── 2.4 TAB INDICATOR ANIMATION ─────────────────────────────── */ [data-tab-target] { transition: border-color 0.2s ease, color 0.2s ease; position: relative; } /* ── 2.5 SECTION HEADER ACCENT BAR ───────────────────────────── */ .erp-content-area h2[id]::before { content: ''; display: inline-block; width: 3px; height: 1em; background: var(--erp-primary); border-radius: 2px; margin-right: 0.5rem; vertical-align: middle; } /* ── 2.5 KANBAN CARD COLOR BORDERS ───────────────────────────── */ .kanban-card:has(.border-red-200) { border-left: 3px solid var(--erp-danger-icon); } .kanban-card:has(.border-amber-200) { border-left: 3px solid var(--erp-warning-icon); } .kanban-card:has(.border-blue-200) { border-left: 3px solid var(--erp-info-icon); } .kanban-card:has(.border-emerald-200) { border-left: 3px solid var(--erp-success-icon); } .kanban-card:has(.border-purple-200) { border-left: 3px solid var(--erp-chart-6); } /* ── 2.5 EMPTY STATE BOUNCE ──────────────────────────────────── */ .erp-content-area .fa-box-open, .erp-content-area .fa-inbox, .erp-content-area .fa-folder-open, .erp-content-area [class*="text-4xl"].text-zinc-300, .erp-content-area [class*="text-5xl"].text-zinc-300 { animation: erpGentleBounce 3s ease-in-out infinite; } @keyframes erpGentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { @keyframes erpGentleBounce { 0%, 100% { transform: none; } } @keyframes erpTimelinePulse { 0%, 100% { box-shadow: none; } } } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE TYPOGRAPHY — scale down for tablet and mobile ═══════════════════════════════════════════════════════════════════ */ /* ── Content-aware scaling: when sidebar is open, content area is narrow ── */ /* This targets viewport ≤1400px (iPad landscape with sidebar open = ~1110px content) */ @media (max-width: 1400px) { /* KPI card values — use clamp for fluid scaling */ .erp-content-area .text-2xl { font-size: clamp(1rem, 1.8vw, 1.5rem) !important; line-height: 1.3 !important; } /* Page titles */ .erp-content-area h1.text-xl, .erp-content-area h1.sm\:text-2xl { font-size: clamp(1rem, 1.6vw, 1.25rem) !important; line-height: 1.3 !important; } .erp-content-area .text-lg { font-size: clamp(0.875rem, 1.4vw, 1.125rem) !important; line-height: 1.4 !important; } /* Card padding — tighter */ .erp-content-area .rounded-lg.border .p-6 { padding: 1rem !important; } /* KPI icon boxes — slightly smaller */ .erp-content-area .h-10.w-10 { height: 2.25rem !important; width: 2.25rem !important; } } /* ── When sidebar is expanded on narrower screens, content gets very cramped ── */ /* Sidebar is 256px, so at viewport 1024-1280px the content is only 768-1024px */ body.erp-layout-vertical .erp-content-area .text-2xl { font-size: clamp(0.95rem, 2vw, 1.5rem) !important; line-height: 1.3 !important; } body.erp-layout-vertical .erp-content-area h1.text-xl, body.erp-layout-vertical .erp-content-area h1.sm\:text-2xl { font-size: clamp(0.95rem, 1.8vw, 1.375rem) !important; line-height: 1.3 !important; } /* KPI card labels — smaller when sidebar eats space */ body.erp-layout-vertical .erp-content-area .rounded-lg .text-sm.font-medium.text-zinc-500 { font-size: clamp(0.65rem, 1.1vw, 0.875rem) !important; } /* KPI change indicators */ body.erp-layout-vertical .erp-content-area .rounded-lg .text-sm.text-emerald-600, body.erp-layout-vertical .erp-content-area .rounded-lg .text-sm.text-red-600, body.erp-layout-vertical .erp-content-area .rounded-lg .text-sm.text-amber-600 { font-size: clamp(0.6rem, 1vw, 0.8125rem) !important; } /* ── KPI cards: always use auto-fit so cards adapt to available width ── */ /* Override the fixed grid-cols breakpoints with auto-fit for KPI rows */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; } /* KPI card inner padding — always compact */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4>.rounded-lg .p-6 { padding: 1rem !important; } /* KPI icon: always 32x32 — works at any card width */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .h-10.w-10.rounded-md { height: 2rem !important; width: 2rem !important; flex-shrink: 0 !important; } .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .h-10.w-10.rounded-md i { font-size: 0.75rem !important; } /* KPI value: fluid font size, never wraps */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-2xl { font-size: clamp(1rem, 2.2cqi, 1.5rem) !important; line-height: 1.3 !important; white-space: nowrap !important; } /* KPI label */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-sm.font-medium.text-zinc-500 { font-size: clamp(0.625rem, 1.4cqi, 0.875rem) !important; } /* KPI change text */ .erp-content-area .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 .text-sm.mt-1 { font-size: clamp(0.575rem, 1.2cqi, 0.8125rem) !important; margin-top: 0.125rem !important; } /* Small tablet / large phone (max 768px) */ @media (max-width: 768px) { .erp-content-area .text-2xl { font-size: 1.125rem !important; line-height: 1.5rem !important; } .erp-content-area h1.text-xl, .erp-content-area h1.sm\:text-2xl { font-size: 1rem !important; line-height: 1.375rem !important; } .erp-content-area .text-lg { font-size: 0.875rem !important; line-height: 1.25rem !important; } /* Card section headers */ .erp-content-area .text-base.font-semibold { font-size: 0.875rem !important; } /* Tighter card padding */ .erp-content-area .rounded-lg.border .p-6 { padding: 0.75rem !important; } .erp-content-area .rounded-lg.border .p-4 { padding: 0.625rem !important; } } /* Phone (max 480px) */ @media (max-width: 480px) { .erp-content-area .text-2xl { font-size: 1rem !important; line-height: 1.375rem !important; } .erp-content-area h1.text-xl, .erp-content-area h1.sm\:text-2xl { font-size: 0.9375rem !important; line-height: 1.25rem !important; } /* Badges smaller on phone */ .erp-content-area .text-xs.font-medium { font-size: 0.625rem !important; } /* KPI icon boxes — even smaller */ .erp-content-area .h-10.w-10 { height: 2rem !important; width: 2rem !important; } .erp-content-area .h-10.w-10 i { font-size: 0.75rem !important; } /* Very small screens: icon-only buttons — hide text, keep icon */ .erp-content-area .flex.items-center.gap-2>button>.mr-1\.5, .erp-content-area .flex.items-center.gap-2>a>.mr-1\.5 { margin-right: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ FORM VALIDATION STATES ═══════════════════════════════════════════════════════════════════ */ .erp-input-error, .erp-input-error:focus { border-color: var(--erp-danger-border) !important; box-shadow: 0 0 0 3px rgba(var(--erp-danger-rgb), 0.1) !important; } .erp-input-success, .erp-input-success:focus { border-color: var(--erp-success-border) !important; box-shadow: 0 0 0 3px rgba(var(--erp-success-rgb), 0.1) !important; } .erp-input-warning, .erp-input-warning:focus { border-color: var(--erp-warning-border) !important; box-shadow: 0 0 0 3px rgba(var(--erp-warning-rgb), 0.1) !important; } .erp-field-error { color: var(--erp-danger-text); font-size: var(--erp-font-size-xs); margin-top: var(--erp-space-1); } .erp-field-hint { color: var(--erp-text-tertiary); font-size: var(--erp-font-size-xs); margin-top: var(--erp-space-1); } input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--erp-bg-muted); } /* ═══════════════════════════════════════════════════════════════════ SKELETON LOADER ═══════════════════════════════════════════════════════════════════ */ .erp-skeleton { background: linear-gradient(90deg, var(--erp-bg-muted) 25%, var(--erp-bg-accent) 50%, var(--erp-bg-muted) 75%); background-size: 200% 100%; animation: erp-shimmer 1.5s ease-in-out infinite; border-radius: var(--erp-radius-md); } .erp-skeleton-circle { background: linear-gradient(90deg, var(--erp-bg-muted) 25%, var(--erp-bg-accent) 50%, var(--erp-bg-muted) 75%); background-size: 200% 100%; animation: erp-shimmer 1.5s ease-in-out infinite; border-radius: var(--erp-radius-full); } @keyframes erp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── Full-screen page loader (theme/layout switch) ───────────── */ .erp-page-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: erpBackdropIn 0.2s ease-out; } html.dark .erp-page-loader { background-color: rgba(0, 0, 0, 0.6); } .erp-page-loader-content { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 2rem 3rem; border-radius: 1rem; background-color: var(--erp-bg); border: 1px solid var(--erp-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); } .erp-page-loader-text { font-size: 13px; font-weight: 500; letter-spacing: 0.3px; color: var(--erp-text-secondary); } .erp-page-loader-content .erp-loader-spinner { width: 32px; height: 32px; border: 3px solid var(--erp-border); border-top-color: var(--erp-primary); border-radius: 50%; animation: erp-loader-spin 0.8s linear infinite; } .erp-page-loader-content .erp-loader-dots { display: flex; gap: 6px; } .erp-page-loader-content .erp-loader-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--erp-primary); animation: erp-loader-bounce 1.4s ease-in-out infinite; } .erp-page-loader-content .erp-loader-dots span:nth-child(2) { animation-delay: 0.16s; } .erp-page-loader-content .erp-loader-dots span:nth-child(3) { animation-delay: 0.32s; } /* ── Inline modal system — works for both erpModal() and manual inline modals ── */ /* Container: covers viewport, centers content via flexbox */ .erp-inline-modal { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 1rem; } /* Backdrop: absolute behind content, dark + blur */ .erp-inline-modal-backdrop { position: absolute; inset: 0; z-index: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: erpBackdropIn 0.2s ease-out; } html.dark .erp-inline-modal-backdrop { background-color: rgba(0, 0, 0, 0.7); } /* Card: sits above backdrop via z-index */ .erp-inline-modal-card { position: relative; z-index: 1; background-color: var(--erp-bg); border: 1px solid var(--erp-border); border-radius: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05); max-height: 85vh; overflow-y: auto; animation: erpModalReveal 0.3s var(--ease-spring, ease-out); } html.dark .erp-inline-modal-card { box-shadow: 0 0 30px rgba(var(--erp-primary-glow-rgb, 99, 102, 241), 0.08), 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); } /* ── System-wide modal button classes ────────────────────────── */ .erp-modal-btn-primary { height: 36px; padding: 0 16px; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; transition: opacity 0.15s ease; background-color: var(--erp-primary); color: var(--erp-primary-fg); border: none; } .erp-modal-btn-primary:hover { opacity: 0.9; } .erp-modal-btn-secondary { height: 36px; padding: 0 16px; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; transition: background-color 0.15s ease; background-color: var(--erp-bg); color: var(--erp-text); border: 1px solid var(--erp-border); } .erp-modal-btn-secondary:hover { background-color: var(--erp-bg-muted); } .erp-modal-btn-danger { height: 36px; padding: 0 16px; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; transition: opacity 0.15s ease; background-color: #dc2626; color: #ffffff; border: none; } .erp-modal-btn-danger:hover { opacity: 0.9; } html.dark .erp-modal-btn-danger { background-color: #ef4444; } /* ── Hide default DataTable processing indicator (replaced by erp-widget-loading) ── */ .dt-processing, .dataTables_processing { display: none !important; } /* ── Submit button error state (validation failed) ──────────────── */ .erp-btn-error { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; animation: erp-btn-shake 0.4s ease-in-out; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important; } html.dark .erp-btn-error { background-color: #ef4444 !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3) !important; } @keyframes erp-btn-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-4px); } 30% { transform: translateX(4px); } 45% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } 90% { transform: translateX(1px); } } /* Dashboard widget loading state — enterprise loader */ .erp-widget-loading { position: relative; overflow: hidden; pointer-events: none; } .erp-widget-loading>*:not(.erp-widget-loader) { opacity: 0.08; filter: blur(1px); transition: opacity 0.3s ease, filter 0.3s ease; } /* Shimmer sweep across the card */ .erp-widget-loading::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(var(--erp-primary-glow-rgb, 99, 102, 241), 0.05) 50%, transparent 100%); background-size: 200% 100%; animation: erp-shimmer 2s ease-in-out infinite; border-radius: inherit; z-index: 1; } /* Loader overlay with spinner + dots */ .erp-widget-loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 2; } .erp-widget-loader .erp-loader-spinner { width: 28px; height: 28px; border: 3px solid var(--erp-border); border-top-color: var(--erp-primary); border-radius: 50%; animation: erp-loader-spin 0.8s linear infinite; } .erp-widget-loader .erp-loader-dots { display: flex; gap: 6px; } .erp-widget-loader .erp-loader-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--erp-primary); animation: erp-loader-bounce 1.4s ease-in-out infinite; } .erp-widget-loader .erp-loader-dots span:nth-child(2) { animation-delay: 0.16s; } .erp-widget-loader .erp-loader-dots span:nth-child(3) { animation-delay: 0.32s; } .erp-widget-loader .erp-loader-text { font-size: 11px; font-weight: 500; letter-spacing: 0.5px; color: var(--erp-text-secondary); } @keyframes erp-loader-spin { to { transform: rotate(360deg); } } @keyframes erp-loader-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.2); opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════ PROGRESS BAR ═══════════════════════════════════════════════════════════════════ */ .erp-progress { height: 0.5rem; border-radius: var(--erp-radius-full); background: var(--erp-bg-muted); overflow: hidden; } .erp-progress-bar { height: 100%; border-radius: var(--erp-radius-full); transition: width var(--erp-duration-normal) var(--erp-ease-default); } .erp-progress-sm { height: 0.375rem; } .erp-progress-lg { height: 0.75rem; } /* ═══════════════════════════════════════════════════════════════════ ALERT BANNER (inline, non-modal) ═══════════════════════════════════════════════════════════════════ */ .erp-alert-banner { display: flex; align-items: flex-start; gap: var(--erp-space-3); padding: var(--erp-space-3) var(--erp-space-4); border-radius: var(--erp-radius-lg); border: 1px solid; font-size: var(--erp-font-size-sm); } .erp-alert-banner-info { background: var(--erp-info-bg); border-color: var(--erp-info-border); color: var(--erp-info-text); } .erp-alert-banner-success { background: var(--erp-success-bg); border-color: var(--erp-success-border); color: var(--erp-success-text); } .erp-alert-banner-warning { background: var(--erp-warning-bg); border-color: var(--erp-warning-border); color: var(--erp-warning-text); } .erp-alert-banner-error { background: var(--erp-danger-bg); border-color: var(--erp-danger-border); color: var(--erp-danger-text); } /* ═══════════════════════════════════════════════════════════════════ TIMELINE ═══════════════════════════════════════════════════════════════════ */ .erp-timeline { position: relative; padding-left: var(--erp-space-8); } .erp-timeline::before { content: ''; position: absolute; left: 0.9375rem; top: 0; bottom: 0; width: 2px; background: var(--erp-border); } .erp-timeline-item { position: relative; padding-bottom: var(--erp-space-6); } .erp-timeline-dot { position: absolute; left: calc(-1 * var(--erp-space-8) + 0.5rem); top: 0.125rem; width: 1rem; height: 1rem; border-radius: var(--erp-radius-full); display: flex; align-items: center; justify-content: center; border: 2px solid var(--erp-bg); } /* ═══════════════════════════════════════════════════════════════════ DROPDOWN MENU ═══════════════════════════════════════════════════════════════════ */ .erp-dropdown-menu { position: absolute; z-index: var(--erp-z-dropdown, 50); min-width: 12rem; padding: var(--erp-space-1) 0; background: var(--erp-bg); border: 1px solid var(--erp-border); border-radius: var(--erp-radius-lg); box-shadow: var(--erp-shadow-lg); } .erp-dropdown-item { display: flex; align-items: center; gap: var(--erp-space-2); padding: var(--erp-space-2) var(--erp-space-3); font-size: var(--erp-font-size-sm); color: var(--erp-text-secondary); cursor: pointer; transition: background var(--erp-duration-fast) var(--erp-ease-default); } .erp-dropdown-item:hover { background: var(--erp-bg-muted); color: var(--erp-text); } .erp-dropdown-item-danger { color: var(--erp-danger-text); } .erp-dropdown-item-danger:hover { background: var(--erp-danger-bg); } .erp-dropdown-divider { height: 1px; margin: var(--erp-space-1) 0; background: var(--erp-border); } /* ═══════════════════════════════════════════════════════════════════ AUTH PAGES — Login / Register standalone pages Uses --erp-* theme variables for automatic light/dark support ═══════════════════════════════════════════════════════════════════ */ /* ── Hero gradient panels ─────────────────────────────────────── */ .auth-hero { background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-hover)); } .auth-hero::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(255,255,255,0.18)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(255,255,255,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(255,255,255,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(255,255,255,0.1)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(255,255,255,0.15)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 200px 200px; } .auth-hero-mobile { background: linear-gradient(135deg, var(--erp-primary), var(--erp-primary-hover)); padding-bottom: 48px; } /* Landscape mobile: compact hero — everything visible, just tighter */ @media (orientation: landscape) and (max-height: 500px) { .auth-hero-mobile { padding-bottom: 28px; } .auth-hero-mobile .auth-hero-topbar { padding: 8px 12px; } .auth-hero-mobile .auth-hero-content { padding: 0 16px 0; } .auth-hero-mobile .auth-hero-brand { display: flex; align-items: center; gap: 8px; text-align: left; margin-bottom: 6px; } .auth-hero-mobile .auth-hero-brand h1 { margin-bottom: 0; font-size: 0.875rem; } .auth-hero-mobile .auth-hero-brand p { margin-bottom: 0; font-size: 0.75rem; display: none; } .auth-hero-mobile .auth-hero-pills { gap: 4px; margin-bottom: 0; } .auth-hero-mobile .auth-glass-pill { padding: 2px 8px; font-size: 0.625rem; } .auth-hero-mobile .auth-pill-icon { font-size: 7px; } .auth-form-overlap { margin-top: -14px; } .auth-form-area { padding-top: 0; padding-bottom: 8px; } } .auth-hero-mobile::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(255,255,255,0.18)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(255,255,255,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(255,255,255,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(255,255,255,0.04)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(255,255,255,0.1)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(255,255,255,0.12)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(255,255,255,0.1)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(255,255,255,0.15)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(255,255,255,0.15)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 200px 200px; } .auth-hero-panel { width: 58%; } /* ── Responsive visibility (split layout at 1200px+) ─────────── */ .auth-desktop-only { display: none !important; } .auth-mobile-only {} @media (min-width: 1200px) { .auth-desktop-only { display: flex !important; } .auth-desktop-topbar { display: flex !important; justify-content: space-between; align-items: center; position: absolute; top: 1rem; right: 1rem; left: 1rem; z-index: 10; } .auth-mobile-only { display: none !important; } .auth-form-overlap { margin-top: 0; } .auth-form-area { align-items: center; padding-top: 2rem; padding-bottom: 2rem; } } /* ── Font ─────────────────────────────────────────────────────── */ .auth-font-heading { font-family: 'Plus Jakarta Sans', sans-serif; } /* ── Hero text opacity levels (white on gradient) ─────────────── */ .auth-text-90 { color: rgba(255, 255, 255, 0.9); } .auth-text-70 { color: rgba(255, 255, 255, 0.7); } .auth-text-60 { color: rgba(255, 255, 255, 0.6); } .auth-text-40 { color: rgba(255, 255, 255, 0.4); } /* ── Hero background opacity levels (white on gradient) ───────── */ .auth-bg-04 { background: rgba(255, 255, 255, 0.04); } .auth-bg-05 { background: rgba(255, 255, 255, 0.05); } .auth-bg-08 { background: rgba(255, 255, 255, 0.08); } .auth-bg-12 { background: rgba(255, 255, 255, 0.12); } .auth-bg-15 { background: rgba(255, 255, 255, 0.15); } .auth-bg-20 { background: rgba(255, 255, 255, 0.20); } /* ── Hero border divider ──────────────────────────────────────── */ .auth-border-top { border-top: 1px solid rgba(255, 255, 255, 0.1); } /* ── Glass morphism components (on gradient) ──────────────────── */ .auth-glass-btn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .auth-glass-btn:hover { background: rgba(255, 255, 255, 0.25); } .auth-glass-pill { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .auth-glass-logo { background: var(--erp-logo-bg-login-hero, #ffffff); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .auth-glass-logo-shadow { box-shadow: 0 8px 32px rgba(var(--erp-black-rgb), 0.12); } /* ── Hero pill icon (tiny) ────────────────────────────────────── */ .auth-pill-icon { font-size: 9px; color: rgba(255, 255, 255, 0.7); } /* ── Form panel background — same hexagonal network as erp-content-area */ .auth-form-panel { background-color: var(--erp-bg-page); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(61,82,160,0.09)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(61,82,160,0.06)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(61,82,160,0.2)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(61,82,160,0.2)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(61,82,160,0.07)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(61,82,160,0.22)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(61,82,160,0.16)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(61,82,160,0.16)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(61,82,160,0.05)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(61,82,160,0.12)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(61,82,160,0.12)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(61,82,160,0.16)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(61,82,160,0.13)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(112,145,230,0.2)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(112,145,230,0.2)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(61,82,160,0.12)' stroke-width='0.5'/%3E%3C/svg%3E"), radial-gradient(ellipse at 10% 85%, rgba(var(--erp-primary-deep-rgb), 0.05) 0%, transparent 50%), radial-gradient(ellipse at 90% 15%, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 50%); background-size: 200px 200px, 100% 100%, 100% 100%; } html.dark .auth-form-panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,12 168,48 168,132 100,168 32,132 32,48' fill='none' stroke='rgba(127,110,200,0.1)' stroke-width='0.7'/%3E%3Cpolygon points='100,46 134,66 134,114 100,134 66,114 66,66' fill='none' stroke='rgba(127,110,200,0.07)' stroke-width='0.4'/%3E%3Ccircle cx='100' cy='12' r='3' fill='rgba(127,110,200,0.18)'/%3E%3Ccircle cx='168' cy='48' r='2.5' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='168' cy='132' r='2' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='100' cy='168' r='3' fill='rgba(127,110,200,0.18)'/%3E%3Ccircle cx='32' cy='132' r='2.5' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='32' cy='48' r='2' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='100' cy='90' r='14' fill='none' stroke='rgba(127,110,200,0.08)' stroke-width='0.5' stroke-dasharray='4 3'/%3E%3Ccircle cx='100' cy='90' r='4' fill='rgba(127,110,200,0.2)'/%3E%3Cline x1='94' y1='90' x2='106' y2='90' stroke='rgba(127,110,200,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='84' x2='100' y2='96' stroke='rgba(127,110,200,0.14)' stroke-width='0.8'/%3E%3Cline x1='100' y1='90' x2='100' y2='12' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='48' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='48' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='168' y2='132' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='32' y2='132' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cline x1='100' y1='90' x2='100' y2='168' stroke='rgba(127,110,200,0.05)' stroke-width='0.4'/%3E%3Cpolygon points='50,26 55,31 50,36 45,31' fill='rgba(127,110,200,0.1)'/%3E%3Cpolygon points='150,144 155,149 150,154 145,149' fill='rgba(127,110,200,0.1)'/%3E%3Ccircle cx='15' cy='15' r='1.2' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='185' cy='15' r='1.2' fill='rgba(127,110,200,0.14)'/%3E%3Ccircle cx='15' cy='185' r='1' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='185' cy='185' r='1' fill='rgba(127,110,200,0.11)'/%3E%3Ccircle cx='140' cy='90' r='1' fill='rgba(157,140,220,0.18)'/%3E%3Ccircle cx='60' cy='90' r='1' fill='rgba(157,140,220,0.18)'/%3E%3Cline x1='18' y1='90' x2='25' y2='90' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='21' y1='87' x2='21' y2='93' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='175' y1='90' x2='182' y2='90' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3Cline x1='179' y1='87' x2='179' y2='93' stroke='rgba(127,110,200,0.1)' stroke-width='0.5'/%3E%3C/svg%3E"), radial-gradient(ellipse at 10% 85%, rgba(var(--erp-primary-deep-rgb), 0.05) 0%, transparent 50%), radial-gradient(ellipse at 90% 15%, rgba(var(--erp-primary-glow-rgb), 0.04) 0%, transparent 50%); background-size: 200px 200px, 100% 100%, 100% 100%; } /* ── Auth input icon padding (unlayered → beats @layer utilities) ── */ .auth-form-panel .relative>input { padding-left: 2.25rem; } .auth-form-panel .relative>input.pr-9 { padding-right: 2.25rem; } /* ── Form overlap (card pulls up into hero on mobile) ─────────── */ .auth-form-overlap { margin-top: -20px; } /* ── Decorative circles (desktop hero) ────────────────────────── */ .auth-deco-circle-tr { width: 256px; height: 256px; top: -96px; right: -96px; background: rgba(255, 255, 255, 0.05); } .auth-deco-circle-bl { width: 320px; height: 320px; bottom: -128px; left: -64px; background: rgba(255, 255, 255, 0.05); } /* ── Decorative circles (mobile hero) ─────────────────────────── */ .auth-mobile-circle-1 { width: 140px; height: 140px; top: -40px; right: -30px; background: rgba(255, 255, 255, 0.08); } .auth-mobile-circle-2 { width: 100px; height: 100px; bottom: 0; left: -30px; background: rgba(255, 255, 255, 0.08); } .auth-mobile-circle-center { width: 220px; height: 220px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.04); } /* ── Accent dots (mobile hero) ────────────────────────────────── */ .auth-dot-1 { width: 12px; height: 12px; top: 80px; right: 60px; background: rgba(255, 255, 255, 0.15); } .auth-dot-2 { width: 8px; height: 8px; bottom: 70px; left: 50px; background: rgba(255, 255, 255, 0.12); } .auth-dot-3 { width: 6px; height: 6px; top: 40px; left: 40%; background: rgba(255, 255, 255, 0.2); } /* ── Trust logo placeholders ──────────────────────────────────── */ .auth-trust-logo { width: 72px; } /* ── Animations ───────────────────────────────────────────────── */ .auth-form-entrance { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .auth-form-entrance.visible { opacity: 1; transform: translateY(0); } .auth-hero-feature { opacity: 0; transform: translateX(-12px); transition: opacity 0.5s ease, transform 0.5s ease; } .auth-hero-feature.visible { opacity: 1; transform: translateX(0); } .auth-pill-animate { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .auth-pill-animate.visible { opacity: 1; transform: translateY(0); } .auth-float { animation: authFloat 6s ease-in-out infinite; } .auth-float-delay { animation: authFloat 8s ease-in-out 2s infinite; } @keyframes authFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ── Password strength bar ────────────────────────────────────── */ .auth-strength-bar { transition: background-color 0.3s ease; } /* ── Scrollbar — always use the darker hover color ────────────── */ ::-webkit-scrollbar-thumb { background: var(--erp-scrollbar-hover) !important; } /* ── Sidebar — no horizontal scrollbar ─────────────────────────── */ .erp-sidebar, .erp-sidebar nav, .erp-sidebar>* { overflow-x: hidden !important; } .erp-sidebar { overflow-y: auto !important; } /* Submenu items: prevent overflow from ml-3/ml-7/ml-10 indentation */ .erp-sidebar-submenu, .erp-module-pages, .erp-subpage-list { overflow: hidden !important; } .erp-sidebar a, .erp-sidebar button { min-width: 0 !important; } .erp-sidebar .erp-sidebar-label, .erp-sidebar .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } /* ═══════════════════════════════════════════════════════════════════ LIGHT MODE TINT — Tinted backgrounds for cards, sidebar, header Remove this entire block (down to END LIGHT MODE TINT) to revert ═══════════════════════════════════════════════════════════════════ */ :root, :host { --color-zinc-200: oklch(0.82 0 0) !important; --erp-border: #847ba3 !important; --color-zinc-500: oklch(0.43 0 0); } body, .erp-content-area, .auth-form-area { background-color: rgba(61, 82, 160, 0.05) !important; } /* ── Header tint ──────────────────────────────────────────────── */ .erp-header { background-color: rgba(61, 82, 160, 0.05) !important; } /* ── Sidebar tint ─────────────────────────────────────────────── */ .erp-sidebar { background-color: rgba(61, 82, 160, 0.05) !important; } /* Mobile sidebar must be opaque — it overlays content */ @media (max-width: 1023px) { .erp-sidebar, #erp-sidebar-nav { background-color: #eceaf4 !important; } html.dark .erp-sidebar, html.dark #erp-sidebar-nav { background-color: var(--erp-bg-page) !important; } } /* ── Horizontal nav tint ──────────────────────────────────────── */ .erp-hnav-wrapper { background-color: rgba(61, 82, 160, 0.0) !important; } /* Sidebar/header text — darken for readability on tinted bg */ .erp-header .text-zinc-400, .erp-header .text-zinc-500, .erp-sidebar .text-zinc-400, .erp-sidebar .text-zinc-500 { color: #5a6070 !important; } /* Sidebar nav item borders */ .erp-sidebar .border-zinc-200, .erp-sidebar .border-zinc-100 { border-color: rgba(61, 82, 160, 0.12) !important; } /* ── Dark mode revert for header/sidebar/hnav ─────────────────── */ html.dark .erp-header { background-color: rgba(53, 46, 72, 0.95) !important; } html.dark .erp-sidebar { background-color: var(--erp-bg-page) !important; } html.dark .erp-hnav-wrapper { background-color: rgba(var(--erp-surface-glass-rgb), 0.92) !important; } html.dark .erp-header .text-zinc-400, html.dark .erp-header .text-zinc-500, html.dark .erp-sidebar .text-zinc-400, html.dark .erp-sidebar .text-zinc-500 { color: var(--erp-text-tertiary) !important; } html.dark .erp-sidebar .border-zinc-200, html.dark .erp-sidebar .border-zinc-100 { border-color: var(--erp-border-row) !important; } /* ── Footer tint + positioning fix ─────────────────────────────── */ .erp-footer { background-color: rgba(61, 82, 160, 0.05) !important; } .erp-footer .text-zinc-400, .erp-footer .text-zinc-500 { color: #5a6070 !important; } /* Footer: match content area margin so it's not behind sidebar */ .erp-layout-vertical .erp-footer { margin-left: 256px; transition: margin-left 0.2s ease; } .erp-layout-vertical .erp-sidebar.collapsed~.erp-footer, .erp-layout-vertical .erp-footer.sidebar-collapsed { margin-left: 64px; } @media (max-width: 1023px) { .erp-layout-vertical .erp-footer { margin-left: 0 !important; } } .erp-layout-horizontal .erp-footer { margin-left: 0; } /* Dark mode revert for footer */ html.dark .erp-footer { background-color: rgba(var(--erp-surface-glass-rgb), 0.9) !important; } html.dark .erp-footer .text-zinc-400, html.dark .erp-footer .text-zinc-500 { color: var(--erp-text-tertiary) !important; } /* ── Chart label readability on tinted cards ──────────────────── */ .rounded-lg.border.bg-white .text-zinc-300, .rounded-lg.border.shadow-sm .text-zinc-300 { color: #8090a8 !important; } /* ── Badge text on tinted bg — ensure semantic colors stay vivid */ .rounded-lg.border.bg-white .text-emerald-700, .rounded-lg.border.shadow-sm .text-emerald-700 { color: #047857 !important; } .rounded-lg.border.bg-white .text-red-700, .rounded-lg.border.shadow-sm .text-red-700 { color: #b91c1c !important; } .rounded-lg.border.bg-white .text-amber-700, .rounded-lg.border.shadow-sm .text-amber-700 { color: #b45309 !important; } /* ── Dark mode revert for chart/badge text ────────────────────── */ html.dark .rounded-lg.border.bg-white .text-zinc-300, html.dark .rounded-lg.border.shadow-sm .text-zinc-300 { color: var(--erp-text-faint) !important; } .text-emerald-500 { color: var(--color-emerald-500) !important; } html.dark .rounded-lg.border.bg-white .text-emerald-700, html.dark .rounded-lg.border.shadow-sm .text-emerald-700 { color: var(--erp-success-text) !important; } html.dark .rounded-lg.border.bg-white .text-red-700, html.dark .rounded-lg.border.shadow-sm .text-red-700 { color: var(--erp-danger-text) !important; } html.dark .rounded-lg.border.bg-white .text-amber-700, html.dark .rounded-lg.border.shadow-sm .text-amber-700 { color: var(--erp-warning-text) !important; } /* ── Mega dropdown — show scrollbar when content overflows ─────── */ #hnav-mega-content { scrollbar-width: thin !important; -ms-overflow-style: auto !important; } #hnav-mega-content::-webkit-scrollbar { display: block !important; width: 6px !important; } #hnav-mega-content::-webkit-scrollbar-track { background: transparent; } #hnav-mega-content::-webkit-scrollbar-thumb { background: var(--erp-scrollbar-hover) !important; border-radius: 3px; } /* ═══════════════════════════════════════════════════════════════════ END LIGHT MODE TINT ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ MISSING TAILWIND UTILITY CLASSES ───────────────────────────────────────────────────────────────────── Classes required by the theme-conversion-guide but absent from the pre-built tailwind-output.css. Only classes verified NOT present in tailwind-output.css are defined here. Breakpoints use the exact rem values from Tailwind v4 (sm:40rem, md:48rem, lg:64rem, xl:80rem, 2xl:96rem) plus a custom xs:20rem for small phones. ═══════════════════════════════════════════════════════════════════════ */ /* ── A. Base (no media query) — grid-cols + col-span ──────────────── */ /* grid-cols 4-12 (1-3 already exist in tailwind-output.css) */ .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* col-span 1, 3-12 (col-span-2 already exists) */ .col-span-1 { grid-column: span 1 / span 1; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } /* ── B. xs: (min-width: 20rem / 320px) — small phones ────────────── */ @media (min-width: 20rem) { .xs\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .xs\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xs\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xs\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xs\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xs\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .xs\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .xs\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .xs\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .xs\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .xs\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .xs\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .xs\:col-span-1 { grid-column: span 1 / span 1; } .xs\:col-span-2 { grid-column: span 2 / span 2; } .xs\:col-span-3 { grid-column: span 3 / span 3; } .xs\:col-span-4 { grid-column: span 4 / span 4; } .xs\:col-span-5 { grid-column: span 5 / span 5; } .xs\:col-span-6 { grid-column: span 6 / span 6; } .xs\:col-span-7 { grid-column: span 7 / span 7; } .xs\:col-span-8 { grid-column: span 8 / span 8; } .xs\:col-span-9 { grid-column: span 9 / span 9; } .xs\:col-span-10 { grid-column: span 10 / span 10; } .xs\:col-span-11 { grid-column: span 11 / span 11; } .xs\:col-span-12 { grid-column: span 12 / span 12; } } /* ── C. sm: (min-width: 40rem / 640px) — large phones / small tablets */ @media (min-width: 40rem) { /* grid-cols 1, 4-12 (sm:grid-cols-2/3 already exist) */ .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* col-span all 1-12 (none exist at sm:) */ .sm\:col-span-1 { grid-column: span 1 / span 1; } .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:col-span-3 { grid-column: span 3 / span 3; } .sm\:col-span-4 { grid-column: span 4 / span 4; } .sm\:col-span-5 { grid-column: span 5 / span 5; } .sm\:col-span-6 { grid-column: span 6 / span 6; } .sm\:col-span-7 { grid-column: span 7 / span 7; } .sm\:col-span-8 { grid-column: span 8 / span 8; } .sm\:col-span-9 { grid-column: span 9 / span 9; } .sm\:col-span-10 { grid-column: span 10 / span 10; } .sm\:col-span-11 { grid-column: span 11 / span 11; } .sm\:col-span-12 { grid-column: span 12 / span 12; } } /* ── D. md: (min-width: 48rem / 768px) — tablets ─────────────────── */ @media (min-width: 48rem) { /* grid-cols 1, 5-12 (md:grid-cols-2/3/4 already exist) */ .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* col-span 1, 4-12 (md:col-span-2/3 already exist) */ .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-5 { grid-column: span 5 / span 5; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-7 { grid-column: span 7 / span 7; } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:col-span-9 { grid-column: span 9 / span 9; } .md\:col-span-10 { grid-column: span 10 / span 10; } .md\:col-span-11 { grid-column: span 11 / span 11; } .md\:col-span-12 { grid-column: span 12 / span 12; } } /* ── E. lg: (min-width: 64rem / 1024px) — desktops ──────────────── */ @media (min-width: 64rem) { /* grid-cols 1, 7-12 (lg:grid-cols-2/3/4/5/6 already exist) */ .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* col-span 1, 3-12 (lg:col-span-2 already exists) */ .lg\:col-span-1 { grid-column: span 1 / span 1; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-9 { grid-column: span 9 / span 9; } .lg\:col-span-10 { grid-column: span 10 / span 10; } .lg\:col-span-11 { grid-column: span 11 / span 11; } .lg\:col-span-12 { grid-column: span 12 / span 12; } } /* ── F. xl: (min-width: 80rem / 1280px) — large desktops ────────── */ @media (min-width: 80rem) { /* grid-cols 1-2, 5-12 (xl:grid-cols-3/4 already exist) */ .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* col-span 1, 3-12 (xl:col-span-2 already exists) */ .xl\:col-span-1 { grid-column: span 1 / span 1; } .xl\:col-span-3 { grid-column: span 3 / span 3; } .xl\:col-span-4 { grid-column: span 4 / span 4; } .xl\:col-span-5 { grid-column: span 5 / span 5; } .xl\:col-span-6 { grid-column: span 6 / span 6; } .xl\:col-span-7 { grid-column: span 7 / span 7; } .xl\:col-span-8 { grid-column: span 8 / span 8; } .xl\:col-span-9 { grid-column: span 9 / span 9; } .xl\:col-span-10 { grid-column: span 10 / span 10; } .xl\:col-span-11 { grid-column: span 11 / span 11; } .xl\:col-span-12 { grid-column: span 12 / span 12; } } /* ── G. 2xl: (min-width: 96rem / 1536px) — ultra-wide screens ───── */ /* Note: 2xl starts with a digit → CSS escapes as \32xl\: (\32 = "2") */ @media (min-width: 96rem) { .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .\32xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .\32xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .\32xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .\32xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .\32xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .\32xl\:col-span-1 { grid-column: span 1 / span 1; } .\32xl\:col-span-2 { grid-column: span 2 / span 2; } .\32xl\:col-span-3 { grid-column: span 3 / span 3; } .\32xl\:col-span-4 { grid-column: span 4 / span 4; } .\32xl\:col-span-5 { grid-column: span 5 / span 5; } .\32xl\:col-span-6 { grid-column: span 6 / span 6; } .\32xl\:col-span-7 { grid-column: span 7 / span 7; } .\32xl\:col-span-8 { grid-column: span 8 / span 8; } .\32xl\:col-span-9 { grid-column: span 9 / span 9; } .\32xl\:col-span-10 { grid-column: span 10 / span 10; } .\32xl\:col-span-11 { grid-column: span 11 / span 11; } .\32xl\:col-span-12 { grid-column: span 12 / span 12; } } /* ── H. Focus, Placeholder, Max-height, File Input Utilities ─────── */ /* Focus variants — form input focus states */ .focus\:border-zinc-500:focus { border-color: #71717a; } .focus\:ring-1:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-zinc-500:focus { --tw-ring-color: #71717a; } /* Placeholder text color */ .placeholder\:text-zinc-400::placeholder { color: #a1a1aa; } /* Max-height utilities */ .max-h-20 { max-height: 5rem; } .max-h-60 { max-height: 15rem; } .max-h-72 { max-height: 18rem; } /* File input pseudo-class variants */ .file\:mr-3::file-selector-button { margin-right: 0.75rem; } .file\:rounded::file-selector-button { border-radius: 0.25rem; } .file\:border-0::file-selector-button { border-width: 0; } .file\:bg-zinc-100::file-selector-button { background-color: #f4f4f5; } .file\:px-3::file-selector-button { padding-left: 0.75rem; padding-right: 0.75rem; } .file\:py-1::file-selector-button { padding-top: 0.25rem; padding-bottom: 0.25rem; } .file\:text-xs::file-selector-button { font-size: 0.75rem; line-height: 1rem; } .file\:font-medium::file-selector-button { font-weight: 500; } .file\:text-zinc-700::file-selector-button { color: #3f3f46; } .hover\:file\:bg-zinc-200:hover::file-selector-button { background-color: #e4e4e7; } /* ═══════════════════════════════════════════════════════════════════════ END MISSING TAILWIND UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ QUILL EDITOR — Tailwind Preflight Reset Fix Tailwind's preflight sets `svg { display: block }` and resets button padding/appearance which breaks Quill's inline SVG toolbar icons. These overrides restore proper Quill rendering. ═══════════════════════════════════════════════════════════════════════ */ /* Toolbar SVG icons need inline display (Tailwind reset makes them block) */ .ql-toolbar svg { display: inline-block !important; width: 18px; height: 18px; } /* Restore toolbar button sizing and spacing */ .ql-toolbar.ql-snow .ql-formats { margin-right: 12px; } .ql-toolbar.ql-snow button { width: 28px; height: 28px; padding: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; border-radius: 0.25rem; transition: background-color 0.15s; } .ql-toolbar.ql-snow button:hover { background-color: rgba(0, 0, 0, 0.06); } .ql-toolbar.ql-snow button.ql-active { background-color: rgba(0, 0, 0, 0.08); color: var(--erp-primary, #3D52A0); } /* Restore SVG stroke/fill for toolbar icons */ .ql-snow .ql-stroke { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: currentColor; } .ql-snow .ql-thin { stroke-width: 1; } .ql-snow .ql-even { stroke-width: 2; fill-rule: evenodd; } .ql-snow button:hover .ql-stroke, .ql-snow button.ql-active .ql-stroke { stroke: var(--erp-primary, #3D52A0); } .ql-snow button:hover .ql-fill, .ql-snow button.ql-active .ql-fill, .ql-snow button:hover .ql-stroke.ql-fill, .ql-snow button.ql-active .ql-stroke.ql-fill { fill: var(--erp-primary, #3D52A0); } /* Picker labels (Font, Size, Header, Color, Background) */ .ql-snow .ql-picker { display: inline-block; vertical-align: middle; position: relative; height: 24px; } .ql-snow .ql-picker-label { cursor: pointer; display: inline-flex; align-items: center; padding: 2px 8px; height: 28px; font-size: 0.8125rem; position: relative; border: 1px solid transparent; border-radius: 0.25rem; transition: background-color 0.15s; } .ql-snow .ql-picker-label:hover { background-color: rgba(0, 0, 0, 0.06); } .ql-snow .ql-picker-label::before { display: inline-block; line-height: 22px; } /* Picker dropdown arrow */ .ql-snow .ql-picker-label svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; } /* Toolbar must sit above editor so dropdowns don't go behind it */ .ql-toolbar.ql-snow { position: relative; z-index: 10; } /* Picker options dropdown — hidden by default, shown via .ql-expanded High specificity + !important needed because editor.css loads after this file */ .ql-toolbar.ql-snow .ql-picker .ql-picker-options, .ql-snow .ql-picker-options { background-color: var(--erp-bg, #fff); border: 1px solid var(--erp-border, #d4d4d8); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 4px 0; position: absolute; z-index: 9000; min-width: 100%; display: none !important; } .ql-snow .ql-picker-options .ql-picker-item { cursor: pointer; padding: 4px 8px; font-size: 13px; } .ql-snow .ql-picker-options .ql-picker-item:hover { background-color: var(--erp-surface, #f4f4f5); } /* Color picker icon (the small square) */ .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg { right: 2px; } .ql-snow .ql-color-picker .ql-picker-item { width: 16px; height: 16px; border-radius: 2px; padding: 0; margin: 2px; } .ql-snow .ql-color-picker .ql-picker-options { padding: 4px 8px; width: 152px; display: flex; flex-wrap: wrap; } /* Editor container — matches Tailwind input styling */ .ql-snow.ql-container { border: 1px solid var(--erp-border, #d4d4d8); border-top: none; border-radius: 0 0 0.375rem 0.375rem; font-size: 0.875rem; background-color: var(--erp-bg, #fff); } .ql-snow .ql-editor { min-height: 120px; padding: 0.75rem; color: var(--erp-text, #18181b); line-height: 1.625; } .ql-snow .ql-editor.ql-blank::before { color: var(--erp-text-muted, #a1a1aa); font-style: italic; font-size: 0.875rem; } /* Toolbar — matches Tailwind surface styling */ .ql-toolbar.ql-snow { border: 1px solid var(--erp-border, #d4d4d8); border-radius: 0.375rem 0.375rem 0 0; padding: 0.5rem; background-color: var(--erp-surface, #fafafa); } /* Focus state — ring like other inputs */ .ql-snow.ql-container:focus-within { border-color: var(--erp-primary, #3D52A0); box-shadow: 0 0 0 1px var(--erp-primary, #3D52A0); } .ql-snow.ql-container:focus-within+.ql-toolbar.ql-snow, .ql-toolbar.ql-snow:has(+ .ql-snow.ql-container:focus-within) { border-color: var(--erp-primary, #3D52A0); } /* Expanded picker state */ .ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: var(--erp-border, #d4d4d8); border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.06); } /* Show picker when expanded — must override the !important hide */ .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options, .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block !important; } /* Ensure toolbar icons are not clipped */ .ql-toolbar.ql-snow .ql-formats button svg { float: left; } /* ═══════════════════════════════════════════════════════════════════ COMPACT FORM CONTROLS — Sleek, consistent 32px height Option 1 (32px/12px) + Option 3 (consolidated selectors) ═══════════════════════════════════════════════════════════════════ */ /* ── Shared input types list (reused via :is()) ───────────────────── */ /* Override Tailwind h-10 (40px) → 32px */ :is(input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], select, textarea).h-10 { height: 2rem; /* 32px = h-8 */ } /* ── Single source of truth: all contexts ─────────────────────────── */ :is(.rounded-lg, .erp-inline-modal, .fixed.inset-0) :is(input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], select) { height: 2rem; /* 32px — truly compact */ padding: 0.25rem 0.625rem; /* 4px 10px */ font-size: 0.75rem; /* 12px */ line-height: 1.5; letter-spacing: 0.01em; } /* ── Labels: match input font size ───────────────────────────────── */ :is(.rounded-lg, .erp-inline-modal, .fixed.inset-0) label.text-sm { font-size: 0.75rem; /* 12px */ line-height: 1.4; } /* ── erpSearchSelect trigger ──────────────────────────────────────── */ .erp-select-wrapper>div:first-child { height: 2rem !important; /* 32px — matches inputs exactly */ padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1.5; } /* ── erpSearchSelect dropdown search input ────────────────────────── */ .erp-select-search input { height: 1.625rem; /* 26px — one step below base */ padding: 0.1875rem 0.5rem; font-size: 0.75rem; } /* ── erpSearchSelect option items ────────────────────────────────── */ .erp-select-option { padding: 0.25rem 0.5rem; /* 4px 8px — tighter than before */ font-size: 0.75rem; } /* ── Checkbox alignment ──────────────────────────────────────────── */ input[type="checkbox"].h-4 { margin-top: 1px; } /* ═══════════════════════════════════════════════════════════════ POLYPACK: Checkbox/Radio/Toggle base styles (Tailwind Forms plugin replacement for static HTML prototype) ═══════════════════════════════════════════════════════════════ */ input[type="checkbox"]:not(.sr-only), input[type="radio"] { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; display: inline-block !important; vertical-align: middle; background-origin: border-box; user-select: none; flex-shrink: 0; min-height: 1rem; min-width: 1rem; height: 1rem; width: 1rem; color: var(--erp-primary, #18181b); background-color: #fff !important; border: 2px solid var(--erp-border-strong, #a1a1aa) !important; border-radius: 0.25rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } input[type="radio"] { border-radius: 9999px !important; } input[type="checkbox"]:not(.sr-only):focus, input[type="radio"]:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--erp-primary, #18181b) !important; } input[type="checkbox"]:not(.sr-only):hover, input[type="radio"]:hover { border-color: var(--erp-primary, #18181b) !important; box-shadow: 0 0 0 3px rgba(var(--erp-primary-glow-rgb, 99, 102, 241), 0.15); } input[type="checkbox"]:not(.sr-only):checked, input[type="radio"]:checked { border-color: transparent !important; background-color: var(--erp-primary, #18181b) !important; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } input[type="checkbox"]:not(.sr-only):checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important; } input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e") !important; } input[type="checkbox"]:not(.sr-only).h-5, input[type="radio"].h-5 { height: 1.25rem !important; width: 1.25rem !important; } input[type="checkbox"]:not(.sr-only).h-4, input[type="radio"].h-4 { height: 1rem !important; width: 1rem !important; } html.dark input[type="checkbox"]:not(.sr-only), html.dark input[type="radio"] { background-color: var(--erp-bg-muted) !important; border-color: var(--erp-border-strong) !important; } html.dark input[type="checkbox"]:not(.sr-only):checked, html.dark input[type="radio"]:checked { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; } /* ── Toggle Switch (iOS-style) ───────────────────────────────── */ .erp-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; width: 36px; height: 20px; background-color: var(--erp-border, #d4d4d8); border-radius: 9999px; transition: background-color 0.2s ease; flex-shrink: 0; } .erp-toggle input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; pointer-events: none; } .erp-toggle .erp-toggle-dot { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s var(--ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)); } .erp-toggle.active, .erp-toggle:has(input:checked) { background-color: var(--erp-primary, #18181b); } .erp-toggle.active .erp-toggle-dot, .erp-toggle:has(input:checked) .erp-toggle-dot { transform: translateX(16px); } .erp-toggle:hover { box-shadow: 0 0 0 3px rgba(var(--erp-primary-glow-rgb, 99, 102, 241), 0.1); } .erp-toggle:active { transform: scaleX(0.93); }