/* AK Trading ERP - Modern UI Theme (Fixed) */

/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --bg-sidebar: #1e293b;
  --bg-body: #f8fafc;
  --text-white: #ffffff;
  --border-color: #e2e8f0;
  --radius: 12px;
}

/* Global Font */
body, * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Body Background */
body {
  background: var(--bg-body) !important;
}

/* ============================================
   SIDEBAR FIX - Dark Modern Look
   ============================================ */
.css-dip3t8, 
.css-1wvake5,
.ps-sidebar-root,
.pro-sidebar,
[class*="Sidebar"],
[class*="sidebar"] {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  min-height: 100vh !important;
}

/* Sidebar Inner */
.ps-sidebar-container,
.pro-sidebar-inner,
.css-dip3t8 > div {
  background: transparent !important;
}

/* Sidebar Menu Items - Make text visible */
.ps-menu-button,
.ps-menuitem-root,
.pro-menu-item,
.css-1t8x7v1,
[class*="menuitem"],
[class*="MenuItem"] {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 12px 20px !important;
  margin: 4px 10px !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.ps-menu-button:hover,
.ps-menuitem-root:hover,
.pro-menu-item:hover {
  background: rgba(99, 102, 241, 0.3) !important;
  color: #ffffff !important;
}

/* Active menu item */
.ps-menu-button.ps-active,
.ps-menuitem-root.ps-active,
.pro-menu-item.active,
[class*="active"] .ps-menu-button {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
}

/* Sidebar Icons */
.ps-menu-icon,
.pro-icon,
[class*="menu"] svg {
  color: rgba(255, 255, 255, 0.7) !important;
  min-width: 24px !important;
}

/* Sidebar section titles */
.ps-menu-label,
.css-12w9als,
[class*="menu-label"] {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 20px 20px 10px !important;
}

/* ============================================
   HEADER
   ============================================ */
header, 
.MuiAppBar-root,
[class*="header"],
[class*="Header"] {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ============================================
   STAT CARDS - Colorful Gradients
   ============================================ */
.MuiPaper-root:has(.MuiTypography-root),
[class*="stat-card"],
[class*="StatCard"] {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}

/* ============================================
   CARDS
   ============================================ */
.MuiPaper-root,
.MuiCard-root,
[class*="card"],
[class*="Card"] {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border: 1px solid #f1f5f9 !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.MuiButton-contained,
.MuiButton-containedPrimary,
button[class*="primary"] {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

.MuiButton-contained:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45) !important;
}

/* ============================================
   TABLES
   ============================================ */
.MuiTable-root,
table {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.MuiTableHead-root,
thead {
  background: #f8fafc !important;
}

.MuiTableCell-head,
th {
  font-weight: 600 !important;
  color: #64748b !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.MuiTableRow-root:hover,
tr:hover {
  background: rgba(99, 102, 241, 0.04) !important;
}

/* ============================================
   INPUTS
   ============================================ */
.MuiOutlinedInput-root,
.MuiTextField-root input,
input, select, textarea {
  border-radius: 10px !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #6366f1 !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #6366f1 !important;
  border-width: 2px !important;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */
.MuiMenu-paper,
.MuiPopover-paper {
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
  margin-top: 8px !important;
}

.MuiMenuItem-root {
  padding: 12px 20px !important;
  font-size: 14px !important;
}

.MuiMenuItem-root:hover {
  background: rgba(99, 102, 241, 0.08) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================
   FIX: Remove unwanted overlays
   ============================================ */
.css-12i7wg6-MuiPaper-root-MuiDrawer-paper,
.MuiDrawer-paper {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
  border: none !important;
}

/* Ensure sidebar text is visible */
.MuiListItemText-primary,
.MuiTypography-body1,
[class*="sidebar"] span,
[class*="Sidebar"] span,
.ps-menu-label span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Fix any blue overlays */
[style*="background: rgb(187, 222, 251)"],
[style*="background: #bbdefb"],
[style*="background-color: rgb(187, 222, 251)"] {
  background: transparent !important;
}