/* 
   ==========================================================================
   Premium SaaS CRM Redesign Stylesheet (HubSpot/Zoho/Monday.com Standard)
   Brand Theme: AI-Powered Premium SaaS CRM
   ========================================================================== 
*/

/* --- 1. Global Reset & Variables --- */
:root {
  --primary-color: #C487F9;
  --secondary-color: #23CFEE;
  --success-color: #10B981;
  --dark-color: #0B0F14;
  --light-color: #F7F6F2;
  --bg-color: #F6F5FE;
  
  --primary-gradient: linear-gradient(135deg, #C487F9 0%, #23CFEE 100%);
  --success-gradient: linear-gradient(135deg, #10B981 0%, #23CFEE 100%);
  --dark-gradient: linear-gradient(135deg, #0B0F14 0%, #1B2230 100%);
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(196, 135, 249, 0.15);
  
  --card-shadow: 0 10px 30px -4px rgba(196, 135, 249, 0.08), 0 4px 12px -2px rgba(196, 135, 249, 0.04);
  --hover-shadow: 0 20px 40px -6px rgba(196, 135, 249, 0.15), 0 8px 20px -4px rgba(196, 135, 249, 0.08);
  --glow-shadow: 0 0 20px rgba(196, 135, 249, 0.3);
}

body {
  background: var(--bg-color) !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--dark-color) !important;
  overflow-x: hidden;
  font-size: 14px !important;
}

/* Ensure no thin fonts */
body, p, span, a, input, button, select, textarea, h1, h2, h3, h4, h5, h6 {
  font-weight: 500 !important;
}
.bold, strong, th, h4, h3, h2, h1, .tw-font-semibold, .tw-font-bold {
  font-weight: 700 !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: #dcd9f8;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* Animations declarations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 10px rgba(196, 135, 249, 0.2); }
  50% { box-shadow: 0 0 20px rgba(196, 135, 249, 0.5); }
  100% { box-shadow: 0 0 10px rgba(196, 135, 249, 0.2); }
}
@keyframes barShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.animated-fade-in {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* --- 2. Sidebar Redesign --- */
aside#menu {
  width: 280px !important;
  background: var(--dark-gradient) !important;
  border-right: 0 !important;
  box-shadow: 5px 0 30px rgba(11, 15, 20, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 100 !important;
}

/* User profile card at top */
.sidebar-user-profile {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(196, 135, 249, 0.2) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin: 80px 16px 20px 16px !important;
  animation: pulseGlow 4s infinite ease-in-out;
  box-shadow: var(--glow-shadow);
}

.sidebar-user-profile a.profile {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.sidebar-user-profile a.profile span {
  color: var(--light-color) !important;
}

.sidebar-user-profile a.profile span .tw-text-neutral-500 {
  color: #a0aec0 !important;
}

.sidebar-user-profile .staff-profile-image-small {
  border: 2px solid var(--secondary-color) !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
}

/* Menu items */
#side-menu {
  padding: 0 8px 40px 8px !important;
}

#side-menu li {
  margin: 4px 0 !important;
}

#side-menu li a {
  color: #b3b9c9 !important;
  border-radius: 99px !important; /* Rounded pill shape */
  padding: 12px 20px !important;
  margin: 2px 10px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

#side-menu li a:hover,
#side-menu li a:focus {
  background: rgba(196, 135, 249, 0.08) !important;
  color: #ffffff !important;
  padding-left: 24px !important;
  box-shadow: 0 4px 15px rgba(196, 135, 249, 0.15) !important;
}

#side-menu li.active > a {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(196, 135, 249, 0.4) !important;
}

#side-menu li a i.menu-icon {
  color: var(--primary-color) !important;
  margin-right: 14px !important;
  font-size: 18px !important;
  width: 24px !important;
  text-align: center !important;
  transition: all 0.3s !important;
}

#side-menu li.active > a i.menu-icon,
#side-menu li a:hover i.menu-icon {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}

#side-menu li a span.arrow {
  margin-left: auto !important;
  color: #4a5568 !important;
}

#side-menu li.active > a span.arrow,
#side-menu li a:hover span.arrow {
  color: #ffffff !important;
}

