/* ==========================================
   OpenNGO — Modern SaaS UI Theme 2026
   Inspired by Linear, Notion, and Asana
   ========================================== */

:root {
  /* Primary Color Palette - Indigo Theme */
  --ngo-primary: #4F46E5;
  --ngo-primary-light: #818CF8;
  --ngo-primary-dark: #3730A3;
  --ngo-primary-hover: #4338CA;
  --ngo-primary-subtle: #EEF2FF;
  
  /* Semantic Colors */
  --ngo-success: #10B981;
  --ngo-success-bg: #D1FAE5;
  --ngo-warning: #F59E0B;
  --ngo-warning-bg: #FEF3C7;
  --ngo-danger: #EF4444;
  --ngo-danger-bg: #FEE2E2;
  --ngo-info: #3B82F6;
  --ngo-info-bg: #DBEAFE;
  
  /* Neutral Palette - Light Mode */
  --ngo-bg: #F9FAFB;
  --ngo-bg-secondary: #F3F4F6;
  --ngo-surface: #FFFFFF;
  --ngo-surface-hover: #FAFAFA;
  --ngo-border: #E5E7EB;
  --ngo-border-dark: #D1D5DB;
  --ngo-text: #111827;
  --ngo-text-secondary: #374151;
  --ngo-text-muted: #6B7280;
  --ngo-text-disabled: #9CA3AF;
  
  /* Spacing & Layout */
  --ngo-radius: 12px;
  --ngo-radius-sm: 8px;
  --ngo-radius-lg: 16px;
  --ngo-radius-xl: 20px;
  --ngo-radius-full: 9999px;
  
  /* Shadows - Refined for depth */
  --ngo-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --ngo-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --ngo-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --ngo-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --ngo-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --ngo-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);
  
  /* Glassmorphism */
  --ngo-glass-bg: rgba(255, 255, 255, 0.7);
  --ngo-glass-border: rgba(255, 255, 255, 0.3);
  --ngo-glass-blur: blur(12px);
  
  /* Transitions */
  --ngo-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ngo-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Typography */
  --ngo-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --ngo-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Mode Variables */
[data-theme="dark"],
.dark-mode {
  --ngo-bg: #0F172A;
  --ngo-bg-secondary: #1E293B;
  --ngo-surface: #1E293B;
  --ngo-surface-hover: #334155;
  --ngo-border: #334155;
  --ngo-border-dark: #475569;
  --ngo-text: #F8FAFC;
  --ngo-text-secondary: #E2E8F0;
  --ngo-text-muted: #94A3B8;
  --ngo-text-disabled: #64748B;
  
  --ngo-glass-bg: rgba(30, 41, 59, 0.7);
  --ngo-glass-border: rgba(255, 255, 255, 0.1);
  
  --ngo-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --ngo-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --ngo-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
  --ngo-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2);
}

/* ==================== GLOBAL RESET & BASE ==================== */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--ngo-bg) !important;
  font-family: var(--ngo-font-sans) !important;
  color: var(--ngo-text) !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Better text selection */
::selection {
  background-color: var(--ngo-primary) !important;
  color: white !important;
}

/* ==================== TYPOGRAPHY HIERARCHY ==================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--ngo-text) !important;
  margin-bottom: 0.5em !important;
}

h1, .h1 { font-size: 32px !important; letter-spacing: -0.02em !important; }
h2, .h2 { font-size: 28px !important; letter-spacing: -0.01em !important; }
h3, .h3 { font-size: 24px !important; }
h4, .h4 { font-size: 20px !important; font-weight: 600 !important; }
h5, .h5 { font-size: 16px !important; font-weight: 600 !important; }
h6, .h6 { font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }

/* Gradient text for major headings */
.page-title .title-text,
.workspace-page .standard-page-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--ngo-text) 0%, var(--ngo-primary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.02em !important;
}

/* ==================== NAVBAR / HEADER ==================== */

.navbar {
  background: var(--ngo-surface) !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  box-shadow: var(--ngo-shadow) !important;
  height: 60px !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-sticky) !important;
}

.navbar .navbar-brand {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ngo-primary) !important;
  letter-spacing: -0.01em !important;
  transition: all var(--ngo-transition) !important;
}

.navbar .navbar-brand:hover {
  transform: scale(1.05) !important;
}

/* Global Search Bar - Modern, Centered */
.navbar .navbar-search,
#navbar-search {
  border-radius: var(--ngo-radius-full) !important;
  background: var(--ngo-bg) !important;
  border: 1px solid var(--ngo-border) !important;
  padding: 10px 20px 10px 44px !important;
  transition: all var(--ngo-transition) !important;
  width: 320px !important;
  font-size: 14px !important;
  color: var(--ngo-text) !important;
}

.navbar .navbar-search::placeholder,
#navbar-search::placeholder {
  color: var(--ngo-text-muted) !important;
  font-weight: 400 !important;
}

.navbar .navbar-search:focus,
#navbar-search:focus {
  background: var(--ngo-surface) !important;
  border-color: var(--ngo-primary) !important;
  box-shadow: 0 0 0 4px var(--ngo-primary-subtle) !important;
  outline: none !important;
  width: 450px !important;
}

/* Search icon */
.navbar .navbar-search + .search-icon,
#navbar-search + .search-icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ngo-text-muted) !important;
  pointer-events: none !important;
}

/* Notification & User Menu */
.navbar .dropdown-toggle {
  border-radius: var(--ngo-radius-sm) !important;
  padding: 8px !important;
  transition: all var(--ngo-transition) !important;
}

.navbar .dropdown-toggle:hover {
  background: var(--ngo-bg) !important;
}

/* ==================== SIDEBAR NAVIGATION ==================== */

.desk-sidebar,
.sidebar-menu {
  background: var(--ngo-surface) !important;
  border-right: 1px solid var(--ngo-border) !important;
  width: 260px !important;
  padding: 16px 8px !important;
}

/* Sidebar section labels */
.sidebar-label,
.desk-sidebar .standard-sidebar-section h6,
.sidebar-menu .sidebar-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ngo-text-muted) !important;
  padding: 16px 12px 8px !important;
  margin-top: 12px !important;
}

/* Sidebar items */
.desk-sidebar .sidebar-menu .standard-sidebar-item,
.sidebar-item,
.sidebar-menu .sidebar-item {
  border-radius: var(--ngo-radius-sm) !important;
  margin: 2px 4px !important;
  padding: 10px 12px !important;
  transition: all var(--ngo-transition) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ngo-text-secondary) !important;
  position: relative !important;
}

.desk-sidebar .sidebar-menu .standard-sidebar-item:hover,
.sidebar-item:hover {
  background: var(--ngo-bg) !important;
  color: var(--ngo-text) !important;
  transform: translateX(2px) !important;
}

/* Selected/Active sidebar item */
.desk-sidebar .sidebar-menu .standard-sidebar-item.selected,
.sidebar-item.selected,
.sidebar-item.active {
  background: var(--ngo-primary-subtle) !important;
  color: var(--ngo-primary) !important;
  font-weight: 600 !important;
}

.standard-sidebar-item.selected::before,
.sidebar-item.selected::before,
.sidebar-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 20px !important;
  background: var(--ngo-primary) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Sidebar icons */
.sidebar-item .sidebar-item-icon,
.standard-sidebar-item .sidebar-item-icon {
  margin-right: 12px !important;
  opacity: 0.7 !important;
  transition: opacity var(--ngo-transition) !important;
}

.sidebar-item:hover .sidebar-item-icon,
.sidebar-item.selected .sidebar-item-icon {
  opacity: 1 !important;
}

/* Sidebar collapse button */
.desk-sidebar .sidebar-toggle-btn,
.sidebar-toggle-btn {
  padding: 10px !important;
  border-radius: var(--ngo-radius-sm) !important;
  margin: 8px 4px !important;
  background: transparent !important;
  border: 1px solid var(--ngo-border) !important;
  transition: all var(--ngo-transition) !important;
  color: var(--ngo-text-muted) !important;
}

.desk-sidebar .sidebar-toggle-btn:hover {
  background: var(--ngo-primary) !important;
  border-color: var(--ngo-primary) !important;
  color: white !important;
}

/* ==================== PAGE LAYOUT & CONTAINERS ==================== */

.page-container,
.page-content {
  padding: 32px !important;
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.workspace-container {
  padding: 16px 24px !important;
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page Header */
.page-head {
  background: var(--ngo-surface) !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  padding: 24px 32px !important;
  margin-bottom: 24px !important;
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow) !important;
}

.page-head .page-title {
  margin-bottom: 8px !important;
}

.page-head .page-title .title-text {
  font-weight: 800 !important;
  font-size: 28px !important;
  letter-spacing: -0.02em !important;
}

.page-head .page-sub-title {
  color: var(--ngo-text-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Breadcrumbs */
.page-breadcrumbs,
.breadcrumb {
  font-size: 13px !important;
  color: var(--ngo-text-muted) !important;
  margin-bottom: 16px !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/" !important;
  padding: 0 8px !important;
  color: var(--ngo-border-dark) !important;
}

.breadcrumb-item a {
  color: var(--ngo-text-muted) !important;
  transition: color var(--ngo-transition) !important;
}

.breadcrumb-item a:hover {
  color: var(--ngo-primary) !important;
}

/* ==================== CARDS & WIDGETS ==================== */

.frappe-card,
.card,
.widget,
.widget-box {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow) !important;
  padding: 20px !important;
  transition: all var(--ngo-transition) !important;
  overflow: visible !important;
}

.frappe-card:hover,
.widget:hover,
.widget-box:hover {
  box-shadow: var(--ngo-shadow-md) !important;
  transform: translateY(-2px) !important;
  border-color: var(--ngo-border-dark) !important;
}

/* Number Widget - Dashboard Stats (compact) */
.widget.number-widget-box,
.number-widget-box {
  border-radius: 12px !important;
  border: 1px solid var(--ngo-border) !important;
  box-shadow: var(--ngo-shadow) !important;
  transition: all var(--ngo-transition) !important;
  background: var(--ngo-surface) !important;
  padding: 16px !important;
  position: relative !important;
}

.number-widget-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--ngo-primary), var(--ngo-primary-light)) !important;
}

