/* ═══════════════════════════════════════════
   WhatsFlow - Colorful Light Theme (Notion-style)
   Custom CSS Override for User Dashboard
   ═══════════════════════════════════════════ */

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

/* ─── ROOT VARIABLES ─── */
:root {
  --wf-primary: #22C55E;
  --wf-primary-light: #DCFCE7;
  --wf-primary-dark: #16A34A;
  --wf-bg: #FAFAFA;
  --wf-surface: #FFFFFF;
  --wf-text: #1E293B;
  --wf-text-secondary: #64748B;
  --wf-border: #F1F5F9;
  --wf-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --wf-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --wf-shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --wf-radius: 16px;
  --wf-radius-sm: 12px;
  --wf-radius-xs: 8px;
  --wf-purple: #8B5CF6;
  --wf-blue: #3B82F6;
  --wf-orange: #F97316;
  --wf-pink: #EC4899;
  --wf-cyan: #06B6D4;
}

/* ─── GLOBAL OVERRIDES ─── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--wf-bg) !important;
  -webkit-font-smoothing: antialiased;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ─── TOP NAVBAR ─── */
header,
.MuiAppBar-root,
[class*="MuiAppBar"] {
  background: var(--wf-surface) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 0 var(--wf-border) !important;
  border-bottom: 1px solid var(--wf-border) !important;
}

/* ─── NAV TABS ─── */
.MuiTabs-root {
  min-height: 56px !important;
}

.MuiTab-root,
[class*="MuiTab-root"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-height: 48px !important;
  border-radius: var(--wf-radius-xs) !important;
  margin: 4px 2px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  color: var(--wf-text-secondary) !important;
}

.MuiTab-root:hover,
[class*="MuiTab-root"]:hover {
  background: var(--wf-primary-light) !important;
  color: var(--wf-primary-dark) !important;
}

.Mui-selected,
.MuiTab-root.Mui-selected {
  color: var(--wf-primary-dark) !important;
  font-weight: 600 !important;
  background: var(--wf-primary-light) !important;
}

.MuiTabs-indicator {
  background: var(--wf-primary) !important;
  border-radius: 3px 3px 0 0 !important;
  height: 3px !important;
}

/* ─── CARDS (Paper) ─── */
.MuiPaper-root,
[class*="MuiPaper"] {
  border-radius: var(--wf-radius) !important;
  box-shadow: var(--wf-shadow-sm) !important;
  border: 1px solid var(--wf-border) !important;
  transition: all 0.25s ease !important;
}

.MuiPaper-root:hover {
  box-shadow: var(--wf-shadow-md) !important;
}

.MuiPaper-elevation0 {
  box-shadow: none !important;
  border: none !important;
}

/* ─── BUTTONS ─── */
.MuiButton-contained,
[class*="MuiButton-contained"] {
  border-radius: 50px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 8px 24px !important;
  box-shadow: 0 2px 8px rgba(34,197,94,0.25) !important;
  letter-spacing: 0 !important;
  transition: all 0.2s ease !important;
}

.MuiButton-contained:hover {
  box-shadow: 0 4px 16px rgba(34,197,94,0.35) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-outlined,
[class*="MuiButton-outlined"] {
  border-radius: 50px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 8px 24px !important;
  letter-spacing: 0 !important;
  border-width: 1.5px !important;
  transition: all 0.2s ease !important;
}

.MuiButton-text,
[class*="MuiButton-text"] {
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border-radius: var(--wf-radius-xs) !important;
}

/* ─── FAB BUTTONS ─── */
.MuiFab-root {
  border-radius: var(--wf-radius) !important;
  box-shadow: var(--wf-shadow-md) !important;
}

/* ─── TEXT FIELDS ─── */
.MuiTextField-root .MuiOutlinedInput-root,
.MuiOutlinedInput-root {
  border-radius: var(--wf-radius-sm) !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.MuiOutlinedInput-root fieldset {
  border-color: var(--wf-border) !important;
  border-width: 1.5px !important;
  transition: border-color 0.2s ease !important;
}

.MuiOutlinedInput-root:hover fieldset {
  border-color: var(--wf-primary) !important;
}

.MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: var(--wf-primary) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px var(--wf-primary-light) !important;
}

.MuiInputLabel-root {
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}

/* ─── CHIPS ─── */
.MuiChip-root {
  border-radius: 50px !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
}

/* ─── DIALOGS ─── */
.MuiDialog-paper {
  border-radius: var(--wf-radius) !important;
  box-shadow: var(--wf-shadow-lg) !important;
  border: none !important;
}

/* ─── MENUS/POPOVERS ─── */
.MuiMenu-paper,
.MuiPopover-paper {
  border-radius: var(--wf-radius-sm) !important;
  box-shadow: var(--wf-shadow-lg) !important;
  border: 1px solid var(--wf-border) !important;
}

.MuiMenuItem-root {
  border-radius: var(--wf-radius-xs) !important;
  margin: 2px 6px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.MuiMenuItem-root:hover {
  background: var(--wf-primary-light) !important;
}

/* ─── LISTS ─── */
.MuiListItem-root {
  border-radius: var(--wf-radius-xs) !important;
  margin-bottom: 2px !important;
  transition: all 0.15s ease !important;
}

.MuiListItemButton-root:hover {
  background: var(--wf-primary-light) !important;
}

/* ─── TABLES ─── */
.MuiTableHead-root .MuiTableCell-root {
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--wf-text-secondary) !important;
  background: var(--wf-bg) !important;
  border-bottom: 2px solid var(--wf-border) !important;
}

.MuiTableBody-root .MuiTableCell-root {
  font-size: 0.875rem !important;
  border-bottom: 1px solid var(--wf-border) !important;
  padding: 14px 16px !important;
}

.MuiTableRow-root:hover {
  background: rgba(34,197,94,0.03) !important;
}

/* ─── SWITCH ─── */
.MuiSwitch-root .MuiSwitch-track {
  border-radius: 50px !important;
}

/* ─── AVATAR ─── */
.MuiAvatar-root {
  border: 2px solid var(--wf-border) !important;
}

/* ─── SNACKBAR / ALERTS ─── */
.MuiAlert-root,
.MuiSnackbarContent-root {
  border-radius: var(--wf-radius-sm) !important;
  font-weight: 500 !important;
}

/* ─── WELCOME CARD ─── */
[class*="welcome"],
[class*="Welcome"] {
  border-radius: var(--wf-radius) !important;
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 50%, #FEFCE8 100%) !important;
  border: 1px solid #D1FAE5 !important;
}

/* ─── STAT CARDS ─── */
.MuiGrid-item > .MuiPaper-root {
  border-radius: var(--wf-radius) !important;
  transition: all 0.25s ease !important;
  border: 1px solid var(--wf-border) !important;
}

.MuiGrid-item > .MuiPaper-root:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--wf-shadow-md) !important;
}