/* Second level collapsible */
#side-menu ul.nav-second-level {
  background: rgba(0, 0, 0, 0.2) !important;
  margin: 4px 16px 8px 16px !important;
  border-radius: 14px !important;
  padding: 8px 0 !important;
  position: relative !important;
}

#side-menu ul.nav-second-level::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(196, 135, 249, 0.15);
}

#side-menu ul.nav-second-level li a {
  margin: 2px 10px 2px 32px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: #a0aec0 !important;
  border-radius: 99px !important;
}

#side-menu ul.nav-second-level li a:hover {
  color: #ffffff !important;
  background: rgba(196, 135, 249, 0.05) !important;
  padding-left: 20px !important;
}

#side-menu ul.nav-second-level li.active a {
  color: var(--secondary-color) !important;
  background: transparent !important;
}

/* --- 3. Top Header Redesign --- */
#header {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 20px rgba(196, 135, 249, 0.03) !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 30px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
}

#header button.hide-menu {
  margin-right: 20px !important;
  padding: 10px !important;
  border-radius: 12px !important;
  transition: all 0.3s !important;
  background: rgba(196, 135, 249, 0.08) !important;
  color: var(--primary-color) !important;
  border: 0 !important;
}

#header button.hide-menu:hover {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
}

/* Global search input */
#top_search {
  max-width: 360px !important;
}

#top_search input#search_input {
  background: #ffffff !important;
  border: 1px solid rgba(196, 135, 249, 0.2) !important;
  border-radius: 12px !important;
  height: 42px !important;
  padding-left: 40px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
}

#top_search input#search_input:focus {
  border-color: var(--secondary-color) !important;
  box-shadow: 0 0 0 4px rgba(35, 207, 238, 0.15) !important;
  outline: none !important;
}

#top_search_button {
  left: 12px !important;
}

/* Quick Actions Dropdown */
.navbar-nav .icon a span.tw-bg-primary-600 {
  background: var(--primary-gradient) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(196, 135, 249, 0.35) !important;
  transition: all 0.3s ease-in-out !important;
}

.navbar-nav .icon a span.tw-bg-primary-600:hover {
  transform: scale(1.1) rotate(90deg) !important;
  box-shadow: 0 6px 20px rgba(196, 135, 249, 0.5) !important;
}

/* Badges for Notifications */
.badge.bg-warning, .badge.bg-success, .badge.bg-danger, .badge.bg-info {
  border-radius: 8px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}
.badge.bg-danger {
  background: var(--primary-gradient) !important;
}

/* --- 4. Content Area Layout --- */
#wrapper {
  min-height: calc(100vh - 70px) !important;
  margin-left: 280px !important;
  padding: 30px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.hide-sidebar #wrapper {
  margin-left: 0 !important;
}

body.hide-sidebar aside#menu {
  transform: translate3d(-280px, 0, 0) !important;
}

/* --- 5. Dashboard Redesign --- */

/* Grid for the 6 Analytics Cards */
.widget[data-name="Quick Stats"] .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 0 0 30px 0 !important;
}

@media (max-width: 1440px) {
  .widget[data-name="Quick Stats"] .row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  .widget[data-name="Quick Stats"] .row {
    grid-template-columns: 1fr !important;
  }
}

/* Cards Overhaul */
.panel_s,
.top_stats_wrapper {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(196, 135, 249, 0.08) !important;
  box-shadow: var(--card-shadow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

.panel_s:hover,
.top_stats_wrapper:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--hover-shadow) !important;
}

/* Gradient backgrounds for Stats */
.quick-stats-revenue .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(196, 135, 249, 0.06) 0%, rgba(35, 207, 238, 0.06) 100%) !important;
  border-left: 5px solid var(--primary-color) !important;
}
.quick-stats-customers .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(11, 15, 20, 0.03) 0%, rgba(27, 34, 48, 0.03) 100%) !important;
  border-left: 5px solid var(--dark-color) !important;
}
.quick-stats-leads .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(35, 207, 238, 0.06) 100%) !important;
  border-left: 5px solid var(--success-color) !important;
}
.quick-stats-projects .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(196, 135, 249, 0.06) 0%, rgba(35, 207, 238, 0.06) 100%) !important;
  border-left: 5px solid var(--primary-color) !important;
}
.quick-stats-tasks .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06) 0%, rgba(35, 207, 238, 0.06) 100%) !important;
  border-left: 5px solid var(--success-color) !important;
}
.quick-stats-tickets .top_stats_wrapper {
  background: linear-gradient(135deg, rgba(11, 15, 20, 0.03) 0%, rgba(27, 34, 48, 0.03) 100%) !important;
  border-left: 5px solid var(--dark-color) !important;
}