.number-widget-box:hover {
  box-shadow: var(--ngo-shadow-lg) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

.number-widget-box .widget-head {
  padding: 0 !important;
  margin-bottom: 6px !important;
  border: none !important;
}

.number-widget-box .widget-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ngo-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}

.number-widget-box .number {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--ngo-primary) 0%, var(--ngo-primary-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}

.number-widget-box .widget-footer {
  font-size: 12px !important;
  color: var(--ngo-text-muted) !important;
  margin-top: 6px !important;
}

/* Shortcut Widget (compact) */
.widget.shortcut-widget-box,
.shortcut-widget-box {
  border-radius: 10px !important;
  border: 1px solid var(--ngo-border) !important;
  padding: 12px 14px !important;
  transition: all var(--ngo-transition) !important;
  background: var(--ngo-surface) !important;
  text-align: center !important;
  cursor: pointer !important;
}

.widget.shortcut-widget-box:hover,
.shortcut-widget-box:hover {
  border-color: var(--ngo-primary) !important;
  box-shadow: var(--ngo-shadow-md) !important;
  transform: translateY(-3px) !important;
  background: var(--ngo-primary-subtle) !important;
}

.shortcut-widget-box .shortcut-link-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  margin: 0 auto 6px !important;
  background: linear-gradient(135deg, var(--ngo-primary), var(--ngo-primary-light)) !important;
  color: white !important;
  transition: transform var(--ngo-transition) !important;
}

.shortcut-widget-box:hover .shortcut-link-icon {
  transform: scale(1.08) rotate(2deg) !important;
}

.shortcut-widget-box .shortcut-link-label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ngo-text) !important;
}

/* Chart Widget */
.chart-widget-box,
.frappe-chart {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow) !important;
  padding: 24px !important;
  transition: all var(--ngo-transition) !important;
}

.chart-widget-box:hover {
  box-shadow: var(--ngo-shadow-md) !important;
  transform: translateY(-2px) !important;
}

.chart-widget-box .widget-head {
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--ngo-border) !important;
}

/* ==================== BUTTONS ==================== */

.btn {
  border-radius: var(--ngo-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  transition: all var(--ngo-transition) !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Primary Button */
.btn-primary,
.btn-primary-dark {
  background: linear-gradient(135deg, var(--ngo-primary) 0%, var(--ngo-primary-hover) 100%) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(79,70,229,0.3), 0 1px 2px rgba(79,70,229,0.15) !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
  background: linear-gradient(135deg, var(--ngo-primary-hover) 0%, var(--ngo-primary-dark) 100%) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.4), 0 2px 6px rgba(79,70,229,0.2) !important;
  transform: translateY(-2px) !important;
  color: white !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(79,70,229,0.3) !important;
}

/* Secondary/Default Button */
.btn-default,
.btn-secondary {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  color: var(--ngo-text) !important;
  box-shadow: var(--ngo-shadow-xs) !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--ngo-bg) !important;
  border-color: var(--ngo-border-dark) !important;
  box-shadow: var(--ngo-shadow) !important;
  transform: translateY(-1px) !important;
}

/* Danger Button */
.btn-danger {
  background: var(--ngo-danger) !important;
  border-color: var(--ngo-danger) !important;
  color: white !important;
  box-shadow: 0 1px 3px rgba(239,68,68,0.3) !important;
}

.btn-danger:hover {
  background: #DC2626 !important;
  box-shadow: 0 4px 12px rgba(239,68,68,0.4) !important;
  transform: translateY(-2px) !important;
}

/* Success Button */
.btn-success {
  background: var(--ngo-success) !important;
  border-color: var(--ngo-success) !important;
  color: white !important;
}

.btn-success:hover {
  background: #059669 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.4) !important;
  transform: translateY(-2px) !important;
}

/* Small Button */
.btn-sm {
  padding: 6px 14px !important;
  font-size: 13px !important;
}

/* Large Button */
.btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
}

/* Icon-only button */
.btn-icon {
  padding: 10px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Button group */
.btn-group {
  display: inline-flex !important;
  gap: 8px !important;
}

/* ==================== FORMS & INPUTS ==================== */

/* Form layout */
.form-section {
  margin-bottom: 32px !important;
}

.form-section .section-head {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--ngo-text) !important;
  padding: 12px 16px !important;
  margin: 0 0 20px !important;
  background: var(--ngo-bg) !important;
  border-left: 4px solid var(--ngo-primary) !important;
  border-radius: var(--ngo-radius-sm) !important;
  cursor: pointer !important;
  transition: all var(--ngo-transition) !important;
}

.form-section .section-head:hover {
  background: var(--ngo-bg-secondary) !important;
  border-left-color: var(--ngo-primary-dark) !important;
}

/* Form controls */
.frappe-control {
  margin-bottom: 20px !important;
}

.frappe-control .control-label {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ngo-text) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Required field indicator */
.frappe-control.reqd .control-label::after {
  content: " *" !important;
  color: var(--ngo-danger) !important;
  font-weight: 700 !important;
}

/* Input fields */
.frappe-control input[type="text"],
.frappe-control input[type="password"],
.frappe-control input[type="email"],
.frappe-control input[type="number"],
.frappe-control input[type="tel"],
.frappe-control input[type="date"],
.frappe-control input[type="time"],
.frappe-control select,
.frappe-control textarea,
input.form-control,
.form-control {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--ngo-text) !important;
  transition: all var(--ngo-transition) !important;
  width: 100% !important;
  line-height: 1.5 !important;
}

.frappe-control input::placeholder,
.form-control::placeholder {
  color: var(--ngo-text-muted) !important;
  opacity: 0.7 !important;
}

/* Input focus state */
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus,
input.form-control:focus,
.form-control:focus {
  border-color: var(--ngo-primary) !important;
  box-shadow: 0 0 0 4px var(--ngo-primary-subtle) !important;
  outline: none !important;
  background: var(--ngo-surface) !important;
}

/* Disabled inputs */
.frappe-control input:disabled,
.frappe-control select:disabled,
.frappe-control textarea:disabled,
.form-control:disabled {
  background: var(--ngo-bg) !important;
  color: var(--ngo-text-disabled) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Help text */
.frappe-control .help-box,
.form-text,
.help-text {
  font-size: 12px !important;
  color: var(--ngo-text-muted) !important;
  margin-top: 6px !important;
  font-style: italic !important;
}

/* Input with icon */
.input-with-icon {
  position: relative !important;
}

.input-with-icon input {
  padding-left: 44px !important;
}

.input-with-icon .icon {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ngo-text-muted) !important;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--ngo-border) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all var(--ngo-transition) !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--ngo-primary) !important;
  border-color: var(--ngo-primary) !important;
}

/* Select dropdown */
select.form-control {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 44px !important;
}

/* Textarea */
textarea.form-control {
  min-height: 100px !important;
  resize: vertical !important;
}

/* ==================== LIST VIEW & DATA TABLES ==================== */

/* List container */
.list-view,
.frappe-list {
  background: transparent !important;
}

/* List header */
.list-row-head {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) var(--ngo-radius-sm) 0 0 !important;
  padding: 14px 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ngo-text-muted) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

/* List rows */
.list-row {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-top: none !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  transition: all var(--ngo-transition) !important;
  cursor: pointer !important;
}

.list-row:last-child {
  border-radius: 0 0 var(--ngo-radius-sm) var(--ngo-radius-sm) !important;
}

.list-row:hover {
  background: var(--ngo-bg) !important;
  transform: translateX(4px) !important;
  box-shadow: var(--ngo-shadow) !important;
}

/* List row checkbox */
.list-row-checkbox {
  margin-right: 16px !important;
}

/* List subject */
.list-subject {
  font-weight: 600 !important;
  color: var(--ngo-text) !important;
  font-size: 14px !important;
}

.list-subject:hover {
  color: var(--ngo-primary) !important;
}

/* List paging */
.list-paging-area {
  margin-top: 24px !important;
  padding: 16px 20px !important;
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ==================== STATUS INDICATORS & BADGES ==================== */

.indicator,
.indicator-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: var(--ngo-radius-full) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.indicator.green,
.indicator-pill.green,
.badge-success {
  background: var(--ngo-success-bg) !important;
  color: #065F46 !important;
}

.indicator.yellow,
.indicator-pill.yellow,
.badge-warning {
  background: var(--ngo-warning-bg) !important;
  color: #92400E !important;
}

.indicator.red,
.indicator-pill.red,
.badge-danger {
  background: var(--ngo-danger-bg) !important;
  color: #991B1B !important;
}

.indicator.blue,
.indicator-pill.blue,
.badge-primary,
.badge-info {
  background: var(--ngo-info-bg) !important;
  color: #1E40AF !important;
}

.indicator.gray,
.indicator-pill.gray {
  background: var(--ngo-bg-secondary) !important;
  color: var(--ngo-text-muted) !important;
}

/* ==================== MODALS & DIALOGS ==================== */

.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal-dialog {
  margin: 40px auto !important;
}

.modal-content {
  border-radius: var(--ngo-radius-lg) !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  border: 1px solid var(--ngo-border) !important;
  background: var(--ngo-surface) !important;
  overflow: visible !important;
}

.modal-header {
  background: var(--ngo-bg) !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  padding: 24px 28px !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ngo-text) !important;
}

.modal-body {
  padding: 28px !important;
}

.modal-footer {
  background: var(--ngo-bg) !important;
  border-top: 1px solid var(--ngo-border) !important;
  padding: 20px 28px !important;
}

/* Close button */
.modal-header .close,
.modal-header .btn-modal-close {
  opacity: 0.5 !important;
  transition: all var(--ngo-transition) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 8px !important;
}

.modal-header .close:hover,
.modal-header .btn-modal-close:hover {
  opacity: 1 !important;
  background: var(--ngo-danger-bg) !important;
  color: var(--ngo-danger) !important;
}

/* ==================== TOAST NOTIFICATIONS ==================== */

.toast,
.alert,
.indicator-notification {
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow-lg) !important;
  border: 1px solid var(--ngo-border) !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.alert-success {
  background: var(--ngo-success-bg) !important;
  border-color: var(--ngo-success) !important;
  color: #065F46 !important;
}

