/* ═══════════════════════════════════════════════════════════════════
   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 {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px var(--erp-glass-border);
}

/* ── Apple-style Frosted Glass ────────────────────────────────── */
/* Shared glass mixin via variables from erp-themes.css            */

/* Header: frosted glass */
.erp-header {
  backdrop-filter: blur(var(--erp-glass-blur)) saturate(200%);
  -webkit-backdrop-filter: blur(var(--erp-glass-blur)) saturate(200%);
  background-color: var(--erp-glass-strong) !important;
  border-bottom: 1px solid var(--erp-glass-border) !important;
  box-shadow: var(--erp-glass-shadow);
}

/* Sidebar: frosted glass */
.erp-sidebar {
  backdrop-filter: blur(var(--erp-glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--erp-glass-blur)) saturate(180%);
  background-color: var(--erp-glass-strong) !important;
  border-right: 1px solid var(--erp-glass-border) !important;
  box-shadow: 1px 0 0 var(--erp-glass-border), var(--erp-glass-shadow);
}

/* Cards: solid bg with glass border — opaque enough for charts/content */
.rounded-lg.border.bg-white,
.rounded-lg.border.shadow-sm {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--erp-glass-border) !important;
}

html.dark .rounded-lg.border.bg-white,
html.dark .rounded-lg.border.shadow-sm {
  background-color: rgba(26, 32, 56, 0.92) !important;
}

/* No backdrop-filter on cards — it breaks Chart.js canvas rendering
   and creates stacking context issues with dropdowns/popovers.
   Cards use 92% opaque bg which is sufficient. */

/* 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(0,0,0,0.12), 0 0 0 1px var(--erp-glass-border) !important;
}

html.dark .erp-modal-content {
  box-shadow: 0 24px 80px rgba(0,0,0,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(255,255,255,0.92) !important;
  border: 1px solid var(--erp-glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px var(--erp-glass-border);
}

html.dark .erp-dropdown.show {
  background-color: rgba(24,24,27,0.92) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 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(0,0,0,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(255,255,255,0.92) !important;
  border: 1px solid var(--erp-glass-border) !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.15), 0 0 0 1px var(--erp-glass-border) !important;
}

html.dark .erp-command-palette > div > div {
  background-color: rgba(24,24,27,0.92) !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(255,255,255,0.95) !important;
  border-bottom: 1px solid var(--erp-glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px var(--erp-glass-border);
}

html.dark #hnav-mega-dropdown.show {
  background-color: rgba(24,24,27,0.95) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--erp-glass-border);
}

/* Horizontal nav row: opaque glass to separate from content */
.erp-hnav-wrapper {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-color: rgba(255,255,255,0.88) !important;
  border-bottom: 1px solid var(--erp-glass-border) !important;
}

html.dark .erp-hnav-wrapper {
  background-color: rgba(24,24,27,0.88) !important;
}

/* Footer: opaque glass */
.erp-footer {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background-color: rgba(255,255,255,0.88) !important;
  border-top: 1px solid var(--erp-glass-border) !important;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.02);
}

html.dark .erp-footer {
  background-color: rgba(24,24,27,0.88) !important;
}

/* 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(255,255,255,0.92) !important;
  border: 1px solid var(--erp-glass-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px var(--erp-glass-border);
}

html.dark #theme-picker-dropdown, html.dark #user-menu-dropdown {
  background-color: rgba(24,24,27,0.92) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--erp-glass-border);
}

/* All buttons: subtle shadow + transition */
button, [role="button"], a.inline-flex {
  transition: all 0.15s ease;
}

/* Primary buttons: depth */
.bg-zinc-900[class*="rounded"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}

.bg-zinc-900[class*="rounded"]:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-0.5px);
}