.top_stats_wrapper svg {
  width: 28px !important;
  height: 28px !important;
  padding: 6px;
  background: rgba(255,255,255,0.8);
  border-radius: 8px;
}

/* Progress bars redesign */
.progress {
  height: 10px !important;
  background-color: #eef0f6 !important;
  border-radius: 99px !important;
  position: relative !important;
  overflow: hidden !important;
}

.progress-bar {
  border-radius: 99px !important;
  position: relative !important;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: barShine 2s infinite linear;
}

.progress-bar-danger, .progress-bar-default {
  background: var(--primary-gradient) !important;
}

.progress-bar-success {
  background: var(--success-gradient) !important;
}

.progress-bar-info, .progress-bar-warning {
  background: var(--success-gradient) !important;
}

/* 2-Column Business Overview Grid */
.col-md-8[data-container="left-8"] {
  width: 65% !important;
}
.col-md-4[data-container="right-4"] {
  width: 35% !important;
}
@media (max-width: 1024px) {
  .col-md-8[data-container="left-8"],
  .col-md-4[data-container="right-4"] {
    width: 100% !important;
  }
}

/* --- 6. Task Management priorities --- */
.task-priority-high, .priority-red {
  border-left: 5px solid #EF4444 !important;
}
.task-priority-medium, .priority-orange {
  border-left: 5px solid #F97316 !important;
}
.task-priority-low, .priority-green {
  border-left: 5px solid var(--success-color) !important;
}

/* --- 7. Settings Dashboard Complete Redesign --- */

/* Left menu settings layout */
.col-md-4.col-lg-3:has(.settings-group-system-update) {
  width: 25% !important;
}
.col-md-8.col-lg-9:has(#settings-form) {
  width: 75% !important;
}
@media (max-width: 992px) {
  .col-md-4.col-lg-3:has(.settings-group-system-update),
  .col-md-8.col-lg-9:has(#settings-form) {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* Settings sidebar - dark panel matching dashboard sidebar */
.col-md-4.col-lg-3:has(.settings-group-system-update) .panel_s,
.col-md-4.col-lg-3:has(.settings-group-system-info) .panel_s {
  background: var(--dark-gradient) !important;
  border: 0 !important;
  box-shadow: 5px 0 30px rgba(11, 15, 20, 0.25) !important;
  border-radius: 16px !important;
}

/* Section group title labels (e.g. "General", "Email") */
.col-md-4.col-lg-3:has(.settings-group-system-update) h4,
.col-md-4.col-lg-3:has(.settings-group-system-info) h4 {
  color: rgba(255, 255, 255, 0.35) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  margin-top: 16px !important;
  margin-bottom: 6px !important;
  padding: 0 10px !important;
}

/* Left categories - pill-shaped, dark style */
.settings-group-system-update, 
.settings-group-system-info, 
[class^="settings-group-"] {
  background: transparent !important;
  border-radius: 99px !important;
  margin: 2px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.settings-group-system-update:hover, 
[class^="settings-group-"]:hover {
  transform: none !important;
  box-shadow: none !important;
}

.settings-group-system-update a, 
[class^="settings-group-"] a {
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  color: #b3b9c9 !important;
  text-decoration: none !important;
  border-radius: 99px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 13px !important;
}

.settings-group-system-update:hover a, 
[class^="settings-group-"]:hover a {
  background: rgba(196, 135, 249, 0.08) !important;
  color: #ffffff !important;
}

.settings-group-system-update.active, 
[class^="settings-group-"].active,
.settings-group-system-update:has(a.tw-text-neutral-800), 
[class^="settings-group-"]:has(a.tw-text-neutral-800) {
  background: transparent !important;
  border-color: transparent !important;
}

.settings-group-system-update.active a, 
[class^="settings-group-"].active a,
.settings-group-system-update:has(a.tw-text-neutral-800) a, 
[class^="settings-group-"]:has(a.tw-text-neutral-800) a {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(196, 135, 249, 0.4) !important;
}

.settings-group-system-update a i, 
[class^="settings-group-"] a i {
  color: var(--primary-color) !important;
  margin-right: 12px !important;
  width: 18px !important;
  text-align: center !important;
  transition: all 0.3s !important;
  flex-shrink: 0 !important;
}

.settings-group-system-update:hover a i,
[class^="settings-group-"]:hover a i {
  color: #ffffff !important;
}

.settings-group-system-update.active a i, 
[class^="settings-group-"].active a i,
.settings-group-system-update:has(a.tw-text-neutral-800) a i, 
[class^="settings-group-"]:has(a.tw-text-neutral-800) a i {
  color: #ffffff !important;
}

/* Settings Form Content Area */
#settings-form .panel_s {
  border-radius: 16px !important;
  border: 1px solid rgba(196, 135, 249, 0.1) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Drag and Drop Upload Box for Logo */
.company_logo_light, .company_logo_dark {
  border: 2px dashed rgba(196, 135, 249, 0.4) !important;
  background: rgba(196, 135, 249, 0.02) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-align: center !important;
  margin-bottom: 20px !important;
  transition: all 0.3s !important;
}
.company_logo_light:hover, .company_logo_dark:hover {
  border-color: var(--secondary-color) !important;
  background: rgba(35, 207, 238, 0.04) !important;
}

/* Two column settings fields layout */
.company-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .company-info-grid {
    grid-template-columns: 1fr;
  }
}

/* SMTP Test Connection Meters & Health indicators */
.smtp-health-meter {
  background: #f1f5f9;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.smtp-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success-color);
  box-shadow: 0 0 8px var(--success-color);
}

/* AI Settings Section styling */
.ai-settings-card {
  border-left: 5px solid var(--primary-color) !important;
  background: rgba(196, 135, 249, 0.02) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Toggle Switches redesign */
.onoffswitch-inner::before {
  background-color: var(--primary-color) !important;
}
.onoffswitch-switch {
  border-radius: 50% !important;
  right: 0px !important;
  border: 2px solid var(--primary-color) !important;
}

/* --- 8. Customer List Module --- */
.customer-card-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.customer-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(196, 135, 249, 0.08);
  box-shadow: var(--card-shadow);
  padding: 20px;
  transition: all 0.3s !important;
}
.customer-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hover-shadow);
}