.alert-warning {
  background: var(--ngo-warning-bg) !important;
  border-color: var(--ngo-warning) !important;
  color: #92400E !important;
}

.alert-danger {
  background: var(--ngo-danger-bg) !important;
  border-color: var(--ngo-danger) !important;
  color: #991B1B !important;
}

.alert-info {
  background: var(--ngo-info-bg) !important;
  border-color: var(--ngo-info) !important;
  color: #1E40AF !important;
}

/* ==================== SCROLLBAR STYLING ==================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--ngo-border-dark);
  border-radius: 4px;
  transition: background var(--ngo-transition);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ngo-text-muted);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ngo-border-dark) transparent;
}

/* ==================== LOADING STATES ==================== */

.loading,
.frappe-loading {
  color: var(--ngo-primary) !important;
}

/* Spinner */
.spinner,
.loading-spinner {
  border: 3px solid var(--ngo-bg-secondary) !important;
  border-top-color: var(--ngo-primary) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--ngo-bg-secondary) 25%, var(--ngo-border) 50%, var(--ngo-bg-secondary) 75%) !important;
  background-size: 200% 100% !important;
  animation: loading 1.5s ease-in-out infinite !important;
  border-radius: var(--ngo-radius-sm) !important;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================== EMPTY STATES ==================== */

.no-result,
.msg-box,
.empty-state {
  padding: 80px 40px !important;
  text-align: center !important;
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius) !important;
  margin: 40px 0 !important;
}

.no-result .empty-state-icon,
.msg-box svg,
.empty-state svg {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 24px !important;
  opacity: 0.3 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.05)) !important;
}

.no-result p,
.msg-box p,
.empty-state p {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ngo-text) !important;
  margin-bottom: 12px !important;
}

.no-result .text-muted,
.msg-box .text-muted,
.empty-state .text-muted {
  font-size: 14px !important;
  color: var(--ngo-text-muted) !important;
  margin-bottom: 24px !important;
}

/* ==================== LOGIN PAGE ==================== */

/*
 * Structure:
 *   body[data-path="login"]
 *     #page-login
 *       .page-content-wrapper
 *         main.container
 *           .page_content
 *             div (wrapper)
 *               section.for-login
 *                 .page-card-head        -- logo + h4 title
 *                 .login-content.page-card -- the form card
 *                 .sign-up-message       -- signup link
 */

/* --- Full-page gradient background (white → soft blue) --- */
body[data-path="login"] {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 50%, #DBEAFE 100%) !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Subtle animated background pattern (faint blue highlights on white) */
body[data-path="login"]::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(59,130,246,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(37,99,235,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(96,165,250,0.05) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* --- Hide navbar and footer on login --- */
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="login"] footer,
body[data-path="login"] .desk-sidebar {
  display: none !important;
}

/* --- Reset all container wrappers to let flexbox flow --- */
body[data-path="login"] #page-login {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

body[data-path="login"] .page-content-wrapper,
body[data-path="login"] main.container,
body[data-path="login"] .page_content,
body[data-path="login"] .page_content > div {
  display: contents !important;
}

/* The active section (login/signup/forgot/email) is centered */
/* Only sections Frappe explicitly sets to display:block get shown + centered */
/* NOTE: .for-login is the default visible section — shown if it has no "none" in style */
/* Other sections (signup/forgot/email) require explicit display:block to show — fixes bug
   where .for-signup would render below .for-login on initial page load (no style attr). */
body[data-path="login"] .for-login[style*="block"],
body[data-path="login"] .for-signup[style*="block"],
body[data-path="login"] .for-forgot[style*="block"],
body[data-path="login"] .for-email-login[style*="block"],
body[data-path="login"] .for-login:not([style*="none"]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 24px !important;
  margin: 0 auto !important;
}

/* Force hide non-active sections — override our !important flex rules */
body[data-path="login"] section[style*="display: none"],
body[data-path="login"] section[style*="display:none"] {
  display: none !important;
}

/* Hide all secondary sections by default - only show when JS sets display:block */
body[data-path="login"] .for-signup:not([style*="block"]),
body[data-path="login"] .for-forgot:not([style*="block"]),
body[data-path="login"] .for-email-login:not([style*="block"]) {
  display: none !important;
}

/* --- Page Card Head: logo + title area --- */
body[data-path="login"] .page-card-head {
  text-align: center !important;
  margin-bottom: 0 !important;
  padding: 40px 40px 28px 40px !important;
  background: #FFFFFF !important;
  border-radius: 20px 20px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: none !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  z-index: 2 !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
}

/* Hide the default ERPNext logo */
body[data-path="login"] .page-card-head .app-logo {
  display: none !important;
}

/* Custom brand header with icon */
body[data-path="login"] .page-card-head::before {
  content: "" !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px auto !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
  background-color: #2563EB !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 30px 30px, 100% 100% !important;
}

/* Hide the default "Login to Frappe" h4 title */
body[data-path="login"] .page-card-head h4 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: transparent !important;
}

/* Replace with myED branding */
body[data-path="login"] .page-card-head h4::after {
  content: "myED" !important;
  display: block !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1F2937 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.3 !important;
}

/* Subtitle under brand name */
body[data-path="login"] .page-card-head::after {
  content: "Platforma de management educațional" !important;
  display: block !important;
  font-size: 14px !important;
  color: #6B7280 !important;
  font-weight: 400 !important;
  margin-top: 6px !important;
  letter-spacing: 0 !important;
}

/* --- The login card (form area) --- */
body[data-path="login"] .login-content.page-card {
  background: #FFFFFF !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  padding: 0 40px 36px 40px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Separator line between header and form */
body[data-path="login"] .login-content.page-card::before {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, #E5E7EB 20%, #E5E7EB 80%, transparent 100%) !important;
  margin-bottom: 28px !important;
}

/* --- Form inputs --- */
body[data-path="login"] .page-card input[type="email"],
body[data-path="login"] .page-card input[type="password"],
body[data-path="login"] .page-card input[type="text"],
body[data-path="login"] .page-card .form-control {
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 13px 16px 13px 42px !important;
  font-size: 15px !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  background-color: #F9FAFB !important;
  color: #1F2937 !important;
  outline: none !important;
}

body[data-path="login"] .page-card input:focus,
body[data-path="login"] .page-card .form-control:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  background-color: #FFFFFF !important;
  outline: none !important;
}

body[data-path="login"] .page-card input::placeholder {
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

/* Form group spacing */
body[data-path="login"] .page-card .form-group {
  margin-bottom: 18px !important;
}

/* Field icons styling */
body[data-path="login"] .page-card .field-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9CA3AF !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body[data-path="login"] .page-card .email-field,
body[data-path="login"] .page-card .password-field {
  position: relative !important;
}

/* Toggle password button */
body[data-path="login"] .page-card .toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 13px !important;
  color: #6B7280 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
  z-index: 2 !important;
}

body[data-path="login"] .page-card .toggle-password:hover {
  color: #2563EB !important;
}

/* --- Forgot password link --- */
body[data-path="login"] .page-card .forgot-password-message {
  text-align: right !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body[data-path="login"] .page-card .forgot-password-message a {
  font-size: 13px !important;
  color: #6B7280 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}

body[data-path="login"] .page-card .forgot-password-message a:hover {
  color: #2563EB !important;
}

/* --- Login button --- */
body[data-path="login"] .page-card .btn-login,
body[data-path="login"] .page-card .btn-primary {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(37, 99, 235, 0.2) !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-path="login"] .page-card .btn-login:hover,
body[data-path="login"] .page-card .btn-primary:hover {
  background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45), 0 3px 8px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-1px) !important;
}

body[data-path="login"] .page-card .btn-login:active,
body[data-path="login"] .page-card .btn-primary:active {
  transform: translateY(0px) !important;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3) !important;
}

/* --- Social logins / divider --- */
body[data-path="login"] .social-logins .login-divider {
  font-size: 13px !important;
  color: #9CA3AF !important;
  margin: 20px 0 16px 0 !important;
  position: relative !important;
}

body[data-path="login"] .social-logins .login-divider::before,
body[data-path="login"] .social-logins .login-divider::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 38% !important;
  height: 1px !important;
  background: #E5E7EB !important;
}

body[data-path="login"] .social-logins .login-divider::before {
  left: 0 !important;
}

body[data-path="login"] .social-logins .login-divider::after {
  right: 0 !important;
}

/* Email link login button */
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] .btn-login-option {
  border: 1.5px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

body[data-path="login"] .btn-login-with-email-link:hover,
body[data-path="login"] .btn-login-option:hover {
  border-color: #2563EB !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  transform: none !important;
}

/* --- Sign-up message below card --- */
body[data-path="login"] .sign-up-message {
  color: #4B5563 !important;
  font-size: 14px !important;
  margin-top: 24px !important;
  text-align: center !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body[data-path="login"] .sign-up-message a {
  color: #2563EB !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  transition: opacity 0.2s !important;
}

body[data-path="login"] .sign-up-message a:hover {
  opacity: 0.9 !important;
}

/* --- Breadcrumbs and page header: hide on login --- */
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper {
  display: none !important;
}

/* --- Responsive adjustments for login --- */
@media (max-width: 480px) {
  body[data-path="login"] .for-login {
    padding: 0 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body[data-path="login"] .page-card-head {
    padding: 28px 24px 20px 24px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body[data-path="login"] .login-content.page-card {
    padding: 0 24px 28px 24px !important;
    border-radius: 0 0 16px 16px !important;
  }

  body[data-path="login"] .page-card-head::before {
    width: 52px !important;
    height: 52px !important;
    background-size: 26px 26px, 100% 100% !important;
    border-radius: 14px !important;
  }

  body[data-path="login"] .page-card-head h4::after {
    font-size: 22px !important;
  }

  body[data-path="login"] .sign-up-message {
    margin-top: 20px !important;
  }
}

/* --- Hide "for-signup", "for-forgot" etc. sections when not active (Frappe toggles display) --- */
/* These inherit the same styling from .page-card-head and .page-card above */
body[data-path="login"] .for-signup .page-card-head,
body[data-path="login"] .for-forgot .page-card-head,
body[data-path="login"] .for-login-with-email-link .page-card-head {
  text-align: center !important;
  padding: 40px 40px 28px 40px !important;
  background: #FFFFFF !important;
  border-radius: 20px 20px 0 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body[data-path="login"] .for-signup,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-login-with-email-link {
  display: none;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 24px !important;
  margin: 0 auto !important;
}

/* When Frappe shows these sections, apply same card styling */
body[data-path="login"] .for-signup .login-content,
body[data-path="login"] .for-forgot .login-content,
body[data-path="login"] .for-login-with-email-link .login-content {
  background: #FFFFFF !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 40px 36px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==================== WORKSPACE / DASHBOARD ==================== */

.workspace-page,
.dashboard-page {
  background: var(--ngo-bg) !important;
}

.widget-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 32px !important;
}

/* Section headings */
.workspace-section-heading,
.widget-head h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ngo-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--ngo-border) !important;
}

/* ==================== MODULE/DESKTOP ICONS ==================== */

.desk-page .module-section {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 20px !important;
  padding: 24px 0 !important;
}

.desk-page .module-section .module-link {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius) !important;
  padding: 24px !important;
  text-align: center !important;
  transition: all var(--ngo-transition) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.desk-page .module-section .module-link:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ngo-shadow-lg) !important;
  border-color: var(--ngo-primary) !important;
}

.module-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--ngo-radius) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: white !important;
  margin: 0 auto 16px !important;
  transition: all var(--ngo-transition) !important;
  box-shadow: var(--ngo-shadow-md) !important;
}

