:root {
  /* Primary & Brand */
  --primary: #1D61A8 !important;
  --primary-color: #1D61A8 !important;
  --primary-rgb: 29, 97, 168 !important;
  --primary-hover: #144B84 !important;
  --primary-light: #EBF3FA !important;
  --accent: #0EA5E9 !important;
  --accent-rgb: 14, 165, 233 !important;
  --accent-light: #F0F9FF !important;

  /* Surfaces & Canvas */
  --bg-color: #F8FAFC !important;
  --body-bg: #F8FAFC !important;
  --card-bg: #FFFFFF !important;
  --surface-bg: #FFFFFF !important;
  --modal-bg: #FFFFFF !important;

  /* Borders & Dividers */
  --border-color: #E2E8F0 !important;
  --subtle-border-color: #E2E8F0 !important;
  --table-border-color: #E2E8F0 !important;

  /* Typography */
  --text-color: #0F172A !important;
  --text-primary: #0F172A !important;
  --text-muted: #64748B !important;
  --heading-color: #0F172A !important;
  --font-stack: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  /* Corner Radius Scale */
  --border-radius: 12px !important;
  --border-radius-sm: calc(12px / 2) !important;
  --border-radius-md: 12px !important;
  --border-radius-lg: calc(12px * 1.5) !important;
  --border-radius-nested: max(0px, calc(12px - 4px)) !important;
  --border-radius-full: 9999px !important;

  /* Status Colors */
  --success: #10B981 !important;
  --success-rgb: 16, 185, 129 !important;
  --warning: #F59E0B !important;
  --warning-rgb: 245, 158, 11 !important;
  --danger: #EF4444 !important;
  --danger-rgb: 239, 68, 68 !important;
  --info: #3B82F6 !important;
  --info-rgb: 59, 130, 246 !important;

  /* Auth / Login Customization Tokens */
  --login-bg-start: #0C2B4E !important;
  --login-bg-end: #07172C !important;
  --login-canvas-bg: #F4F7FB !important;
  --login-card-bg: #FFFFFF !important;
  --login-card-border: #E2E8F0 !important;
  --login-card-border-rgb: 226, 232, 240 !important;
  --login-title-color: #0F172A !important;
  --login-subtitle-color: #64748B !important;
  --login-input-bg: #E2E8F0 !important;
  --login-input-text: #0F172A !important;
  --login-input-border: #CBD5E1 !important;
  --login-input-focus: #0D4B8A !important;
  --login-input-focus-rgb: 13, 75, 138 !important;
  --login-btn-primary-bg: #0D4B8A !important;
  --login-btn-primary-hover: #082E56 !important;
  --login-btn-primary-text: #FFFFFF !important;
  --login-btn-primary-rgb: 13, 75, 138 !important;
  --login-btn-secondary-bg: #174D87 !important;
  --login-btn-secondary-text: #FFFFFF !important;
  --login-btn-secondary-border: #E2E8F0 !important;
  --login-forgot-color: #93C5FD !important;
  --login-hero-accent: #00F0FF !important;
  --login-hero-accent-rgb: 0, 240, 255 !important;
  --login-hero-glow-secondary: #7000FF !important;
  --login-hero-glow-secondary-rgb: 112, 0, 255 !important;
  --login-hero-status-color: #10B981 !important;
  --login-reset-bg: #065F46 !important;
  --login-reset-text: #ECFDF5 !important;
  --login-reset-border: #10B981 !important;
  --login-error-bg: #7F1D1D !important;
  --login-error-text: #FEF2F2 !important;
  --login-blur: 16px !important;
}

/* ==========================================================================
   THEME ERP — AUTHENTICATION & LOGIN SUITE
   ========================================================================== */
/* ==========================================================================
   10. AUTHENTICATION & LOGIN SUITE (50/50 SPLIT SCREEN WITH 3D HUD HERO)
   ========================================================================== */
html,
body[data-route="login"],
body[data-path="login"],
body[data-path="update-password"],
#page-login {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--login-canvas-bg, #F4F7FB) !important;
}

body[data-route="login"] .navbar,
body[data-path="login"] .navbar,
body[data-path="update-password"] .navbar,
body[data-route="login"] .web-footer,
body[data-path="login"] .web-footer,
body[data-path="update-password"] .web-footer,
body[data-route="login"] .page-breadcrumbs,
body[data-path="login"] .page-breadcrumbs,
body[data-route="login"] .page-header-wrapper,
body[data-path="login"] .page-header-wrapper {
  display: none !important;
}

#page-login {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
}