/* Health Score */
.health-score-high {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--success-color) !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
}

/* --- 9. Leads Module Kanban Board --- */
.kanban-board-saas {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 20px;
}

.kanban-col {
  flex: 0 0 280px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(196, 135, 249, 0.05);
}

.kanban-card-saas {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--card-shadow);
  border-left: 3px solid var(--primary-color);
  cursor: grab;
  transition: all 0.2s !important;
}
.kanban-card-saas:hover {
  transform: scale(1.02);
  box-shadow: var(--hover-shadow);
}

/* --- 10. Project Progress Circle Tracker --- */
.progress-circle-saas {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(var(--primary-color) 75%, #f1f5f9 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- 11. Tables Overhaul --- */
.table-responsive {
  border: 0 !important;
}

table.table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important; /* spacing between rows */
  background: transparent !important;
}

table.table thead th {
  background: transparent !important;
  border: 0 !important;
  color: #718096 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  padding: 12px 18px !important;
}

table.table tbody tr {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: var(--card-shadow) !important;
  transition: all 0.3s !important;
}

table.table tbody tr:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--hover-shadow) !important;
}

table.table tbody td {
  border: 0 !important;
  padding: 16px 18px !important;
  vertical-align: middle !important;
  color: var(--dark-color) !important;
}

table.table tbody td:first-child {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

table.table tbody td:last-child {
  border-top-right-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* --- 12. Authentication Pages (Login / Register / Forgot Password) --- */
.login-body, .authentication {
  background: radial-gradient(circle at 10% 20%, #F6F5FE 0%, #dcd9f8 90%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

.authentication .company-logo {
  margin-bottom: 30px !important;
}

.authentication .panel_s {
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(196, 135, 249, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  width: 450px !important;
}

/* Buttons Upgrade */
.btn-primary, .btn-info {
  background: var(--primary-gradient) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 12px rgba(196, 135, 249, 0.3) !important;
  transition: all 0.3s !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-info:hover {
  background: var(--primary-gradient) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(196, 135, 249, 0.45) !important;
  opacity: 0.95;
}

.btn-success {
  background: var(--success-gradient) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
  transition: all 0.3s !important;
  color: #ffffff !important;
}
.btn-success:hover {
  background: var(--success-gradient) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
  opacity: 0.95;
}

/* Form Controls */
.form-control {
  border-radius: 10px !important;
  border: 1px solid rgba(196, 135, 249, 0.2) !important;
  height: 40px !important;
  padding: 8px 14px !important;
  transition: all 0.3s !important;
}
.form-control:focus {
  border-color: var(--secondary-color) !important;
  box-shadow: 0 0 0 3px rgba(35, 207, 238, 0.15) !important;
}

/* --- 13. Mobile Responsive Styles --- */
@media (max-width: 768px) {
  #wrapper {
    padding: 15px !important;
  }
  
  /* Table to Responsive Cards */
  table.table tbody td {
    padding: 12px 14px !important;
  }
}

/* --- 14. Dashboard Analytics & Finance Overview Redesign --- */

.finance-summary-container {
  position: relative;
  width: 100%;
}

.finance-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important; /* Merged look */
  margin-bottom: 24px;
  background: #ffffff !important;
  border: 0.8px solid rgba(196, 135, 249, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

.finance-card {
  background: transparent !important; /* Inherits white from container */
  padding: 24px !important;
  transition: none !important; /* No transitions on merged cards */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgba(196, 135, 249, 0.12) !important; /* Vertical separation border */
}

/* Ensure last card in row doesn't have right border */
.finance-card:last-child {
  border-right: none !important;
}

.finance-card:hover {
  transform: none !important; /* Remove individual card hover translation */
  box-shadow: none !important; /* Remove individual card hover shadow */
}

.finance-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(196, 135, 249, 0.08) !important;
  margin-bottom: 20px !important;
}

.finance-card-icon-badge {
  background: rgba(196, 135, 249, 0.08) !important;
  color: var(--primary-color) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.finance-card-icon-badge svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--primary-color) !important;
}

.finance-card-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--dark-color) !important;
}

.finance-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
}

/* Statistics Rows perfect alignment styling */
.finance-status-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.finance-status-count {
  width: 32px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--dark-color) !important;
  text-align: left !important;
  flex-shrink: 0 !important;
}

