/* ============================================
   PapaPrint ERP — Enterprise Admin Theme v2
   Light mode · Linear/Stripe/Notion inspired
   ============================================ */

:root {
  --pp-bg-canvas: #F7F8FA;
  --pp-bg-surface: #FFFFFF;
  --pp-bg-subtle: #F9FAFB;
  --pp-border: #E5E7EB;
  --pp-border-strong: #D1D5DB;
  --pp-text-primary: #0F172A;
  --pp-text-secondary: #475569;
  --pp-text-muted: #94A3B8;
  --pp-purple: #9333EA;
  --pp-purple-light: #F3E8FF;
  --pp-purple-dark: #581C87;
  --pp-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  --pp-shadow-md: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --pp-shadow-lg: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
}

/* ---------- Canvas ---------- */
.fi-body, .fi-main, .fi-page {
  background-color: var(--pp-bg-canvas) !important;
}

/* ---------- Sidebar ---------- */
.fi-sidebar {
  background: var(--pp-bg-surface) !important;
  border-right: 1px solid var(--pp-border) !important;
  box-shadow: 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

.fi-sidebar-header {
  border-bottom: 1px solid var(--pp-border) !important;
  background: linear-gradient(180deg, #FCFCFD 0%, #FFFFFF 100%) !important;
  padding: 1.125rem 1rem !important;
}

.fi-sidebar-nav-item, .fi-sidebar-item {
  margin: 2px 8px !important;
}

.fi-sidebar-item-button, .fi-sidebar-item .fi-sidebar-item-button {
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s ease !important;
  padding: 0.5rem 0.75rem !important;
  color: #475569 !important;
}

.fi-sidebar-item-button:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-button {
  background: linear-gradient(135deg, #F3E8FF 0%, #FAF5FF 100%) !important;
  color: #581C87 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(147, 51, 234, 0.18) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: #9333EA !important;
}

.fi-sidebar-item-icon {
  width: 1.125rem !important;
  height: 1.125rem !important;
  color: #94A3B8 !important;
}

/* ---------- Topbar ---------- */
.fi-topbar {
  background: var(--pp-bg-surface) !important;
  border-bottom: 1px solid var(--pp-border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) !important;
  height: 64px !important;
}

.fi-topbar-nav {
  padding: 0 1.5rem !important;
}

/* ---------- Page header ---------- */
.fi-header {
  margin-bottom: 1.5rem !important;
  padding: 1.5rem 0 1.25rem 0 !important;
  border-bottom: 1px solid var(--pp-border) !important;
}

.fi-header-heading, h1.fi-header-heading {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: #0F172A !important;
  line-height: 1.2 !important;
}

.fi-header-subheading {
  color: #64748B !important;
  font-size: 0.9375rem !important;
  margin-top: 0.375rem !important;
}

/* ---------- Stats Overview Cards (HERO) ---------- */
.fi-wi-stats-overview-stat {
  background: var(--pp-bg-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-md) !important;
  padding: 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Top color accent bar — uses :has() to detect description color */
.fi-wi-stats-overview-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #94A3B8 0%, #CBD5E1 100%);
}

.fi-wi-stats-overview-stat:has(.fi-color-danger)::before {
  background: linear-gradient(90deg, #DC2626 0%, #F87171 100%) !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-warning)::before {
  background: linear-gradient(90deg, #D97706 0%, #FBBF24 100%) !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-success)::before {
  background: linear-gradient(90deg, #059669 0%, #34D399 100%) !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-info)::before {
  background: linear-gradient(90deg, #0284C7 0%, #38BDF8 100%) !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-primary)::before {
  background: linear-gradient(90deg, #9333EA 0%, #C084FC 100%) !important;
}

.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--pp-shadow-lg) !important;
  border-color: rgba(147, 51, 234, 0.18) !important;
}

/* Stat label */
.fi-wi-stats-overview-stat-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  margin-bottom: 0.5rem !important;
}

/* Big metric */
.fi-wi-stats-overview-stat-value {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
  color: #0F172A !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.625rem !important;
}

/* Description = colored pill */
.fi-wi-stats-overview-stat-description {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 999px !important;
  background: var(--pp-bg-subtle) !important;
  letter-spacing: -0.005em !important;
  border: 1px solid transparent !important;
}

.fi-wi-stats-overview-stat-description.fi-color-danger {
  background: #FEF2F2 !important;
  color: #B91C1C !important;
  border-color: #FECACA !important;
}
.fi-wi-stats-overview-stat-description.fi-color-warning {
  background: #FFFBEB !important;
  color: #B45309 !important;
  border-color: #FDE68A !important;
}
.fi-wi-stats-overview-stat-description.fi-color-success {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border-color: #A7F3D0 !important;
}
.fi-wi-stats-overview-stat-description.fi-color-info {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border-color: #BFDBFE !important;
}
.fi-wi-stats-overview-stat-description.fi-color-primary {
  background: #F3E8FF !important;
  color: #6B21A8 !important;
  border-color: #E9D5FF !important;
}

.fi-wi-stats-overview-stat-description-icon {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

/* Sparkline chart */
.fi-wi-stats-overview-stat-chart {
  margin-top: 0.875rem !important;
  height: 38px !important;
  opacity: 0.85 !important;
}

/* ---------- Generic widget cards ---------- */
.fi-section, .fi-wi-chart {
  background: var(--pp-bg-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  overflow: visible !important;
}

.fi-section-header, .fi-wi-chart-header {
  padding: 1.125rem 1.5rem !important;
  border-bottom: 1px solid var(--pp-border) !important;
  background: linear-gradient(180deg, #FCFCFD 0%, #FFFFFF 100%) !important;
}

.fi-section-header-heading, .fi-wi-chart-header-heading {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
}

.fi-section-content, .fi-wi-chart-content {
  padding: 1.25rem 1.5rem !important;
}

/* ---------- Tables ---------- */
.fi-ta {
  border-radius: var(--pp-radius-lg) !important;
  overflow: hidden !important;
}

.fi-ta-table thead {
  background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%) !important;
  border-bottom: 1px solid var(--pp-border) !important;
}

.fi-ta-header-cell {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748B !important;
  padding: 0.875rem 1rem !important;
}

.fi-ta-cell {
  padding: 0.875rem 1rem !important;
  font-size: 0.875rem !important;
  color: #0F172A !important;
}

.fi-ta-row {
  transition: background 0.1s ease !important;
}

.fi-ta-row:hover {
  background: #FAFBFC !important;
}

/* ---------- Form fields ---------- */
.fi-input, .fi-select-input,
input[type="text"]:not(.fi-not-themed),
input[type="email"]:not(.fi-not-themed),
input[type="password"]:not(.fi-not-themed) {
  background: var(--pp-bg-surface) !important;
  border: 1px solid var(--pp-border-strong) !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.fi-input:focus, .fi-select-input:focus {
  border-color: #9333EA !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12) !important;
  outline: none !important;
}

/* ---------- Buttons ---------- */
.fi-btn {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  font-size: 0.875rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.fi-btn-color-primary {
  background: linear-gradient(180deg, #A855F7 0%, #9333EA 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(88, 28, 135, 0.2), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.fi-btn-color-primary:hover {
  background: linear-gradient(180deg, #9333EA 0%, #7E22CE 100%) !important;
  box-shadow: 0 2px 6px rgba(88, 28, 135, 0.25), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) !important;
}

/* ---------- Badges ---------- */
.fi-badge {
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: -0.005em !important;
  padding: 0.1875rem 0.625rem !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* ---------- Charts ---------- */
.fi-wi-chart canvas {
  max-height: 320px !important;
}

/* ---------- Pagination ---------- */
.fi-pagination {
  border-top: 1px solid var(--pp-border) !important;
  padding: 0.875rem 1.5rem !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%) !important;
}

/* ---------- Modal ---------- */
.fi-modal-window {
  border-radius: var(--pp-radius-lg) !important;
  box-shadow: 0 20px 60px -10px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

.fi-no {
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow-lg) !important;
}

/* ---------- Dropdown ---------- */
.fi-dropdown-panel {
  border-radius: var(--pp-radius) !important;
  border: 1px solid var(--pp-border) !important;
  box-shadow: var(--pp-shadow-lg) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pp-bg-canvas);
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 8px;
  border: 2px solid var(--pp-bg-canvas);
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* ---------- Reveal animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fi-wi-stats-overview-stat,
.fi-section,
.fi-wi-chart {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.fi-wi-stats-overview-stat:nth-child(1) { animation-delay: 0.05s; }
.fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 0.1s; }
.fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 0.15s; }
.fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 0.2s; }
.fi-wi-stats-overview-stat:nth-child(5) { animation-delay: 0.25s; }
.fi-wi-stats-overview-stat:nth-child(6) { animation-delay: 0.3s; }

/* ---------- Page padding ---------- */
.fi-page > .fi-page-content {
  padding: 1.5rem 2rem !important;
}

/* ---------- User menu ---------- */
.fi-user-menu-trigger {
  border: 2px solid var(--pp-border) !important;
  transition: all 0.15s ease !important;
}

.fi-user-menu-trigger:hover {
  border-color: #9333EA !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1) !important;
}

/* ---------- Brand area ---------- */
.fi-logo {
  filter: drop-shadow(0 1px 2px rgba(88, 28, 135, 0.15)) !important;
}

/* Add brand text next to logo if not present */
.fi-sidebar-header .fi-logo::after {
  content: "PapaPrint ERP";
  margin-left: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.025em;
  align-self: center;
}

.fi-sidebar-header .fi-logo {
  display: flex !important;
  align-items: center !important;
}

/* Force light mode */
.dark, [data-theme="dark"] {
  display: none !important;
}
html.dark, html[data-theme="dark"] {
  color-scheme: light !important;
}

/* Small sparkline wells */
.fi-wi-stats-overview-stat-chart svg {
  overflow: visible !important;
}

/* Refined dividers throughout */
hr, .fi-divider {
  border-color: var(--pp-border) !important;
  background: var(--pp-border) !important;
}

/* ============================================
   Dropdown panels (Select + global) — fix z-index + spacing
   ============================================ */
.fi-dropdown-panel {
  z-index: 9999 !important;
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  background: #FFFFFF !important;
  margin-top: 6px !important;
  padding: 0.375rem !important;
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* Search input inside dropdown */
.fi-dropdown-panel input[type="text"],
.fi-dropdown-panel input[type="search"] {
  border-radius: 8px !important;
  border: 1px solid #E5E7EB !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  width: 100% !important;
  background: #F9FAFB !important;
  margin-bottom: 0.25rem !important;
}

.fi-dropdown-panel input[type="text"]:focus,
.fi-dropdown-panel input[type="search"]:focus {
  border-color: #9333EA !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12) !important;
  outline: none !important;
}

/* Select option items */
.fi-dropdown-panel [role="option"],
.fi-dropdown-list-item {
  padding: 0.5rem 0.625rem !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  transition: background 0.1s ease !important;
  color: #0F172A !important;
}

.fi-dropdown-panel [role="option"]:hover,
.fi-dropdown-list-item:hover {
  background: #F3E8FF !important;
  color: #581C87 !important;
}

.fi-dropdown-panel [role="option"][aria-selected="true"],
.fi-dropdown-panel [role="option"].fi-selected {
  background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* No-options state */
.fi-dropdown-panel .fi-fo-select-no-search-results,
.fi-dropdown-panel [class*="no-search"] {
  padding: 1.5rem 1rem !important;
  text-align: center !important;
  color: #94A3B8 !important;
  font-size: 0.875rem !important;
  font-style: italic !important;
}

/* Section spacing — avoid dropdown collision with next section */
.fi-section + .fi-section,
.fi-fo-section + .fi-fo-section,
form > div + div {
  margin-top: 1.5rem !important;
}

/* Form field wrapper with select — increase bottom padding when focused so dropdown has room */
.fi-fo-field-wrp:has(.fi-fo-select):focus-within,
.fi-fo-field-wrp:has([role="combobox"]):focus-within {
  position: relative;
  z-index: 100;
}

/* Select trigger button polish */
.fi-fo-select .fi-input-wrp,
.fi-input-wrp.fi-fo-select {
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

.fi-fo-select .fi-input-wrp:focus-within,
.fi-input-wrp.fi-fo-select:focus-within {
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12) !important;
}

/* Multi-select chips */
.fi-fo-select-tag,
.fi-multiselect-tag {
  background: #F3E8FF !important;
  color: #6B21A8 !important;
  border-radius: 6px !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border: 1px solid #E9D5FF !important;
}

/* ============================================
   Fix dropdown clipping — sections must allow popups to overflow
   ============================================ */
.fi-section, .fi-wi-chart, .fi-fo-section, .fi-fo-component-ctn {
  overflow: visible !important;
}

/* But keep header/footer visually clipped to the rounded corners */
.fi-section-header, .fi-fo-section-header {
  border-radius: var(--pp-radius-lg) var(--pp-radius-lg) 0 0 !important;
}

/* Re-apply rounded corners using clip-path to maintain visual containment */
.fi-section, .fi-fo-section {
  isolation: isolate;
}

/* Field with active dropdown rises above all sections */
.fi-fo-field-wrp:focus-within,
.fi-fo-component:focus-within {
  position: relative !important;
  z-index: 9000 !important;
}

/* Ensure dropdown panel is on top of everything */
.fi-dropdown-panel {
  z-index: 99999 !important;
}


/* ============================================
   STRONG FIX: dropdown stacking context escape
   ============================================ */

/* Remove ANY stacking context trap on sections */
.fi-section, .fi-fo-section, .fi-fo-component-ctn, .fi-fo-field-wrp {
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
}

/* When any field in a section is focused/has open dropdown,
   lift the WHOLE section above its siblings */
.fi-section:has(.fi-fo-field-wrp:focus-within),
.fi-section:has(input:focus),
.fi-section:has(button[aria-expanded="true"]),
.fi-fo-section:has(.fi-fo-field-wrp:focus-within),
.fi-fo-section:has(input:focus),
.fi-fo-section:has(button[aria-expanded="true"]),
.fi-section:has(.fi-dropdown-panel:not([style*="display: none"])),
.fi-fo-section:has(.fi-dropdown-panel:not([style*="display: none"])) {
  position: relative !important;
  z-index: 50000 !important;
}

/* Sibling sections after the active one — push them BEHIND */
.fi-section:has(.fi-fo-field-wrp:focus-within) ~ .fi-section,
.fi-section:has(input:focus) ~ .fi-section,
.fi-section:has(button[aria-expanded="true"]) ~ .fi-section,
.fi-fo-section:has(.fi-fo-field-wrp:focus-within) ~ .fi-fo-section,
.fi-fo-section:has(input:focus) ~ .fi-fo-section,
.fi-fo-section:has(button[aria-expanded="true"]) ~ .fi-fo-section {
  position: relative !important;
  z-index: 1 !important;
}

/* Force dropdown panel to FIXED position so it escapes containing blocks */
.fi-dropdown-panel {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Belt and suspenders — every parent of dropdown gets z-index lift */
.fi-fo-field-wrp:focus-within {
  position: relative !important;
  z-index: 999998 !important;
}