.desk-page .module-section .module-link:hover .module-icon {
  transform: scale(1.1) rotate(3deg) !important;
}

/* Colorful module icons */
.desk-page .module-section .module-link:nth-child(1) .module-icon {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
}

.desk-page .module-section .module-link:nth-child(2) .module-icon {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.desk-page .module-section .module-link:nth-child(3) .module-icon {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

.desk-page .module-section .module-link:nth-child(4) .module-icon {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.desk-page .module-section .module-link:nth-child(5) .module-icon {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
}

.desk-page .module-section .module-link:nth-child(6) .module-icon {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
}

.module-link .module-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--ngo-text) !important;
  line-height: 1.3 !important;
}

.module-link:hover .module-title {
  color: var(--ngo-primary) !important;
}

/* ==================== FOCUS & ACCESSIBILITY ==================== */

*:focus-visible {
  outline: 2px solid var(--ngo-primary) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* Skip to main content link */
.skip-to-content {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--ngo-primary) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 0 0 var(--ngo-radius-sm) 0 !important;
  z-index: 9999 !important;
  transition: top var(--ngo-transition) !important;
}

.skip-to-content:focus {
  top: 0 !important;
}

/* ==================== RESPONSIVE DESIGN ==================== */

@media (max-width: 1024px) {
  .navbar .navbar-search:focus {
    width: 350px !important;
  }
  
  .page-container,
  .page-content {
    padding: 24px !important;
  }
  
  .widget-group {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .desk-sidebar {
    width: 100% !important;
    position: fixed !important;
    left: -100% !important;
    transition: left var(--ngo-transition-slow) !important;
    z-index: var(--z-fixed) !important;
  }
  
  .desk-sidebar.open {
    left: 0 !important;
  }
  
  .navbar .navbar-search {
    width: 200px !important;
  }
  
  .navbar .navbar-search:focus {
    width: 100% !important;
  }
  
  .page-container,
  .page-content {
    padding: 16px !important;
  }
  
  .page-card {
    padding: 32px 24px !important;
    margin: 16px !important;
  }
  
  .widget-group {
    grid-template-columns: 1fr !important;
  }
  
  .desk-page .module-section {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 12px !important;
  }
  
  .module-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
  
  .modal-dialog {
    margin: 20px !important;
  }
  
  .btn {
    padding: 12px 20px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  h1, .h1 { font-size: 24px !important; }
  h2, .h2 { font-size: 20px !important; }
  h3, .h3 { font-size: 18px !important; }
  
  .page-title .title-text {
    font-size: 24px !important;
  }
  
  .number-widget-box .number {
    font-size: 26px !important;
  }
  
  .page-card {
    padding: 24px 20px !important;
  }
}

/* ==================== PRINT STYLES ==================== */

@media print {
  .navbar,
  .desk-sidebar,
  .page-head,
  .btn,
  .modal,
  .toast {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .page-container {
    padding: 0 !important;
  }
  
  * {
    box-shadow: none !important;
  }
}

/* ==================== UTILITY CLASSES ==================== */

.text-primary { color: var(--ngo-primary) !important; }
.text-success { color: var(--ngo-success) !important; }
.text-warning { color: var(--ngo-warning) !important; }
.text-danger { color: var(--ngo-danger) !important; }
.text-muted { color: var(--ngo-text-muted) !important; }

.bg-primary { background: var(--ngo-primary) !important; }
.bg-success { background: var(--ngo-success) !important; }
.bg-warning { background: var(--ngo-warning) !important; }
.bg-danger { background: var(--ngo-danger) !important; }
.bg-surface { background: var(--ngo-surface) !important; }

.shadow { box-shadow: var(--ngo-shadow) !important; }
.shadow-md { box-shadow: var(--ngo-shadow-md) !important; }
.shadow-lg { box-shadow: var(--ngo-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

.rounded { border-radius: var(--ngo-radius) !important; }
.rounded-sm { border-radius: var(--ngo-radius-sm) !important; }
.rounded-lg { border-radius: var(--ngo-radius-lg) !important; }
.rounded-full { border-radius: var(--ngo-radius-full) !important; }

/* ==================== ANIMATIONS ==================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.fade-in { animation: fadeIn 0.3s ease-in !important; }
.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; }

/* ==================== CUSTOM ENHANCEMENTS ==================== */

/* Glassmorphism card variant */
.card-glass {
  background: var(--ngo-glass-bg) !important;
  border: 1px solid var(--ngo-glass-border) !important;
  backdrop-filter: var(--ngo-glass-blur) !important;
  -webkit-backdrop-filter: var(--ngo-glass-blur) !important;
}

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, var(--ngo-primary) 0%, var(--ngo-primary-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hover lift effect */
.hover-lift {
  transition: transform var(--ngo-transition), box-shadow var(--ngo-transition) !important;
}

.hover-lift:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ngo-shadow-lg) !important;
}

/* Divider */
.divider {
  height: 1px !important;
  background: var(--ngo-border) !important;
  margin: 24px 0 !important;
}

/* ==================== END ==================== */

/* Remove border from desk form-grid */
.form-grid {
  border: none !important;
}

/* ==========================================================
   DESK (/app) APPEARANCE REFINEMENTS
   Added 2026-04-13 — polished, subtle improvements
   ========================================================== */

/* ---------- 1. NAVBAR REFINEMENTS ---------- */

.navbar {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.03) !important;
  background: rgba(255,255,255,0.92) !important;
}

[data-theme="dark"] .navbar,
.dark-mode .navbar {
  background: rgba(30,41,59,0.92) !important;
}

.navbar .container,
.navbar .container-fluid {
  max-width: 100% !important;
}

/* Navbar nav links */
.navbar .nav-link,
.navbar .dropdown-item {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Awesomebar (Ctrl+K search) */
.awesomebar-container .awesomebar {
  border-radius: var(--ngo-radius-sm) !important;
  transition: all var(--ngo-transition) !important;
}

/* ---------- 2. SIDEBAR REFINEMENTS ---------- */

/* Smooth scroll in sidebar */
.desk-sidebar,
.sidebar-menu {
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}

/* Section dividers between sidebar groups */
.desk-sidebar .standard-sidebar-section + .standard-sidebar-section {
  border-top: 1px solid var(--ngo-border) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* Sidebar item subtle left-border on hover */
.desk-sidebar .sidebar-menu .standard-sidebar-item:hover {
  border-left: 2px solid var(--ngo-primary-light) !important;
  padding-left: 10px !important;
}

/* Active item deeper shadow */
.desk-sidebar .sidebar-menu .standard-sidebar-item.selected,
.sidebar-item.selected,
.sidebar-item.active {
  box-shadow: var(--ngo-shadow-xs) !important;
}

/* ---------- 3. FORM VIEW REFINEMENTS ---------- */

/* Form layout wrapper — card effect */
.form-layout {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow) !important;
  padding: 8px !important;
  margin-bottom: 24px !important;
}

/* Section body inside form — clean spacing */
.form-section .section-body {
  padding: 16px 20px !important;
}

/* Form column spacing */
.form-column {
  padding: 0 12px !important;
}

/* Form group bottom margin */
.form-group {
  margin-bottom: 16px !important;
}

/* Read-only / disabled field values — softer display */
.frappe-control .control-value,
.frappe-control .like-disabled-input {
  background: var(--ngo-bg) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 10px 14px !important;
  color: var(--ngo-text-secondary) !important;
  font-size: 14px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
}

/* Form dashboard (workflow, stats bar at top of form) */
.form-dashboard {
  background: var(--ngo-bg) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  margin-bottom: 20px !important;
  padding: 12px 16px !important;
}

.form-dashboard-section {
  padding: 8px 0 !important;
}

/* Form links / attachments section */
.form-links,
.form-attachments,
.form-shared,
.form-tags {
  background: var(--ngo-bg) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 12px !important;
}

/* Timeline / comment section */
.form-footer,
.timeline {
  margin-top: 24px !important;
}

.timeline-item {
  border-left: 2px solid var(--ngo-border) !important;
  padding-left: 20px !important;
  margin-left: 12px !important;
  padding-bottom: 20px !important;
  position: relative !important;
}

.timeline-item::before {
  content: "" !important;
  position: absolute !important;
  left: -5px !important;
  top: 4px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ngo-border-dark) !important;
  border: 2px solid var(--ngo-surface) !important;
}

.timeline-item .timeline-content {
  background: var(--ngo-bg) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 12px 16px !important;
}

/* Comment box */
.comment-box .ql-editor,
.comment-input-control .ql-editor {
  border-radius: var(--ngo-radius-sm) !important;
  min-height: 80px !important;
}

/* Form tab sections (if using tab breaks) */
.form-tabs .nav-tabs {
  border-bottom: 2px solid var(--ngo-border) !important;
  gap: 4px !important;
}

.form-tabs .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--ngo-radius-sm) var(--ngo-radius-sm) 0 0 !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--ngo-text-muted) !important;
  transition: all var(--ngo-transition) !important;
  margin-bottom: -2px !important;
}

.form-tabs .nav-tabs .nav-link:hover {
  color: var(--ngo-text) !important;
  background: var(--ngo-bg) !important;
}

.form-tabs .nav-tabs .nav-link.active {
  color: var(--ngo-primary) !important;
  border-bottom-color: var(--ngo-primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ---------- 4. LIST VIEW REFINEMENTS ---------- */

/* Alternating row backgrounds (striped) */
.list-row:nth-child(even) {
  background: var(--ngo-bg) !important;
}

.list-row:nth-child(odd) {
  background: var(--ngo-surface) !important;
}

/* List container wrapper — rounded */
.frappe-list .result {
  border-radius: var(--ngo-radius-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--ngo-border) !important;
}

.frappe-list .result .list-row {
  border-left: none !important;
  border-right: none !important;
}

.frappe-list .result .list-row:first-child {
  border-top: none !important;
}

.frappe-list .result .list-row:last-child {
  border-bottom: none !important;
}

/* List header — bolder, sticky feel */
.list-row-head {
  background: var(--ngo-bg-secondary) !important;
  border-bottom: 2px solid var(--ngo-border) !important;
  font-size: 11.5px !important;
}

/* List row hover — tinted */
.list-row:hover {
  background: var(--ngo-primary-subtle) !important;
  transform: none !important;
  box-shadow: inset 3px 0 0 var(--ngo-primary) !important;
}

/* List row active/selected */
.list-row.selected,
.list-row[data-selected="1"] {
  background: var(--ngo-primary-subtle) !important;
  border-left: 3px solid var(--ngo-primary) !important;
}

/* Filters bar */
.filter-section,
.list-filters {
  background: var(--ngo-surface) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

/* ---------- 5. BUTTON REFINEMENTS ---------- */

/* Button focus ring */
.btn:focus-visible {
  box-shadow: 0 0 0 3px var(--ngo-primary-subtle) !important;
}

/* Toolbar buttons (top of form/list) */
.page-actions .btn {
  border-radius: var(--ngo-radius-sm) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
}

/* Menu button (three dots) */
.btn.btn-default.btn-xs.btn-menu,
.menu-btn-group .btn {
  border-radius: var(--ngo-radius-sm) !important;
}

/* Like buttons group — no gap between */
.btn-group > .btn {
  border-radius: 0 !important;
}
.btn-group > .btn:first-child {
  border-top-left-radius: var(--ngo-radius-sm) !important;
  border-bottom-left-radius: var(--ngo-radius-sm) !important;
}
.btn-group > .btn:last-child {
  border-top-right-radius: var(--ngo-radius-sm) !important;
  border-bottom-right-radius: var(--ngo-radius-sm) !important;
}

/* ---------- 6. DROPDOWN MENUS ---------- */

.dropdown-menu {
  border-radius: var(--ngo-radius-sm) !important;
  box-shadow: var(--ngo-shadow-lg) !important;
  border: 1px solid var(--ngo-border) !important;
  padding: 6px !important;
  background: var(--ngo-surface) !important;
  animation: fadeIn 0.15s ease-out !important;
}

.dropdown-menu .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: var(--ngo-text-secondary) !important;
  transition: all var(--ngo-transition) !important;
  margin: 1px 0 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--ngo-bg) !important;
  color: var(--ngo-text) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background: var(--ngo-primary-subtle) !important;
  color: var(--ngo-primary) !important;
}

.dropdown-menu .dropdown-divider {
  border-color: var(--ngo-border) !important;
  margin: 4px 8px !important;
}

/* ---------- 7. PROGRESS BARS ---------- */

.progress {
  background: var(--ngo-bg-secondary) !important;
  border-radius: var(--ngo-radius-full) !important;
  height: 8px !important;
  overflow: hidden !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--ngo-primary), var(--ngo-primary-light)) !important;
  border-radius: var(--ngo-radius-full) !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ---------- 8. TABLES (report/child table) ---------- */

.frappe-datatable .dt-header {
  background: var(--ngo-bg-secondary) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--ngo-text-muted) !important;
}