#page-login .page-content-wrapper,
#page-login main.container {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* LEFT HALF: 50% Clean Light Surface Hosting the Standalone White Card */
#page-login .page_content {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  height: 100vh !important;
  background: var(--login-canvas-bg, #F4F7FB) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 32px !important;
  overflow-y: auto !important;
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Section Containers */
.for-login,
.for-forgot,
.for-login-with-email-link,
.for-signup,
.for-update-password,
.for-email-login {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Standalone White Card (Higher Specificity to override Frappe core 371px max-width) */
.for-login .page-card,
.for-forgot .page-card,
.for-login-with-email-link .page-card,
.for-signup .page-card,
.login-content.page-card,
.page-card[data-route="update-password"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: var(--login-card-bg, #FFFFFF) !important;
  border-radius: 24px !important;
  border: 1px solid var(--login-card-border, rgba(226, 232, 240, 0.8)) !important;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 0 1px rgba(15, 23, 42, 0.12) !important;
  overflow: visible !important;
  min-height: auto !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 38px 34px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Card Header */
.login-content.page-card .page-card-head {
  flex: none !important;
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-shadow: none !important;
  border: none !important;
}

.brand-header-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
}

.brand-header-badge img.app-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 48px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.brand-header-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.brand-company-name {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--login-title-color, #0F172A) !important;
  line-height: 1.2 !important;
}

.brand-company-sub {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--login-subtitle-color, #64748B) !important;
  margin-top: 2px !important;
}

.login-content.page-card .page-card-head-text {
  width: 100% !important;
  text-align: left !important;
}

.login-content.page-card .page-card-head h4,
.login-content.page-card .page-card-head .page-card-head-text h4 {
  color: var(--login-title-color, #0F172A) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}

.login-content.page-card .page-card-head .page-card-subtitle {
  color: var(--login-subtitle-color, #64748B) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* Card Body & Form Elements */
.login-content.page-card form.form-signin,
.login-content.page-card .page-card-body {
  flex: none !important;
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  color: var(--login-title-color, #0F172A) !important;
  border: none !important;
}

.form-group {
  margin-bottom: 18px !important;
  position: relative !important;
}

.form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  margin-bottom: 7px !important;
  display: block !important;
  text-align: left !important;
}

.email-field,
.password-field {
  position: relative !important;
  width: 100% !important;
}

.login-content.page-card .form-control {
  background-color: var(--login-input-bg, #FFFFFF) !important;
  color: var(--login-input-text, #0F172A) !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--login-input-border, #CBD5E1) !important;
  padding: 10px 14px 10px 42px !important;
  font-size: 14px !important;
  height: 46px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.login-content.page-card .form-control:focus {
  background-color: var(--login-input-bg, #FFFFFF) !important;
  border-color: var(--login-input-focus, #0D4B8A) !important;
  box-shadow: 0 0 0 3.5px rgba(var(--login-input-focus-rgb, 13, 75, 138), 0.15) !important;
  outline: none !important;
}

.email-field .field-icon,
.password-field .field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  stroke: #64748B !important;
  fill: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.password-field .toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  stroke: #64748B !important;
  fill: none !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.forgot-password-message {
  text-align: right !important;
  margin: 6px 0 0 0 !important;
}

.forgot-password-message a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--login-forgot-color, #0D4B8A) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.forgot-password-message a:hover {
  color: var(--login-btn-primary-hover, #082E56) !important;
  text-decoration: underline !important;
}

/* Auxiliary Row: Remember Me & SSO */
.theme-auth-extra-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  margin: 14px 0 4px 0 !important;
  font-size: 13px !important;
  color: #64748B !important;
}

.theme-remember-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  user-select: none !important;
}

.theme-remember-checkbox input[type="checkbox"] {
  accent-color: var(--login-link-color, #0D4B8A) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.theme-sso-link {
  font-weight: 600 !important;
  color: var(--login-link-color, #0D4B8A) !important;
  cursor: pointer !important;
}

/* Pill Button "Sign In to ERP →" */
.page-card-actions {
  margin-top: 10px !important;
  padding: 0 !important;
  width: 100% !important;
}

.btn-login,
.btn-forgot,
.btn-signup,
.for-login .btn-login,
.for-forgot .btn-forgot,
.for-login-with-email-link .btn-login-with-email-link,
.for-update-password .btn-update-password {
  background: var(--login-btn-primary-bg, #0D4B8A) !important;
  background-color: var(--login-btn-primary-bg, #0D4B8A) !important;
  color: var(--login-btn-primary-text, #FFFFFF) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 0 24px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(var(--login-btn-primary-rgb, 13, 75, 138), 0.28) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.btn-login:hover,
.btn-forgot:hover,
.btn-signup:hover,
.btn-update-password:hover {
  background: var(--login-btn-primary-hover, #082E56) !important;
  background-color: var(--login-btn-primary-hover, #082E56) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(var(--login-btn-primary-rgb, 13, 75, 138), 0.4) !important;
}

.theme-btn-arrow {
  margin-left: 8px !important;
  font-size: 17px !important;
  transition: transform 0.2s ease !important;
}

.btn-login:hover .theme-btn-arrow {
  transform: translateX(3px) !important;
}

/* Secondary Option Button */
a[href="#login-with-email-link"],
.btn-email-link,
.btn-login-with-email-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: var(--login-btn-secondary-bg, #F8FAFC) !important;
  color: var(--login-btn-secondary-text, #334155) !important;
  border: 1px solid var(--login-btn-secondary-border, #E2E8F0) !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  height: 44px !important;
  padding: 0 20px !important;
  margin-top: 12px !important;
  text-decoration: none !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

a[href="#login-with-email-link"]:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* RIGHT HALF: 50% Midnight Navy HUD Canvas */
.theme-login-right-panel {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
  height: 100vh !important;
  background: linear-gradient(145deg, var(--login-bg-end, #07172C) 0%, var(--login-bg-start, #0C2B4E) 55%, #061528 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 60px 48px 40px 48px !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
}

/* Cosmic Ambient Radial Blooms */
.theme-login-right-panel::before {
  content: "" !important;
  position: absolute !important;
  top: 15% !important;
  left: 20% !important;
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle, rgba(var(--login-hero-accent-rgb, 0, 240, 255), 0.18) 0%, transparent 70%) !important;
  filter: blur(60px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.theme-login-right-panel::after {
  content: "" !important;
  position: absolute !important;
  bottom: 20% !important;
  right: 15% !important;
  width: 420px !important;
  height: 420px !important;
  background: radial-gradient(circle, rgba(var(--login-hero-glow-secondary-rgb, 112, 0, 255), 0.22) 0%, transparent 70%) !important;
  filter: blur(70px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Top Right Status Pill */
.theme-hero-status-pill {
  position: relative !important;
  z-index: 2 !important;
  align-self: flex-end !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(var(--login-hero-accent-rgb, 0, 240, 255), 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 7px 16px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.theme-hero-status-pill .status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--login-hero-status-color, #10B981) !important;
  box-shadow: 0 0 10px var(--login-hero-status-color, #10B981) !important;
  animation: pulseGreen 2s infinite !important;
}

@keyframes pulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.theme-hero-status-pill .status-text {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  color: #E2E8F0 !important;
  font-family: monospace, sans-serif !important;
}

/* Center Visual Stage */
.theme-hero-center-stage {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 480px !important;
  height: 480px !important;
  margin: auto 0 !important;
}

.theme-hero-orbital-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.theme-hero-rings-svg {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Central 3D Squircle Emblem */
.theme-hero-squircle-badge {
  position: relative !important;
  z-index: 3 !important;
  width: 140px !important;
  height: 140px !important;
  border-radius: 36px !important;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(14, 35, 60, 0.95) 50%, rgba(7, 21, 38, 0.98) 100%) !important;
  border: 1.5px solid rgba(var(--login-hero-accent-rgb, 0, 240, 255), 0.4) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(var(--login-hero-accent-rgb, 0, 240, 255), 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: floatSlow 6s ease-in-out infinite !important;
}

@keyframes floatSlow {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(0.5deg);
  }
}

.theme-squircle-inner {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.theme-emblem-m {
  width: 100% !important;
  height: 100% !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Telemetry HUD Floating Glass Chips */
.theme-telemetry-chip {
  position: absolute !important;
  z-index: 4 !important;
  background: rgba(10, 25, 47, 0.75) !important;
  border: 1px solid rgba(var(--login-hero-accent-rgb, 0, 240, 255), 0.25) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.theme-telemetry-chip.left-chip {
  bottom: 40px !important;
  left: -20px !important;
}

.theme-telemetry-chip.right-chip {
  top: 60px !important;
  right: -20px !important;
}

.chip-label {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
  color: #94A3B8 !important;
  margin-bottom: 5px !important;
  font-family: monospace, sans-serif !important;
}

.chip-eq-bars {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  height: 26px !important;
}

.chip-eq-bars span {
  width: 4px !important;
  background: linear-gradient(180deg, var(--login-hero-accent, #00F0FF) 0%, #0066FF 100%) !important;
  border-radius: 2px !important;
  animation: eqBounce 1.4s ease-in-out infinite alternate !important;
}

.chip-eq-bars span:nth-child(2) {
  animation-delay: 0.2s !important;
}

.chip-eq-bars span:nth-child(3) {
  animation-delay: 0.4s !important;
}

.chip-eq-bars span:nth-child(4) {
  animation-delay: 0.1s !important;
}

.chip-eq-bars span:nth-child(5) {
  animation-delay: 0.3s !important;
}

@keyframes eqBounce {
  0% {
    transform: scaleY(0.4);
  }

  100% {
    transform: scaleY(1);
  }
}

.chip-val {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: monospace, sans-serif !important;
}

.chip-val span {
  font-size: 10px !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10B981 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

/* Bottom Caption */
.theme-hero-footer-caption {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  margin-top: auto !important;
}

.theme-caption-title {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.4px !important;
}

.theme-caption-sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 5px !important;
}

/* Password Reset & Notification Alert Banners */
.login-error-banner:empty,
.login-error-banner:has(span:empty),
.login-error-banner[style*="display: none"],
.login-error-banner:not(.active):not([style*="display: block"]):not([style*="display: flex"]) {
  display: none !important;
}

.login-error-banner:not(:empty):not([style*="display: none"]),
.for-login .alert:not(:empty),
.for-forgot .alert:not(:empty),
.for-login-with-email-link .alert:not(:empty),
.for-update-password .alert:not(:empty) {
  background-color: var(--login-error-bg) !important;
  color: var(--login-error-text) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.for-forgot .alert-success,
.for-login-with-email-link .alert-success,
.reset-success-card,
.login-success-banner {
  background-color: var(--login-reset-bg) !important;
  color: var(--login-reset-text) !important;
  border: 1px solid var(--login-reset-border) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 15px rgba(6, 95, 70, 0.25) !important;
}

.sign-up-message,
.sign-up-message a,
.for-forgot a[href="#login"],
.for-login-with-email-link a[href="#login"] {
  color: #0D4B8A !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  margin-top: 14px !important;
  display: block !important;
  text-align: center !important;
}

.sign-up-message a:hover,
.for-forgot a[href="#login"]:hover,
.for-login-with-email-link a[href="#login"]:hover {
  color: #082E56 !important;
  text-decoration: underline !important;
}

/* Reduced motion accessibility (WCAG 2.2 AA) */
@media (prefers-reduced-motion: reduce) {
  .theme-hero-squircle-badge,
  .theme-hero-status-pill .status-dot,
  .chip-eq-bars span {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   RESPONSIVE OVERHAUL (MOBILE & TABLET BREAKPOINTS)
   ========================================================================== */
@media (max-width: 991px) {

  html,
  body[data-route="login"],
  body[data-path="login"],
  body[data-path="update-password"],
  #page-login {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  #page-login,
  #page-login .page-content-wrapper,
  #page-login main.container {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  #page-login .page_content {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: 32px 16px !important;
  }

  .theme-login-right-panel {
    display: none !important;
  }

  .login-content.page-card,
  .page-card[data-route="update-password"] {
    max-width: 100% !important;
    padding: 32px 22px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 480px) {

  .for-login .page-card,
  .for-forgot .page-card,
  .for-login-with-email-link .page-card,
  .for-signup .page-card,
  .login-content.page-card,
  .page-card[data-route="update-password"] {
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  .login-content.page-card .page-card-head-text h4 {
    font-size: 22px !important;
  }

  .theme-auth-extra-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
}

@media (max-height: 650px) {
  html,
  body,
  #page-login,
  body[data-route="login"],
  body[data-path="login"],
  body[data-path="update-password"],
  .for-login {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #page-login,
  #page-login .page-content-wrapper,
  #page-login main.container {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  #page-login .page_content {
    padding: 16px 16px !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  .login-content.page-card,
  .page-card[data-route="update-password"] {
    padding: 20px 20px !important;
    margin: 12px auto 24px auto !important;
  }
  .theme-login-form-header {
    margin-bottom: 12px !important;
  }
}

   13. LOGIN / AUTH PAGE — complete fix (12 issues per resolution)
       brand-header-badge collapse, forgot link touch target, etc.
   ───────────────────────────────────────────────────────────────────────── */

.for-login .login-content,
.for-signup .login-content,
.for-forgot .login-content {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 40px 32px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .for-login .login-content,
  .for-signup .login-content,
  .for-forgot .login-content {
    padding: 28px 20px !important;
    max-width: 100% !important;
  }
}

/* Forgot password / SSO links — must be 44px touch targets */
.for-login .sign-up-message a,
.for-login .forgot-password-message a,
.for-forgot .login-content a,
.for-signup .login-content a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 10px 4px !important;
}


/* ==========================================================================
   THEME ERP — CENTRAL DESK & APP SWITCHER (#page-desktop)
   ========================================================================== */
/* ==========================================================================
   11. DESK APP SWITCHER & CENTRAL OPERATIONS HUB (#page-desktop)
   ========================================================================== */

body[data-route=""] #page-desktop,
body[data-route="desk"] #page-desktop {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body:not([data-route=""]):not([data-route="desk"]) #page-desktop,
#page-desktop[style*="display: none"],
#page-desktop[style*="display:none"],
.page-container[style*="display: none"],
.page-container[style*="display:none"],
[id^="page-"][style*="display: none"],
[id^="page-"][style*="display:none"],
.hidden,
[hidden] {
  display: none !important;
}

/* Unify Body Background on /desk so even pre-DOM paint matches #page-desktop */
body[data-route=""],
body[data-route="desk"] {
  background-color: #F8FAFC !important;
  background-image:
    radial-gradient(at 15% 15%, rgba(13, 75, 138, 0.08) 0px, transparent 55%),
    radial-gradient(at 85% 10%, rgba(2, 132, 199, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(99, 102, 241, 0.05) 0px, transparent 60%),
    radial-gradient(1200px 600px at 50% -50px, rgba(13, 75, 138, 0.06) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
}

[data-theme="dark"] body[data-route=""],
[data-theme="dark"] body[data-route="desk"] {
  background-color: #060A17 !important;
  background-image:
    radial-gradient(at 15% 15%, rgba(13, 75, 138, 0.22) 0px, transparent 55%),
    radial-gradient(at 85% 10%, rgba(2, 132, 199, 0.18) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(99, 102, 241, 0.12) 0px, transparent 60%),
    radial-gradient(1200px 600px at 50% -50px, rgba(13, 75, 138, 0.25) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
}

#page-desktop {
  background-color: #F8FAFC !important;
  background-image:
    radial-gradient(at 10% 10%, rgba(0, 240, 255, 0.08) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(112, 0, 255, 0.06) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(29, 97, 168, 0.07) 0px, transparent 60%),
    radial-gradient(1200px 600px at 50% -50px, rgba(13, 75, 138, 0.07) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

[data-theme="dark"] #page-desktop {
  background-color: #060A17 !important;
  background-image:
    radial-gradient(at 10% 10%, rgba(0, 240, 255, 0.16) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(112, 0, 255, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(29, 97, 168, 0.22) 0px, transparent 60%),
    radial-gradient(1200px 600px at 50% -50px, rgba(13, 75, 138, 0.3) 0%, transparent 70%) !important;
  background-attachment: fixed !important;
}

#page-desktop,
#page-desktop .main-section,
#page-desktop .container.page-body,
#page-desktop .container,
#page-desktop .page-wrapper,
#page-desktop .page-content,
#page-desktop .layout-main,
#page-desktop .layout-main-section-wrapper,
#page-desktop .layout-main-section {
  max-width: 100% !important;
  min-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#page-desktop .layout-side-section {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#page-desktop .page-head {
  display: none !important;
}

#page-desktop .desktop-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 40px 60px 40px !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  #page-desktop .desktop-wrapper {
    padding: 0 24px 40px 24px !important;
  }
}

@media (max-width: 767px) {
  #page-desktop .desktop-wrapper {
    padding: 0 16px 32px 16px !important;
  }
}

/* Attractive High-End Navbar matching Corporate Standard - Sticky across ALL resolutions */
#page-desktop .desktop-navbar {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, var(--primary, #01305c) 0%, var(--primary-hover, #084379) 50%, var(--navbar-bg, #012447) 100%) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  border: 1px solid rgba(226, 236, 246, 0.25) !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.35) !important;
  border-radius: 0 0 16px 16px !important;
  margin: 0 0 20px 0 !important;
  padding: 10px 22px !important;
  box-shadow: 0 10px 28px -5px rgba(1, 48, 92, 0.35), 0 0 16px rgba(226, 236, 246, 0.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
}

/* Ensure Desk canvas ancestors allow sticky positioning without scroll container trapping */
#page-desktop,
#page-desktop .layout-main-section,
#page-desktop .layout-main-section-wrapper,
#page-desktop .layout-main,
#page-desktop .page-wrapper,
#page-desktop .page-content,
#page-desktop .page-body,
#page-desktop .desktop-wrapper {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

#page-desktop .desktop-navbar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 4% !important;
  right: 4% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(226, 236, 246, 0.75) 50%, transparent 100%) !important;
  pointer-events: none !important;
  box-shadow: 0 0 8px rgba(226, 236, 246, 0.4) !important;
}

[data-theme="dark"] #page-desktop .desktop-navbar {
  background: linear-gradient(135deg, var(--navbar-bg, #011d38) 0%, var(--primary, #01305c) 50%, #001224 100%) !important;
  border: 1px solid rgba(226, 236, 246, 0.22) !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.35) !important;
  box-shadow: 0 12px 32px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(226, 236, 246, 0.15) !important;
}

[data-theme="dark"] #page-desktop .desktop-navbar::after {
  background: linear-gradient(90deg, transparent 0%, rgba(226, 236, 246, 0.8) 50%, transparent 100%) !important;
  box-shadow: 0 0 10px rgba(226, 236, 246, 0.6) !important;
}

/* Universal return-to-desk interactive brand logo (Zero Shadow Corporate Standard) */
#page-desktop .desktop-navbar .navbar-home,
.navbar-home,
.navbar-brand,
#brand-logo,
.navbar .app-logo {
  cursor: pointer !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  filter: none !important;
  box-shadow: none !important;
}

#page-desktop .desktop-navbar .navbar-home:hover,
.navbar-home:hover,
.navbar-brand:hover,
#brand-logo:hover,
.navbar .app-logo:hover {
  opacity: 0.95 !important;
  transform: translateY(-1px) scale(1.02) !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Global desk workspace navigation polish - Corporate Navy #01305c */
.navbar.navbar-default,
body:not([data-route=""]) .navbar,
.sticky-top.navbar {
  background: linear-gradient(135deg, #01305c 0%, #084379 50%, #012447 100%) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.25) !important;
  box-shadow: 0 4px 20px -2px rgba(1, 48, 92, 0.4), 0 0 16px rgba(226, 236, 246, 0.08) !important;
}

[data-theme="dark"] .navbar.navbar-default,
[data-theme="dark"] body:not([data-route=""]) .navbar,
[data-theme="dark"] .sticky-top.navbar {
  background: linear-gradient(135deg, #011d38 0%, #01305c 50%, #001224 100%) !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.22) !important;
  box-shadow: 0 6px 24px -3px rgba(0, 0, 0, 0.6), 0 0 16px rgba(226, 236, 246, 0.1) !important;
}

/* Navbar Link & Text Contrast */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .navbar-nav>li>a,
.navbar-home,
#page-desktop .desktop-navbar .navbar-home,
.navbar .user-avatar {
  color: #F8FAFC !important;
}

.navbar .nav-link:hover,
.navbar-home:hover,
#page-desktop .desktop-navbar .navbar-home:hover {
  color: #e2ecf6 !important;
}

/* Standard Frappe ERP Desk Navbar Search */
.desktop-search-wrapper {
  flex: 1 !important;
  max-width: 320px !important;
  position: relative !important;
}

#desktop-navbar-modal-search,
.desktop-navbar-modal-search,
.desktop-search-wrapper button {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  padding: 0 12px !important;
  height: 32px !important;
  width: 100% !important;
  min-width: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  cursor: pointer !important;
}

#desktop-navbar-modal-search:hover,
.desktop-navbar-modal-search:hover,
.desktop-search-wrapper button:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}

#desktop-navbar-modal-search .desktop-search-icon,
.desktop-navbar-modal-search .desktop-search-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
}

#desktop-navbar-modal-search .desktop-search-icon svg,
.desktop-navbar-modal-search .desktop-search-icon svg {
  stroke: rgba(255, 255, 255, 0.65) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  width: 14px !important;
  height: 14px !important;
  filter: none !important;
}

#desktop-navbar-modal-search .desktop-keyboard-shortcut,
.desktop-navbar-modal-search .desktop-keyboard-shortcut {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  letter-spacing: 0.3px !important;
}

/* Awesomebar search input in corporate navbar */
.navbar .search-bar input.form-control,
.navbar .form-control[type="text"],
.search-box input {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-radius: var(--border-radius-sm, 6px) !important;
  padding: 0 10px !important;
  height: 32px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.navbar .search-bar input.form-control::placeholder,
.search-box input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.navbar .search-bar input.form-control:focus,
.search-box input:focus {
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

/* Brand logo styling in navbar - Flat Corporate Standard */
#page-desktop .desktop-navbar #brand-logo,
.navbar #brand-logo {
  max-height: 32px !important;
  height: 32px !important;
  width: auto !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Action Icons inside navbar */
#page-desktop .desktop-navbar .dropdown-notifications,
.desktop-navbar .dropdown-notifications {
  margin-right: 4px !important;
}

#page-desktop .desktop-navbar .dropdown-notifications>button,
.desktop-navbar .dropdown-notifications>button,
.navbar .notifications-icon {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(226, 236, 246, 0.3) !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

#page-desktop .desktop-navbar .dropdown-notifications>button:hover,
.desktop-navbar .dropdown-notifications>button:hover,
.navbar .notifications-icon:hover {
  background: rgba(226, 236, 246, 0.2) !important;
  border-color: #e2ecf6 !important;
  box-shadow: 0 0 14px rgba(226, 236, 246, 0.4) !important;
}

.navbar .notifications-icon svg,
.navbar .dropdown-help svg,
.navbar .dropdown-notifications svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.navbar .notifications-icon:hover svg,
.navbar .dropdown-help:hover svg,
.desktop-navbar .dropdown-notifications>button:hover svg {
  stroke: #e2ecf6 !important;
  color: #e2ecf6 !important;
  filter: none !important;
}

/* User avatar pill in navbar */
#page-desktop .desktop-navbar .desktop-avatar,
.desktop-navbar .desktop-avatar,
.navbar .user-avatar {
  border-radius: 50% !important;
  padding: 2px !important;
  background: linear-gradient(135deg, #01305c 0%, #084379 100%) !important;
  border: 2px solid #e2ecf6 !important;
  box-shadow: 0 2px 8px rgba(1, 48, 92, 0.3) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#page-desktop .desktop-navbar .desktop-avatar:hover,
.desktop-navbar .desktop-avatar:hover,
.navbar .user-avatar:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 0 14px rgba(226, 236, 246, 0.6) !important;
}

#page-desktop .desktop-navbar .desktop-avatar .avatar-frame,
.desktop-navbar .desktop-avatar .avatar-frame {
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
}

/* Executive Notification Dropdown Presentation */
#page-desktop .desktop-navbar .desktop-notifications,
.navbar .dropdown-notifications {
  position: relative !important;
}

#page-desktop .desktop-navbar .desktop-notifications .dropdown-menu.notifications-list,
.dropdown-notifications .dropdown-menu.notifications-list,
.desktop-notifications .dropdown-menu.notifications-list,
.navbar .dropdown-notifications .notifications-list,
.notifications-list {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
  margin-top: 8px !important;
  right: 0 !important;
  left: auto !important;
  width: 420px !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(85vh) !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(1, 48, 92, 0.16) !important;
  box-shadow: 0 24px 48px -12px rgba(1, 48, 92, 0.28), 0 4px 16px rgba(226, 236, 246, 0.5) !important;
  background-color: #FFFFFF !important;
  z-index: 1050 !important;
}

.notification-list-body {
  max-height: calc(85vh - 65px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.notification-list-header {
  background: linear-gradient(135deg, #01305c 0%, #084379 100%) !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.25) !important;
  margin: 0 !important;
  width: 100% !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 17px !important;
  box-sizing: border-box !important;
}

li.notifications-category {
  cursor: pointer !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(226, 236, 246, 0.14) !important;
  border: 1px solid rgba(226, 236, 246, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

li.notifications-category.active {
  background: #FFFFFF !important;
  color: #01305c !important;
  border-color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

.recent-item.notification-item {
  display: flex !important;
  align-items: flex-start !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #edf3f8 !important;
  background-color: #FFFFFF !important;
}

.recent-item.notification-item.unread {
  background-color: rgba(226, 236, 246, 0.45) !important;
  border-left: 4px solid #01305c !important;
}

.recent-item.notification-item .message>div:first-child {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #01305c !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}

.recent-item.notification-item .notification-timestamp .frappe-timestamp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #01305c !important;
  background-color: #e2ecf6 !important;
  padding: 2.5px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(1, 48, 92, 0.15) !important;
}

/* Notification unread badge */
.navbar .notifications-icon .unread-count {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.8) !important;
  border: 1.5px solid #07172C !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Central Desk return button & Customize button - hidden per user requirement */
.theme-back-to-desk-btn,
a.theme-back-to-desk-btn,
.theme-desk-nav-item,
.theme-list-customize-btn {
  display: none !important;
}

/* Folder Icons Visual Refinement - Corporate Navy Cluster */
#page-desktop .desktop-icon .icon-container.folder-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  background: linear-gradient(135deg, #01305c 0%, #084379 100%) !important;
  border: 1.5px solid #e2ecf6 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px -4px rgba(1, 48, 92, 0.35), 0 0 12px rgba(226, 236, 246, 0.3) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

#page-desktop .desktop-icon:hover .icon-container.folder-icon {
  border-color: #FFFFFF !important;
  box-shadow: 0 10px 24px -2px rgba(1, 48, 92, 0.45), 0 0 18px rgba(226, 236, 246, 0.5) !important;
  transform: scale(1.1) !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon .icons-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon .icons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-items: center !important;
  background: transparent !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon .desktop-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: unset !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon .desktop-icon::before {
  display: none !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon .desktop-icon .icon-container {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 3px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-desktop .desktop-icon .icon-container.folder-icon img.app-icon {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  max-width: 9px !important;
  max-height: 9px !important;
  border-radius: 1px !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Executive Hero Banner */
.theme-desk-hero {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px -10px rgba(13, 75, 138, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
  padding: 30px 36px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 36px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-theme="dark"] .theme-desk-hero {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important;
}

.theme-desk-hero-content {
  flex: 1 1 auto !important;
  max-width: none !important;
}

.theme-desk-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  margin-bottom: 10px !important;
}

[data-theme="dark"] .theme-desk-status-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.theme-status-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  box-shadow: 0 0 10px #10B981 !important;
  animation: themePulse 2s infinite !important;
}

@keyframes themePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.theme-desk-greeting {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}

[data-theme="dark"] .theme-desk-greeting {
  color: #F8FAFC !important;
}

.theme-desk-subtext {
  font-size: 14px !important;
  color: #64748B !important;
  margin: 0 0 20px 0 !important;
  line-height: 1.5 !important;
}

[data-theme="dark"] .theme-desk-subtext {
  color: #94A3B8 !important;
}

/* Search Filter Row & Actions in Hero */
.theme-desk-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 820px !important;
  width: 100% !important;
}

.theme-desk-search-row .theme-desk-search-box {
  flex: 1 1 auto !important;
  max-width: 640px !important;
}

.theme-desk-create-ws-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 46px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #0D4B8A 0%, #0284C7 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(13, 75, 138, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  user-select: none !important;
}

.theme-desk-create-ws-btn svg {
  flex-shrink: 0 !important;
}

.theme-desk-create-ws-btn:hover {
  background: linear-gradient(135deg, #093766 0%, #0369A1 100%) !important;
  box-shadow: 0 4px 14px rgba(13, 75, 138, 0.35) !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}

.theme-desk-create-ws-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(13, 75, 138, 0.2) !important;
}

.theme-desk-create-ws-btn:focus-visible {
  outline: 2px solid #38BDF8 !important;
  outline-offset: 2px !important;
}

[data-theme="dark"] .theme-desk-create-ws-btn {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .theme-desk-create-ws-btn:hover {
  background: linear-gradient(135deg, #0369A1 0%, #075985 100%) !important;
}

.theme-sidebar-create-ws-btn {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  border: 1px dashed var(--border-color, #CBD5E1) !important;
  background: var(--card-bg, #FFFFFF) !important;
  color: var(--text-color, #1E293B) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.theme-sidebar-create-ws-btn:hover {
  background: var(--bg-light-gray, #F1F5F9) !important;
  color: var(--primary, #0D4B8A) !important;
  border-color: var(--primary, #0D4B8A) !important;
}

.theme-page-create-ws-btn {
  border-radius: var(--border-radius-md, 8px) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--border-color, #CBD5E1) !important;
  background: var(--card-bg, #FFFFFF) !important;
  color: var(--text-color, #1E293B) !important;
}

.theme-page-create-ws-btn:hover {
  background: var(--bg-light-gray, #F1F5F9) !important;
  color: var(--primary, #0D4B8A) !important;
  border-color: var(--primary, #0D4B8A) !important;
}

/* Suppress upstream promotional ads and upsell banners in Desk sidebar */
.promotional-banners,
.promotional-banner,
.promotional-banners-container,
.promotional-banner-title,
.sidebar-promotional-banner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.theme-desk-search-box {
  position: relative !important;
  max-width: 680px !important;
  width: 100% !important;
}

.theme-desk-search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748B !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
}

.theme-desk-search-input {
  width: 100% !important;
  height: 46px !important;
  border-radius: 12px !important;
  padding: 0 85px 0 42px !important;
  font-size: 14px !important;
  border: 1px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.theme-desk-search-input:focus {
  border-color: #0D4B8A !important;
  box-shadow: 0 0 0 3px rgba(13, 75, 138, 0.15) !important;
}

[data-theme="dark"] .theme-desk-search-input {
  background: #1E293B !important;
  border-color: #334155 !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] .theme-desk-search-input:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
}

.theme-desk-search-meta {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.theme-desk-app-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  white-space: nowrap !important;
}

[data-theme="dark"] .theme-desk-app-count {
  background: #334155 !important;
  color: #94A3B8 !important;
}

.theme-desk-search-clear {
  background: transparent !important;
  border: none !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  display: none;
}

.theme-desk-search-clear:hover {
  color: #0F172A !important;
  background: #E2E8F0 !important;
}

/* 3D Visual Artwork Card on Right */
.theme-desk-hero-artwork {
  width: 360px !important;
  height: 200px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 12px 28px -6px rgba(13, 75, 138, 0.22), 0 4px 8px -2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  flex-shrink: 0 !important;
  background: #0B1A2E !important;
}

.theme-desk-hero-artwork img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.5s ease !important;
  display: block !important;
}

.theme-desk-hero-artwork:hover img {
  transform: scale(1.04) !important;
}

.theme-desk-artwork-tag {
  position: absolute !important;
  bottom: 10px !important;
  left: 12px !important;
  right: 12px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.theme-desk-artwork-tag span:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.theme-desk-artwork-tag .live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #01305c !important;
  box-shadow: 0 0 6px rgba(1, 48, 92, 0.4) !important;
}

/* Executive Avatar Profile Card on Right (Used when user/employee image exists) */
.theme-desk-avatar-card {
  width: 360px !important;
  height: 200px !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 12px 28px -6px rgba(13, 75, 138, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

[data-theme="dark"] .theme-desk-avatar-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.4) !important;
}

.theme-desk-avatar-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0D4B8A 0%, #0284C7 50%, #10B981 100%) !important;
}

.theme-desk-avatar-wrapper {
  position: relative !important;
  width: 84px !important;
  height: 84px !important;
  flex-shrink: 0 !important;
}

.theme-desk-avatar-img {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(13, 75, 138, 0.18) !important;
  display: block !important;
}

[data-theme="dark"] .theme-desk-avatar-img {
  border-color: #1E293B !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.theme-desk-avatar-online-dot {
  position: absolute !important;
  bottom: 2px !important;
  right: 4px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #10B981 !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 0 8px #10B981 !important;
}

[data-theme="dark"] .theme-desk-avatar-online-dot {
  border-color: #0F172A !important;
}

.theme-desk-avatar-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.theme-desk-avatar-role-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(13, 75, 138, 0.1) !important;
  color: #0D4B8A !important;
  margin-bottom: 6px !important;
}

[data-theme="dark"] .theme-desk-avatar-role-badge {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38BDF8 !important;
}

.theme-desk-avatar-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 3px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

[data-theme="dark"] .theme-desk-avatar-name {
  color: #F8FAFC !important;
}

.theme-desk-avatar-designation {
  font-size: 12px !important;
  color: #64748B !important;
  margin: 0 0 6px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .theme-desk-avatar-designation {
  color: #94A3B8 !important;
}

.theme-desk-avatar-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #059669 !important;
}

[data-theme="dark"] .theme-desk-avatar-status {
  color: #34D399 !important;
}

/* Unified 23-App Grid */
#page-desktop .desktop-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#page-desktop .icons-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

#page-desktop .icons {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 0 0 40px 0 !important;
}

#page-desktop .desktop-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.94) 100%) !important;
  border: 1px solid rgba(226, 232, 240, 0.88) !important;
  border-radius: 20px !important;
  padding: 24px 14px 20px 14px !important;
  min-height: 156px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px -2px rgba(12, 43, 78, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.26s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

#page-desktop .desktop-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #01305c 0%, #084379 50%, #e2ecf6 100%) !important;
  opacity: 0.85 !important;
  transition: all 0.25s ease !important;
}

#page-desktop .desktop-icon:hover::before {
  opacity: 1 !important;
  height: 4.5px !important;
  box-shadow: 0 0 14px rgba(1, 48, 92, 0.45) !important;
}

[data-theme="dark"] #page-desktop .desktop-icon {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.85) 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

#page-desktop .desktop-icon:hover {
  transform: translateY(-6px) scale(1.02) !important;
  border-color: rgba(1, 48, 92, 0.35) !important;
  box-shadow: 0 20px 36px -8px rgba(1, 48, 92, 0.16), 0 0 18px rgba(226, 236, 246, 0.4) !important;
  background: #FFFFFF !important;
}

[data-theme="dark"] #page-desktop .desktop-icon:hover {
  background: rgba(30, 41, 59, 0.98) !important;
  border-color: rgba(226, 236, 246, 0.4) !important;
  box-shadow: 0 20px 36px -8px rgba(0, 0, 0, 0.6), 0 0 18px rgba(226, 236, 246, 0.2) !important;
}

#page-desktop .desktop-icon:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px -4px rgba(13, 75, 138, 0.12) !important;
}

/* Concentric Icon Container */
#page-desktop .desktop-icon .icon-container {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 18px -4px rgba(12, 43, 78, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  flex-shrink: 0 !important;
}

#page-desktop .desktop-icon:hover .icon-container {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 24px -4px rgba(1, 48, 92, 0.25) !important;
}

/* Curated Semantic Gradients for Squircle App Badges */
#page-desktop .desktop-icon[data-id="Accounts"] .icon-container {
  background: linear-gradient(135deg, #4F46E5 0%, #3730A3 100%) !important;
}

#page-desktop .desktop-icon[data-id="BEAMS"] .icon-container {
  background: linear-gradient(135deg, #0D4B8A 0%, #0284C7 100%) !important;
}

#page-desktop .desktop-icon[data-id="Employee Dashboard"] .icon-container {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
}

#page-desktop .desktop-icon[data-id="Framework"] .icon-container {
  background: linear-gradient(135deg, #475569 0%, #1E293B 100%) !important;
}

#page-desktop .desktop-icon[data-id="Front Office"] .icon-container {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
}

#page-desktop .desktop-icon[data-id="HD Dashboard"] .icon-container {
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 100%) !important;
}

#page-desktop .desktop-icon[data-id="HR"] .icon-container {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

#page-desktop .desktop-icon[data-id="Organization"] .icon-container {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
}

#page-desktop .desktop-icon[data-id="Security"] .icon-container {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
}

#page-desktop .desktop-icon[data-id="Accounting"] .icon-container {
  background: linear-gradient(135deg, #091E36 0%, #0C2B4E 100%) !important;
}

/* Dedicated App Icons with Direct Image Assets (Isolated from mini folder icons) */
#page-desktop .desktop-icon:not(.is-folder)>.icon-container:not(.folder-icon):has(> img.app-icon),
#page-desktop .desktop-icon:not(.is-folder)>.icon-container:not(.folder-icon):has(> a > img.app-icon) {
  background: transparent !important;
  box-shadow: none !important;
}

#page-desktop .desktop-icon:not(.is-folder)>.icon-container:not(.folder-icon)>img.app-icon,
#page-desktop .desktop-icon:not(.is-folder)>.icon-container:not(.folder-icon)>a>img.app-icon {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  object-fit: contain !important;
}

#page-desktop .desktop-icon .icon-container svg.desktop-alphabet,
#page-desktop .desktop-icon .icon-container svg.icon {
  width: 28px !important;
  height: 28px !important;
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: none !important;
}

/* Full Non-truncated Titles */
#page-desktop .desktop-icon .icon-caption {
  width: 100% !important;
  text-align: center !important;
  padding: 0 4px !important;
}

#page-desktop .desktop-icon .icon-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: visible !important;
  letter-spacing: -0.1px !important;
  transition: color 0.15s ease !important;
}

[data-theme="dark"] #page-desktop .desktop-icon .icon-title {
  color: #F1F5F9 !important;
}

#page-desktop .desktop-icon:hover .icon-title {
  color: #0D4B8A !important;
}

[data-theme="dark"] #page-desktop .desktop-icon:hover .icon-title {
  color: #38BDF8 !important;
}

/* Hide button */
#page-desktop .desktop-icon .hide-button {
  opacity: 0 !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  transition: opacity 0.2s ease !important;
  color: #94A3B8 !important;
}

#page-desktop .desktop-icon:hover .hide-button {
  opacity: 0.6 !important;
}

#page-desktop .desktop-icon .hide-button:hover {
  opacity: 1 !important;
  color: #EF4444 !important;
}

/* Search Filter States - High Specificity */
#page-desktop .desktop-icon.theme-desk-filtered-out,
.desktop-icon.theme-desk-filtered-out {
  display: none !important;
}

/* Empty State for Search */
.theme-desk-empty-state {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  padding: 48px 24px !important;
  background: #FFFFFF !important;
  border: 1.5px dashed #CBD5E1 !important;
  border-radius: 18px !important;
  color: #64748B !important;
  margin: 12px 0 !important;
}

[data-theme="dark"] .theme-desk-empty-state {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: #334155 !important;
  color: #94A3B8 !important;
}

.theme-desk-empty-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin-bottom: 6px !important;
}

[data-theme="dark"] .theme-desk-empty-title {
  color: #F8FAFC !important;
}

/* Responsive Breakpoints */
@media (max-width: 1280px) {
  #page-desktop .desktop-wrapper {
    padding: 0 24px 50px 24px !important;
  }

  #page-desktop .icons {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 16px !important;
  }

  .theme-desk-hero {
    margin-bottom: 16px !important;
  }

  .theme-desk-hero-artwork,
  .theme-desk-avatar-card {
    width: 320px !important;
    height: 180px !important;
  }
}

@media (max-width: 991px) {
  #page-desktop .icons {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 16px !important;
  }

  .theme-desk-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px 20px !important;
    margin-bottom: 16px !important;
    gap: 16px !important;
  }

  /* Complete elimination of distracting hero image on tablet and mobile screens */
  .theme-desk-hero-artwork,
  .theme-desk-avatar-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .theme-desk-search-box {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hide search in navbar on tablet and mobile to keep top bar sleek */
  #page-desktop .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar #desktop-navbar-modal-search {
    display: none !important;
  }
}

@media (max-width: 768px) {
  html, body {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-route=""] #page-desktop,
  body[data-route="desk"] #page-desktop,
  #page-desktop,
  #page-desktop .main-section,
  #page-desktop .layout-main-section,
  #page-desktop .layout-main-section-wrapper,
  #page-desktop .page-wrapper {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  #page-desktop .desktop-wrapper {
    padding: 0 16px calc(80px + env(safe-area-inset-bottom, 16px)) 16px !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
  }

  #page-desktop .icons {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* Complete elimination of distracting hero image on mobile screens */
  .theme-desk-hero-artwork,
  .theme-desk-avatar-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .theme-desk-hero {
    padding: 20px 18px 18px 18px !important;
    border-radius: 18px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
  }

  .theme-desk-greeting {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .theme-desk-subtext {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    line-height: 1.45 !important;
  }

  .theme-desk-search-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .theme-desk-search-box {
    width: 100% !important;
    max-width: 100% !important;
  }

  .theme-desk-create-ws-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #page-desktop .desktop-navbar {
    padding: 8px 16px !important;
    margin: 12px 0 18px 0 !important;
    border-radius: 14px !important;
  }

  /* Hide search in mobile navbar to keep top bar sleek and avoid duplicating hero search */
  #page-desktop .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar #desktop-navbar-modal-search {
    display: none !important;
  }
}

@media (max-width: 576px) {
  #page-desktop .icons {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #page-desktop .desktop-icon {
    min-height: 136px !important;
    padding: 16px 10px 14px 10px !important;
    border-radius: 14px !important;
  }

  #page-desktop .desktop-icon .icon-container {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  #page-desktop .desktop-icon .icon-container svg.desktop-alphabet,
  #page-desktop .desktop-icon .icon-container svg.icon {
    width: 22px !important;
    height: 22px !important;
  }

  #page-desktop .desktop-icon .icon-container img.app-icon {
    width: 26px !important;
    height: 26px !important;
  }

  #page-desktop .desktop-icon .icon-title {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Ensure image remains completely hidden on small phones */
  .theme-desk-hero-artwork,
  .theme-desk-avatar-card {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .theme-desk-hero {
    padding: 16px 14px 14px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  .theme-desk-greeting {
    font-size: 19px !important;
  }

  .theme-desk-subtext {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  #page-desktop .desktop-navbar {
    padding: 6px 12px !important;
    margin: 10px 0 14px 0 !important;
    border-radius: 12px !important;
  }

  #page-desktop .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar .desktop-search-wrapper,
  .desktop-navbar #desktop-navbar-modal-search {
    display: none !important;
  }
}

/* Hide default Frappe footer */
.web-footer,
.footer-powered,
.page-card-container footer {
  display: none !important;
}



/* ==========================================================================
   DESK VIEW RESOLUTIONS & DESK SEARCH / SIDEBAR FIXES
   ========================================================================== */

/* 1. Desk page: Hide sidebar on Central Desk view */
body[data-route=""] .body-sidebar-container,
body[data-route=""] .layout-side-section,
body[data-route=""] .desk-sidebar,
body[data-route=""] .body-sidebar,
body[data-route="desktop"] .body-sidebar-container,
body[data-route="desktop"] .layout-side-section,
body[data-route="desktop"] .desk-sidebar,
body[data-route="desktop"] .body-sidebar,
body[data-route="desk"] .body-sidebar-container,
body[data-route="desk"] .layout-side-section,
body[data-route="desk"] .desk-sidebar,
body[data-route="desk"] .body-sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-route=""] .main-section,
body[data-route="desktop"] .main-section,
body[data-route="desk"] .main-section {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Zero-flash Desk isolation & Zero Blank Space on Central Desk (Item 16) */
html[data-is-desk="true"] .body-sidebar-container,
html[data-is-desk="true"] .layout-side-section,
html[data-is-desk="true"] .desk-sidebar,
html[data-is-desk="true"] .body-sidebar,
html[data-is-desk="true"] .body-sidebar-placeholder,
html[data-is-desk="true"] #theme-erp-sidebar-backdrop {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html[data-is-desk="true"] .main-section,
html[data-is-desk="true"] body .main-section,
html[data-is-desk="true"] body[data-sidebar-expanded] .main-section,
html[data-is-desk="true"] body:has(.body-sidebar-container) .main-section,
body[data-route=""] .main-section,
body[data-route="desktop"] .main-section,
body[data-route="desk"] .main-section,
#page-desktop .main-section,
#page-desktop {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  #page-desktop .desktop-navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  #page-desktop .desktop-navbar .navbar-home {
    margin-right: auto !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #page-desktop .desktop-navbar > .flex {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
  #page-desktop .desktop-navbar .theme-navbar-reload-btn,
  #page-desktop .desktop-navbar .theme-mobile-reload-btn {
    order: 1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
  }
  #page-desktop .desktop-navbar .desktop-notifications {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    position: relative !important;
  }
  #page-desktop .desktop-navbar .desktop-avatar {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
  }
}
@media (max-width: 576px) {
  body[data-route=""] #page-desktop .desktop-navbar,
  body[data-route="desk"] #page-desktop .desktop-navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    margin: 0 0 14px 0 !important;
    border-radius: 0 0 14px 14px !important;
  }
  #page-desktop .desktop-wrapper {
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   THEME ERP — DESKTOP UNIFIED ERP USER POPOVER
   ========================================================================== */
/* ==========================================================================
   DESKTOP UNIFIED ERP USER POPOVER (Desk canvas avatar & Sidebar user button)
   ========================================================================== */
.theme-desktop-user-popover {
  position: fixed !important;
  width: 270px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 80px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--card-bg, #FFFFFF) !important;
  border: 1px solid var(--card-border-color, #E2E8F0) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08) !important;
  padding: 10px !important;
  z-index: 1080 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  animation: theme-popover-scale 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.theme-desktop-user-popover.dock-anchored {
  top: auto !important;
  bottom: 74px !important;
  right: 12px !important;
  left: auto !important;
  transform-origin: bottom right !important;
  animation: theme-popover-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

[data-theme="dark"] .theme-desktop-user-popover,
[data-theme-mode="dark"] .theme-desktop-user-popover,
body.dark-theme .theme-desktop-user-popover {
  background: #0A192F !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

.theme-desktop-user-popover .user-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.theme-desktop-user-popover .user-header:hover {
  background: rgba(var(--primary-rgb, 29, 97, 168), 0.06) !important;
}

[data-theme="dark"] .theme-desktop-user-popover .user-header:hover,
body.dark-theme .theme-desktop-user-popover .user-header:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.theme-desktop-user-popover .user-name {
  color: var(--card-header-color, #0F172A) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="dark"] .theme-desktop-user-popover .user-name,
body.dark-theme .theme-desktop-user-popover .user-name {
  color: #FFFFFF !important;
}

.theme-desktop-user-popover .user-email {
  color: var(--text-muted-color, #64748B) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

.theme-desktop-user-popover .user-menu-divider,
.theme-desktop-user-popover .desktop-popover-divider {
  height: 1px !important;
  background: var(--card-border-color, #E2E8F0) !important;
  margin: 4px 0 !important;
}

[data-theme="dark"] .theme-desktop-user-popover .user-menu-divider,
[data-theme="dark"] .theme-desktop-user-popover .desktop-popover-divider,
body.dark-theme .theme-desktop-user-popover .user-menu-divider,
body.dark-theme .theme-desktop-user-popover .desktop-popover-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}

.theme-desktop-user-popover .user-menu-item,
.theme-desktop-user-popover .desktop-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px !important;
  color: var(--text-color, #1E293B) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 7px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

[data-theme="dark"] .theme-desktop-user-popover .user-menu-item,
[data-theme="dark"] .theme-desktop-user-popover .desktop-menu-item,
body.dark-theme .theme-desktop-user-popover .user-menu-item,
body.dark-theme .theme-desktop-user-popover .desktop-menu-item {
  color: #CBD5E1 !important;
}

.theme-desktop-user-popover .user-menu-item:hover,
.theme-desktop-user-popover .user-menu-item:active,
.theme-desktop-user-popover .desktop-menu-item:hover,
.theme-desktop-user-popover .desktop-menu-item:active {
  background: var(--primary-light, #EBF3FA) !important;
  color: var(--primary, #1D61A8) !important;
  transform: translateX(2px) !important;
}

[data-theme="dark"] .theme-desktop-user-popover .user-menu-item:hover,
[data-theme="dark"] .theme-desktop-user-popover .user-menu-item:active,
[data-theme="dark"] .theme-desktop-user-popover .desktop-menu-item:hover,
[data-theme="dark"] .theme-desktop-user-popover .desktop-menu-item:active,
body.dark-theme .theme-desktop-user-popover .user-menu-item:hover,
body.dark-theme .theme-desktop-user-popover .user-menu-item:active,
body.dark-theme .theme-desktop-user-popover .desktop-menu-item:hover,
body.dark-theme .theme-desktop-user-popover .desktop-menu-item:active {
  background: rgba(0, 240, 255, 0.12) !important;
  color: #00F0FF !important;
}

.theme-desktop-user-popover .user-menu-item.item-danger,
.theme-desktop-user-popover .desktop-menu-item.item-danger {
  color: #EF4444 !important;
}

.theme-desktop-user-popover .user-menu-item.item-danger:hover,
.theme-desktop-user-popover .user-menu-item.item-danger:active,
.theme-desktop-user-popover .desktop-menu-item.item-danger:hover,
.theme-desktop-user-popover .desktop-menu-item.item-danger:active {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #DC2626 !important;
}

@keyframes theme-popover-scale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   1. NAVBAR SECTION (Corporate Desk Header Style)
   ========================================================================== */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .navbar:not(.desktop-navbar),
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) header.navbar {
  background: linear-gradient(135deg, var(--primary, #01305c) 0%, var(--primary-hover, #084379) 50%, var(--navbar-bg, #012447) 100%) !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.22) !important;
  box-shadow: 0 4px 16px -2px rgba(1, 48, 92, 0.25) !important;
  color: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .page-title,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .title-text,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .ellipsis,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs a,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs li,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .sidebar-toggle-btn,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .navbar:not(.desktop-navbar) a {
  color: #FFFFFF !important;
}

/* Breadcrumbs & Home icon in Navbar */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs a {
  opacity: 0.9 !important;
  transition: opacity 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs a:hover {
  opacity: 1 !important;
  color: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .navbar-breadcrumbs use,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .sidebar-toggle-btn svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .page-icon-group svg {
  stroke: #FFFFFF !important;
  fill: transparent !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Buttons in Navbar (View, Saved Filters, <, >, 3-dots, Cancel, etc.) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-default,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-secondary,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .more-button,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .menu-more-button,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .prev-doc,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .next-doc,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .icon-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-default:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-secondary:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .more-button:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .menu-more-button:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .prev-doc:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .next-doc:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .icon-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn.text-muted,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .text-muted {
  color: #FFFFFF !important;
}

/* 1. Stroke-based icons in Navbar (Home, Carets, List View, Select, etc.) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head svg.icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .icon:not(.es-icon) {
  stroke: #FFFFFF !important;
  fill: transparent !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 2. 3-dots Menu Icon (Must be filled white circles) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head svg use[href*="dot-horizontal"],
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .menu-more-button svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .more-button svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .menu-more-button use,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .more-button use {
  stroke: #FFFFFF !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* 3. Filled Espresso Icons in Navbar (Reload, <, >, Collapse, etc.) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head svg.es-icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .es-icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .prev-doc svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .next-doc svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .icon-btn svg.es-icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head svg use[href*="es-line-"] {
  fill: #FFFFFF !important;
  stroke: none !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Primary Action Buttons in Navbar (e.g. + Add Journal Entry, Actions) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary {
  background: #FFFFFF !important;
  color: #01305C !important;
  border: 1px solid #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary:hover {
  background: #E2ECF6 !important;
  color: #012147 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary svg.icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary .icon:not(.es-icon) {
  stroke: #01305C !important;
  fill: transparent !important;
  color: #01305C !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary svg.es-icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary .es-icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .page-head .btn-primary svg use[href*="es-line-"] {
  fill: #01305C !important;
  stroke: none !important;
  color: #01305C !important;
}

/* ==========================================================================
   1.1 SIDEBAR TOGGLE & TITLE ALIGNMENT (Mobile & Tablet Viewports)
   Eliminates left gap and title gap caused by navbar-brand svg sizing
   ========================================================================== */
@media (max-width: 991.98px) {
  .page-head .page-title {
    padding-left: 0px !important;
  }

  .page-head .page-title .sidebar-toggle-btn.navbar-brand,
  .page-head .sidebar-toggle-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    margin-left: 0px !important;
    margin-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  .page-head .sidebar-toggle-btn svg.sidebar-toggle-placeholder,
  .page-head .sidebar-toggle-btn svg.icon,
  .page-head .sidebar-toggle-btn svg.icon-md,
  .page-head .sidebar-toggle-btn .sidebar-toggle-icon svg,
  html body .page-head .sidebar-toggle-btn.navbar-brand svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
  }

  .page-head .sidebar-toggle-btn:not(:hover) .sidebar-toggle-icon {
    display: none !important;
  }

  .page-head .sidebar-toggle-btn:hover .sidebar-toggle-placeholder {
    display: none !important;
  }

  .page-head .sidebar-toggle-btn:hover .sidebar-toggle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-head .page-title .title-area {
    margin-left: 0px !important;
    padding-left: 0px !important;
  }
}

@media (min-width: 992px) {
  .page-head .sidebar-toggle-btn {
    display: none !important;
  }
}

/* ==========================================================================
   1.2 WORKSPACE & DESK PAGE LAYOUT ALIGNMENT
   Eliminates the huge gap between sidebar and layout-main in Workspaces & Tree Views
   ========================================================================== */
[data-page-route="Workspaces"] .layout-main,
.page-container[id*="Workspaces"] .layout-main,
.workspace-page .layout-main,
.treeview .layout-main-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

[data-page-route="Workspaces"] .layout-main-section,
.page-container[id*="Workspaces"] .layout-main-section,
.workspace-page .layout-main-section {
  width: 100% !important;
  max-width: 100% !important;
  min-height: calc(100vh - var(--navbar-height) - var(--page-head-height, 50px)) !important;
  padding: 12px 24px !important;
}

[data-page-route="Workspaces"],
.page-container[id*="Workspaces"],
[data-page-route="Workspaces"] .page-head {
  background: #ffffff !important;
}

/* ==========================================================================
   1.3 FORM VIEW LAYOUT & SECTION ALIGNMENT
   Eliminates the huge left/right gap on Form Views and expands form fields & grids
   ========================================================================== */
.form-section .section-body,
.form-section .section-head,
.form-dashboard-section,
.form-dashboard,
body:not(.full-width) .std-form-layout .section-head,
body:not(.full-width) .std-form-layout .section-body,
.std-form-layout .section-head,
.std-form-layout .section-body {
  max-width: 100% !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* ==========================================================================
   2. SIDEBAR OF THE DESK PAGE NAVBAR COLOUR
   ========================================================================== */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar-container,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .desk-sidebar {
  background: linear-gradient(180deg, var(--primary, #01305c) 0%, var(--navbar-bg, #012447) 100%) !important;
  border-right: 1px solid rgba(226, 236, 246, 0.12) !important;
  color: #CBD5E1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar-placeholder {
  background: transparent !important;
}

/* Sidebar Top Header (Payments ERPNext / Workspace Switcher) */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header,
.body-sidebar .sidebar-header,
.desk-sidebar .sidebar-header {
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(226, 236, 246, 0.12) !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header span,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header h4,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header .app-title,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header .header-title,
.body-sidebar .sidebar-header .header-title,
.desk-sidebar .sidebar-header .header-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header .header-subtitle,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header .sidebar-item-label.header-subtitle,
.body-sidebar .sidebar-header .header-subtitle,
.desk-sidebar .sidebar-header .header-subtitle {
  color: #CBD5E1 !important;
  opacity: 0.9 !important;
  font-size: 11.5px !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header use,
.body-sidebar .sidebar-header svg,
.desk-sidebar .sidebar-header svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* Sidebar Top Header Hover */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover .header-logo-container,
.body-sidebar .sidebar-header:hover,
.body-sidebar .sidebar-header:hover .header-logo-container,
.desk-sidebar .sidebar-header:hover,
.sidebar-header:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover span,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover h4,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover .app-title,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover .header-title,
.body-sidebar .sidebar-header:hover span,
.body-sidebar .sidebar-header:hover h4,
.body-sidebar .sidebar-header:hover .header-title,
.desk-sidebar .sidebar-header:hover .header-title {
  color: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover .header-subtitle,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover .sidebar-item-label.header-subtitle,
.body-sidebar .sidebar-header:hover .header-subtitle,
.desk-sidebar .sidebar-header:hover .header-subtitle {
  color: #E2E8F0 !important;
  opacity: 1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:hover use,
.body-sidebar .sidebar-header:hover svg,
.desk-sidebar .sidebar-header:hover svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

/* Sidebar Top Header Active / Selected / Open State */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.selected,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:focus,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header:focus-within,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header[aria-expanded="true"],
.body-sidebar .sidebar-header.active-sidebar,
.body-sidebar .sidebar-header.active,
.body-sidebar .sidebar-header.selected,
.body-sidebar .sidebar-header:focus,
.body-sidebar .sidebar-header:focus-within,
.body-sidebar .sidebar-header[aria-expanded="true"],
.desk-sidebar .sidebar-header.active-sidebar,
.desk-sidebar .sidebar-header.active,
.desk-sidebar .sidebar-header.selected,
.desk-sidebar .sidebar-header:focus,
.desk-sidebar .sidebar-header:focus-within,
.desk-sidebar .sidebar-header[aria-expanded="true"],
.sidebar-header.active-sidebar,
.sidebar-header.active,
.sidebar-header.selected,
.sidebar-header:focus,
.sidebar-header:focus-within,
.sidebar-header[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar span,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar h4,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar .app-title,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar .header-title,
.body-sidebar .sidebar-header.active-sidebar span,
.body-sidebar .sidebar-header.active-sidebar h4,
.body-sidebar .sidebar-header.active-sidebar .app-title,
.body-sidebar .sidebar-header.active-sidebar .header-title,
.desk-sidebar .sidebar-header.active-sidebar .header-title,
.sidebar-header.active-sidebar .header-title,
.sidebar-header.active-sidebar span,
.sidebar-header.active-sidebar h4,
.sidebar-header.selected .header-title,
.sidebar-header:focus .header-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar .header-subtitle,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar .sidebar-item-label.header-subtitle,
.body-sidebar .sidebar-header.active-sidebar .header-subtitle,
.desk-sidebar .sidebar-header.active-sidebar .header-subtitle,
.sidebar-header.active-sidebar .header-subtitle,
.sidebar-header.selected .header-subtitle,
.sidebar-header:focus .header-subtitle {
  color: #E2E8F0 !important;
  opacity: 1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-header.active-sidebar use,
.body-sidebar .sidebar-header.active-sidebar svg,
.desk-sidebar .sidebar-header.active-sidebar svg,
.sidebar-header.active-sidebar svg,
.sidebar-header.selected svg,
.sidebar-header:focus svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

/* Sidebar Standard Navigation Items */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active-sidebar,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.selected,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active,
.body-sidebar .standard-sidebar-item,
.desk-sidebar .standard-sidebar-item {
  background: transparent !important;
  color: #CBD5E1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item .item-anchor,
.body-sidebar .standard-sidebar-item .item-anchor,
.desk-sidebar .standard-sidebar-item .item-anchor {
  color: #CBD5E1 !important;
  background: transparent !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:not(.active-sidebar):hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover .item-anchor,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item .item-anchor:hover,
.body-sidebar .standard-sidebar-item:hover,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover,
.body-sidebar .standard-sidebar-item:hover .item-anchor,
.body-sidebar .standard-sidebar-item .item-anchor:hover,
.desk-sidebar .standard-sidebar-item:hover,
.desk-sidebar .standard-sidebar-item:hover .item-anchor {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover span,
.body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
.body-sidebar .standard-sidebar-item:hover span,
.desk-sidebar .standard-sidebar-item:hover .sidebar-item-label,
.desk-sidebar .standard-sidebar-item:hover span {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active .item-anchor,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.selected .item-anchor,
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
.desk-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active-sidebar span,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active span,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.selected span,
.body-sidebar .standard-sidebar-item.active-sidebar span,
.desk-sidebar .standard-sidebar-item.active-sidebar span {
  color: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item .item-anchor svg,
.body-sidebar .standard-sidebar-item svg,
.desk-sidebar .standard-sidebar-item svg {
  color: #CBD5E1 !important;
  stroke: #CBD5E1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item:hover .icon,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active-sidebar svg,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .standard-sidebar-item.active svg,
.body-sidebar .standard-sidebar-item:hover svg,
.body-sidebar .standard-sidebar-item:hover .icon,
.body-sidebar .standard-sidebar-item.active-sidebar svg,
.desk-sidebar .standard-sidebar-item:hover svg,
.desk-sidebar .standard-sidebar-item.active-sidebar svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-item-control,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-action-btn,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .notifications-category,
.body-sidebar .sidebar-item-control,
.body-sidebar .sidebar-action-btn,
.body-sidebar .notifications-category {
  background: transparent !important;
  color: #CBD5E1 !important;
}

/* Sidebar User / Profile Button */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user,
.body-sidebar .sidebar-user-button,
.body-sidebar .sidebar-user,
.body-sidebar .dropdown-navbar-user,
.desk-sidebar .sidebar-user-button,
.desk-sidebar .sidebar-user {
  color: #FFFFFF !important;
  border-top: 1px solid rgba(226, 236, 246, 0.12) !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .avatar-name-email span:first-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .avatar-name-email .d-block:not(.text-secondary),
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .user-name,
.body-sidebar .sidebar-user-button .avatar-name-email span:first-child,
.body-sidebar .sidebar-user-button .avatar-name-email .d-block:not(.text-secondary),
.body-sidebar .sidebar-user-button .user-name,
.desk-sidebar .sidebar-user-button .avatar-name-email span:first-child,
.desk-sidebar .sidebar-user-button .avatar-name-email .d-block:not(.text-secondary),
.desk-sidebar .sidebar-user-button .user-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .avatar-name-email .text-secondary,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .avatar-name-email span:last-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button .user-email,
.body-sidebar .sidebar-user-button .avatar-name-email .text-secondary,
.body-sidebar .sidebar-user-button .avatar-name-email span:last-child,
.body-sidebar .sidebar-user-button .user-email,
.desk-sidebar .sidebar-user-button .avatar-name-email .text-secondary,
.desk-sidebar .sidebar-user-button .avatar-name-email span:last-child,
.desk-sidebar .sidebar-user-button .user-email {
  color: rgba(226, 236, 246, 0.75) !important;
}

/* Sidebar User / Profile Button Hover */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user .sidebar-user-button:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user:hover,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover,
.body-sidebar .dropdown-navbar-user:hover,
.body-sidebar .dropdown-navbar-user .sidebar-user-button:hover,
.body-sidebar .sidebar-user:hover,
.body-sidebar .sidebar-user-button:hover,
.desk-sidebar .sidebar-user:hover,
.desk-sidebar .sidebar-user-button:hover,
.sidebar-user-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email span:first-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email .d-block:not(.text-secondary),
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .avatar-name-email span:first-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .avatar-name-email .d-block:not(.text-secondary),
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email span:first-child,
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email .d-block:not(.text-secondary),
.body-sidebar .sidebar-user-button:hover .avatar-name-email span:first-child,
.body-sidebar .sidebar-user-button:hover .avatar-name-email .d-block:not(.text-secondary),
.desk-sidebar .sidebar-user-button:hover .avatar-name-email span:first-child,
.desk-sidebar .sidebar-user-button:hover .avatar-name-email .d-block:not(.text-secondary),
.sidebar-user-button:hover .avatar-name-email span:first-child,
.sidebar-user-button:hover .avatar-name-email .d-block:not(.text-secondary),
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .user-name,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .user-name,
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .user-name,
.body-sidebar .sidebar-user-button:hover .user-name,
.desk-sidebar .sidebar-user-button:hover .user-name,
.sidebar-user-button:hover .user-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email .text-secondary,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email span:last-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .avatar-name-email .text-secondary,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .avatar-name-email span:last-child,
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email .text-secondary,
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .avatar-name-email span:last-child,
.body-sidebar .sidebar-user-button:hover .avatar-name-email .text-secondary,
.body-sidebar .sidebar-user-button:hover .avatar-name-email span:last-child,
.desk-sidebar .sidebar-user-button:hover .avatar-name-email .text-secondary,
.desk-sidebar .sidebar-user-button:hover .avatar-name-email span:last-child,
.sidebar-user-button:hover .avatar-name-email .text-secondary,
.sidebar-user-button:hover .avatar-name-email span:last-child,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .user-email,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .user-email,
.body-sidebar .dropdown-navbar-user:hover .sidebar-user-button .user-email,
.body-sidebar .sidebar-user-button:hover .user-email,
.desk-sidebar .sidebar-user-button:hover .user-email,
.sidebar-user-button:hover .user-email {
  color: #E2E8F0 !important;
  opacity: 1 !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .dropdown-navbar-user:hover .avatar,
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .body-sidebar .sidebar-user-button:hover .avatar,
.body-sidebar .dropdown-navbar-user:hover .avatar,
.body-sidebar .sidebar-user-button:hover .avatar,
.desk-sidebar .sidebar-user-button:hover .avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   FORM SIDEBAR (ERP Default Clean Styling & Modernized Sections)
   ========================================================================== */
body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .layout-side-section {
  background: var(--card-bg, #FFFFFF) !important;
  border-left: 1px solid var(--border-color, #E2E8F0) !important;
  color: var(--text-color, #1E293B) !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .form-sidebar {
  background: transparent !important;
  color: var(--text-color, #1E293B) !important;
}

body:not([data-route=""]):not([data-route="desktop"]):not([data-route="desk"]) .form-sidebar .sidebar-section {
  border-bottom: 1px solid var(--border-color, #E2E8F0) !important;
  padding: 12px 14px !important;
}

/* Meta details: Doc title & Doc ID */
.form-sidebar .sidebar-meta-details .bold,
.form-sidebar .sidebar-meta-details .form-title-text,
.form-sidebar .sidebar-meta-details .form-title-text span,
.form-sidebar .sidebar-meta-details .title,
.form-sidebar .sidebar-meta-details h4 {
  color: var(--text-color, #1E293B) !important;
  font-weight: 600 !important;
}

.form-sidebar .sidebar-meta-details .form-name-container,
.form-sidebar .sidebar-meta-details .form-name-container span,
.form-sidebar .sidebar-meta-details .text-muted,
.form-sidebar .sidebar-meta-details .help-box {
  color: var(--text-muted, #64748B) !important;
  font-size: 12px !important;
}

/* Meta action buttons (Edit pencil, Print, Heart like) */
.form-sidebar .sidebar-meta-details .form-title-edit button,
.form-sidebar .sidebar-meta-details .form-print button,
.form-sidebar .sidebar-meta-details .icon-btn,
.form-sidebar .sidebar-meta-details button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted, #64748B) !important;
  border-radius: 6px !important;
  padding: 3px 5px !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .sidebar-meta-details .form-title-edit button:hover,
.form-sidebar .sidebar-meta-details .form-print button:hover,
.form-sidebar .sidebar-meta-details .icon-btn:hover,
.form-sidebar .sidebar-meta-details button:hover {
  background: var(--fg-hover-color, #F1F5F9) !important;
  color: var(--primary, #01305C) !important;
}

.form-sidebar .sidebar-meta-details svg,
.form-sidebar .sidebar-meta-details .icon,
.form-sidebar .sidebar-meta-details use,
.form-sidebar .like-action svg,
.form-sidebar .like-icon {
  stroke: var(--text-muted, #64748B) !important;
  stroke-width: 1.75 !important;
  fill: transparent !important;
  color: var(--text-muted, #64748B) !important;
  transition: stroke 0.15s ease, color 0.15s ease !important;
}

.form-sidebar .sidebar-meta-details button:hover svg,
.form-sidebar .like-action:hover svg {
  stroke: var(--primary, #01305C) !important;
  color: var(--primary, #01305C) !important;
}

.form-sidebar .like-action.liked svg,
.form-sidebar .like-icon.liked {
  stroke: #EF4444 !important;
  fill: #EF4444 !important;
  color: #EF4444 !important;
}

/* Section labels: Assign, Attachments, Tags, Share */
.form-sidebar .sidebar-section .form-sidebar-label,
.form-sidebar .sidebar-section a.form-sidebar-label,
.form-sidebar .sidebar-section .pill-label,
.form-sidebar .sidebar-section .tags-label,
.form-sidebar .sidebar-section .share-label {
  color: var(--text-color, #1E293B) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.form-sidebar .sidebar-section .form-sidebar-label svg,
.form-sidebar .sidebar-section .form-sidebar-label .icon,
.form-sidebar .sidebar-section .form-sidebar-items > span > svg,
.form-sidebar .sidebar-section .form-sidebar-items a svg {
  stroke: var(--primary, #01305C) !important;
  stroke-width: 1.75 !important;
  fill: transparent !important;
  color: var(--primary, #01305C) !important;
}

/* Modern Action (+) micro-buttons (Assign +, Attachments +, Tags +, Share +) */
.form-sidebar .add-assignment-btn,
.form-sidebar .add-attachment-btn,
.form-sidebar .add-tags-btn,
.form-sidebar .share-doc-btn,
.form-sidebar button.btn-link.icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  background: var(--fg-hover-color, #F1F5F9) !important;
  border: 1px solid var(--border-color, #E2E8F0) !important;
  border-radius: 6px !important;
  color: var(--text-muted, #64748B) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .add-assignment-btn:hover,
.form-sidebar .add-attachment-btn:hover,
.form-sidebar .add-tags-btn:hover,
.form-sidebar .share-doc-btn:hover,
.form-sidebar button.btn-link.icon-btn:hover {
  background: var(--primary, #01305C) !important;
  border-color: var(--primary, #01305C) !important;
  color: #FFFFFF !important;
}

.form-sidebar .add-assignment-btn svg,
.form-sidebar .add-attachment-btn svg,
.form-sidebar .add-tags-btn svg,
.form-sidebar .share-doc-btn svg,
.form-sidebar button.btn-link svg,
.form-sidebar svg.es-icon,
.form-sidebar .es-icon,
.form-sidebar svg use[href*="es-line-add"] {
  fill: currentColor !important;
  stroke: none !important;
  color: inherit !important;
  width: 14px !important;
  height: 14px !important;
}

/* ==========================================================================
   ASSIGNMENTS SECTION MODERNIZATION
   ========================================================================== */
.form-sidebar .form-assignments .assignments {
  margin-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.form-sidebar .form-assignments .dialog-assignment-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: var(--card-bg, #FFFFFF) !important;
  border: 1px solid var(--border-color, #E2E8F0) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .form-assignments .dialog-assignment-row:hover {
  border-color: var(--primary, #01305C) !important;
  background: var(--fg-hover-color, #F8FAFC) !important;
  box-shadow: 0 2px 4px rgba(1, 48, 92, 0.06) !important;
}

.form-sidebar .form-assignments .dialog-assignment-row .assignee {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--text-color, #1E293B) !important;
}

.form-sidebar .form-assignments .dialog-assignment-row .complete-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 6px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-muted, #94A3B8) !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .form-assignments .dialog-assignment-row .complete-btn:hover {
  color: #10B981 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
}

.form-sidebar .form-assignments .view-all-assignment {
  display: inline-block !important;
  margin-top: 4px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--primary, #01305C) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.form-sidebar .form-assignments .view-all-assignment:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   ATTACHMENTS SECTION MODERNIZATION
   ========================================================================== */
.form-sidebar .form-attachments .attachment-row {
  margin-top: 6px !important;
}

.form-sidebar .form-attachments .data-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: var(--card-bg, #FFFFFF) !important;
  border: 1px solid var(--border-color, #E2E8F0) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .form-attachments .data-pill:hover {
  border-color: var(--primary, #01305C) !important;
  background: var(--fg-hover-color, #F8FAFC) !important;
  box-shadow: 0 2px 4px rgba(1, 48, 92, 0.06) !important;
}

.form-sidebar .form-attachments .attachment-file-label {
  color: var(--text-color, #1E293B) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  max-width: 170px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.form-sidebar .form-attachments .attachment-file-label:hover {
  color: var(--primary, #01305C) !important;
  text-decoration: underline !important;
}

.form-sidebar .form-attachments .attachment-icon {
  color: var(--primary, #01305C) !important;
  margin-right: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.form-sidebar .form-attachments .attachment-icon svg {
  stroke: var(--primary, #01305C) !important;
  fill: transparent !important;
}

.form-sidebar .form-attachments .remove-btn,
.form-sidebar .form-attachments .btn-remove {
  color: var(--text-muted, #94A3B8) !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.form-sidebar .form-attachments .remove-btn:hover,
.form-sidebar .form-attachments .btn-remove:hover {
  color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.form-sidebar .form-attachments .show-all-btn {
  display: inline-block !important;
  margin-top: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--primary, #01305C) !important;
  text-decoration: none !important;
}

.form-sidebar .form-attachments .show-all-btn:hover {
  text-decoration: underline !important;
}

/* ==========================================================================
   TAGS & SHARE SECTION POLISH
   ========================================================================== */
.form-sidebar .form-tags .tag-area .tagit-choice {
  border-radius: 12px !important;
  padding: 3px 10px !important;
  background: var(--fg-hover-color, #F1F5F9) !important;
  border: 1px solid var(--border-color, #E2E8F0) !important;
  color: var(--text-color, #1E293B) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

.form-sidebar .form-shared .shared-user {
  margin-top: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Form Sidebar Metadata (Last Edited By, Created By, Timestamps) */
.form-sidebar .sidebar-menu,
.form-sidebar .sidebar-menu li,
.form-sidebar .modified-by,
.form-sidebar .created-by,
.form-sidebar .pageview-count,
.form-sidebar .frappe-timestamp {
  color: var(--text-muted, #64748B) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.form-sidebar .modified-by a,
.form-sidebar .created-by a,
.form-sidebar .sidebar-menu a {
  color: var(--primary, #01305C) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.form-sidebar .modified-by a:hover,
.form-sidebar .created-by a:hover,
.form-sidebar .sidebar-menu a:hover {
  color: var(--primary-hover, #0B4A82) !important;
  text-decoration: underline !important;
}


/* ==========================================================================
   3. LIST VIEW HEADING
   ========================================================================== */
.frappe-list .list-row-head,
.list-row-head.level,
header.level.list-row-head {
  background: linear-gradient(135deg, var(--primary, #01305c) 0%, var(--primary-hover, #084379) 100%) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 8px !important;
  border: none !important;
  box-shadow: 0 2px 8px -2px rgba(1, 48, 92, 0.25) !important;
  color: #FFFFFF !important;
}

.frappe-list .list-row-head.text-muted,
.frappe-list .list-row-head.text-muted *,
.frappe-list .list-row-head .list-row-col,
.frappe-list .list-row-head span,
.frappe-list .list-row-head .list-subject,
.frappe-list .list-row-head .level-left,
.frappe-list .list-row-head .level-right,
.frappe-list .list-row-head a,
.frappe-list .list-row-head .list-header-subject,
.frappe-list .list-row-head .list-header-meta {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.frappe-list .list-row-head .list-row-checkbox {
  accent-color: #FFFFFF !important;
}

/* Count Badge & Like Section on the right of list header */
.frappe-list .list-row-head .level-right,
.list-row-head .level-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  border-left: none !important;
  box-shadow: none !important;
}

.frappe-list .list-row-head .list-count {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  transition: all 0.15s ease !important;
}

.frappe-list .list-row-head .list-count span {
  color: #FFFFFF !important;
}

.frappe-list .list-row-head .list-count:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #FFFFFF !important;
}

/* Like Section on the right of list header */
.frappe-list .list-row-head .list-liked-by-me {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.frappe-list .list-row-head .list-liked-by-me:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}

.frappe-list .list-row-head .like-icon,
.frappe-list .list-row-head .list-liked-by-me svg,
.frappe-list .list-row-head .list-liked-by-me .icon,
.frappe-list .list-row-head svg.like-icon,
.frappe-list .list-row-head .like-icon use {
  stroke: #FFFFFF !important;
  fill: transparent !important;
  color: #FFFFFF !important;
  opacity: 0.95 !important;
}

.frappe-list .list-row-head .list-liked-by-me:hover svg,
.frappe-list .list-row-head .list-liked-by-me:hover .like-icon,
.frappe-list .list-row-head .like-icon:hover {
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

.frappe-list .list-row-head .like-icon.liked,
.frappe-list .list-row-head .liked .like-icon,
.frappe-list .list-row-head .list-liked-by-me.liked svg {
  fill: #EF4444 !important;
  stroke: #EF4444 !important;
}

/* ==========================================================================
   4. CHILD TABLE HEADING & TITLE
   ========================================================================== */
/* Ensure Table control itself never creates an accidental scroll/clip container */
.frappe-control[data-fieldtype="Table"],
.frappe-control[data-fieldtype="Table"] > .grid-field,
.grid-overflow-wrapper {
  overflow: visible !important;
  max-width: 100% !important;
}

/* Child Table Outer Container */
.form-grid {
  border: 1px solid rgba(1, 48, 92, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(1, 48, 92, 0.05) !important;
  overflow: visible !important;
}

.form-grid-container {
  overflow-x: auto !important;
  width: 100% !important;
  position: relative !important;
}

/* ==========================================================================
   UNIVERSAL DROPDOWN, AWESOMPLETE & POPUP ANTI-CLIPPING SYSTEM
   Prevents Link field, Select, Datepicker, and Awesomplete dropdowns from
   getting clipped by containers, modals, child tables, or filter bars.
   ========================================================================== */
.form-grid-container:focus-within,
.form-grid-container:has(.awesomplete > ul:not([hidden])),
.form-grid-container:has(.awesomplete > ul[style*="display: block"]),
.form-grid:focus-within,
.form-grid:has(.awesomplete > ul:not([hidden])),
.form-grid:has(.awesomplete > ul[style*="display: block"]),
.grid-row:focus-within,
.grid-row:has(.awesomplete > ul:not([hidden])),
.data-row:focus-within,
.data-row:has(.awesomplete > ul:not([hidden])),
.grid-body:focus-within,
.grid-body:has(.awesomplete > ul:not([hidden])),
.col.grid-static-col:focus-within,
.col.grid-static-col:has(.awesomplete > ul:not([hidden])),
.grid-row-open,
.grid-form-heading,
.grid-form-body,
.form-in-grid,
.form-in-grid:focus-within,
.form-in-grid:has(.awesomplete > ul:not([hidden])),
.form-in-grid:has(.awesomplete > ul[style*="display: block"]),
.form-in-grid .grid-form-body,
.form-in-grid .form-area,
.modal:has(.awesomplete > ul:not([hidden])) .modal-body,
.modal:has(.awesomplete > ul:not([hidden])) .modal-content,
.modal:has(.awesomplete > ul[style*="display: block"]) .modal-body,
.modal:has(.awesomplete > ul[style*="display: block"]) .modal-content,
.modal-body:has(.awesomplete > ul:not([hidden])),
.modal-body:has(.awesomplete > ul[style*="display: block"]),
.filter-box:has(.awesomplete > ul:not([hidden])),
.filter-box:has(.awesomplete > ul[style*="display: block"]),
.filter-popover,
.filter-section,
.standard-filter-section {
  overflow: visible !important;
}

/* Ensure Awesomplete dropdown list floats cleanly above all parent containers, modals, and grids */
.awesomplete > ul {
  position: absolute !important;
  z-index: 100000 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(1, 48, 92, 0.15) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: 0 14px 36px -4px rgba(1, 48, 92, 0.22), 0 6px 16px -2px rgba(1, 48, 92, 0.12) !important;
}

.form-in-grid .awesomplete > ul,
.modal-body .awesomplete > ul,
.filter-box .awesomplete > ul {
  background: var(--card-bg, #ffffff) !important;
  box-shadow: 0 16px 40px -4px rgba(1, 48, 92, 0.25), 0 8px 18px -2px rgba(1, 48, 92, 0.14) !important;
}

[data-theme="dark"] .awesomplete > ul,
[data-theme="dark"] .form-in-grid .awesomplete > ul,
[data-theme="dark"] .modal-body .awesomplete > ul,
[data-theme="dark"] .filter-box .awesomplete > ul {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure calendar popups & datepickers also never get clipped */
.datepicker,
.flatpickr-calendar {
  z-index: 100005 !important;
}

/* Child Table Title / Section Label (e.g. "Accounting Entries") */
.frappe-control[data-fieldtype="Table"] > .grid-field > .control-label,
.frappe-control[data-fieldtype="Table"] .control-label,
.grid-field > label.control-label {
  color: var(--primary, #01305c) !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  margin-bottom: 8px !important;
}

.frappe-control[data-fieldtype="Table"] > .grid-field > .control-label::before,
.grid-field > label.control-label::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 14px !important;
  background: var(--primary, #01305c) !important;
  border-radius: 2px !important;
  margin-right: 8px !important;
}

/* Child Table Column Heading Row */
.form-grid .grid-heading-row,
.form-grid .grid-header,
.grid-heading-row {
  background: linear-gradient(135deg, var(--primary, #01305c) 0%, var(--primary-hover, #084379) 50%, var(--navbar-bg, #012447) 100%) !important;
  border-radius: 7px 7px 0 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(1, 48, 92, 0.3) !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  min-width: 100% !important;
  width: max-content !important;
}

.form-grid .grid-heading-row .grid-row,
.form-grid .grid-heading-row .data-row {
  background: transparent !important;
  border: none !important;
  min-height: 36px !important;
  align-items: center !important;
  min-width: 100% !important;
  width: max-content !important;
}

.form-grid .grid-body .grid-row,
.form-grid .grid-body .data-row {
  min-width: 100% !important;
  width: max-content !important;
}

.form-grid .grid-heading-row .grid-static-col,
.form-grid .grid-heading-row .row-check,
.form-grid .grid-heading-row .row-index,
.form-grid .grid-heading-row .col,
.form-grid .grid-heading-row .sortable-handle,
.form-grid .grid-heading-row .field-area {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
}

.form-grid .grid-heading-row .pointer,
.form-grid .grid-heading-row .col:last-child {
  border-right: none !important;
}

.form-grid .grid-heading-row .static-area,
.form-grid .grid-heading-row span,
.form-grid .grid-heading-row label,
.form-grid .grid-heading-row .row-index span,
.form-grid .grid-heading-row .static-area.reqd::after {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Precise utility columns alignment between header and data rows */
.form-grid .grid-heading-row .row-check,
.form-grid .grid-body .grid-row .row-check {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  flex: 0 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.form-grid .grid-heading-row .row-index,
.form-grid .grid-body .grid-row .row-index {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  flex: 0 0 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Numeric / Currency Column Alignment */
.form-grid .grid-heading-row .text-right,
.form-grid .grid-body .grid-row .text-right {
  text-align: right !important;
  justify-content: flex-end !important;
  padding-right: 10px !important;
}

/* Minimum column breathing room to prevent excessive truncation */
.form-grid .grid-heading-row .col:not(.row-check):not(.row-index):not(.pointer),
.form-grid .grid-body .grid-row .col:not(.row-check):not(.row-index):not(:last-child) {
  min-width: 78px !important;
}

/* Grid Checkbox */
.form-grid .grid-heading-row .grid-row-check {
  accent-color: #FFFFFF !important;
}

/* ==========================================================================
   DEFAULT ERP CHILD TABLE SETTING (Configure Columns)
   Uses standard ERP in-flow header icon without sticky floating overlay
   ========================================================================== */
.form-grid .grid-heading-row .grid-static-col.pointer,
.form-grid .grid-heading-row .pointer {
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  cursor: pointer !important;
}

.form-grid .grid-heading-row svg,
.form-grid .grid-heading-row .octicon,
.form-grid .grid-heading-row use,
.form-grid .grid-heading-row .grid-setting-toolbar,
.form-grid .grid-heading-row .btn-open-row {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: transparent !important;
  opacity: 0.9 !important;
}

.form-grid .grid-heading-row .pointer:hover svg,
.form-grid .grid-heading-row .pointer:hover use {
  opacity: 1 !important;
}

/* Ensure page action dropdown menus (3-dot menu, Actions, View) have top-level stacking context */
.page-head .dropdown-menu,
.page-actions .dropdown-menu,
.menu-btn-group .dropdown-menu,
.standard-actions .dropdown-menu {
  z-index: 1050 !important;
}

/* ==========================================================================
   DESKTOP SUPPRESSION (> 1024px) FOR MOBILE BOTTOM DOCK & SHEETS
   ========================================================================== */
@media (min-width: 1025px) {
  .theme-mobile-bottom-dock,
  .theme-mobile-doctype-sheet,
  .theme-mobile-doctype-backdrop,
  .theme-mobile-reports-sheet,
  .theme-mobile-reports-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================================
   TABLET & MOBILE (<= 1024px) BOTTOM NAVIGATION DOCK & SLIDE-UP SHEETS
   ========================================================================== */
@media (max-width: 1024px) {
  /* Provide padding-bottom on pages (excluding login/auth) to prevent dock overlap */
  body:not(#page-login):not([data-route="login"]):not([data-path="login"]):not(.for-login):not(.login-page) {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .theme-mobile-bottom-dock {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 62px !important;
    background: #FFFFFF !important;
    border-top: 1px solid #E2E8F0 !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    z-index: 1040 !important;
    padding: 0 4px env(safe-area-inset-bottom, 6px) 4px !important;
  }

  /* Suppress mobile bottom dock on auth, login, and password reset screens */
  #page-login .theme-mobile-bottom-dock,
  body[data-route="login"] .theme-mobile-bottom-dock,
  body[data-path="login"] .theme-mobile-bottom-dock,
  body[data-route="update-password"] .theme-mobile-bottom-dock,
  body[data-path="update-password"] .theme-mobile-bottom-dock,
  .for-login ~ .theme-mobile-bottom-dock,
  .for-update-password ~ .theme-mobile-bottom-dock,
  .login-page ~ .theme-mobile-bottom-dock,
  .page-login .theme-mobile-bottom-dock,
  body:has(#page-login) .theme-mobile-bottom-dock,
  body:has(.for-login) .theme-mobile-bottom-dock,
  body:has(.for-update-password) .theme-mobile-bottom-dock,
  body:has([data-route="update-password"]) .theme-mobile-bottom-dock,
  body:has([data-path="update-password"]) .theme-mobile-bottom-dock {
    display: none !important;
    visibility: hidden !important;
  }

  [data-theme="dark"] .theme-mobile-bottom-dock {
    background: #0A192F !important;
    border-top-color: #1E293B !important;
  }

  .theme-dock-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    padding: 4px 8px !important;
    color: #64748B !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    gap: 3px !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    min-width: 54px !important;
  }

  .theme-dock-item svg {
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
  }

  .theme-dock-item:hover,
  .theme-dock-item.active {
    color: #1D61A8 !important;
  }

  [data-theme="dark"] .theme-dock-item {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .theme-dock-item:hover,
  [data-theme="dark"] .theme-dock-item.active {
    color: #60A5FA !important;
  }

  /* Slide-Up DocTypes and Reports Bottom Sheets */
  .theme-mobile-doctype-backdrop,
  .theme-mobile-reports-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1055 !important;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease !important;
  }

  .theme-mobile-doctype-backdrop.is-open,
  .theme-mobile-reports-backdrop.is-open {
    display: block !important;
    opacity: 1 !important;
  }

  .theme-mobile-doctype-sheet,
  .theme-mobile-reports-sheet {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 82vh !important;
    background: #FFFFFF !important;
    border-top-left-radius: 22px !important;
    border-top-right-radius: 22px !important;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.3) !important;
    z-index: 1060 !important;
    transform: translateY(105%) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 12px calc(16px + env(safe-area-inset-bottom, 16px)) 12px !important;
    box-sizing: border-box !important;
  }

  .theme-mobile-doctype-sheet.is-open,
  .theme-mobile-reports-sheet.is-open {
    transform: translateY(0) !important;
  }

  .theme-sheet-handle {
    width: 38px !important;
    height: 4px !important;
    background: #CBD5E1 !important;
    border-radius: 999px !important;
    margin: 0 auto 10px auto !important;
  }

  .theme-sheet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    padding: 0 4px !important;
  }

  .theme-sheet-header-title h4 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
  }

  .theme-sheet-header-title p {
    margin: 2px 0 0 0 !important;
    font-size: 12px !important;
    color: #64748B !important;
  }

  .theme-sheet-close-btn {
    background: #F1F5F9 !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #475569 !important;
    cursor: pointer !important;
  }

  .theme-sheet-search {
    position: relative !important;
    margin-bottom: 12px !important;
  }

  .theme-sheet-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
  }

  .theme-sheet-search-input {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    padding: 11px 12px 11px 38px !important;
    font-size: 14px !important;
    color: #0F172A !important;
    box-sizing: border-box !important;
  }

  .theme-sheet-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    max-height: calc(82vh - 140px) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .theme-sheet-doctype-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    transition: all 0.15s ease !important;
  }

  .theme-sheet-doctype-card.active {
    background: #E2ECF6 !important;
    border-color: #CBDCEB !important;
  }

  .theme-sheet-doctype-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    flex: 1 1 auto !important;
  }

  .theme-sheet-doctype-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0F172A !important;
  }

  .theme-sheet-create-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    border: 1px solid #CBDCEB !important;
    background: #F0F6FC !important;
    color: #1D61A8 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .theme-sheet-create-btn:hover {
    background: #1D61A8 !important;
    color: #FFFFFF !important;
  }

  .theme-sheet-doctype-subtitle {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748B !important;
    margin-top: 1px !important;
  }

  .theme-sheet-report-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .theme-sheet-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 36px 16px !important;
    text-align: center !important;
    color: #64748B !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-sheet-empty-state svg {
    margin-bottom: 10px !important;
    opacity: 0.6 !important;
    color: #94A3B8 !important;
  }

  .theme-sheet-empty-state p {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748B !important;
  }

  .theme-sheet-empty-state b {
    color: #0F172A !important;
  }

  /* Dark Theme Mobile Bottom Sheets */
  [data-theme="dark"] .theme-mobile-doctype-sheet,
  [data-theme="dark"] .theme-mobile-reports-sheet {
    background: #0A192F !important;
    border-top: 1px solid #1E293B !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6) !important;
  }

  [data-theme="dark"] .theme-sheet-header-title h4 {
    color: #F8FAFC !important;
  }

  [data-theme="dark"] .theme-sheet-header-title p {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .theme-sheet-close-btn {
    background: #1E293B !important;
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .theme-sheet-search-input {
    background: #112240 !important;
    border-color: #233554 !important;
    color: #F8FAFC !important;
  }

  [data-theme="dark"] .theme-sheet-search-input::placeholder {
    color: #64748B !important;
  }

  [data-theme="dark"] .theme-sheet-doctype-card {
    background: #112240 !important;
    border-color: #233554 !important;
  }

  [data-theme="dark"] .theme-sheet-doctype-card.active {
    background: #1B355A !important;
    border-color: #1D61A8 !important;
  }

  [data-theme="dark"] .theme-sheet-doctype-title {
    color: #E2E8F0 !important;
  }

  [data-theme="dark"] .theme-sheet-doctype-subtitle {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .theme-sheet-create-btn {
    background: #1E293B !important;
    border-color: #233554 !important;
    color: #60A5FA !important;
  }

  [data-theme="dark"] .theme-sheet-empty-state p {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .theme-sheet-empty-state b {
    color: #F8FAFC !important;
  }
}