.bg-zinc-900[class*="rounded"]:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 3px rgba(0,0,0,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(0,0,0,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(0,0,0,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(0,0,0,0.04) !important;
}

/* Status badges: slight shadow */
.inline-flex.items-center.rounded-md.border[class*="px-2"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* KPI cards: icon container depth */
.rounded-md.bg-zinc-100.flex.items-center.justify-center {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

/* 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(0,0,0,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(0,0,0,0.1));
}

/* File/folder items: hover lift */
.hover\:shadow-md:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,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(0,0,0,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(0,0,0,0.06);
}

/* Horizontal nav items: subtle bottom border on hover */
.erp-hnav-item:hover {
  box-shadow: inset 0 -2px 0 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.75rem 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(61, 82, 160, 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.5rem 0;
}

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;
}

/* 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;
}

.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 group icons, remove gap/padding */
.erp-sidebar.collapsed .erp-sidebar-group {
  justify-content: center;
  padding: 0.5rem 0;
  gap: 0;
}

.erp-sidebar.collapsed .erp-nav-icon {
  width: auto;
  font-size: 1rem;
}

/* Collapsed: tooltip on hover */
.erp-sidebar.collapsed .erp-sidebar-group {
  position: relative;
}

/* Collapsed tooltip: theme-styled glass pill */
.erp-sidebar.collapsed .erp-sidebar-group:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  padding: 6px 12px;
  background: var(--erp-primary);
  color: var(--erp-primary-fg);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 0.375rem;
  border: 1px solid var(--erp-glass-border);
  box-shadow: var(--erp-shadow-lg);
  z-index: 9999;
  pointer-events: none;
  animation: erpTooltipIn 0.15s ease-out;
}

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

/* Tooltip arrow */
.erp-sidebar.collapsed .erp-sidebar-group:hover::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4px;
  border: 5px solid transparent;
  border-right-color: var(--erp-primary);
  z-index: 9999;
  pointer-events: none;
}

.erp-content-area {
  transition: margin-left 0.2s ease;
}

.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(112, 145, 230, 0.15) !important;
  color: var(--erp-primary) !important;
}
html.dark .erp-hnav-active i { color: var(--erp-primary) !important; }
html.dark .erp-hnav-active::after {
  background: var(--erp-primary) !important;
}

/* Scroll arrow buttons: fade & slide */
#hnav-left, #hnav-right {
  transition: opacity 0.2s ease, color 0.15s ease;
}

/* 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(112, 145, 230, 0.1) !important;
  color: var(--erp-primary) !important;
  border-left-color: var(--erp-primary);
}

/* 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 */
.erp-nav-active {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.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(112,145,230,0.08) 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(61,82,160,0.06) 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 — much stronger, visible glow */
html.dark body.bg-zinc-50::before {
  background: radial-gradient(circle, rgba(112,145,230,0.12) 0%, transparent 65%);
  width: 70vw;
  height: 70vh;
}
html.dark body.bg-zinc-50::after {
  background: radial-gradient(circle, rgba(61,82,160,0.1) 0%, transparent 65%);
  width: 60vw;
  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);
}
.rounded-lg.border.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 40px rgba(61, 82, 160, 0.1),
    0 4px 12px rgba(61, 82, 160, 0.06),
    0 0 0 1px var(--erp-glass-border);
}


/* ── 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(61,82,160,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;
  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 primary buttons */
