/* ===== Dhumi brand skin for the agent platform ===== */
:root {
  --dhumi-purple: #9333ea;       /* official dhumi.com brand purple */
  --dhumi-purple-dark: #7e22ce;
  --dhumi-ink: #1f2750;          /* dhumi navy */
  --dhumi-paper: #f8fafc;
  --dhumi-orange: #f97316;
  --dhumi-green: #16a34a;
  --dhumi-gradient: linear-gradient(90deg, #9333ea 0%, #2563eb 50%, #16a34a 100%); /* dhumi.com signature */
}

/* ===== Typography: Poppins (UI) + Playfair Display (headings), like dhumi.com ===== */
body, .MuiTypography-root, .MuiButton-root, .MuiInputBase-root,
.MuiInputBase-input, .MuiMenuItem-root, .MuiChip-root, .MuiTab-root,
input, textarea, button, select, .MuiTableCell-root {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* Serif display for main page titles */
h1, .MuiTypography-h1, .MuiTypography-h2,
[class*="ViewHeader"] h1, [class*="pageHeader"], [class*="title"] h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.01em;
}

/* Primary buttons -> Dhumi signature gradient */
.MuiButton-containedPrimary,
.MuiButton-contained.MuiButton-colorPrimary,
.MuiLoadingButton-root.MuiButton-containedPrimary,
button.MuiButton-contained[class*="colorPrimary"] {
  background: var(--dhumi-gradient) !important;
  background-size: 160% 100% !important;
  background-position: 0% 50% !important;
  border: none !important;
  transition: background-position 0.4s ease, filter 0.2s ease !important;
}
.MuiButton-containedPrimary:hover,
.MuiButton-contained.MuiButton-colorPrimary:hover {
  background-position: 100% 50% !important;
  filter: brightness(1.03) !important;
}
.MuiButton-outlinedPrimary,
.MuiButton-textPrimary,
.MuiButton-outlined.MuiButton-colorPrimary,
.MuiButton-text.MuiButton-colorPrimary {
  color: var(--dhumi-purple) !important;
  border-color: var(--dhumi-purple) !important;
}

/* Floating action button */
.MuiFab-primary,
.MuiFab-root.MuiFab-primary { background-color: var(--dhumi-purple) !important; }

/* Selection controls */
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked,
.MuiSwitch-colorPrimary.Mui-checked { color: var(--dhumi-purple) !important; }
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { background-color: var(--dhumi-purple) !important; }

/* Tabs */
.MuiTabs-indicator { background-color: var(--dhumi-purple) !important; }
.MuiTab-root.Mui-selected { color: var(--dhumi-purple) !important; }

/* Links */
a { color: var(--dhumi-purple); }

/* Sidebar active item */
.MuiListItemButton-root.Mui-selected { background-color: rgba(147,51,234,0.12) !important; }
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root,
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root svg,
.MuiListItemButton-root.Mui-selected .MuiTypography-root { color: var(--dhumi-purple) !important; }

/* Chips / progress / focus states */
.MuiChip-colorPrimary { background-color: var(--dhumi-purple) !important; }
.MuiCircularProgress-colorPrimary,
.MuiLinearProgress-colorPrimary .MuiLinearProgress-bar { color: var(--dhumi-purple) !important; background-color: var(--dhumi-purple) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--dhumi-purple) !important; }
.MuiInputLabel-root.Mui-focused { color: var(--dhumi-purple) !important; }

/* Logo sizing safety in header */
img[src*="flowise_logo"] { object-fit: contain; }

/* ===== Branded login (dhumi.com feel) — cohesive centered sign-in ===== */
/* opaque gradient backdrop hides the app behind the login modal */
body.dhumi-login-bg .MuiBackdrop-root,
body.dhumi-login-bg .MuiModal-backdrop {
  background: radial-gradient(1100px 720px at 50% 0%, #efe8fb 0%, #f3effb 30%, #eaf0fb 62%, #f7f9fc 100%) !important;
  opacity: 1 !important;
}
/* anchor the card lower so the brand header has clear space above it */
body.dhumi-login-bg .MuiDialog-container { align-items: flex-start !important; }
/* the login card */
body.dhumi-login-bg .MuiDialog-paper,
body.dhumi-login-bg .MuiPaper-rounded {
  border-radius: 24px !important;
  box-shadow: 0 30px 70px -24px rgba(31, 39, 80, 0.30) !important;
  border: 1px solid rgba(147, 51, 234, 0.10) !important;
  overflow: hidden !important;
  padding-top: 6px !important;
  min-width: 400px !important;
  position: relative !important;
  margin-top: 300px !important;
}
/* gradient accent bar across the top of the card */
body.dhumi-login-bg .MuiDialog-paper::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--dhumi-gradient);
}
/* the app's login heading text "Login" -> keep but restyle heavier/navy */
body.dhumi-login-bg .MuiDialog-paper .MuiTypography-root:first-of-type {
  color: var(--dhumi-ink) !important;
  font-weight: 700 !important;
}
/* inputs: taller, rounded, clear focus */
body.dhumi-login-bg .MuiOutlinedInput-root {
  border-radius: 12px !important;
  background: #faf9fe !important;
}
body.dhumi-login-bg .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--dhumi-purple) !important;
  border-width: 2px !important;
}
/* make the Login button full-width & inviting */
body.dhumi-login-bg .MuiDialog-paper .MuiButton-contained {
  width: 100% !important;
  padding: 11px 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 22px -8px rgba(147, 51, 234, 0.5) !important;
}
/* brand header, sitting cleanly above the card */
#dhumi-login-brand {
  position: fixed;
  left: 0; right: 0;
  top: 78px;
  text-align: center;
  z-index: 1400;
  pointer-events: none;
}
#dhumi-login-brand img {
  width: 68px; height: 68px;
  filter: drop-shadow(0 10px 22px rgba(147, 51, 234, 0.30));
}
#dhumi-login-brand .dl-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dhumi-ink);      /* solid navy reads cleaner than gradient text */
  margin-top: 14px;
  padding: 2px 0;
}
#dhumi-login-brand .dl-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: #6b6f80;
  margin: 6px auto 0;
  max-width: 440px;
  line-height: 1.5;
}