/* ─── TYPOGRAPHY ─── */
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-weight: 700 !important;
  color: var(--wf-text) !important;
  letter-spacing: -0.01em !important;
}

.MuiTypography-subtitle1,
.MuiTypography-subtitle2 {
  font-weight: 600 !important;
}

.MuiTypography-body2 {
  color: var(--wf-text-secondary) !important;
}

/* ─── ICON BUTTONS ─── */
.MuiIconButton-root {
  border-radius: var(--wf-radius-xs) !important;
  transition: all 0.2s ease !important;
}

.MuiIconButton-root:hover {
  background: var(--wf-primary-light) !important;
}

/* ─── BADGE (New labels) ─── */
.MuiBadge-badge {
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  border-radius: 50px !important;
}

/* ─── DRAWER ─── */
.MuiDrawer-paper {
  border-radius: 0 var(--wf-radius) var(--wf-radius) 0 !important;
  border-right: none !important;
  box-shadow: var(--wf-shadow-lg) !important;
}

/* ─── ACCORDION ─── */
.MuiAccordion-root {
  border-radius: var(--wf-radius-sm) !important;
  border: 1px solid var(--wf-border) !important;
  box-shadow: none !important;
  margin-bottom: 8px !important;
}

.MuiAccordion-root::before {
  display: none !important;
}

/* ─── TOOLTIP ─── */
.MuiTooltip-tooltip {
  border-radius: var(--wf-radius-xs) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  padding: 8px 14px !important;
  background: var(--wf-text) !important;
}

/* ─── SKELETON ─── */
.MuiSkeleton-root {
  border-radius: var(--wf-radius-xs) !important;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 50px;
}

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

/* ─── SELECTION ─── */
::selection {
  background: var(--wf-primary-light);
  color: var(--wf-primary-dark);
}

/* ─── SMOOTH TRANSITIONS ─── */
a, button, input, select, textarea,
.MuiPaper-root, .MuiButton-root, .MuiTab-root,
.MuiListItem-root, .MuiMenuItem-root, .MuiChip-root {
  transition: all 0.2s ease !important;
}

/* ─── COLORFUL STAT CARD BORDERS ─── */
.MuiGrid-container > .MuiGrid-item:nth-child(4n+1) > .MuiPaper-root {
  border-left: 3px solid var(--wf-primary) !important;
}
.MuiGrid-container > .MuiGrid-item:nth-child(4n+2) > .MuiPaper-root {
  border-left: 3px solid var(--wf-blue) !important;
}
.MuiGrid-container > .MuiGrid-item:nth-child(4n+3) > .MuiPaper-root {
  border-left: 3px solid var(--wf-orange) !important;
}
.MuiGrid-container > .MuiGrid-item:nth-child(4n+4) > .MuiPaper-root {
  border-left: 3px solid var(--wf-purple) !important;
}

/* ─── LOADING BAR ─── */
.MuiLinearProgress-root {
  border-radius: 50px !important;
  height: 4px !important;
}

/* ─── BREADCRUMBS ─── */
.MuiBreadcrumbs-root {
  font-size: 0.85rem !important;
}

/* ─── DIVIDER ─── */
.MuiDivider-root {
  border-color: var(--wf-border) !important;
}

/* ─── PAGINATION ─── */
.MuiPaginationItem-root {
  border-radius: var(--wf-radius-xs) !important;
  font-weight: 500 !important;
}

/* ─── BACKDROP ─── */
.MuiBackdrop-root {
  backdrop-filter: blur(4px) !important;
}