.frappe-datatable .dt-row:nth-child(even) .dt-cell {
  background: var(--ngo-bg) !important;
}

.frappe-datatable .dt-cell {
  border-color: var(--ngo-border) !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
}

.frappe-datatable .dt-row:hover .dt-cell {
  background: var(--ngo-primary-subtle) !important;
}

/* Child table in forms */
.frappe-control[data-fieldtype="Table"] .form-grid {
  border-radius: var(--ngo-radius-sm) !important;
  overflow: hidden !important;
}

.frappe-control[data-fieldtype="Table"] .grid-heading-row {
  background: var(--ngo-bg-secondary) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--ngo-text-muted) !important;
}

.frappe-control[data-fieldtype="Table"] .rows .row {
  transition: background var(--ngo-transition) !important;
}

.frappe-control[data-fieldtype="Table"] .rows .row:nth-child(even) {
  background: var(--ngo-bg) !important;
}

.frappe-control[data-fieldtype="Table"] .rows .row:hover {
  background: var(--ngo-primary-subtle) !important;
}

/* ---------- 9. TOOLTIPS & POPOVERS ---------- */

.tooltip-inner {
  background: var(--ngo-text) !important;
  color: var(--ngo-surface) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  box-shadow: var(--ngo-shadow-md) !important;
}

.popover {
  border-radius: var(--ngo-radius-sm) !important;
  box-shadow: var(--ngo-shadow-lg) !important;
  border: 1px solid var(--ngo-border) !important;
}

.popover-header {
  background: var(--ngo-bg) !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-sm) var(--ngo-radius-sm) 0 0 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
}

.popover-body {
  padding: 12px 14px !important;
  font-size: 13.5px !important;
}

/* ---------- 10. GENERAL DESK POLISH ---------- */

/* Slightly off-white main content area */
body[data-route^="app/"] .layout-main-section,
body[data-route^="app/"] .page-body {
  background: var(--ngo-bg) !important;
}

/* Consistent link styling in desk */
body[data-route^="app/"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--ngo-primary) !important;
  transition: color var(--ngo-transition) !important;
}

body[data-route^="app/"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--ngo-primary-dark) !important;
}

/* Better spacing for main section */
.layout-main-section-wrapper {
  padding: 0 8px !important;
}

/* Page body clean spacing */
body[data-route^="app/"] .main-section {
  padding-top: 0 !important;
}

/* Code blocks in desk */
body[data-route^="app/"] code,
body[data-route^="app/"] pre {
  font-family: var(--ngo-font-mono) !important;
  font-size: 13px !important;
  background: var(--ngo-bg-secondary) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
}

body[data-route^="app/"] pre {
  padding: 16px !important;
  overflow-x: auto !important;
}

body[data-route^="app/"] pre code {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Smooth page transitions */
.page-container[data-page-container] {
  transition: opacity 0.2s ease !important;
}

/* Horizontal rule refinement */
body[data-route^="app/"] hr {
  border: none !important;
  height: 1px !important;
  background: var(--ngo-border) !important;
  margin: 20px 0 !important;
}

/* Scrollbar — refined track on desk sidebar */
.desk-sidebar::-webkit-scrollbar {
  width: 4px !important;
}

.desk-sidebar::-webkit-scrollbar-thumb {
  background: var(--ngo-border) !important;
  border-radius: 4px !important;
}

.desk-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--ngo-border-dark) !important;
}

/* ==================== END DESK REFINEMENTS ==================== */


/* ==========================================================
   MAJOR DESK UI OVERHAUL — 2026-04-13
   Targeting: /apps page, workspace, sidebar, awesomebar,
   widgets, and overall polish for a modern SaaS feel
   ========================================================== */

/* ---- Updated root variables for warmer palette ---- */
:root {
  --ngo-bg-warm: #FAFAF8;
  --ngo-bg-warm-secondary: #F5F5F0;
  --ngo-accent-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --ngo-accent-gradient-subtle: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
  --ngo-card-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --ngo-card-shadow-hover: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --ngo-card-shadow-active: 0 12px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* ---- Warm background everywhere ---- */
body {
  background-color: var(--ngo-bg-warm) !important;
}

body[data-route^="app"],
body[data-route^="Workspaces"],
.page-container,
.layout-main-section,
.layout-main-section-wrapper,
#page-desktop,
.desk-page,
.workspace-page {
  background-color: var(--ngo-bg-warm) !important;
}


/* ==========================================================
   1. DESKTOP / APPS PAGE (/apps — the app launcher)
   Frappe v16 uses .desktop-wrapper > .desktop-container > .icons-container > .icons > .desktop-icon
   ========================================================== */

/* Desktop page — warm background, height auto so it doesn't push icons below fold */
.desktop-wrapper {
  background: var(--ngo-bg-warm) !important;
  min-height: auto !important;
  height: auto !important;
}

/* Desktop navbar — frosted glass with bottom glow */
.desktop-wrapper > .navbar-container {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02) !important;
  height: 60px !important;
  padding: 12px 28px !important;
  border-radius: 0 0 16px 16px !important;
  z-index: 1030 !important;
}

/* Desktop search bar in navbar */
.desktop-wrapper .desktop-navbar-modal-search {
  background: var(--ngo-bg-warm-secondary) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: var(--ngo-radius-full) !important;
  height: 40px !important;
  padding: 0 18px !important;
  transition: all var(--ngo-transition) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

.desktop-wrapper .desktop-navbar-modal-search:hover {
  border-color: var(--ngo-border-dark) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.06) !important;
}

/* Desktop container — center icons with breathing room */
.desktop-container {
  padding: 40px 32px 60px !important;
  min-height: calc(100vh - 80px) !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: var(--ngo-bg-warm) !important;
}

.desktop-container .icons-container {
  max-width: 900px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
}