.finance-status-progress {
  flex-grow: 1 !important;
  margin: 0 !important;
}

.finance-status-progress .progress {
  margin: 0 !important;
}

.finance-status-label-wrap {
  width: 140px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

.finance-status-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.finance-status-label:hover {
  text-decoration: underline !important;
}

.finance-status-percent {
  font-size: 11px !important;
  color: #a0aec0 !important;
  margin-left: 6px !important;
  font-weight: 500 !important;
}

/* Invoices total container overhaul */
.finance-total-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(196, 135, 249, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

.finance-total-container #invoices_total {
  margin-top: 0 !important;
}

/* Responsive grid & borders - Fixed breakpoints for proper mobile stacking */

/* Tablet: 901px - 1199px: 2-column layout */
@media (max-width: 1199px) and (min-width: 901px) {
  .finance-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .finance-card {
    border-right: 1px solid rgba(196, 135, 249, 0.12) !important;
  }
  .finance-card:nth-child(2) {
    border-right: none !important;
  }
  .finance-card.proposal-card {
    grid-column: span 2 !important;
    border-right: none !important;
    border-top: 1px solid rgba(196, 135, 249, 0.12) !important;
  }
  .finance-status-label-wrap {
    width: 120px !important;
  }
}

/* Mobile: 900px and below: 1-column stacked layout
   This ensures text is NEVER cut off on phones (375px–500px) */
@media (max-width: 900px) {
  .finance-grid {
    grid-template-columns: 1fr !important;
  }
  .finance-card {
    padding: 16px !important;
    border-right: none !important;
    border-top: 1px solid rgba(196, 135, 249, 0.12) !important;
  }
  .finance-card:first-child {
    border-top: none !important;
  }
  .finance-card.proposal-card {
    grid-column: span 1 !important;
    border-top: 1px solid rgba(196, 135, 249, 0.12) !important;
  }
  .finance-status-label-wrap {
    width: 130px !important;
  }
  .finance-status-label {
    font-size: 12px !important;
  }
}

/* Very small phones: 480px and below - extra compact */
@media (max-width: 480px) {
  .finance-card {
    padding: 14px !important;
  }
  .finance-status-row {
    gap: 10px !important;
  }
  .finance-status-label-wrap {
    width: 110px !important;
  }
  .finance-status-count {
    font-size: 13px !important;
  }
  .finance-card-title {
    font-size: 14px !important;
  }
}


/* ============================================================
   15. Setup Flyout Menu Redesign
   Matches the dark gradient sidebar style with pill navigation
   ============================================================ */

#setup-menu-wrapper,
.setup-menu-sidebar {
  background: var(--dark-gradient) !important;
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: 5px 0 30px rgba(11, 15, 20, 0.35) !important;
  padding: 0 8px 20px 8px !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 280px !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 200 !important;
}

#setup-menu-wrapper.fadeOutLeft,
#setup-menu-wrapper.fadeOutRight,
.setup-menu-sidebar.fadeOutLeft,
.setup-menu-sidebar.fadeOutRight {
  pointer-events: none;
}

/* Heading bar "Setup" title */
#setup-menu .customizer-heading {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Close button X icon */
.close-customizer {
  color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  border-radius: 8px !important;
  padding: 6px !important;
  transition: all 0.3s !important;
}
.close-customizer:hover {
  background: rgba(196, 135, 249, 0.15) !important;
  color: #ffffff !important;
}

/* Header first child (Setup heading row) */
#setup-menu > li:first-child {
  border-bottom: 1px solid rgba(196, 135, 249, 0.18) !important;
  color: #ffffff !important;
  padding: 10px 8px !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
}
#setup-menu > li:first-child:hover {
  border-left-color: transparent !important;
  background: transparent !important;
}