.bg-zinc-900[class*="rounded"]::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.bg-zinc-900[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(61, 82, 160, 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(112, 145, 230, 0.4); }
  100% { box-shadow: 0 0 0 8px rgba(112, 145, 230, 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(61, 82, 160, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — enhanced animation visibility + hover effects
   ═══════════════════════════════════════════════════════════════════ */

/* Card hover: neon glow in dark mode */
html.dark .rounded-lg.border.shadow-sm:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 20px rgba(112, 145, 230, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(112, 145, 230, 0.1);
}

/* Primary button: glowing aura in dark */
html.dark .bg-zinc-900[class*="rounded"] {
  box-shadow: 0 0 12px rgba(112, 145, 230, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
html.dark .bg-zinc-900[class*="rounded"]:hover {
  box-shadow: 0 0 24px rgba(112, 145, 230, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Shimmer on dark buttons: brighter streak */
html.dark .bg-zinc-900[class*="rounded"]::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

/* 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(112, 145, 230, 0.06);
  background-color: rgba(112, 145, 230, 0.05) !important;
}

/* Sidebar active nav: glow */
html.dark .erp-sidebar a.bg-zinc-900 {
  box-shadow: 0 0 12px rgba(112, 145, 230, 0.2), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Sidebar nav link hover: visible bg + left bar glow */
html.dark .erp-nav-link:hover {
  background-color: rgba(112, 145, 230, 0.08) !important;
}
html.dark .erp-nav-link:hover::before {
  box-shadow: 0 0 6px rgba(112, 145, 230, 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(112, 145, 230, 0.3), 0 0 12px rgba(112, 145, 230, 0.1), inset 0 1px 2px rgba(0,0,0,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(112, 145, 230, 0.3);
}

/* Dropdown: dark glow border */
html.dark .erp-dropdown.show {
  box-shadow: 0 0 20px rgba(112, 145, 230, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(112, 145, 230, 0.1);
}

/* Modal: dark dramatic glow */
html.dark .erp-modal-content {
  box-shadow: 0 0 30px rgba(112, 145, 230, 0.1), 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(112, 145, 230, 0.08) !important;
}

/* Toast: dark glow */
html.dark .erp-toast {
  box-shadow: 0 0 16px rgba(112, 145, 230, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Command palette: dark glow */
html.dark .erp-command-palette > div > div {
  box-shadow: 0 0 40px rgba(112, 145, 230, 0.1), 0 16px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(112, 145, 230, 0.08) !important;
}

/* Mega dropdown: dark edge glow */
html.dark #hnav-mega-dropdown.show {
  box-shadow: 0 0 20px rgba(112, 145, 230, 0.06), 0 8px 32px rgba(0, 0, 0, 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(112, 145, 230, 0.5); }
  100% { box-shadow: 0 0 0 10px rgba(112, 145, 230, 0); }
}

/* Kanban card hover: dark glow */
html.dark .kanban-card:hover {
  box-shadow: 0 0 16px rgba(112, 145, 230, 0.1), 0 8px 24px rgba(0, 0, 0, 0.3);
}
html.dark .kanban-card[draggable="true"]:active {
  box-shadow: 0 0 24px rgba(112, 145, 230, 0.2), 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Wizard circle: dark glow */
html.dark .wizard-circle:not(.bg-zinc-100) {
  box-shadow: 0 0 16px rgba(112, 145, 230, 0.25);
}

/* Tab active: dark bottom glow */
html.dark [data-tab-target].border-b-2.border-zinc-900 {
  text-shadow: 0 0 8px rgba(112, 145, 230, 0.3);
}

/* Dark hover on hnav items: visible bg */
html.dark .erp-hnav-item:hover {
  background-color: rgba(112, 145, 230, 0.08) !important;
}
html.dark .erp-hnav-item::after {
  background: var(--erp-primary);
  box-shadow: 0 0 6px rgba(112, 145, 230, 0.4);
}

/* Mega dropdown links hover in dark */
html.dark .erp-mega-link:hover {
  background-color: rgba(112, 145, 230, 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(112, 145, 230, 0.05);
}

/* Dark scrollbar glow on hover */
html.dark ::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 4px rgba(112, 145, 230, 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: lift + border glow + inner highlight gradient */
.rounded-lg.border.shadow-sm:hover {
  transform: translateY(-3px);
  border-color: rgba(112, 145, 230, 0.2) !important;
  box-shadow:
    0 12px 40px rgba(61, 82, 160, 0.08),
    0 4px 12px rgba(61, 82, 160, 0.04),
    0 0 0 1px rgba(112, 145, 230, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(135deg, rgba(112,145,230,0.03) 0%, transparent 50%);
}

html.dark .rounded-lg.border.shadow-sm:hover {
  border-color: rgba(112, 145, 230, 0.15) !important;
  box-shadow:
    0 0 24px rgba(112, 145, 230, 0.1),
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(112, 145, 230, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(135deg, rgba(112,145,230,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(112, 145, 230, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--erp-primary), 0 0 10px rgba(112, 145, 230, 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(61, 82, 160, 0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
html.dark .bg-zinc-900[class*="rounded"]:hover {
  box-shadow: 0 0 20px rgba(112, 145, 230, 0.25), 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,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(61, 82, 160, 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(112, 145, 230, 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(112, 145, 230, 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(61, 82, 160, 0.08);
}
html.dark button.hover\:bg-zinc-100:hover, html.dark a.hover\:bg-zinc-100:hover {
  background-color: rgba(112, 145, 230, 0.1) !important;
  color: var(--erp-primary) !important;
  box-shadow: 0 0 12px rgba(112, 145, 230, 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(239, 68, 68, 0.3), 0 4px 16px rgba(239, 68, 68, 0.2) !important;
}
html.dark .bg-red-500:hover, html.dark .bg-red-600:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.2), 0 4px 16px rgba(0,0,0,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(16, 185, 129, 0.3), 0 4px 16px rgba(16, 185, 129, 0.2) !important;
}
html.dark .bg-emerald-600:hover, html.dark .bg-emerald-700:hover {
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2), 0 4px 16px rgba(0,0,0,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(245, 158, 11, 0.3), 0 4px 16px rgba(245, 158, 11, 0.2) !important;
}
html.dark .bg-amber-500:hover, html.dark .bg-amber-600:hover {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2), 0 4px 16px rgba(0,0,0,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(59, 130, 246, 0.3), 0 4px 16px rgba(59, 130, 246, 0.2) !important;
}
html.dark .bg-blue-500:hover, html.dark .bg-blue-600:hover {
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.2), 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* ── LINK style: underline glow ───────────────────────────────── */
button.underline:hover, a.underline:hover {
  text-shadow: 0 0 8px rgba(61, 82, 160, 0.15);
  color: var(--erp-primary) !important;
}
html.dark button.underline:hover, html.dark a.underline:hover {
  text-shadow: 0 0 8px rgba(112, 145, 230, 0.2);
}

/* ── SECONDARY (bg-zinc-100): subtle glow ─────────────────────── */
.bg-zinc-100:hover:is(button, a) {
  box-shadow: 0 2px 8px rgba(61, 82, 160, 0.06);
  border-color: var(--erp-border-strong) !important;
}
html.dark .bg-zinc-100:hover:is(button, a) {
  box-shadow: 0 0 10px rgba(112, 145, 230, 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(61, 82, 160, 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(112, 145, 230, 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(112, 145, 230, 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(112, 145, 230, 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(239, 68, 68, 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(112, 145, 230, 0.1);
}

/* Toggle switch hover: preview state */
.erp-toggle:hover {
  box-shadow: 0 0 0 3px rgba(112, 145, 230, 0.1);
}
html.dark .erp-toggle:hover {
  box-shadow: 0 0 0 3px rgba(112, 145, 230, 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(112, 145, 230, 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(112, 145, 230, 0.1) !important;
  color: var(--erp-primary) !important;
}
html.dark .erp-hnav-item:hover i { color: var(--erp-primary) !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(112, 145, 230, 0.1) !important;
  color: var(--erp-primary) !important;
}
html.dark .erp-mega-module:hover {
  background-color: rgba(112, 145, 230, 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(112, 145, 230, 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(112, 145, 230, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--erp-primary), 0 0 10px rgba(112, 145, 230, 0.04);
}


/* ═══ HOVER: MISC ELEMENTS ══════════════════════════════════════ */

/* Sortable/draggable items */
.cursor-move:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 82, 160, 0.06);
}
html.dark .cursor-move:hover {
  box-shadow: 0 0 12px rgba(112, 145, 230, 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(239, 68, 68, 0.4); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(239, 68, 68, 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(61, 82, 160, 0.15), inset 0 1px 3px rgba(0,0,0,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(61, 82, 160, 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(112, 145, 230, 0.12), 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* ── Sortable item: lift ──────────────────────────────────────── */
.cursor-move:active {
  transform: scale(1.01) translateY(-2px);
  box-shadow: 0 6px 16px rgba(61, 82, 160, 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;
}

/* Sidebar nav group icons */
.erp-sidebar-group i.fa-solid {
  color: var(--erp-primary);
  opacity: 0.7;
}

/* Header action icons: search, bell, layout toggle, dark mode */
.erp-header button i.fa-solid,
.erp-header button i.fa-regular {
  color: var(--erp-primary);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.erp-header button:hover i.fa-solid,
.erp-header button:hover i.fa-regular {
  opacity: 1;
}

/* Quick link icons — exclude primary buttons */
a.rounded-md.border:not(.bg-zinc-900) i.fa-solid {
  color: var(--erp-primary);
  opacity: 0.5;
}
a.rounded-md.border:not(.bg-zinc-900):hover i.fa-solid {
  opacity: 1;
}

/* Approval queue / activity feed icons in circles */
.rounded-full i.fa-solid, .rounded-full i.fa-regular {
  opacity: 0.9;
}

/* 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-primary);
  opacity: 0.6;
}
.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 {
  opacity: 1;
}

/* 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-primary);
  opacity: 0.5;
}
#erp-breadcrumb a:hover i.fa-solid {
  opacity: 1;
}

/* Form field icons (search, calendar, currency prefix) */
.relative > i.fa-solid.absolute,
.relative > i.fa-regular.absolute {
  color: var(--erp-primary);
  opacity: 0.4;
}

/* Table action icons default state */
button[data-action] i.fa-solid {
  color: var(--erp-primary);
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
button[data-action]:hover i.fa-solid {
  opacity: 1;
}
/* Delete stays red-tinted */
button[data-action="delete"] i.fa-solid {
  color: var(--erp-danger-icon);
  opacity: 0.4;
}
button[data-action="delete"]:hover i.fa-solid {
  opacity: 1;
}

/* Chevron icons in dropdowns/selects */
.fa-chevron-down, .fa-chevron-right, .fa-chevron-left {
  color: var(--erp-primary);
  opacity: 0.35;
}

/* 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;
}

.erp-select-wrapper {
  position: relative;
  z-index: 60;
  overflow: visible !important;
}

.erp-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9990;
  margin-top: 4px;
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--erp-glass-border);
  border-radius: 0.375rem;
  box-shadow: 0 8px 32px rgba(0,0,0,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(24,24,27,0.92);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 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: blue-lavender gradient blobs matching #3D52A0 → #EDE8F5 palette */
body.bg-zinc-50 {
  background-color: var(--erp-bg-page) !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 80%, rgba(112, 145, 230, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 5% -10%, rgba(61, 82, 160, 0.1), transparent 50%),
    radial-gradient(ellipse 60% 50% at 95% 15%, rgba(134, 151, 196, 0.1), transparent 50%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Dark: lighter navy with visible blue glows */
html.dark body.bg-zinc-50 {
  background-color: var(--erp-bg-page) !important;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 80%, rgba(112, 145, 230, 0.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 5% -10%, rgba(61, 82, 160, 0.07), transparent 50%),
    radial-gradient(ellipse 60% 50% at 95% 15%, rgba(134, 151, 196, 0.06), transparent 50%) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Mobile: content area full width, no margin */
@media (max-width: 1023px) {
  .erp-content-area {
    margin-left: 0 !important;
    padding: 1rem !important;
    padding-top: 4.5rem !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;
  }

  /* 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;
  }
}

/* Small mobile: tighter layout */
@media (max-width: 639px) {
  .erp-content-area {
    padding: 0.75rem !important;
    padding-top: 4rem !important;
  }

  /* Stack flex layouts */
  .flex.flex-col.sm\:flex-row {
    flex-direction: column !important;
  }

  /* Full width buttons on mobile */
  .flex.items-center.gap-2 > button,
  .flex.items-center.gap-2 > a {
    width: 100%;
    justify-content: center;
  }

  /* 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;
  }
}