/* Section heading above icons if present */
.desktop-container .icons-container > h5,
.desktop-container .icons-container > .section-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--ngo-text-muted) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--ngo-border) !important;
}

/* Icons grid — beautiful responsive grid */
.desktop-container .icons {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 20px !important;
  justify-items: center !important;
}

/* Each desktop icon — card-style with hover animations */
.desktop-icon {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 20px !important;
  padding: 24px 16px 20px !important;
  width: 140px !important;
  height: auto !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: var(--ngo-card-shadow) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: visible !important;
}

.desktop-icon:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: var(--ngo-card-shadow-hover) !important;
  border-color: rgba(79,70,229,0.2) !important;
  background: #fff !important;
}

.desktop-icon:active {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: var(--ngo-card-shadow-active) !important;
}

/* Icon container — the actual icon/logo circle */
.desktop-icon .icon-container {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  background: var(--ngo-accent-gradient-subtle) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.08) !important;
  padding: 12px !important;
}

/* When icon-container has an image */
.desktop-icon .icon-container:has(.app-logo) {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.desktop-icon .icon-container img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  object-fit: contain !important;
}

/* When icon-container has SVG icon (no image) */
.desktop-icon .icon-container:has(.icon) {
  background: var(--ngo-accent-gradient) !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.25) !important;
}

.desktop-icon .icon-container .icon {
  width: 28px !important;
  height: 28px !important;
  color: #fff !important;
  stroke: #fff !important;
}

.desktop-icon:hover .icon-container {
  transform: scale(1.08) !important;
}

/* Icon title */
.desktop-icon .icon-title {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--ngo-text) !important;
  line-height: 1.3 !important;
  text-align: center !important;
  max-width: 120px !important;
  transition: color var(--ngo-transition) !important;
}

.desktop-icon:hover .icon-title {
  color: var(--ngo-primary) !important;
}

/* Icon subtitle */
.desktop-icon .icon-subtitle {
  font-size: 11px !important;
  color: var(--ngo-text-muted) !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Colorful icon backgrounds based on position (nth-child) */
.desktop-container .icons > .desktop-icon:nth-child(6n+1) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #6366F1 0%, #818CF8 100%) !important;
}
.desktop-container .icons > .desktop-icon:nth-child(6n+2) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%) !important;
}
.desktop-container .icons > .desktop-icon:nth-child(6n+3) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
}
.desktop-container .icons > .desktop-icon:nth-child(6n+4) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #EF4444 0%, #F87171 100%) !important;
}
.desktop-container .icons > .desktop-icon:nth-child(6n+5) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%) !important;
}
.desktop-container .icons > .desktop-icon:nth-child(6n+6) .icon-container:has(.icon) {
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%) !important;
}

/* Folder icons — slightly different look */
.desktop-icon .folder-icon {
  border-radius: 14px !important;
  background: var(--ngo-bg-warm-secondary) !important;
  border: 1px solid var(--ngo-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Page indicator dots */
.page-indicator-container {
  margin-top: 32px !important;
  gap: 8px !important;
}

.page-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ngo-border-dark) !important;
  transition: all var(--ngo-transition) !important;
}

.page-indicator.active-page {
  background: var(--ngo-primary) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* Desktop edit button */
.desktop-edit {
  border-radius: 12px !important;
  background: var(--ngo-primary) !important;
  opacity: 0.1 !important;
  transition: all 0.3s ease !important;
  width: 40px !important;
  height: 40px !important;
}

.desktop-edit:hover {
  opacity: 1 !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3) !important;
  transform: scale(1.1) !important;
}

/* Edit mode buttons */
.edit-mode-buttons {
  gap: 8px !important;
}

.desktop-icon.edit-mode {
  border: 2px dashed var(--ngo-primary-light) !important;
  border-radius: 20px !important;
  background: rgba(79,70,229,0.02) !important;
}

/* Desktop modal (folder open etc.) */
.desktop-modal .modal-content {
  border-radius: 28px !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}

.desktop-modal-body {
  padding: 28px !important;
}


/* ==========================================================
   2. SIDEBAR (body-sidebar — Frappe v16 left sidebar)
   ========================================================== */

/* Sidebar container */
.body-sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 1px 0 8px rgba(0,0,0,0.03) !important;
  padding: 12px 8px 16px 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* When expanded (hover state) */
.body-sidebar-container.expanded .body-sidebar {
  box-shadow: 4px 0 16px rgba(0,0,0,0.08) !important;
  background: #FFFFFF !important;
}

/* Sidebar items — clean, modern feel */
.body-sidebar .standard-sidebar-item {
  border-radius: 10px !important;
  margin-bottom: 2px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.body-sidebar .standard-sidebar-item .item-anchor {
  border-radius: 10px !important;
  padding: 6px 10px !important;
  height: 36px !important;
  color: var(--ngo-text-secondary) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  gap: 6px !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):hover .item-anchor,
.body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover {
  background: var(--ngo-bg-warm-secondary) !important;
  color: var(--ngo-text) !important;
  border-radius: 10px !important;
}

/* Sidebar icon container */
.body-sidebar .standard-sidebar-item .sidebar-item-icon {
  padding: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.65 !important;
  transition: all 0.2s ease !important;
}

.body-sidebar .standard-sidebar-item:hover .sidebar-item-icon {
  opacity: 1 !important;
}

.body-sidebar .standard-sidebar-item .sidebar-item-icon .icon {
  width: 18px !important;
  height: 18px !important;
}

/* Active sidebar item — prominent indigo accent */
.body-sidebar .active-sidebar {
  background: var(--ngo-primary-subtle) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(79,70,229,0.12), inset 0 0 0 1px rgba(79,70,229,0.08) !important;
}

.body-sidebar .active-sidebar .item-anchor {
  color: var(--ngo-primary) !important;
  font-weight: 600 !important;
}

.body-sidebar .active-sidebar .sidebar-item-icon {
  opacity: 1 !important;
}

.body-sidebar .active-sidebar .sidebar-item-icon .icon {
  color: var(--ngo-primary) !important;
  stroke: var(--ngo-primary) !important;
}

/* Active item left accent bar */
.body-sidebar .active-sidebar::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 18px !important;
  background: var(--ngo-primary) !important;
  border-radius: 0 3px 3px 0 !important;
  z-index: 1 !important;
}

/* Sidebar item labels */
.body-sidebar .sidebar-item-label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.body-sidebar .active-sidebar .sidebar-item-label {
  font-weight: 600 !important;
  color: var(--ngo-primary) !important;
}

/* Section breaks / dividers */
.body-sidebar .section-break {
  color: var(--ngo-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 16px 10px 6px !important;
  margin-top: 4px !important;
}

.body-sidebar .divider {
  border-top: 1px solid var(--ngo-border) !important;
  margin: 8px 6px !important;
  opacity: 0.6 !important;
}

/* Sidebar bottom section (user avatar, collapse button) */
.body-sidebar .body-sidebar-bottom {
  border-top: 1px solid var(--ngo-border) !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
}

/* Collapse link */
.body-sidebar .collapse-sidebar-link {
  border-radius: 10px !important;
  padding: 6px 10px !important;
  color: var(--ngo-text-muted) !important;
  transition: all 0.2s ease !important;
}

.body-sidebar .collapse-sidebar-link:hover {
  background: var(--ngo-bg-warm-secondary) !important;
  color: var(--ngo-text) !important;
}

/* Sidebar scrollbar — ultra thin, only on hover */
.body-sidebar::-webkit-scrollbar {
  width: 3px !important;
}

.body-sidebar::-webkit-scrollbar-track {
  background: transparent !important;
}

.body-sidebar::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-radius: 3px !important;
}

.body-sidebar:hover::-webkit-scrollbar-thumb {
  background: var(--ngo-border-dark) !important;
}

/* Notification dropdown in sidebar */
.body-sidebar .dropdown-notifications .notifications-list {
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  border: 1px solid var(--ngo-border) !important;
}


/* ==========================================================
   3. AWESOMEBAR / GLOBAL SEARCH
   ========================================================== */

/* Main awesomebar container */
.search-bar,
.awesomebar-container {
  position: relative !important;
}

/* The actual search input */
.awesomebar,
input.awesomebar,
.navbar-search,
.search-bar input,
#navbar-search {
  border-radius: var(--ngo-radius-full) !important;
  background: var(--ngo-bg-warm-secondary) !important;
  border: 1.5px solid transparent !important;
  padding: 9px 20px 9px 42px !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  color: var(--ngo-text) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 40px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.awesomebar:hover,
input.awesomebar:hover,
#navbar-search:hover {
  background: #fff !important;
  border-color: var(--ngo-border) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.awesomebar:focus,
input.awesomebar:focus,
#navbar-search:focus {
  background: #fff !important;
  border-color: var(--ngo-primary) !important;
  box-shadow: 0 0 0 4px rgba(79,70,229,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

.awesomebar::placeholder,
input.awesomebar::placeholder,
#navbar-search::placeholder {
  color: var(--ngo-text-disabled) !important;
  font-weight: 400 !important;
}

/* Search icon inside awesomebar */
.search-bar .search-icon,
.awesomebar-container .search-icon,
.navbar-search + .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--ngo-text-muted) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Keyboard shortcut badge (Ctrl+K) */
.search-bar .kbd,
.awesomebar-container .kbd {
  background: var(--ngo-bg-warm-secondary) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ngo-text-muted) !important;
}

/* Search results dropdown */
.awesomebar-list,
.search-results,
.awesomebar-dropdown {
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  border: 1px solid var(--ngo-border) !important;
  background: #fff !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  padding: 6px !important;
}

.awesomebar-list li,
.search-results .result-item {
  border-radius: var(--ngo-radius-sm) !important;
  padding: 10px 14px !important;
  transition: background 0.15s ease !important;
}

.awesomebar-list li:hover,
.awesomebar-list li.selected,
.search-results .result-item:hover {
  background: var(--ngo-primary-subtle) !important;
}


/* ==========================================================
   4. WORKSPACE PAGE & WIDGETS — the /app home
   ========================================================== */