/* All list items - remove old box model, apply pill radius */
#setup-menu > li {
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 2px 0 !important;
  border-radius: 99px !important;
  background: transparent !important;
}

/* All top-level links */
#setup-menu > li > a {
  color: #b3b9c9 !important;
  border-radius: 99px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}
#setup-menu > li > a:hover,
#setup-menu > li > a:focus {
  background: rgba(196, 135, 249, 0.08) !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Active/current page item */
#setup-menu > li.active > a,
#setup-menu > li.active > a:hover,
#setup-menu > li.active > a:focus {
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  box-shadow: 0 4px 20px rgba(196, 135, 249, 0.4) !important;
  border: 0 !important;
}

/* Menu icons */
#setup-menu > li > a i.menu-icon {
  color: var(--primary-color) !important;
  margin-right: 12px !important;
  width: 20px !important;
  font-size: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s !important;
  display: block !important;
  float: left !important;
}
#setup-menu > li > a:hover i.menu-icon,
#setup-menu > li > a:focus i.menu-icon,
#setup-menu > li.active > a i.menu-icon {
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Arrow chevron */
#setup-menu > li > a > .fa.arrow,
#setup-menu .arrow {
  color: rgba(255, 255, 255, 0.3) !important;
}
#setup-menu > li.active > a > .fa.arrow {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Menu text span */
#setup-menu .menu-text {
  color: inherit !important;
}

/* Sub-menu second level */
#setup-menu li .nav-second-level {
  background: rgba(0, 0, 0, 0.22) !important;
  margin: 4px 10px 8px 10px !important;
  border-radius: 14px !important;
  padding: 8px 0 !important;
  position: relative !important;
}
#setup-menu li .nav-second-level::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(196, 135, 249, 0.15);
  border-radius: 2px;
}
#setup-menu li .nav-second-level li a {
  color: #a0aec0 !important;
  padding: 7px 16px 7px 40px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 99px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transition: all 0.3s !important;
  display: block !important;
}
#setup-menu li .nav-second-level li a:hover,
#setup-menu li .nav-second-level li a:focus {
  color: #ffffff !important;
  background: rgba(196, 135, 249, 0.05) !important;
  padding-left: 44px !important;
}
#setup-menu li .nav-second-level li.active > a {
  color: var(--secondary-color) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Help link at bottom */
#setup-menu > li:last-of-type > a[target="_blank"] {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
}
#setup-menu > li:last-of-type > a[target="_blank"]:hover {
  color: #ffffff !important;
  background: rgba(196, 135, 249, 0.08) !important;
}