/* Workspace page container */
.workspace-page,
.dashboard-page,
.page-container[data-page-container] {
  background: var(--ngo-bg-warm) !important;
}

/* Layout — compact for workspace */
.layout-main-section-wrapper {
  padding: 0 8px !important;
  max-width: 1400px !important;
}

/* Widget group — improved grid (compact) */
.workspace-page .widget-group,
.widget-group {
  margin-bottom: 16px !important;
}

.workspace-page .widget-group .widget-group-head {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

.workspace-page .widget-group .widget-group-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ngo-text) !important;
  letter-spacing: -0.01em !important;
}

/* Widget grid — compact spacing */
.workspace-page .widget-group .grid-col-3,
.workspace-page .widget-group .grid-col-2,
.workspace-page .widget-group .grid-col-1 {
  gap: 10px !important;
}

/* ---- Shortcut Widgets — compact cards ---- */
.widget.shortcut-widget-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: var(--ngo-card-shadow) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 44px !important;
}

.widget.shortcut-widget-box::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--ngo-accent-gradient) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.widget.shortcut-widget-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ngo-card-shadow-hover) !important;
  border-color: rgba(79,70,229,0.15) !important;
}

.widget.shortcut-widget-box:hover::after {
  opacity: 1 !important;
}

.widget.shortcut-widget-box .widget-head {
  padding: 0 !important;
  border: none !important;
}

.widget.shortcut-widget-box .widget-head .widget-title {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ngo-text) !important;
}

.widget.shortcut-widget-box:hover .widget-head .widget-title {
  color: var(--ngo-primary) !important;
}

.widget.shortcut-widget-box .widget-head .widget-title svg {
  color: var(--ngo-primary) !important;
  stroke: var(--ngo-primary) !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

/* Colorful left borders for shortcut widgets based on position */
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+1)::after {
  background: linear-gradient(180deg, #6366F1, #818CF8) !important;
  opacity: 1 !important;
}
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+2)::after {
  background: linear-gradient(180deg, #10B981, #34D399) !important;
  opacity: 1 !important;
}
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+3)::after {
  background: linear-gradient(180deg, #F59E0B, #FBBF24) !important;
  opacity: 1 !important;
}
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+4)::after {
  background: linear-gradient(180deg, #EF4444, #F87171) !important;
  opacity: 1 !important;
}
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+5)::after {
  background: linear-gradient(180deg, #3B82F6, #60A5FA) !important;
  opacity: 1 !important;
}
.grid-col-3 > .widget.shortcut-widget-box:nth-child(6n+6)::after {
  background: linear-gradient(180deg, #8B5CF6, #A78BFA) !important;
  opacity: 1 !important;
}


/* ---- Number Widgets — compact bold stats ---- */
.widget.number-widget-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
  padding: 16px 16px !important;
  box-shadow: var(--ngo-card-shadow) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 90px !important;
}

/* Gradient top accent bar */
.widget.number-widget-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--ngo-accent-gradient) !important;
  border-radius: 16px 16px 0 0 !important;
}

.widget.number-widget-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ngo-card-shadow-hover) !important;
}

.widget.number-widget-box .widget-head {
  padding: 0 !important;
  margin-bottom: 6px !important;
  border: none !important;
}

.widget.number-widget-box .widget-head .widget-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ngo-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.widget.number-widget-box .widget-body .number {
  font-size: 32px !important;
  font-weight: 800 !important;
  background: var(--ngo-accent-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  padding: 0 !important;
}

.widget.number-widget-box .widget-body .number-text {
  font-size: 12px !important;
  color: var(--ngo-text-muted) !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
}

/* Colorful top accents for number widgets */
.grid-col-3 > .widget.number-widget-box:nth-child(4n+1)::before {
  background: linear-gradient(90deg, #6366F1, #818CF8) !important;
}
.grid-col-3 > .widget.number-widget-box:nth-child(4n+2)::before {
  background: linear-gradient(90deg, #10B981, #34D399) !important;
}
.grid-col-3 > .widget.number-widget-box:nth-child(4n+3)::before {
  background: linear-gradient(90deg, #F59E0B, #FBBF24) !important;
}
.grid-col-3 > .widget.number-widget-box:nth-child(4n+4)::before {
  background: linear-gradient(90deg, #EF4444, #F87171) !important;
}


/* ---- Dashboard (chart) Widgets ---- */
.widget.dashboard-widget-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--ngo-card-shadow) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.widget.dashboard-widget-box:hover {
  box-shadow: var(--ngo-card-shadow-hover) !important;
}

.widget.dashboard-widget-box .widget-head {
  padding: 16px 18px 10px !important;
  border-bottom: 1px solid var(--ngo-border) !important;
}


/* ---- Links Widget ---- */
.widget.links-widget-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  box-shadow: var(--ngo-card-shadow) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.widget.links-widget-box:hover {
  box-shadow: var(--ngo-card-shadow-hover) !important;
}

.widget.links-widget-box .widget-head {
  padding: 14px 16px 8px !important;
}

.widget.links-widget-box .link-item {
  padding: 8px 16px !important;
  border-radius: var(--ngo-radius-sm) !important;
  margin: 2px 6px !important;
  transition: all 0.15s ease !important;
}

.widget.links-widget-box .link-item:hover {
  background: var(--ngo-primary-subtle) !important;
}


/* ---- Generic widget hover refinement ---- */
.widget.new-widget {
  border: 2px dashed var(--ngo-border-dark) !important;
  border-radius: 16px !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.widget.new-widget:hover {
  border-color: var(--ngo-primary) !important;
  background: rgba(79,70,229,0.02) !important;
}


/* ==========================================================
   5. PAGE HEAD / BREADCRUMBS / TITLE BAR
   ========================================================== */

/* Page head — clean, floating feel */
.page-head {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  padding: 16px 24px !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
}

.page-head .page-head-content {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Page title */
.page-head .page-title .title-text {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ngo-text) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
}

/* Breadcrumbs — compact and subtle */
.page-head .page-breadcrumbs {
  font-size: 12px !important;
  margin-bottom: 4px !important;
}

.page-head .page-breadcrumbs a {
  color: var(--ngo-text-muted) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.page-head .page-breadcrumbs a:hover {
  color: var(--ngo-primary) !important;
}

/* Page actions (buttons bar) */
.page-head .page-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.page-head .page-actions .btn {
  border-radius: 10px !important;
  font-size: 13px !important;
  padding: 7px 16px !important;
  font-weight: 600 !important;
}

/* Page subtitle / indicator */
.page-head .indicator-pill {
  margin-left: 8px !important;
}


/* ==========================================================
   6. NOTIFICATIONS DROPDOWN
   ========================================================== */

.dropdown-notifications .notifications-list {
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  border: 1px solid var(--ngo-border) !important;
  background: #fff !important;
  width: 380px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
}

.dropdown-notifications .notification-list-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  background: var(--ngo-bg-warm) !important;
  font-weight: 600 !important;
}

.dropdown-notifications .notification-item {
  padding: 12px 18px !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  transition: background 0.15s ease !important;
}

.dropdown-notifications .notification-item:hover {
  background: var(--ngo-primary-subtle) !important;
}

/* User dropdown in sidebar */
.dropdown-navbar-user .dropdown-menu {
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-shadow-xl) !important;
  padding: 6px !important;
}


/* ==========================================================
   7. OVERALL POLISH — BUTTONS, INPUTS, FORM IMPROVEMENTS
   ========================================================== */

/* Primary button — indigo gradient everywhere */
.btn-primary,
.btn-primary-dark,
.page-actions .primary-action {
  background: var(--ngo-accent-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.25) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover,
.btn-primary-dark:hover,
.page-actions .primary-action:hover {
  background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%) !important;
  box-shadow: 0 4px 16px rgba(79,70,229,0.35) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary-dark:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(79,70,229,0.2) !important;
}

/* Default button — cleaner look */
.btn-default,
.btn-secondary {
  background: #FFFFFF !important;
  border: 1px solid var(--ngo-border) !important;
  color: var(--ngo-text) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--ngo-bg-warm-secondary) !important;
  border-color: var(--ngo-border-dark) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
  transform: translateY(-1px) !important;
}

/* Input fields — consistent modern style */
input.form-control,
select.form-control,
textarea.form-control,
.form-control,
.like-disabled-input {
  border-radius: 10px !important;
  border: 1.5px solid var(--ngo-border) !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
}

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-control:focus {
  border-color: var(--ngo-primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
}

/* Read-only / disabled input — subtle warm background */
.like-disabled-input,
.frappe-control .control-value {
  background: var(--ngo-bg-warm) !important;
  border-color: var(--ngo-border) !important;
  color: var(--ngo-text-secondary) !important;
}

/* Form layout card */
.form-layout {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: var(--ngo-radius) !important;
  box-shadow: var(--ngo-card-shadow) !important;
}

/* Section head in forms */
.form-section .section-head {
  background: var(--ngo-bg-warm) !important;
  border-left: 4px solid var(--ngo-primary) !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  color: var(--ngo-text) !important;
  margin: 0 0 16px !important;
}


/* ==========================================================
   8. LIST VIEW ENHANCEMENTS
   ========================================================== */

/* List wrapper */
.frappe-list .result {
  border-radius: var(--ngo-radius) !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: var(--ngo-card-shadow) !important;
  background: #fff !important;
}

/* List header */
.list-row-head {
  background: var(--ngo-bg-warm) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ngo-text-muted) !important;
  padding: 12px 20px !important;
  border-bottom: 2px solid var(--ngo-border) !important;
}

/* List rows */
.list-row {
  background: #FFFFFF !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  transition: all 0.15s ease !important;
}

.list-row:hover {
  background: var(--ngo-primary-subtle) !important;
  transform: none !important;
  box-shadow: inset 3px 0 0 var(--ngo-primary) !important;
}

/* Alternating row colors */
.list-row:nth-child(even) {
  background: var(--ngo-bg-warm) !important;
}

.list-row:nth-child(even):hover {
  background: var(--ngo-primary-subtle) !important;
}


/* ==========================================================
   9. MODAL ENHANCEMENTS
   ========================================================== */

.modal-content {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.08) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--ngo-bg-warm) !important;
  border-bottom: 1px solid var(--ngo-border) !important;
  padding: 20px 24px !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
}

.modal-body {
  padding: 24px !important;
}

.modal-footer {
  background: var(--ngo-bg-warm) !important;
  border-top: 1px solid var(--ngo-border) !important;
  padding: 16px 24px !important;
}

.modal-backdrop {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(6px) !important;
}


/* ==========================================================
   10. TABS (form tabs, workspace tabs)
   ========================================================== */

.form-tabs .nav-tabs,
.workspace-page .nav-tabs {
  border-bottom: 2px solid var(--ngo-border) !important;
  gap: 4px !important;
  padding: 0 4px !important;
}

.form-tabs .nav-tabs .nav-link,
.workspace-page .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--ngo-text-muted) !important;
  transition: all 0.2s ease !important;
  margin-bottom: -2px !important;
}

.form-tabs .nav-tabs .nav-link:hover,
.workspace-page .nav-tabs .nav-link:hover {
  color: var(--ngo-text) !important;
  background: var(--ngo-bg-warm-secondary) !important;
}

.form-tabs .nav-tabs .nav-link.active,
.workspace-page .nav-tabs .nav-link.active {
  color: var(--ngo-primary) !important;
  border-bottom-color: var(--ngo-primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
}


/* ==========================================================
   11. STATUS BADGES — color coded with soft backgrounds
   ========================================================== */

.indicator-pill,
.indicator {
  border-radius: var(--ngo-radius-full) !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.03em !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Indicator dot */
.indicator-pill .indicator-dot,
.indicator::before {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.indicator-pill.green { background: #D1FAE5 !important; color: #065F46 !important; }
.indicator-pill.blue { background: #DBEAFE !important; color: #1E40AF !important; }
.indicator-pill.orange { background: #FED7AA !important; color: #9A3412 !important; }
.indicator-pill.yellow { background: #FEF3C7 !important; color: #92400E !important; }
.indicator-pill.red { background: #FEE2E2 !important; color: #991B1B !important; }
.indicator-pill.gray,
.indicator-pill.grey { background: #F3F4F6 !important; color: #4B5563 !important; }
.indicator-pill.purple { background: #EDE9FE !important; color: #5B21B6 !important; }
.indicator-pill.cyan { background: #CFFAFE !important; color: #155E75 !important; }


/* ==========================================================
   12. GENERAL LAYOUT SPACING & POLISH
   ========================================================== */

/* Main body layout — consistent warm bg */
.layout-main {
  background: var(--ngo-bg-warm) !important;
}

/* Page body — cleaner spacing */
.page-body {
  background: var(--ngo-bg-warm) !important;
  padding-top: 0 !important;
}

/* Better link colors in the app */
body[data-route^="app"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--ngo-primary) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

body[data-route^="app"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--ngo-primary-dark) !important;
}

/* Standard page title in workspace */
.workspace-page .standard-page-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ngo-text) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  margin-bottom: 4px !important;
}

/* Horizontal rules */
hr {
  border: none !important;
  height: 1px !important;
  background: var(--ngo-border) !important;
  margin: 20px 0 !important;
  opacity: 0.6 !important;
}

/* Code blocks */
code {
  background: var(--ngo-bg-warm-secondary) !important;
  border: 1px solid var(--ngo-border) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
  color: var(--ngo-primary-dark) !important;
}

/* Frappe control in list filters */
.filter-section,
.list-filters {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: var(--ngo-radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--ngo-card-shadow) !important;
}

/* List paging */
.list-paging-area {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: var(--ngo-radius) !important;
  padding: 12px 20px !important;
  margin-top: 16px !important;
  box-shadow: var(--ngo-card-shadow) !important;
}

/* Onboarding widget */
.widget.onboarding-widget-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--ngo-card-shadow) !important;
  padding: 24px !important;
}


/* ==========================================================
   13. RESPONSIVE REFINEMENTS FOR NEW STYLES
   ========================================================== */

@media (max-width: 768px) {
  .desktop-container .icons {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .desktop-icon {
    width: 110px !important;
    min-height: 120px !important;
    padding: 18px 10px 14px !important;
    border-radius: 16px !important;
  }

  .desktop-icon .icon-container {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
  }

  .desktop-icon .icon-container img {
    width: 44px !important;
    height: 44px !important;
  }

  .desktop-icon .icon-title {
    font-size: 12px !important;
    max-width: 100px !important;
  }

  .workspace-page .widget-group .widget-group-title {
    font-size: 16px !important;
  }

  .widget.number-widget-box .widget-body .number {
    font-size: 32px !important;
  }
}

@media (max-width: 480px) {
  .desktop-container .icons {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .desktop-icon {
    width: 95px !important;
    min-height: 105px !important;
    padding: 14px 8px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }

  .desktop-icon .icon-container {
    width: 44px !important;
    height: 44px !important;
  }

  .desktop-icon .icon-title {
    font-size: 11px !important;
  }
}


/* ==========================================================
   14. DARK MODE OVERRIDES FOR NEW STYLES
   ========================================================== */

[data-theme="dark"] .desktop-wrapper,
[data-theme="dark"] .page-container,
[data-theme="dark"] .workspace-page,
[data-theme="dark"] .layout-main-section,
[data-theme="dark"] .layout-main,
[data-theme="dark"] .page-body {
  background: #0F172A !important;
}

[data-theme="dark"] .desktop-wrapper > .navbar-container {
  background: rgba(15,23,42,0.9) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .desktop-icon {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] .desktop-icon:hover {
  background: #334155 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  border-color: rgba(79,70,229,0.3) !important;
}

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

[data-theme="dark"] .body-sidebar {
  background: #1E293B !important;
  border-right-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .body-sidebar .active-sidebar {
  background: rgba(79,70,229,0.15) !important;
}

[data-theme="dark"] .widget.shortcut-widget-box,
[data-theme="dark"] .widget.number-widget-box,
[data-theme="dark"] .widget.dashboard-widget-box,
[data-theme="dark"] .widget.links-widget-box {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .page-head {
  background: rgba(15,23,42,0.9) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .modal-content {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  background: #0F172A !important;
}

[data-theme="dark"] .list-row {
  background: #1E293B !important;
}

[data-theme="dark"] .list-row:nth-child(even) {
  background: #0F172A !important;
}

[data-theme="dark"] .list-row-head {
  background: #0F172A !important;
}

[data-theme="dark"] .frappe-list .result {
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-secondary {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] input.form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] textarea.form-control {
  background: #1E293B !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] .desktop-wrapper .desktop-navbar-modal-search {
  background: #334155 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

[data-theme="dark"] .awesomebar,
[data-theme="dark"] input.awesomebar {
  background: #334155 !important;
  color: #E2E8F0 !important;
}


/* ==========================================================
   15. SMOOTH GLOBAL TRANSITIONS
   ========================================================== */

/* Smooth transitions on all interactive elements */
a, button, .btn, input, select, textarea,
.widget, .desktop-icon, .list-row,
.standard-sidebar-item, .dropdown-item,
.nav-link, .page-head {
  transition-property: background, border-color, color, box-shadow, transform, opacity !important;
  transition-duration: 0.2s !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================
   16. COMPACT WORKSPACE / HOME PAGE — reduce spacing gaps
   ========================================================== */

/* EditorJS blocks: reduce vertical gap between blocks */
.codex-editor__redactor .ce-block {
  padding: 2px 0 !important;
  margin: 0 !important;
}

/* Remove default ce-block padding that creates big vertical gaps */
.codex-editor__redactor {
  padding-bottom: 60px !important; /* was 300px default */
}

/* Widget spacer blocks: collapse to minimal height */
.widget.spacer {
  min-height: 4px !important;
  max-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Workspace container: reduce overall padding */
.workspace-container {
  padding: 16px 24px !important;
}

/* Widget groups: reduce bottom margin between sections */
.workspace-page .widget-group,
.widget-group {
  margin-bottom: 16px !important;
}

.workspace-page .widget-group .widget-group-head {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

/* Section headers in workspace: smaller, tighter */
.workspace-page .ce-header,
.workspace-page .ce-block h3,
.workspace-page .ce-block h4,
.workspace-page .ce-block h5 {
  margin: 6px 0 4px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

/* Hero header: a bit larger but still compact */
.workspace-page .ce-block .h3 {
  font-size: 22px !important;
  margin: 0 0 2px !important;
}

/* Paragraph blocks: reduce spacing */
.workspace-page .ce-paragraph {
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Number widget: more compact */
.widget.number-widget-box {
  padding: 16px 16px !important;
  min-height: 90px !important;
  border-radius: 12px !important;
}

.widget.number-widget-box .widget-head {
  margin-bottom: 6px !important;
}

.widget.number-widget-box .widget-body .number {
  font-size: 32px !important;
  line-height: 1.1 !important;
}

.widget.number-widget-box .widget-body .number-text {
  margin-top: 4px !important;
  font-size: 12px !important;
}

/* Shortcut widgets: more compact */
.widget.shortcut-widget-box {
  padding: 12px 14px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}

/* Chart widgets: slightly tighter */
.widget.dashboard-widget-box {
  border-radius: 12px !important;
}

.widget.dashboard-widget-box .widget-head {
  padding: 12px 14px 8px !important;
}

/* Widget grid gaps: tighter */
.workspace-page .widget-group .grid-col-3,
.workspace-page .widget-group .grid-col-2,
.workspace-page .widget-group .grid-col-1 {
  gap: 10px !important;
}

/* Row gaps in widget group body */
.widget-group-body .row {
  margin-left: -5px !important;
  margin-right: -5px !important;
}

.widget-group-body .row > [class*="col-"] {
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-bottom: 10px !important;
}

/* Reduce page head spacing on workspace */
body[data-route="app/home"] .page-head,
body[data-route="Workspaces/Home"] .page-head {
  padding: 12px 24px !important;
  margin-bottom: 8px !important;
}

/* Layout main section: tighter on workspace */
body[data-route="app/home"] .layout-main-section,
body[data-route="Workspaces/Home"] .layout-main-section {
  padding: 8px 16px !important;
}

/* ==================== END MAJOR UI OVERHAUL ==================== */