/* PyCRM Theme Variables & Base Styles */
:root {
    color-scheme: light;
    /* Fonts */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Theme colors (Dark by default) */
    --bg-app: #070a14;
    --bg-sidebar: #0b1021;
    --bg-card: rgba(15, 23, 42, 0.72);
    --bg-card-hover: rgba(30, 41, 59, 0.85);
    --bg-field: rgba(15, 23, 42, 0.85);
    --bg-field-focus: rgba(30, 41, 59, 0.95);
    --bg-modal: #111827;
    --border-color: rgba(255, 255, 255, 0.09);
    --border-hover: rgba(99, 102, 241, 0.45);
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-rgb: 99, 102, 241;
    --primary-glow: rgba(99, 102, 241, 0.28);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --accent-gradient-hover: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
    --bg-glow: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15), transparent 70%);

    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    
    /* Stat / Status colors */
    --color-won: #10b981;
    --color-lost: #f43f5e;
    --color-lead: #3b82f6;
    --color-deal: #6366f1;
    --color-contacted: #f59e0b;
    --color-qualified: #8b5cf6;
    --color-unqualified: #64748b;

    --color-priority-high: #f43f5e;
    --color-priority-medium: #fb923c;
    --color-priority-low: #38bdf8;
    
    /* Shadow & Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.25);
    --transition-speed: 0.25s;
    
    /* Glassmorphism settings */
    --backdrop-blur: blur(20px) saturate(180%);
}

/* Light Theme Variables */
body.light-theme {
    color-scheme: light;
    --bg-app: #f8fafc;
    --bg-sidebar: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-card-hover: rgba(255, 255, 255, 0.98);
    --bg-field: #f1f5f9;
    --bg-field-focus: #ffffff;
    --bg-modal: #ffffff;
    --border-color: rgba(15, 23, 42, 0.09);
    --border-hover: rgba(79, 70, 229, 0.35);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --primary: #4f46e5;
    --primary-hover: #3730a3;
    --primary-rgb: 79, 70, 229;
    --primary-glow: rgba(79, 70, 229, 0.18);
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
    --accent-gradient-hover: linear-gradient(135deg, #3730a3 0%, #6d28d9 50%, #be185d 100%);
    --bg-glow: radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.08), transparent 70%);
    --color-deal: #4f46e5;

    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(15, 23, 42, 0.09);
    --glass-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
    
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);
}

body:not(.light-theme) {
    color-scheme: dark;
}

/* Global Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Modern Selection Styling */
::selection {
    background: rgba(99, 102, 241, 0.22);
    color: inherit;
}
::-moz-selection {
    background: rgba(99, 102, 241, 0.22);
    color: inherit;
}


/* Modern Webkit Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 9999px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
}

html, body {
    height: 100vh;
    overflow: hidden;
}

body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-body);
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

input, select, textarea, button {
    font-family: var(--font-body);
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

/* App Layout Flex */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}



/* Sidebar Navigation */
.sidebar {
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 24px 16px;
    position: relative;
    top: 0;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    z-index: 100;
    overflow-y: auto;
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
}

/* Collapsed Sidebar State */
.app-container:not(.sidebar-open) .sidebar {
    min-width: 0;
    width: 0;
    border-right-width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar-logo {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    padding-left: 8px;
}

.logo-icon {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 28px;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.logo-text span {
    color: var(--primary);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.nav-item {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-weight: 500;
}

.nav-item i {
    font-size: 18px;
    width: 20px;
    transition: transform 0.22s ease;
}

.nav-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--text-primary);
    transform: translateX(4px);
}

.nav-item:hover i {
    transform: scale(1.15);
    color: var(--primary);
}

.nav-item.active {
    background: var(--accent-gradient);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.38);
}

.nav-item.active i {
    color: #ffffff;
}

.sidebar-user {
    align-items: center;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    padding-top: 20px;
}

.user-avatar {
    border-radius: 50%;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
}

.user-role {
    color: var(--text-muted);
    font-size: 12px;
}

/* Main Content Area */
.main-content {
    display: flex;
    flex-direction: column;
    padding: 0px 24px 96px 24px;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}

/* Full-height optimized layout for List Views (Zero wasted space) */
.main-content:has(#view-modular-container.active-view #default-list-view),
.main-content.list-view-active:not(:has(#view-dashboard.active-view)):not(:has(#view-modular-container[data-view-type="settings"])),
body.module-list-view-active .main-content:not(:has(#view-dashboard.active-view)):not(:has(#view-modular-container[data-view-type="settings"])) {
    overflow-y: hidden !important;
    padding: 12px 24px 14px 24px !important;
}

.main-layout-wrapper:has(#view-modular-container.active-view #default-list-view) > .topbar,
.main-layout-wrapper:has(.list-view-active:not(:has(#view-dashboard.active-view))) > .topbar,
body.module-list-view-active:not(:has(#view-dashboard.active-view)) .topbar {
    margin-bottom: 0px !important;
    min-height: 44px;
    height: 44px;
    padding: 0 16px 0 0 !important;
}

.main-content:has(#view-modular-container.active-view #default-list-view) .views-container,
.main-content.list-view-active:not(:has(#view-dashboard.active-view)) .views-container,
body.module-list-view-active .views-container:not(:has(#view-dashboard.active-view)) {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.main-content:has(#view-modular-container.active-view #default-list-view) #view-modular-container.active-view,
.main-content.list-view-active #view-modular-container.active-view,
#view-modular-container.active-view[data-view-type="list"],
body.module-list-view-active #view-modular-container.active-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

/* Universal Guaranteed Vertical Scroll Protection for Worksheets, Hubs,
   Custom Module Lists, Flowcharts, and Alternate View Switcher Views */

/* Main Content guaranteed vertical scrolling */
.main-content:has(#quota-worksheet-view),
.main-content:has([data-loaded-module="SalesTargets"]),
.main-content:has([data-loaded-module="StockLedger"]),
.main-content:has([data-loaded-module="Forecasting"]),
.main-content:has([data-loaded-module="Commissions"]),
.main-content:has([data-loaded-module="HRMS"]),
.main-content:has([data-loaded-module="ProcurementFlow"]),
.main-content:has([data-loaded-module="OrderFlow"]),
.main-content:has([data-loaded-module="PharmaSalesTargets"]),
.main-content:has([data-loaded-module="TrialBalance"]),
.main-content:has(#stock-ledger-search),
.main-content:has(.fc-container),
.main-content:has(.metrics-grid),
.main-content:has(.hrms-subview),
.main-content:has(.procurement-flow-grid),
.main-content:has(.order-flow-grid),
.main-content:has(#default-dashboard-view:not([style*="display: none"])),
.main-content:has(#default-calendar-view:not([style*="display: none"])),
.main-content:has(#default-sheet-view:not([style*="display: none"])),
.main-content:has(#default-map-view:not([style*="display: none"])),
.main-content:has(#view-modular-container[data-view-type="worksheet"]),
.main-content:has(#view-modular-container[data-view-type="custom-list"]),
.main-content:has(#view-modular-container[data-view-type="dashboard"]),
.main-content:has(#view-modular-container[data-view-type="calendar"]),
.main-content:has(#view-modular-container[data-view-type="sheet"]),
.main-content:has(#view-modular-container[data-view-type="map"]),
body.module-list-view-active .main-content:has(#quota-worksheet-view),
body.module-list-view-active .main-content:has([data-loaded-module="SalesTargets"]),
body.module-list-view-active .main-content:has([data-loaded-module="StockLedger"]),
body.module-list-view-active .main-content:has([data-loaded-module="Forecasting"]),
body.module-list-view-active .main-content:has([data-loaded-module="Commissions"]),
body.module-list-view-active .main-content:has([data-loaded-module="HRMS"]),
body.module-list-view-active .main-content:has([data-loaded-module="ProcurementFlow"]),
body.module-list-view-active .main-content:has([data-loaded-module="OrderFlow"]),
body.module-list-view-active .main-content:has(#default-dashboard-view:not([style*="display: none"])),
body.module-list-view-active .main-content:has(#default-calendar-view:not([style*="display: none"])),
body.module-list-view-active .main-content:has(#default-sheet-view:not([style*="display: none"])),
body.module-list-view-active .main-content:has(#default-map-view:not([style*="display: none"])),
.main-content.list-view-active:has(#quota-worksheet-view),
.main-content.list-view-active:has([data-loaded-module="SalesTargets"]),
.main-content.list-view-active:has([data-loaded-module="StockLedger"]),
.main-content.list-view-active:has([data-loaded-module="Forecasting"]),
.main-content.list-view-active:has([data-loaded-module="Commissions"]),
.main-content.list-view-active:has([data-loaded-module="HRMS"]),
.main-content.list-view-active:has([data-loaded-module="ProcurementFlow"]),
.main-content.list-view-active:has([data-loaded-module="OrderFlow"]),
.main-content.list-view-active:has(#default-dashboard-view:not([style*="display: none"])),
.main-content.list-view-active:has(#default-calendar-view:not([style*="display: none"])),
.main-content.list-view-active:has(#default-sheet-view:not([style*="display: none"])),
.main-content.list-view-active:has(#default-map-view:not([style*="display: none"])) {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0px 24px 96px 24px !important;
}

/* Views container vertical expansion and visible overflow */
.views-container:has(#quota-worksheet-view),
.views-container:has([data-loaded-module="SalesTargets"]),
.views-container:has([data-loaded-module="StockLedger"]),
.views-container:has([data-loaded-module="Forecasting"]),
.views-container:has([data-loaded-module="Commissions"]),
.views-container:has([data-loaded-module="HRMS"]),
.views-container:has([data-loaded-module="ProcurementFlow"]),
.views-container:has([data-loaded-module="OrderFlow"]),
.views-container:has(#default-dashboard-view:not([style*="display: none"])),
.views-container:has(#default-calendar-view:not([style*="display: none"])),
.views-container:has(#default-sheet-view:not([style*="display: none"])),
.views-container:has(#default-map-view:not([style*="display: none"])),
.views-container:has(#view-modular-container[data-view-type="worksheet"]),
.views-container:has(#view-modular-container[data-view-type="custom-list"]),
body.module-list-view-active .views-container:has(#quota-worksheet-view),
body.module-list-view-active .views-container:has([data-loaded-module="SalesTargets"]),
body.module-list-view-active .views-container:has([data-loaded-module="StockLedger"]),
body.module-list-view-active .views-container:has([data-loaded-module="Forecasting"]),
body.module-list-view-active .views-container:has([data-loaded-module="Commissions"]),
body.module-list-view-active .views-container:has([data-loaded-module="HRMS"]),
body.module-list-view-active .views-container:has([data-loaded-module="ProcurementFlow"]),
body.module-list-view-active .views-container:has([data-loaded-module="OrderFlow"]),
body.module-list-view-active .views-container:has(#default-dashboard-view:not([style*="display: none"])),
body.module-list-view-active .views-container:has(#default-calendar-view:not([style*="display: none"])),
body.module-list-view-active .views-container:has(#default-sheet-view:not([style*="display: none"])),
body.module-list-view-active .views-container:has(#default-map-view:not([style*="display: none"])),
.main-content.list-view-active .views-container:has(#quota-worksheet-view),
.main-content.list-view-active .views-container:has([data-loaded-module="SalesTargets"]),
.main-content.list-view-active .views-container:has([data-loaded-module="StockLedger"]),
.main-content.list-view-active .views-container:has([data-loaded-module="Forecasting"]),
.main-content.list-view-active .views-container:has([data-loaded-module="Commissions"]),
.main-content.list-view-active .views-container:has([data-loaded-module="HRMS"]),
.main-content.list-view-active .views-container:has([data-loaded-module="ProcurementFlow"]),
.main-content.list-view-active .views-container:has([data-loaded-module="OrderFlow"]),
.main-content.list-view-active .views-container:has(#default-dashboard-view:not([style*="display: none"])),
.main-content.list-view-active .views-container:has(#default-calendar-view:not([style*="display: none"])),
.main-content.list-view-active .views-container:has(#default-sheet-view:not([style*="display: none"])),
.main-content.list-view-active .views-container:has(#default-map-view:not([style*="display: none"])) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    display: block !important;
    flex: 1 1 auto !important;
}

/* Modular view container height auto and visible overflow */
#view-modular-container:has(#quota-worksheet-view),
#view-modular-container[data-loaded-module="SalesTargets"],
#view-modular-container[data-loaded-module="StockLedger"],
#view-modular-container[data-loaded-module="Forecasting"],
#view-modular-container[data-loaded-module="Commissions"],
#view-modular-container[data-loaded-module="HRMS"],
#view-modular-container[data-loaded-module="ProcurementFlow"],
#view-modular-container[data-loaded-module="OrderFlow"],
#view-modular-container[data-view-type="worksheet"],
#view-modular-container[data-view-type="custom-list"],
#view-modular-container:has(#default-dashboard-view:not([style*="display: none"])),
#view-modular-container:has(#default-calendar-view:not([style*="display: none"])),
#view-modular-container:has(#default-sheet-view:not([style*="display: none"])),
#view-modular-container:has(#default-map-view:not([style*="display: none"])),
body.module-list-view-active #view-modular-container:has(#quota-worksheet-view),
body.module-list-view-active #view-modular-container[data-loaded-module="SalesTargets"],
body.module-list-view-active #view-modular-container[data-loaded-module="StockLedger"],
body.module-list-view-active #view-modular-container[data-loaded-module="Forecasting"],
body.module-list-view-active #view-modular-container[data-loaded-module="Commissions"],
body.module-list-view-active #view-modular-container[data-loaded-module="HRMS"],
body.module-list-view-active #view-modular-container[data-loaded-module="ProcurementFlow"],
body.module-list-view-active #view-modular-container[data-loaded-module="OrderFlow"],
body.module-list-view-active #view-modular-container[data-view-type="worksheet"],
body.module-list-view-active #view-modular-container[data-view-type="custom-list"],
body.module-list-view-active #view-modular-container:has(#default-dashboard-view:not([style*="display: none"])),
body.module-list-view-active #view-modular-container:has(#default-calendar-view:not([style*="display: none"])),
body.module-list-view-active #view-modular-container:has(#default-sheet-view:not([style*="display: none"])),
body.module-list-view-active #view-modular-container:has(#default-map-view:not([style*="display: none"])),
.main-content.list-view-active #view-modular-container:has(#quota-worksheet-view),
.main-content.list-view-active #view-modular-container[data-loaded-module="SalesTargets"],
.main-content.list-view-active #view-modular-container[data-loaded-module="StockLedger"],
.main-content.list-view-active #view-modular-container[data-loaded-module="Forecasting"],
.main-content.list-view-active #view-modular-container[data-loaded-module="Commissions"],
.main-content.list-view-active #view-modular-container[data-loaded-module="HRMS"],
.main-content.list-view-active #view-modular-container[data-loaded-module="ProcurementFlow"],
.main-content.list-view-active #view-modular-container[data-loaded-module="OrderFlow"],
.main-content.list-view-active #view-modular-container[data-view-type="worksheet"],
.main-content.list-view-active #view-modular-container[data-view-type="custom-list"],
.main-content.list-view-active #view-modular-container:has(#default-dashboard-view:not([style*="display: none"])),
.main-content.list-view-active #view-modular-container:has(#default-calendar-view:not([style*="display: none"])),
.main-content.list-view-active #view-modular-container:has(#default-sheet-view:not([style*="display: none"])),
.main-content.list-view-active #view-modular-container:has(#default-map-view:not([style*="display: none"])) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    display: block !important;
    padding-bottom: 60px !important;
}

/* Secondary sidebar and modal scroll hardening */
#secondary-sidebar-content {
    min-height: 0 !important;
}

.modal-body {
    min-height: 0 !important;
}


/* Dashboard & Analytics View Scroll Protection (Guaranteed vertical scrolling) */
.main-content:has(#view-dashboard.active-view),
.main-content:has(#view-dashboard:not([style*="display: none"])),
body:has(#view-dashboard.active-view) .main-content,
body.dashboard-view-active .main-content {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0px 24px 96px 24px !important;
}

.views-container:has(#view-dashboard.active-view),
.views-container:has(#view-dashboard:not([style*="display: none"])),
body:has(#view-dashboard.active-view) .views-container,
body.dashboard-view-active .views-container {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    display: block !important;
    flex: 1 1 auto !important;
}

#view-dashboard.active-view,
#view-dashboard:not([style*="display: none"]) {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
    padding-bottom: 80px !important;
}

/* Topbar Header - Vtiger 7 Canonical Parity */
.topbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px !important;
    padding: 0 16px 0 0 !important;
    background: #ffffff;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0px;
    z-index: 1050;
    overflow: visible;
    flex-shrink: 0;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.topbar.has-active-dropdown,
.topbar:has(.profile-dropdown-card.active) {
    z-index: 10005 !important;
}

body.light-theme .topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.dark-theme .topbar {
    background: #1e293b !important;
    border-bottom: 1px solid #334155 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    padding-left: 0 !important;
    overflow: visible;
}

.topbar-left > :first-child:not(.topbar-menu-toggle-btn),
.topbar-left > .logo-container:first-child {
    margin-left: 12px;
}

.layout-classic-sidebar .topbar-left,
html.layout-classic-sidebar .topbar-left,
body.layout-classic-sidebar .topbar-left,
.app-container.settings-mode .topbar-left {
    padding-left: 0 !important;
}

@media (max-width: 768px) {
    .topbar-left {
        padding-left: 0;
    }
}

/* Vtiger Client / Company Logo Container */
.logo-container {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 4px;
}

.company-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    max-width: 180px;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    padding: 2px 4px;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.company-logo:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.company-logo img,
.topbar-logo-image {
    max-height: 40px;
    max-width: 160px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

.topbar-logo-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

body.light-theme .topbar-logo-text {
    color: #1e293b;
}

@media (max-width: 768px) {
    .company-logo {
        max-width: 120px;
        height: 34px;
    }
    .company-logo img,
    .topbar-logo-image {
        max-height: 32px;
        max-width: 110px;
    }
}

/* Vtiger 7 App Switcher / App Navigator (#appnavigator parity) */
.topbar-menu-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 100% !important;
    min-height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    background: #2C3B49 !important;
    border: none !important;
    border-right: 1px solid #1a252f !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: none !important;
    transform: none !important;
}

.app-switcher-container {
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    background: #2C3B49 !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: none !important;
    transform: none !important;
}

.topbar-menu-toggle-btn:hover,
.app-switcher-container:hover {
    background: #596875 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.topbar-menu-toggle-btn i,
.topbar-menu-toggle-btn .app-icon {
    font-size: 18px !important;
    color: #ffffff !important;
}

/* Topbar Menu Bar - Suppressed by default in canonical Vtiger 7 layout to prevent UI collisions.
   In Vtiger 7 architecture, all navigation suites and modules are accessed via the canonical App Menu flyout (#app-menu). */
.topbar-menu-bar {
    display: none !important;
}

body.show-topbar-menu .topbar-menu-bar {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 4px;
    flex-shrink: 1;
    min-width: 0;
    max-width: 420px;
    overflow: hidden;
}

.topbar-menu-item-dropdown {
    position: relative;
    display: inline-block;
}

.topbar-menu-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.topbar-menu-dropdown-trigger:hover,
.topbar-menu-item-dropdown:hover .topbar-menu-dropdown-trigger,
.topbar-menu-item-dropdown.open .topbar-menu-dropdown-trigger {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, 0.2);
}

.topbar-menu-dropdown-trigger .group-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.topbar-menu-dropdown-trigger .caret {
    font-size: 9px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.topbar-menu-item-dropdown:hover .caret,
.topbar-menu-item-dropdown.open .caret {
    transform: rotate(180deg);
}

.topbar-menu-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 99999;
}

body.light-theme .topbar-menu-dropdown-menu {
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.1);
}

.topbar-menu-item-dropdown:hover .topbar-menu-dropdown-menu,
.topbar-menu-item-dropdown.open .topbar-menu-dropdown-menu {
    display: flex;
    animation: topbarMenuFadeIn 0.15s ease-out;
}

@keyframes topbarMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.topbar-menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.topbar-menu-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
    transform: translateX(3px);
}

.topbar-menu-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 12px;
}

/* Topbar Menu More Dropdown Styling */
.topbar-menu-item-dropdown.topbar-menu-more-dropdown .topbar-menu-dropdown-menu {
    min-width: 260px;
    max-width: 340px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 6px;
}

.topbar-more-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.topbar-more-category-header:first-child {
    border-top: none;
    margin-top: 0;
}

.topbar-more-category-header .group-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.topbar-more-all-modules-btn {
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 8px !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

@media (max-width: 1440px) {
    .topbar-menu-dropdown-trigger {
        padding: 5px 7px;
        font-size: 11.5px;
        gap: 4px;
    }
}

@media (max-width: 1300px) {
    .topbar-menu-bar,
    body.show-topbar-menu .topbar-menu-bar {
        display: none !important;
    }
    .topbar-menu-dropdown-trigger {
        padding: 4px 7px;
        font-size: 11.5px;
    }
}

@media (max-width: 991px) {
    .topbar-menu-bar {
        display: none !important;
    }
}

/* Canonical Vtiger 7 Navigation Layout Parity (#appnavigator in Topbar.tpl & SidebarAppMenu.tpl) */
.mini-sidebar {
    display: none !important;
}

.topbar-left .topbar-menu-toggle-btn,
.topbar-menu-toggle-btn,
#topbar-menu-toggle-btn,
.app-container.settings-mode .topbar-left .topbar-menu-toggle-btn,
.app-container.settings-mode .topbar-menu-toggle-btn {
    display: inline-flex !important;
}

.main-layout-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* Topbar Module Badge: Suppressed from navbar in accordance with canonical Vtiger 7 architecture (module name lives in breadcrumbs below navbar) */
.topbar-module-badge {
    display: none !important;
}
@media (max-width: 992px) {
    .topbar-module-badge {
        display: none !important;
    }
}

/* Vtiger-style 2-letter custom module badges */
.custom-module-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid currentColor;
    font-family: var(--font-body, system-ui, sans-serif);
    margin-right: 6px;
    vertical-align: middle;
    box-sizing: border-box;
}

.mini-nav-item .custom-module-badge,
.custom-module-badge.mini-badge {
    min-width: 28px;
    height: 24px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-right: 0;
}

.workspace-selector-container {
    display: none !important;
}

/* Vtiger 7 Global Search (.search-link parity) */
.topbar-search {
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    gap: 8px;
    height: 30px;
    padding: 0 10px;
    width: 240px;
    max-width: 320px;
    min-width: 160px;
    margin-left: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.topbar-search:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
    background-color: #ffffff;
}

body.light-theme .topbar-search {
    background-color: #ffffff;
    border-color: #d1d5db;
}

body.dark-theme .topbar-search {
    background-color: #0f172a;
    border-color: #334155;
}

body.dark-theme .topbar-search:focus-within {
    border-color: #6366f1;
    background-color: #0f172a;
}

.search-icon {
    color: #94a3b8;
    font-size: 13px;
    transition: color 0.2s ease;
}

.topbar-search:focus-within .search-icon {
    color: #6366f1;
}

.topbar-search input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 12.5px;
    font-weight: 500;
}

.topbar-search input::placeholder {
    color: #94a3b8;
}

.topbar-search .adv-search {
    font-size: 10px;
    color: #94a3b8;
    cursor: pointer;
    margin-left: auto;
    transition: color 0.15s ease;
}

.topbar-search .adv-search:hover {
    color: #6366f1;
}

.topbar-actions {
    align-items: center;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    z-index: 1050;
    margin-left: 8px;
    height: 100%;
}

.action-btn {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    height: 30px;
    min-width: 30px;
    width: 30px;
    padding: 0;
    justify-content: center;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.action-btn[style*="padding"],
.action-btn:has(span),
.action-btn.has-text {
    width: auto;
}

.action-btn:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    transform: none;
    box-shadow: none;
}

body.light-theme .action-btn {
    background-color: transparent;
    border-color: transparent;
    color: #64748b;
}

body.light-theme .action-btn:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* Quick Create Button - Vtiger 7 Standard Style */
.quick-create-btn {
    background: #6366f1 !important;
    color: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3) !important;
    font-size: 13px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quick-create-btn:hover {
    background: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4) !important;
}

.company-switcher-btn {
    height: 28px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

.topbar-user-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .action-btn {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

body.light-theme .action-btn:hover {
    background-color: #f1f5f9;
    border-color: #6366f1;
    color: #6366f1;
}

.theme-toggle {
    width: 36px;
}

#keyboard-shortcuts-btn {
    width: 36px;
}

#topbar-timer-btn {
    width: 36px;
}

.global-timer-widget {
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.seed-db-btn {
    padding: 0 16px;
    gap: 8px;
    font-weight: 500;
}

.notification-badge {
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    position: relative;
    width: 36px;
    backdrop-filter: var(--backdrop-blur);
    transition: all var(--transition-speed);
    box-sizing: border-box;
}

.notification-badge:hover {
    background-color: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

body.light-theme .notification-badge {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

body.light-theme .notification-badge:hover {
    background-color: #f1f5f9;
    border-color: #6366f1;
    color: #6366f1;
}

.badge-dot {
    background-color: var(--color-priority-high);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 8px;
    box-shadow: 0 0 8px var(--color-priority-high);
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(244, 63, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* Views & Containers */
.views-container {
    flex-grow: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.view {
    display: none !important;
    animation: fadeIn 0.4s ease;
    width: 100%;
    max-width: 100%;
    position: relative;
    min-height: 400px;
}

.view.active-view {
    display: block !important;
}

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

.view-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.header-titles h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 6px;
}

.header-titles p {
    color: var(--text-secondary);
    font-size: 14px;
}

#view-modular-container {
    position: relative;
    min-height: 400px;
    padding-bottom: 80px;
}

#view-modular-container.active-view[data-view-type="list"],
.main-content.list-view-active #view-modular-container.active-view,
.main-content:has(#view-modular-container.active-view #default-list-view) #view-modular-container.active-view,
body.module-list-view-active #view-modular-container.active-view {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    height: 100% !important;
}

#view-modular-container[data-view-type="list"] .view-header h1:not(#tally-board-detail-name),
#view-modular-container[data-view-type="list"] .view-header .header-titles p:not(#tally-board-detail-desc) {
    display: block;
}

/* Dashboard Stat Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stat-title {
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.stat-icon {
    align-items: center;
    border-radius: var(--radius-sm);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
    font-size: 18px;
    transition: transform 0.3s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(4deg);
}

.val-icon { background: rgba(99, 102, 241, 0.15); color: #6366f1; border: 1px solid rgba(99, 102, 241, 0.25); }
.won-icon { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.contacts-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.25); }
.tasks-icon { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.25); }

.stat-number {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.stat-trend {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.trend-up { color: var(--color-won); background: rgba(16, 185, 129, 0.1); padding: 2px 8px; border-radius: 9999px; }
.trend-down { color: var(--color-lost); background: rgba(244, 63, 94, 0.1); padding: 2px 8px; border-radius: 9999px; }

/* Dashboard Visual Analytics Grid */
.dashboard-builder-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(420px, 1.6fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.dashboard-builder-title h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.dashboard-builder-title p {
    color: var(--text-muted);
    font-size: 12px;
}

.dashboard-builder-controls {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.9fr) minmax(120px, 0.9fr) minmax(110px, 0.7fr) auto;
    gap: 10px;
}

.dashboard-builder-controls input,
.dashboard-builder-controls select {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 0;
    padding: 11px 12px;
}

/* Dashboard Tabs Navigation Bar (Vtiger/DemoCRM Style) */
.dashboard-tabs-bar-container {
    background: transparent;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.dashboard-tabs-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: thin;
}

.dashboard-tabs-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dashboard-tabs-actions .btn-secondary {
    white-space: nowrap;
    flex-shrink: 0;
}

.dashboard-empty-tab-hero {
    width: 100%;
    max-width: 760px;
    margin: 36px auto;
    padding: 44px 32px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg, 16px);
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    animation: fadeIn 0.3s ease;
}

.dashboard-empty-tab-hero .empty-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px auto;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.dashboard-empty-tab-hero h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.dashboard-empty-tab-hero p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 24px auto;
    line-height: 1.5;
}

.dashboard-empty-tab-hero .empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.dashboard-tab-item:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px 6px 0 0;
}

body.dark-theme .dashboard-tab-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.dashboard-tab-item.active {
    color: var(--text-primary);
    font-weight: 700;
    border-bottom-color: var(--primary, #1e293b);
}

.dashboard-tab-item .tab-title {
    pointer-events: none;
}

.dashboard-tab-item .tab-delete-btn {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.6;
    margin-left: 2px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s;
    cursor: pointer;
}

.dashboard-tab-item .tab-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    opacity: 1;
}

.dashboard-tab-item .tab-rename-input {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-primary);
    outline: none;
}

.module-dashboard-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 100%;
}

.module-dashboard-card {
    flex: 1 1 360px;
    min-height: 300px;
    min-width: 300px;
    max-width: 100%;
    overflow: auto;
    position: relative;
    resize: both;
    height: 320px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    animation: dashboardCardEntry 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    contain: layout style;
}

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

.module-dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(99, 102, 241, 0.3);
}

body.dark-theme .module-dashboard-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(99, 102, 241, 0.4);
}

/* Allow resized cards to still grow to fill the row and prevent empty screen space */
.module-dashboard-card.dashboard-card-resized {
    flex: 1 1 auto;
}

.module-dashboard-card.dashboard-card-wide {
    flex: 2 1 550px;
}

.module-dashboard-card.dashboard-card-wide.dashboard-card-resized {
    flex: 2 1 auto;
}

@media (max-width: 800px) {
    .module-dashboard-card {
        flex: 1 1 100%;
    }
    .module-dashboard-card.dashboard-card-wide {
        flex: 1 1 100%;
    }
    .module-dashboard-card.dashboard-card-resized {
        flex: none;
        width: 100% !important;
    }
}

.dashboard-resize-hint {
    bottom: 8px;
    color: var(--text-muted);
    font-size: 13px;
    opacity: 0.55;
    pointer-events: none;
    position: absolute;
    right: 8px;
}

.module-dashboard-card:hover .dashboard-resize-hint {
    opacity: 0.9;
}

.dashboard-expand-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-expand-toggle:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
}

.dashboard-collapse-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-collapse-toggle:hover {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
}

.module-dashboard-card .card-header {
    cursor: pointer;
    user-select: none;
}

.module-dashboard-card.dashboard-card-collapsed {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.module-dashboard-card.dashboard-card-collapsed .card-header {
    border-bottom: none;
}

.module-dashboard-card.dashboard-card-collapsed .dashboard-card-body {
    display: none !important;
}

.module-dashboard-card.dashboard-card-collapsed .dashboard-resize-hint {
    display: none !important;
}

.dashboard-expand-toggle .fa-compress {
    font-size: 12px;
}

/* Reports */
.reports-workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.reports-sidebar,
.reports-builder-panel {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.reports-sidebar {
    min-height: 640px;
    overflow: hidden;
}

.reports-sidebar-header,
.reports-action-row,
.reports-sidebar .report-list-item {
    display: flex;
    align-items: center;
}

.reports-sidebar-header {
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
}

.reports-sidebar-header h3,
.reports-section-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 590px;
    overflow-y: auto;
    padding: 12px;
}

.report-list-item {
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 12px;
    transition: border-color 0.15s, background-color 0.15s;
}

.report-list-item:hover,
.report-list-item.active {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
}

.report-list-title {
    color: var(--text-primary);
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.report-list-meta,
.muted-label {
    color: var(--text-muted);
    font-size: 12px;
}

.reports-builder {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.reports-builder-panel {
    padding: 18px;
}

.reports-form-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(130px, 0.7fr));
    gap: 12px;
}

.reports-description-row {
    margin-top: 12px;
}

.reports-form-grid label,
.reports-description-row label,
.report-compact-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.reports-form-grid span,
.reports-description-row span,
.report-compact-label span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.reports-form-grid input,
.reports-form-grid select,
.reports-description-row input,
.report-compact-label select,
.report-filter-row input,
.report-filter-row select {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 0;
    padding: 10px 11px;
}

.reports-builder-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) minmax(260px, 0.9fr);
    gap: 18px;
    margin-top: 18px;
}

.reports-section-title {
    color: var(--text-primary);
    margin-bottom: 10px;
}

.reports-field-list,
.reports-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reports-field-list {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 4px;
}

.report-field-check {
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    display: flex;
    gap: 10px;
    padding: 9px 10px;
}

.report-field-check small {
    color: var(--text-muted);
    margin-left: auto;
}

.report-filter-row {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) minmax(96px, 0.9fr) minmax(90px, 0.9fr) 34px;
    gap: 8px;
}

.reports-action-row {
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.reports-results-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
    gap: 20px;
    transition: all 0.3s ease;
}

.reports-results-grid.has-slicers {
    grid-template-columns: 200px minmax(0, 1.4fr) minmax(320px, 0.8fr);
}

.report-results-card,
.report-chart-card,
.report-slicers-card {
    min-height: 360px;
}

/* Excel Slicer Styling */
.report-slicers-card {
    border-right: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 14px !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.slicers-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    max-height: 450px;
    padding-right: 4px;
}
.slicers-list-wrap::-webkit-scrollbar {
    width: 6px;
}
.slicers-list-wrap::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.slicer-box {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-field);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.slicer-title {
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--primary);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}
.slicer-clear-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    padding: 2px;
    transition: color 0.2s;
}
.slicer-clear-btn:hover {
    color: var(--color-lost, #ef4444);
}
.slicer-items {
    display: flex;
    flex-direction: column;
    max-height: 140px;
    overflow-y: auto;
    padding: 2px 0;
}
.slicer-items::-webkit-scrollbar {
    width: 4px;
}
.slicer-items::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}
.slicer-item {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}
body.light-theme .slicer-item {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}
.slicer-item:hover {
    background: rgba(var(--primary-rgb), 0.05);
}
.slicer-item.active {
    background: var(--primary);
    color: #ffffff !important;
    font-weight: 600;
}

/* Grouped view wrapper adjustment for Chart.js */
.reports-chart-preview {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-field);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 12px;
    position: relative;
}

.reports-table-wrap {
    max-height: 420px;
    overflow: auto;
}

.reports-table {
    border-collapse: collapse;
    width: 100%;
}

.reports-table th,
.reports-table td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
}

.reports-table th {
    color: var(--text-muted);
    font-weight: 700;
    position: sticky;
    top: 0;
    background: var(--bg-card);
}

.reports-chart-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-chart-body {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 20px;
    align-items: center;
    flex-grow: 1;
}

.dashboard-pie {
    width: 150px;
    height: 150px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-pie:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    filter: brightness(1.05);
}

body.light-theme .dashboard-pie {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Doughnut / Donut Chart Center Hole */
.dashboard-doughnut::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    height: 56%;
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 3px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    z-index: 1;
}

.dashboard-doughnut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    height: 56%;
    border-radius: 50%;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

body.light-theme .dashboard-doughnut::after,
body.light-theme .dashboard-doughnut-hole {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dashboard-doughnut-total-num {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #1e293b);
    line-height: 1.1;
    letter-spacing: -0.3px;
}

body.light-theme .dashboard-doughnut-total-num {
    color: #0f172a;
}

.dashboard-doughnut-total-lbl {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
    letter-spacing: 0.5px;
}

.dashboard-column-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
    align-items: end;
    gap: 12px;
    min-height: 190px;
    padding-top: 12px;
    flex-grow: 1;
}

.dashboard-column {
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
}

.dashboard-column-bar {
    border-radius: var(--radius-sm) var(--radius-sm) 3px 3px;
    min-height: 8px;
    width: 100%;
    transition: transform 0.3s ease, filter 0.3s ease;
    transform-origin: bottom;
}

.dashboard-column-bar:hover {
    transform: scaleY(1.05);
    filter: brightness(1.15);
}

.dashboard-column-label {
    color: var(--text-muted);
    font-size: 10px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-svg-chart {
    width: 100%;
    flex-grow: 1;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.dashboard-svg-chart svg {
    display: block;
    width: 100%;
    flex-grow: 1;
    height: 100%;
    min-height: 0;
}

.dashboard-chart-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: var(--bg-subtle, rgba(99, 102, 241, 0.04));
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(99, 102, 241, 0.1));
}

.dashboard-chart-summary-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-chart-summary-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #94a3b8);
}

.dashboard-chart-summary-val {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.dashboard-chart-summary-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
}

.dashboard-chart-dot {
    cursor: pointer;
    transition: r 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-width 0.2s ease, fill 0.2s ease;
}

.dashboard-chart-dot:hover {
    r: 6.5px;
    stroke-width: 3.5px;
    fill: var(--primary, #6366f1);
    filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.45));
}

.dashboard-chart-data-drawer {
    margin-top: 8px;
}

.dashboard-chart-data-drawer summary {
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary, #6366f1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.dashboard-chart-data-drawer summary:hover {
    background: var(--bg-subtle, rgba(99, 102, 241, 0.08));
}

.dashboard-table {
    border-collapse: collapse;
    width: 100%;
}

.dashboard-table th,
.dashboard-table td {
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    padding: 10px 0;
    text-align: left;
}

.dashboard-table th:last-child,
.dashboard-table td:last-child {
    text-align: right;
}

.dashboard-progress-list,
.dashboard-funnel-list,
.dashboard-kpi-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-progress-row {
    display: grid;
    grid-template-columns: minmax(86px, 0.35fr) 1fr auto;
    gap: 10px;
    align-items: center;
}

.dashboard-progress-label,
.dashboard-kpi-label {
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-funnel-segment {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    margin-inline: auto;
    min-height: 34px;
    padding: 0 14px;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s ease;
}

.dashboard-funnel-segment:hover {
    transform: scaleX(1.02);
    filter: brightness(1.1);
}

.dashboard-funnel-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 6px 2px;
}

.dashboard-funnel-chart-area {
    flex: 1 1 220px;
    max-width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard-funnel-svg {
    width: 100%;
    height: auto;
    max-height: 280px;
    overflow: visible;
}

.dashboard-funnel-polygon {
    transition: filter 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.dashboard-funnel-polygon:hover {
    filter: brightness(1.15) drop-shadow(0 2px 5px rgba(0,0,0,0.18));
}

.dashboard-funnel-legend {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.dashboard-funnel-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.dashboard-funnel-legend-item:hover {
    background-color: var(--bg-hover, rgba(0,0,0,0.04));
}


.dashboard-gauge-wrap {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.dashboard-gauge {
    width: 190px;
    aspect-ratio: 2 / 1;
    border-radius: 190px 190px 0 0;
    background: conic-gradient(from 270deg, var(--primary) 0deg, var(--primary) var(--gauge-deg), rgba(148, 163, 184, 0.18) var(--gauge-deg), rgba(148, 163, 184, 0.18) 180deg, transparent 180deg);
    overflow: hidden;
    position: relative;
}

.dashboard-gauge::after {
    background: var(--bg-card);
    border-radius: 140px 140px 0 0;
    bottom: 0;
    content: '';
    height: 70px;
    left: 30px;
    position: absolute;
    right: 30px;
}

.dashboard-gauge-value {
    font-size: 28px;
    font-weight: 800;
}

/* Target Meter Widget */
.dashboard-target-meter-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 10px 0 4px;
}

.dashboard-target-meter-gauge {
    width: 200px;
    aspect-ratio: 2 / 1;
    border-radius: 200px 200px 0 0;
    background: conic-gradient(
        from 270deg,
        var(--tm-color) 0deg,
        var(--tm-color) var(--tm-deg),
        rgba(148, 163, 184, 0.15) var(--tm-deg),
        rgba(148, 163, 184, 0.15) 180deg,
        transparent 180deg
    );
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease;
}

.dashboard-target-meter-gauge::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25px;
    right: 25px;
    height: 75px;
    border-radius: 150px 150px 0 0;
    background: var(--bg-card);
}

.dashboard-target-meter-inner {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}

.dashboard-target-meter-percent {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.dashboard-target-meter-percent.over-target {
    color: var(--success, #22c55e);
}

.dashboard-target-meter-details {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dashboard-target-meter-achieved,
.dashboard-target-meter-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.dashboard-target-meter-details .tm-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.dashboard-target-meter-details .tm-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-target-meter-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
}

.dashboard-target-meter-bar {
    width: 85%;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.15);
    overflow: hidden;
}

.dashboard-target-meter-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.dashboard-target-meter-meta {
    font-size: 11px;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.7;
}

.dashboard-kpi-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-kpi-value {
    font-size: 18px;
    font-weight: 800;
}

.dashboard-chart-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dashboard-legend-item {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.dashboard-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dashboard-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-metric-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
}

.dashboard-empty-state {
    color: var(--text-muted);
    font-size: 13px;
    padding: 28px 0;
    text-align: center;
}

/* ==========================================================================
   Add Dashboard Component Modal (Studio Builder - Enterprise Grade)
   ========================================================================== */

@keyframes dashboardModalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.96) translateY(14px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dashboard-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 7, 18, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.dashboard-modal-card {
    background: linear-gradient(165deg, rgba(17, 24, 43, 0.97) 0%, rgba(10, 15, 30, 0.99) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    width: 740px;
    max-width: 95vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 40px rgba(99, 102, 241, 0.12);
    color: var(--text-primary);
    animation: dashboardModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    position: relative;
}

body.light-theme .dashboard-modal-card {
    background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Modal Header */
.dashboard-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.22);
    flex-shrink: 0;
}

.dashboard-modal-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dashboard-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.dashboard-modal-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2.5px 8px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.25));
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
}

.dashboard-modal-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

.dashboard-modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-modal-close-btn:hover {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.3);
    color: #f43f5e;
    transform: rotate(90deg);
}

/* Modal Step Navigation Bar */
.dashboard-modal-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(15, 23, 42, 0.45);
}

body.light-theme .dashboard-modal-tabs {
    background: rgba(241, 245, 249, 0.7);
}

.dashboard-modal-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.dashboard-tab-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 10.5px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.dashboard-modal-tab-btn.active .dashboard-tab-step-num {
    background: #ffffff;
    color: var(--primary);
}

.dashboard-modal-tab-btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dashboard-modal-tab-btn:hover:not(.active) {
    background: rgba(99, 102, 241, 0.08) !important;
    color: var(--text-primary) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Modal Scrollable Body */
.dashboard-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
}

.dashboard-modal-body::-webkit-scrollbar {
    width: 6px;
}
.dashboard-modal-body::-webkit-scrollbar-track {
    background: transparent;
}
.dashboard-modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}
.dashboard-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.24);
}

.dashboard-modal-tab-pane {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Form Groups & Inputs */
.dashboard-modal-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dashboard-modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-modal-label i {
    color: var(--primary);
    font-size: 13px;
}

.dashboard-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.dashboard-modal-input,
.dashboard-modal-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-field);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.dashboard-modal-input:focus,
.dashboard-modal-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
    background: var(--bg-field-focus);
}

/* Category Grid */
.dashboard-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.dashboard-category-card {
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    background: rgba(15, 23, 42, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

body.light-theme .dashboard-category-card {
    background: #f8fafc;
}

.dashboard-category-card:hover {
    border-color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.16);
    background: rgba(99, 102, 241, 0.04) !important;
}

.dashboard-category-card.active {
    border-color: var(--primary) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08)) !important;
    box-shadow: 0 0 0 1px var(--primary), 0 6px 22px rgba(99, 102, 241, 0.22) !important;
}

.dashboard-category-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dashboard-category-card:hover .dashboard-category-icon-box {
    transform: scale(1.08);
}

.dashboard-category-check {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.18);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.dashboard-category-card.active .dashboard-category-check {
    display: flex;
}

.dashboard-category-info h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-category-info p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--text-muted);
}

/* Visual Chart Subtype Grid */
.dashboard-chart-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.dashboard-chart-option-card {
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 8px;
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    transition: all 0.2s ease;
    user-select: none;
}

body.light-theme .dashboard-chart-option-card {
    background: #f8fafc;
}

.dashboard-chart-option-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-2px);
}

.dashboard-chart-option-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.16);
    box-shadow: 0 0 0 1px var(--primary), 0 4px 14px rgba(99, 102, 241, 0.25);
}

.dashboard-chart-option-card i {
    font-size: 20px;
    color: var(--primary);
    transition: transform 0.2s ease;
}

.dashboard-chart-option-card.active i {
    color: #a5b4fc;
    transform: scale(1.12);
}

.dashboard-chart-option-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Conditional Highlight Panels */
.dashboard-conditional-box {
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: fadeIn 0.2s ease-out;
}

.dashboard-box-indigo {
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.24);
}

.dashboard-box-purple {
    background: rgba(139, 92, 246, 0.07);
    border: 1px solid rgba(139, 92, 246, 0.24);
}

.dashboard-box-emerald {
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.24);
}

/* Palette Swatches & Width Presets */
.dashboard-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.dashboard-palette-card {
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-field);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.dashboard-palette-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.dashboard-palette-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 0 0 1px var(--primary);
}

.dashboard-palette-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-swatch-bar {
    display: flex;
    gap: 4px;
}

.dashboard-swatch-dot {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Width Segment Cards */
.dashboard-width-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.dashboard-width-card {
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--bg-field);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    text-align: center;
}

.dashboard-width-card:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.dashboard-width-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.14);
    box-shadow: 0 0 0 1px var(--primary);
}

.dashboard-width-bar-indicator {
    height: 5px;
    border-radius: 3px;
    background: var(--text-muted);
    transition: all 0.2s ease;
}

.dashboard-width-card.active .dashboard-width-bar-indicator {
    background: var(--primary);
}

.dashboard-width-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-width-sub {
    font-size: 10px;
    color: var(--text-muted);
}

/* Modal Actions Footer */
.dashboard-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-btn-cta {
    padding: 9px 22px;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.22s ease;
}

.dashboard-btn-cta:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.dashboard-btn-nav {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-field);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.dashboard-btn-nav:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-secondary);
}

/* Add Widget Dropdown Modernization */
#add-widget-dropdown-menu {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(165deg, rgba(17, 24, 43, 0.98) 0%, rgba(10, 15, 30, 0.99) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
    padding: 8px;
    min-width: 270px;
    max-height: 420px;
    overflow-y: auto;
}

body.light-theme #add-widget-dropdown-menu {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.18);
}

.widget-dropdown-header {
    padding: 8px 12px 4px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.widget-dropdown-item {
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.18s ease;
}

.widget-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary) !important;
    transform: translateX(3px);
}


.dashboard-stacked-segment:hover,
.dashboard-stacked-col-segment:hover {
    opacity: 0.82;
    cursor: pointer;
    filter: brightness(1.1);
}

.erp-kpi-sparkline-card svg {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.dashboard-analytics-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
}

.analytics-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    backdrop-filter: var(--backdrop-blur);
    display: flex;
    flex-direction: column;
}

.analytics-card h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header h3 {
    margin-bottom: 0;
}

.btn-text {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color var(--transition-speed);
}

.btn-text:hover {
    color: var(--primary);
}

/* Sales Funnel SVG Chart Component */
.pipeline-chart-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-grow: 1;
    justify-content: center;
}

.chart-row {
    display: grid;
    grid-template-columns: 90px 1fr 45px;
    align-items: center;
    gap: 12px;
}

.chart-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.chart-track {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    height: 16px;
    overflow: hidden;
    width: 100%;
}

body.light-theme .chart-track {
    background-color: rgba(0, 0, 0, 0.03);
}

.chart-bar {
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    height: 100%;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0;
}

.chart-val {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

/* Activities Timeline */
.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 320px;
    padding-right: 4px;
}

.timeline-item {
    display: flex;
    gap: 14px;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    background-color: var(--border-color);
    content: '';
    bottom: -16px;
    left: 17px;
    position: absolute;
    top: 30px;
    width: 2px;
}

.timeline-icon {
    align-items: center;
    border-radius: 50%;
    background-color: rgba(var(--primary-rgb), 0.1);
    border: 1px solid var(--border-color);
    color: var(--primary);
    display: flex;
    font-size: 12px;
    height: 34px;
    justify-content: center;
    width: 34px;
    flex-shrink: 0;
}

.timeline-icon.type-call { background-color: rgba(245, 158, 11, 0.1); color: var(--color-contacted); }
.timeline-icon.type-deal { background-color: rgba(16, 185, 129, 0.1); color: var(--color-won); }
.timeline-icon.type-system { background-color: rgba(99, 102, 241, 0.1); color: var(--primary); }
.timeline-icon.type-whatsapp { background-color: rgba(37, 211, 102, 0.1); color: #25d366; border-color: rgba(37, 211, 102, 0.2); }

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary);
}

.timeline-text a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}

.timeline-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* UI Elements: Buttons & Badges */
.primary-btn, .btn-primary {
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    padding: 10px 22px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.3);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.primary-btn:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
    background: var(--accent-gradient-hover);
}

.primary-btn:active, .btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
}

.danger-btn {
    align-items: center;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 600;
    gap: 8px;
    padding: 10px 22px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}

.danger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(239, 68, 68, 0.4);
}

.danger-btn:active {
    transform: translateY(0) scale(0.98);
}

button:disabled, .primary-btn:disabled, .btn-primary:disabled, .danger-btn:disabled, .btn-secondary:disabled, .secondary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

.btn-secondary, .secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
    padding: 10px 22px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    backdrop-filter: var(--backdrop-blur);
}

.btn-secondary:hover, .secondary-btn:hover {
    background-color: var(--bg-field-focus);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn-secondary:active, .secondary-btn:active {
    transform: translateY(0) scale(0.98);
}

.status-badge {
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(99, 102, 241, 0.22);
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--primary, #6366f1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.status-badge::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}

.badge-lead { background-color: rgba(59, 130, 246, 0.12); color: #3b82f6; border-color: rgba(59, 130, 246, 0.25); }
.badge-contacted { background-color: rgba(245, 158, 11, 0.12); color: #f59e0b; border-color: rgba(245, 158, 11, 0.25); }
.badge-qualified { background-color: rgba(139, 92, 246, 0.12); color: #8b5cf6; border-color: rgba(139, 92, 246, 0.25); }
.badge-unqualified { background-color: rgba(100, 116, 139, 0.12); color: #64748b; border-color: rgba(100, 116, 139, 0.25); }
.badge-proposal { background-color: rgba(236, 72, 153, 0.12); color: #ec4899; border-color: rgba(236, 72, 153, 0.25); }
.badge-negotiation { background-color: rgba(217, 70, 239, 0.12); color: #d946ef; border-color: rgba(217, 70, 239, 0.25); }
.badge-won { background-color: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
.badge-lost { background-color: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.25); }
.badge-salesinvoices, .badge-salesinvoice { background-color: rgba(99, 102, 241, 0.1); color: #6366f1; border-color: rgba(99, 102, 241, 0.25); }
.badge-quotations, .badge-quotation { background-color: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
.badge-a4, .badge-letter, .badge-legal { background-color: rgba(14, 165, 233, 0.1); color: #0ea5e9; border-color: rgba(14, 165, 233, 0.25); }
.badge-portrait, .badge-landscape { background-color: rgba(168, 85, 247, 0.1); color: #a855f7; border-color: rgba(168, 85, 247, 0.25); }

/* Leads statuses */
.badge-raw { background-color: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); }

/* Expense statuses */
.badge-pending { background-color: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); }
.badge-approved { background-color: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
.badge-rejected { background-color: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.25); }
.badge-reimbursed { background-color: rgba(34, 211, 238, 0.12); color: #22d3ee; border-color: rgba(34, 211, 238, 0.25); }

/* Global semantic badges */
.badge-success { background-color: rgba(16, 185, 129, 0.12); color: var(--color-won); border-color: rgba(16, 185, 129, 0.25); }
.badge-warning { background-color: rgba(245, 158, 11, 0.12); color: var(--color-contacted); border-color: rgba(245, 158, 11, 0.25); }
.badge-danger { background-color: rgba(239, 68, 68, 0.12); color: var(--color-lost); border-color: rgba(239, 68, 68, 0.25); }

/* ServiceDesk / Ticket statuses */
.badge-open { background-color: rgba(59, 130, 246, 0.12); color: #3b82f6; border-color: rgba(59, 130, 246, 0.25); }
.badge-in-progress { background-color: rgba(245, 158, 11, 0.12); color: #f59e0b; border-color: rgba(245, 158, 11, 0.25); }
.badge-on-hold { background-color: rgba(148, 163, 184, 0.12); color: #94a3b8; border-color: rgba(148, 163, 184, 0.25); }
.badge-escalated { background-color: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.25); }
.badge-resolved { background-color: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
.badge-closed { background-color: rgba(100, 116, 139, 0.12); color: #64748b; border-color: rgba(100, 116, 139, 0.25); }

/* Task & Automation statuses */
.badge-completed { background-color: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.25); }
.badge-running { background-color: rgba(99, 102, 241, 0.12); color: #6366f1; border-color: rgba(99, 102, 241, 0.25); }
.badge-failed { background-color: rgba(239, 68, 68, 0.12); color: #ef4444; border-color: rgba(239, 68, 68, 0.25); }
.badge-queued { background-color: rgba(14, 165, 233, 0.12); color: #0ea5e9; border-color: rgba(14, 165, 233, 0.25); }

/* Generic fallback for column badge in kanban */
.column-badge { background-color: rgba(99, 102, 241, 0.12); color: var(--primary); border-color: rgba(99, 102, 241, 0.25); }

.priority-badge {
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
}
.p-high { background-color: rgba(244, 63, 94, 0.15); color: var(--color-priority-high); }
.p-medium { background-color: rgba(251, 146, 60, 0.15); color: var(--color-priority-medium); }
.p-low { background-color: rgba(56, 189, 248, 0.15); color: var(--color-priority-low); }
.p-urgent { background-color: rgba(220, 38, 38, 0.2); color: #dc2626; }

/* Table Controls & Data Tables */
.table-controls {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filters-row {
    display: flex;
    gap: 8px;
}

.filter-chip, .filter-task-chip, .filter-lead-chip {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 16px;
    transition: all var(--transition-speed);
}

.filter-chip:hover, .filter-task-chip:hover, .filter-lead-chip:hover {
    background-color: rgba(var(--primary-rgb), 0.08);
}

.filter-chip.active, .filter-task-chip.active, .filter-lead-chip.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.35);
}

.search-row {
    position: relative;
    display: flex;
    align-items: center;
}

.search-row::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    transition: color var(--transition-speed);
}

.search-row:focus-within::before {
    color: var(--primary);
}

.search-row input {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    outline: none;
    padding: 10px 16px 10px 40px;
    width: 280px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.search-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.table-container {
    width: 100%;
    max-width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow-x: auto;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.table-container:hover {
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: var(--shadow-md);
}

.data-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    text-align: left;
}

.data-table th, .data-table td {
    padding: 9px 12px;
    box-sizing: border-box;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    white-space: nowrap;
}

.data-table th {
    background-color: var(--bg-field);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(12px);
}

.data-table td {
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
    color: var(--text-primary);
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr.clickable-row, .data-table tr.clickable-lead-row {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.data-table tr.clickable-row:hover, .data-table tr.clickable-lead-row:hover {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    box-shadow: inset 4px 0 0 var(--primary);
}

.tbl-name {
    font-weight: 600;
    color: var(--text-primary);
}

.tbl-actions {
    display: flex;
    gap: 8px;
}

td.tbl-actions {
    display: table-cell !important;
    vertical-align: middle;
    white-space: nowrap;
}

td.tbl-actions > * {
    display: inline-flex !important;
    vertical-align: middle;
}

td.tbl-actions > * + * {
    margin-left: 8px;
}


.action-icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    transition: color var(--transition-speed), transform var(--transition-speed);
}

.action-icon-btn:hover {
    transform: scale(1.15);
}

/* Edit action hovers */
.action-icon-btn.edit-btn:hover,
.action-icon-btn[class*="edit-"]:hover,
.action-icon-btn[class*="-edit-"]:hover {
    color: var(--primary);
}

/* Delete action hovers */
.action-icon-btn[class*="delete-"]:hover,
.action-icon-btn[class*="-delete-"]:hover {
    color: var(--color-lost);
}

/* Convert Lead button interaction */
.convert-lead-btn {
    transition: all var(--transition-speed) ease-in-out !important;
}

.convert-lead-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.text-center { text-align: center; color: var(--text-muted); padding: 40px !important; }

/* Kanban Board Layout */
.kanban-board {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 20px;
    align-items: flex-start;
}

.kanban-column {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 18px 14px;
    width: 280px;
    min-width: 280px;
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.kanban-column:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: var(--shadow-md);
}

body.light-theme .kanban-column {
    background-color: rgba(255, 255, 255, 0.85);
}

.column-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 0 4px;
}

.column-title {
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-primary);
}

.column-badge {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-grow: 1;
    min-height: 100px;
}

.kanban-card {
    background-color: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: grab;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.kanban-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25), 0 0 12px rgba(99, 102, 241, 0.15);
}

.kanban-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.k-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.k-card-client {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 12px;
}

.k-card-footer {
    align-items: center;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
}

.k-card-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.k-card-actions {
    display: flex;
    gap: 6px;
}

.tasks-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    border-radius: 12px;
}

body.light-theme .tasks-controls {
    background: rgba(0, 0, 0, 0.01);
}

.tasks-select-all-row label {
    user-select: none;
    font-weight: 600 !important;
}

/* Tasks Checklist Styles */
.tasks-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-item {
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.task-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08), 0 0 12px rgba(var(--primary-rgb), 0.03);
}

.task-item:hover::before {
    background: var(--primary);
}

.task-item.completed {
    opacity: 0.7;
    background-color: rgba(255, 255, 255, 0.02);
}

body.light-theme .task-item.completed {
    background-color: rgba(0, 0, 0, 0.01);
}

.task-item.completed::before {
    background: var(--color-won);
}

.task-left {
    align-items: center;
    display: flex;
    gap: 16px;
    flex-grow: 1;
}

/* Custom Task Select Checkbox */
.task-select-chk, #tasks-select-all {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    flex-shrink: 0;
}

body.light-theme .task-select-chk, body.light-theme #tasks-select-all {
    background: rgba(0, 0, 0, 0.02);
}

.task-select-chk:hover, #tasks-select-all:hover {
    border-color: var(--primary);
}

.task-select-chk:checked, #tasks-select-all:checked {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.3);
}

.task-select-chk::after, #tasks-select-all::after {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    color: white;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.15s ease;
}

.task-select-chk:checked::after, #tasks-select-all:checked::after {
    opacity: 1;
    transform: scale(1);
}

/* Custom Status Circle Checkbox */
.task-chk {
    appearance: none;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    height: 22px;
    width: 22px;
    position: relative;
    transition: all 0.25s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-chk:hover {
    border-color: var(--color-won);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
}

.task-chk:checked {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: transparent;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.task-chk::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffffff;
    font-size: 10px;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.task-chk:checked::after {
    opacity: 1;
    transform: scale(1);
}

.task-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-title-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition-speed);
}

.task-item.completed .task-title-text {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.5);
}

.task-desc-text {
    color: var(--text-secondary);
    font-size: 13px;
}

.task-right {
    align-items: center;
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.task-due {
    color: var(--text-secondary);
    font-size: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.light-theme .task-due {
    background: rgba(0, 0, 0, 0.02);
}

.task-contact-link {
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.08);
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
}

body.light-theme .task-contact-link {
    background: rgba(79, 70, 229, 0.06);
    border-color: rgba(79, 70, 229, 0.12);
}

.task-contact-link:hover {
    background: var(--primary);
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.25);
}

.action-icon-btn.delete-task-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-icon-btn.delete-task-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

/* Slide-out Drawer Component */
.drawer-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: none;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 199;
}

.drawer {
    background-color: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    right: -480px;
    top: 0;
    width: 480px;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 200;
}

.drawer.open {
    right: 0;
}

.drawer-header {
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    padding: 24px;
}

.close-drawer-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 20px;
}

.drawer-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Contact profile within drawer */
.drawer-profile {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    text-align: center;
}

.profile-avatar {
    border-radius: 50%;
    height: 72px;
    margin-bottom: 14px;
    width: 72px;
}

.profile-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-company {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}

.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    width: 100%;
}

.detail-item {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    text-align: left;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.detail-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08);
}

.detail-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.detail-value {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.drawer-tabs {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.drawer-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
    padding: 8px 4px;
    transition: all var(--transition-speed);
}

.drawer-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000 !important;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.modal.open,
.modal.show {
    display: flex !important;
}

.modal-dialog {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: auto;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

.modal-dialog.modal-sm {
    max-width: 400px;
}

.modal-dialog.modal-lg {
    max-width: 850px;
}

.modal-dialog.modal-xl {
    max-width: 1140px;
}

.modal-dialog.modal-fullscreen {
    max-width: 100%;
    height: 100%;
    margin: 0;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.modal-content {
    position: relative;
    background-color: var(--bg-sidebar, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.2));
    width: 100%;
    max-width: 550px;
    animation: modalSlide 0.25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-dialog .modal-content {
    max-width: 100%;
}

@keyframes modalSlide {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header {
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
    flex-shrink: 0;
}

.modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
}

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-close:hover {
    color: var(--text-primary, #111827);
    background: rgba(0, 0, 0, 0.05);
}

.btn-close:empty::before {
    content: "✕";
    font-size: 15px;
    font-weight: 600;
}

.btn-close-white,
.btn-close.btn-close-white {
    color: #ffffff !important;
}

.btn-close-white:hover,
.btn-close.btn-close-white:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.close-modal-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
}

/* Ensure secondary / action buttons with close-modal-btn retain full button styling */
.btn.close-modal-btn,
.btn-secondary.close-modal-btn {
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #f8fafc);
}

body.light-theme .btn.close-modal-btn,
body.light-theme .btn-secondary.close-modal-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}

body.light-theme .btn.close-modal-btn:hover,
body.light-theme .btn-secondary.close-modal-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.modal-form {
    padding: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

input, textarea {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
    padding: 9px 36px 9px 12px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.2s ease;
}

input:hover, textarea:hover {
    border-color: var(--border-hover);
}

select:hover {
    border-color: var(--primary, #6366f1);
    background-color: var(--bg-field-hover, rgba(255, 255, 255, 0.06));
}

input:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background-color: var(--bg-field-focus);
}

select:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    outline: none;
}

body.light-theme select {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-theme select:hover {
    border-color: #6366f1;
    background-color: #f8fafc;
}

body.light-theme select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

select option {
    background-color: #1e293b;
    color: #f8fafc;
    padding: 10px 14px;
    font-size: 13.5px;
}

body.light-theme select option {
    background-color: #ffffff;
    color: #0f172a;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

/* Toast Messages */
.toast,
#toast-banner {
    display: none;
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 2147483647 !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    min-width: 260px;
    max-width: 440px;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
    color: #ffffff !important;
    pointer-events: auto;
    word-break: break-word;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #1e293b;
    isolation: isolate;
}

.toast.show,
#toast-banner.show {
    display: flex !important;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast.toast-error,
#toast-banner.toast-error {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ffffff !important;
}

.toast.toast-success,
#toast-banner.toast-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    color: #ffffff !important;
}

.toast.toast-warning,
#toast-banner.toast-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #ffffff !important;
}

.toast.toast-info,
#toast-banner.toast-info {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    color: #ffffff !important;
}

@keyframes toastSlideIn {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

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

/* Log Note Form inside drawer */
.note-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
}

body.light-theme .note-form {
    background-color: rgba(0, 0, 0, 0.01);
}

.note-form select {
    align-self: flex-start;
}

/* Responsive sidebar toggle for mobile (optional fallback) */
@media(max-width: 900px) {
    .main-content {
        padding: 0px 16px;
        width: 100%;
    }
    .topbar-left {
        flex-grow: 1;
        width: 100%;
    }
    .topbar-search {
        width: 100%;
    }
    .dashboard-analytics-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-builder-panel,
    .dashboard-builder-controls,
    .dashboard-chart-body {
        grid-template-columns: 1fr;
    }
    .dashboard-pie {
        justify-self: center;
    }
}

/* Vtiger Form View Styles */
.vtiger-breadcrumb {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    color: var(--text-muted);
}

.vtiger-breadcrumb span {
    cursor: pointer;
}

.vtiger-breadcrumb span.active-crumb {
    color: var(--text-primary);
    font-weight: 600;
}

.vtiger-form-container {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 30px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-md);
    margin-bottom: 30px;
}

/* ==========================================================================
   Vtiger Form Container & Form Row Architecture (Label and Input in Same Row)
   Parity with democrm/layouts/v7/modules/Vtiger/partials/EditViewContents.tpl
   ========================================================================== */

/* Form rows (2-column field grid) */
.form-row,
.vtiger-form-container .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin-bottom: 16px;
    align-items: center;
}

/* Fields inside a 2-column form-row */
.form-row .form-group,
.vtiger-form-container .form-row .form-group {
    display: grid;
    grid-template-columns: minmax(130px, 32%) 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    margin-bottom: 0;
    min-width: 0;
}

/* Standalone fields in vtiger-form-container (full width row) */
.vtiger-form-container > form > .form-group,
.vtiger-form-container form:not(.filter-form) > .form-group:not(.form-row .form-group):not(.suppliers-section *):not(.line-items-section *):not(.data-table *):not(table *):not(td *) {
    display: grid;
    grid-template-columns: minmax(130px, 16%) 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    margin-bottom: 16px;
    min-width: 0;
}

/* Full-width container overrides for permissions tables and full-width blocks */
.vtiger-form-container form > .form-group.full-width-group,
.vtiger-form-container form > .form-group.role-privileges-table-group,
.vtiger-form-container form > .form-group.profile-privileges-table-group,
.vtiger-form-container > form > .form-group.full-width-group,
.vtiger-form-container > form > .form-group.role-privileges-table-group,
.vtiger-form-container > form > .form-group.profile-privileges-table-group {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

/* Label styling inside vtiger-form-container */
.vtiger-form-container .form-group label,
.form-row .form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin: 0;
    padding: 0;
    line-height: 1.35;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    user-select: none;
}

body.light-theme .vtiger-form-container .form-group label,
body.light-theme .form-row .form-group label {
    color: #475569;
}

/* Inputs, selects, and textareas inside vtiger-form-container */
.vtiger-form-container .form-group input,
.vtiger-form-container .form-group select,
.vtiger-form-container .form-group textarea,
.form-row .form-group input,
.form-row .form-group select,
.form-row .form-group textarea {
    background-color: var(--bg-field, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    outline: none;
    padding: 8px 12px;
    font-size: 13.5px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vtiger-form-container .form-group input:hover,
.vtiger-form-container .form-group select:hover,
.vtiger-form-container .form-group textarea:hover,
.form-row .form-group input:hover,
.form-row .form-group select:hover,
.form-row .form-group textarea:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
}

.vtiger-form-container .form-group input:focus,
.vtiger-form-container .form-group select:focus,
.vtiger-form-container .form-group textarea:focus,
.form-row .form-group input:focus,
.form-row .form-group select:focus,
.form-row .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Textarea handling */
.vtiger-form-container .form-group textarea,
.form-row .form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.vtiger-form-container .form-group:has(textarea),
.form-row .form-group:has(textarea) {
    align-items: start;
}

.vtiger-form-container .form-group:has(textarea) label,
.form-row .form-group:has(textarea) label {
    padding-top: 8px;
}

/* Compact Checkbox and Radio controls */
.vtiger-form-container .form-group input[type="checkbox"],
.vtiger-form-container .form-group input[type="radio"],
.form-row .form-group input[type="checkbox"],
.form-row .form-group input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--primary, #6366f1) !important;
    justify-self: start !important;
    align-self: center !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-radius: 4px !important;
    background-color: var(--bg-field, #ffffff) !important;
    box-shadow: none !important;
    display: inline-block !important;
}

/* Exclude sub-tables and line-item blocks from grid rows */
.data-table .form-group,
.suppliers-section .form-group,
.line-items-section .form-group,
table .form-group,
td .form-group {
    display: block !important;
    margin-bottom: 0 !important;
}

@media (max-width: 900px) {
    .form-row,
    .vtiger-form-container .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .form-row .form-group,
    .vtiger-form-container .form-row .form-group {
        grid-template-columns: minmax(130px, 16%) 1fr;
    }
}

@media (max-width: 520px) {
    .form-row .form-group,
    .vtiger-form-container .form-group,
    .vtiger-form-container > form > .form-group {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
}

.form-section-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.form-section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.vtiger-grid-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
}

/* ==========================================================================
   Vtiger Form Field Architecture (Label and Input in Same Row)
   Parity with democrm/layouts/v7/modules/Vtiger/partials/EditViewContents.tpl
   ========================================================================== */

.vtiger-form-group {
    display: grid;
    grid-template-columns: minmax(130px, 32%) 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    min-width: 0;
    position: relative;
}

.vtiger-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin: 0;
    padding: 0;
    line-height: 1.35;
    word-break: break-word;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    user-select: none;
}

body.light-theme .vtiger-form-group label {
    color: #475569;
}

.vtiger-form-group label .qc-required-asterisk,
.vtiger-form-group .qc-required-asterisk,
.vtiger-form-group label .redColor,
.vtiger-form-group label .text-danger {
    color: #ef4444 !important;
    font-weight: 700;
    font-size: 13px;
    margin-left: 2px;
}

.vtiger-form-group input, 
.vtiger-form-group select {
    background-color: var(--bg-field, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    outline: none;
    padding: 8px 12px;
    font-size: 13.5px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.vtiger-form-group input:hover, 
.vtiger-form-group select:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
}

.vtiger-form-group input:focus, 
.vtiger-form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Checkbox and Radio controls: compact 18px inline at start of value column */
.vtiger-form-group input[type="checkbox"],
.vtiger-form-group input[type="radio"],
.vtiger-form-group .form-control[type="checkbox"],
.vtiger-form-group .custom-field-input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--primary, #6366f1) !important;
    justify-self: start !important;
    align-self: center !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-radius: 4px !important;
    background-color: var(--bg-field, #ffffff) !important;
    box-shadow: none !important;
    display: inline-block !important;
}

/* Textarea controls */
.vtiger-form-group textarea,
.vtiger-form-group textarea.form-control,
.vtiger-form-group textarea.custom-field-input {
    min-height: 80px;
    resize: vertical;
    width: 100%;
    padding: 8px 12px;
    font-size: 13.5px;
    background-color: var(--bg-field, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-primary);
    box-sizing: border-box;
}

/* Align labels to top for multiline and container elements */
.vtiger-form-group:has(textarea),
.vtiger-form-group:has(.vtiger-file-upload-container) {
    align-items: start;
}

.vtiger-form-group:has(textarea) label,
.vtiger-form-group:has(.vtiger-file-upload-container) label {
    padding-top: 8px;
}

/* Full-width fields spanning across both grid columns */
.default-form-grid .vtiger-form-group.full-width,
.default-form-section .vtiger-form-group.full-width,
.accounts-form-grid .vtiger-form-group.full-width,
.accounts-form-section .vtiger-form-group.full-width,
#default-description-form-container .vtiger-form-group,
.fieldBlockBody .vtiger-form-group.full-width {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(130px, 16%) 1fr !important;
    align-items: start;
}

.default-form-grid .vtiger-form-group.full-width label,
.default-form-section .vtiger-form-group.full-width label,
.accounts-form-grid .vtiger-form-group.full-width label,
.accounts-form-section .vtiger-form-group.full-width label,
#default-description-form-container .vtiger-form-group label {
    padding-top: 8px;
}

/* Field validation error message placed below input in column 2 */
.vtiger-form-group .vtiger-field-error {
    grid-column: 2 / -1;
    margin-top: 2px;
}

/* OOP Block Renderer fields (Purchase Orders, Invoices, Quotes, Sales Orders, Delivery Notes) */
.fieldBlockBody .vtiger-form-group {
    display: grid !important;
    grid-template-columns: minmax(130px, 30%) 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    margin-bottom: 0 !important;
    min-width: 0 !important;
}

.fieldBlockBody .vtiger-form-group.full-width {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(130px, 15%) 1fr !important;
    align-items: start !important;
}

.fieldBlockBody .vtiger-form-group.full-width label,
.fieldBlockBody .vtiger-form-group:has(textarea) label {
    padding-top: 8px !important;
    align-self: start !important;
}

.fieldBlockBody .address-box .vtiger-form-group {
    display: grid !important;
    grid-template-columns: 100px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.fieldBlockBody .address-box .vtiger-form-group:has(textarea) {
    align-items: start !important;
}

.fieldBlockBody .address-box .vtiger-form-group:has(textarea) label {
    padding-top: 6px !important;
}

@media (max-width: 900px) {
    .fieldBlockBody {
        grid-template-columns: 1fr !important;
    }
    .fieldBlockBody .vtiger-form-group,
    .fieldBlockBody .vtiger-form-group.full-width {
        grid-template-columns: minmax(130px, 25%) 1fr !important;
    }
}

@media (max-width: 520px) {
    .vtiger-form-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .default-form-grid .vtiger-form-group.full-width,
    .default-form-section .vtiger-form-group.full-width,
    .accounts-form-grid .vtiger-form-group.full-width,
    .accounts-form-section .vtiger-form-group.full-width,
    #default-description-form-container .vtiger-form-group {
        grid-template-columns: 1fr !important;
    }
}

/* Name Group Input */
.name-group {
    display: flex;
    gap: 12px;
}

.name-group select {
    width: 90px;
}

.name-group input {
    flex-grow: 1;
}

/* Form Actions */
.vtiger-form-actions {
    align-items: center;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 20px;
    margin-top: 36px;
    padding-top: 24px;
}

.vtiger-save-btn {
    background-color: #22c55e;
    border: none;
    border-radius: var(--radius-sm);
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.vtiger-save-btn:hover {
    background-color: #16a34a;
    transform: translateY(-1px);
}

.vtiger-cancel-link {
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-speed);
}

.vtiger-cancel-link:hover {
    color: #dc2626;
    text-decoration: underline;
}

/* Responsive grid for mobile */
@media (max-width: 768px) {
    .vtiger-grid-form {
        grid-template-columns: 1fr;
    }
}

/* Mautic-Style Campaign Split Editor */
.mautic-split-editor {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 30px;
    height: calc(100vh - 156px);
    align-items: stretch;
}

.editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.preview-pane {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.preview-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.light-theme .preview-header {
    background-color: rgba(0, 0, 0, 0.02);
}

.preview-canvas-container {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.preview-canvas {
    background-color: #ffffff;
    color: #334155;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    width: 100%;
    max-width: 600px;
    word-break: break-word;
}

.preview-empty {
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

/* Mass Send Button Styles */
.send-campaign-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    transition: all var(--transition-speed);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.send-campaign-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.send-campaign-btn:disabled {
    background: var(--text-muted) !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive splitter */
@media (max-width: 1024px) {
    .mautic-split-editor {
        grid-template-columns: 1fr;
        height: auto;
        gap: 20px;
    }
    .preview-pane {
        height: 400px;
    }
}

/* CKEditor Custom Styles & Premium Theming Overrides */
.ck-editor__editable_inline {
    min-height: 250px;
}

body:not(.light-theme) .ck.ck-editor__main>.ck-editor__editable {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body:not(.light-theme) .ck.ck-toolbar {
    background: var(--bg-sidebar) !important;
    border-color: var(--border-color) !important;
}

body:not(.light-theme) .ck.ck-button {
    color: var(--text-secondary) !important;
}

body:not(.light-theme) .ck.ck-button:hover,
body:not(.light-theme) .ck.ck-button.ck-on {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

body:not(.light-theme) .ck.ck-dropdown__panel {
    background: var(--bg-sidebar) !important;
    border-color: var(--border-color) !important;
}

body:not(.light-theme) .ck.ck-list {
    background: var(--bg-sidebar) !important;
}

body:not(.light-theme) .ck.ck-list__item .ck-button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   ERP Sales Order Flow Styles
   ========================================================================== */

.order-flow-grid-container {
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

.order-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(3, 90px);
    gap: 30px 45px;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.flow-node {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: var(--shadow-sm);
    z-index: 2; /* Render above SVG lines */
    position: relative;
    user-select: none;
}

/* Light theme overrides */
body.light-theme .flow-node {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.flow-node:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.12);
}

.flow-node.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
}

body.light-theme .flow-node.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(168, 85, 247, 0.04) 100%);
}

.node-icon {
    align-items: center;
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
    font-size: 18px;
    flex-shrink: 0;
    transition: all var(--transition-speed);
}

body.light-theme .node-icon {
    background-color: rgba(0, 0, 0, 0.03);
}

.flow-node.active .node-icon {
    background: var(--accent-gradient);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}

.node-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
    overflow: hidden;
}

.node-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.node-badge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    padding: 1px 8px;
    border-radius: 20px;
    transition: all var(--transition-speed);
}

body.light-theme .node-badge {
    background-color: rgba(0, 0, 0, 0.05);
}

.flow-node.active .node-badge {
    background-color: var(--primary);
    color: #ffffff;
}

/* Specific Node Coordinates */
#flow-lead {
    grid-column: 1;
    grid-row: 1;
}
#flow-opportunity {
    grid-column: 1;
    grid-row: 2;
}
#flow-quotation {
    grid-column: 1;
    grid-row: 3;
}
#flow-payment-advance {
    grid-column: 2;
    grid-row: 2;
}
#flow-sales-order {
    grid-column: 2;
    grid-row: 3;
}
#flow-delivery-note {
    grid-column: 3;
    grid-row: 2;
}
#flow-sales-invoice {
    grid-column: 3;
    grid-row: 3;
}
#flow-payment-entry {
    grid-column: 4;
    grid-row: 3;
}

/* SVG Lines Overlay */
.order-flow-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.order-flow-connections line {
    transition: all 0.5s ease;
}

/* Phone link custom styles for tel links */
.phone-link {
    color: var(--text-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: color var(--transition-speed) ease;
}

.phone-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.phone-link .phone-icon {
    font-size: 11px;
    color: var(--text-muted);
    transition: color var(--transition-speed) ease;
}

.phone-link:hover .phone-icon {
    color: var(--primary);
}

/* --- USER AUTH STYLING (Glassmorphism & Sleek Design) --- */
.auth-container {
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
                var(--bg-app);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 36px 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
}

.auth-card {
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    padding: 28px 32px;
    width: 100%;
    max-width: 420px;
    margin: auto;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.auth-card:hover {
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.15);
}

.auth-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.auth-logo-image {
    max-height: 60px;
    max-width: 240px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.auth-logo-icon {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
}

.auth-logo-text {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.auth-logo-text span {
    color: var(--primary);
}

.auth-card h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
    text-align: center;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.auth-form-group label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.auth-form-group label i {
    color: var(--primary);
    font-size: 14px;
}

.auth-form-group input, 
.auth-form-group select {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 12px 14px;
    outline: none;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.auth-form-group input:focus,
.auth-form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.auth-form-group select option {
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
}

.auth-btn {
    background: var(--accent-gradient);
    border: none;
    border-radius: var(--radius-sm);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
    padding: 14px;
    transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    width: 100%;
}

.auth-btn:hover {
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.auth-btn:active {
    transform: translateY(0);
}

.auth-skip-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 16px;
    width: 100%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.auth-skip-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
    transform: translateY(-1px);
}

.auth-skip-btn:active {
    transform: translateY(0);
}

#login-skip-2fa-link:hover {
    color: var(--primary, #6366f1) !important;
}

.auth-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--color-lost);
    border-radius: 4px;
    color: var(--color-lost);
    font-size: 13px;
    margin-bottom: 20px;
    padding: 10px 14px;
}

.auth-switch-text {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 24px;
    text-align: center;
}

.auth-switch-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.auth-switch-text a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Sidebar Logout Button */
.sidebar-user .logout-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    margin-left: auto;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed) ease;
}

.sidebar-user .logout-btn:hover {
    color: var(--color-lost);
    background-color: rgba(239, 68, 68, 0.1);
}

/* Settings Layout Styles */
.settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    margin-top: 24px;
    align-items: start;
}

.settings-sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    backdrop-filter: var(--backdrop-blur);
}

.settings-sidebar h3 {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-left: 12px;
}

.settings-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    padding: 10px 14px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.settings-nav-item:hover:not(.disabled):not(.active) {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    font-weight: 600;
}

.settings-nav-item.active:hover {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    filter: brightness(1.08);
}

.settings-nav-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Settings Page Scrollability & Full-Height Protection (Prevent list-view overflow clipping) */
.app-container.settings-mode .main-content,
.main-content:has(.settings-content),
.main-content:has(.settings-subview),
.main-content:has(#view-modular-container[data-view-type="settings"]),
body.module-list-view-active .main-content:has(.settings-content),
body.module-list-view-active .main-content:has(.settings-subview) {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0px 24px 96px 24px !important;
}

.app-container.settings-mode .views-container,
.views-container:has(.settings-content),
.views-container:has(.settings-subview),
.views-container:has(#view-modular-container[data-view-type="settings"]),
body.module-list-view-active .views-container:has(.settings-content),
body.module-list-view-active .views-container:has(.settings-subview) {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
    flex: 1 1 auto !important;
}

.app-container.settings-mode #view-modular-container,
#view-modular-container:has(.settings-content),
#view-modular-container:has(.settings-subview),
#view-modular-container[data-view-type="settings"],
body.module-list-view-active #view-modular-container:has(.settings-content),
body.module-list-view-active #view-modular-container:has(.settings-subview) {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
    padding-bottom: 80px !important;
}

/* Leaderboard page layout & full scrolling support */
.main-content:has(#leaderboard-view-container),
.main-content:has([data-loaded-module="Leaderboard"]),
.main-content:has(#podium-container),
.main-content:has(#content-leaderboard),
body.module-list-view-active .main-content:has(#leaderboard-view-container),
body.module-list-view-active .main-content:has([data-loaded-module="Leaderboard"]),
body.module-list-view-active .main-content:has(#podium-container),
body.module-list-view-active .main-content:has(#content-leaderboard),
.main-content.list-view-active:has(#leaderboard-view-container),
.main-content.list-view-active:has([data-loaded-module="Leaderboard"]),
.main-content.list-view-active:has(#podium-container),
.main-content.list-view-active:has(#content-leaderboard) {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: 100% !important;
    padding-bottom: 60px !important;
}

.views-container:has(#leaderboard-view-container),
.views-container:has([data-loaded-module="Leaderboard"]),
.views-container:has(#podium-container),
.views-container:has(#content-leaderboard),
body.module-list-view-active .views-container:has(#leaderboard-view-container),
body.module-list-view-active .views-container:has([data-loaded-module="Leaderboard"]),
body.module-list-view-active .views-container:has(#podium-container),
body.module-list-view-active .views-container:has(#content-leaderboard) {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
}

#view-modular-container[data-loaded-module="Leaderboard"],
#view-modular-container[data-view-type="leaderboard"],
#view-modular-container:has(#leaderboard-view-container),
#view-modular-container:has(#podium-container),
#view-modular-container:has(#content-leaderboard),
body.module-list-view-active #view-modular-container[data-loaded-module="Leaderboard"],
body.module-list-view-active #view-modular-container[data-view-type="leaderboard"],
body.module-list-view-active #view-modular-container:has(#leaderboard-view-container),
body.module-list-view-active #view-modular-container:has(#podium-container),
body.module-list-view-active #view-modular-container:has(#content-leaderboard),
.main-content.list-view-active #view-modular-container[data-loaded-module="Leaderboard"],
.main-content.list-view-active #view-modular-container[data-view-type="leaderboard"],
.main-content.list-view-active #view-modular-container:has(#leaderboard-view-container),
.main-content.list-view-active #view-modular-container:has(#podium-container),
.main-content.list-view-active #view-modular-container:has(#content-leaderboard) {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: block !important;
    padding-bottom: 80px !important;
}

.leaderboard-view-wrapper {
    box-sizing: border-box;
    width: 100%;
}

.settings-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 30px;
    min-height: 500px;
    box-sizing: border-box;
}

.settings-subview {
    display: none;
    animation: fadeIn 0.4s ease;
    box-sizing: border-box;
}

.settings-subview.active-subview {
    display: block !important;
}

/* Breadcrumbs (Vtiger Style) */
.vtiger-breadcrumb {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 20px;
}

.vtiger-breadcrumb span {
    text-transform: uppercase;
}

.vtiger-breadcrumb .active-crumb {
    color: var(--primary);
    font-weight: 600;
}

/* Role Hierarchy Visual Tree (Vertical Indented Tree with Connections) */
.role-tree-container {
    padding: 20px 0;
    overflow-x: auto;
}

.role-tree {
    font-family: var(--font-body);
}

.role-tree ul {
    list-style: none;
    padding-left: 45px;
    position: relative;
}

/* Vertical line for connecting nodes in sublists */
.role-tree ul ul::before {
    content: "";
    position: absolute;
    top: -12px;
    bottom: 26px;
    left: 20px;
    border-left: 2px dashed rgba(99, 102, 241, 0.3);
}

.role-tree li {
    position: relative;
    margin: 24px 0;
}

/* Horizontal line for connecting nodes to parent path */
.role-tree ul ul li::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -25px;
    width: 25px;
    border-top: 2px dashed rgba(99, 102, 241, 0.3);
}

/* Node element box */
.role-node-box {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    min-width: 220px;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-speed) ease;
    border: 1px solid var(--border-color);
}

/* Root node has custom orange background */
.role-node-box.root-node {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.35);
}

/* Standard child node has card background */
.role-node-box:not(.root-node) {
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
}

.role-node-box:not(.root-node):hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.role-node-actions {
    display: inline-flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    margin-left: 16px;
}

/* Show actions on hover of the node box */
.role-node-box:hover .role-node-actions {
    opacity: 1;
}

.role-action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    transition: color var(--transition-speed) ease;
}

.role-node-box.root-node .role-action-btn {
    color: rgba(255, 255, 255, 0.7);
}

.role-node-box.root-node .role-action-btn:hover {
    color: #ffffff;
}

.role-action-btn:hover {
    color: var(--primary);
}

.role-action-btn.delete-role-btn:hover {
    color: var(--color-lost);
}

.role-node-box[draggable="true"] {
    cursor: grab;
}

.role-node-box[draggable="true"]:active {
    cursor: grabbing;
}

/* Picklist Item Drag & Drop */
.picklist-item-row {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    cursor: grab;
}

.picklist-item-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.picklist-item-row:active {
    cursor: grabbing;
}

.picklist-item-row.dragging {
    opacity: 0.45 !important;
    border: 2px dashed var(--primary, #6366f1) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: scale(0.99);
}

.picklist-item-row .pk-drag-handle {
    cursor: grab;
    transition: color 0.15s ease;
}

.picklist-item-row .pk-drag-handle:active {
    cursor: grabbing;
}

.picklist-item-row:hover .pk-drag-handle {
    color: var(--primary, #6366f1) !important;
}


/* Settings Mode Sidebar Swapping */
.app-container.settings-mode .mini-sidebar {
    display: none !important;
}

.app-container.settings-mode .main-nav-sidebar {
    display: none !important;
}

.app-container.settings-mode .module-navigator-sidebar {
    display: none !important;
}

.app-container.settings-mode .sidebar-toggle-handle,
.app-container.settings-mode #sidebar-toggle-handle {
    display: none !important;
}

.app-container.settings-mode .secondary-sidebar,
.app-container.settings-mode #secondary-sidebar {
    width: 265px !important;
    min-width: 265px !important;
}

.app-container.settings-mode .settings-nav-sidebar {
    display: flex !important;
}

/* Settings Sidebar Accordion Styling */
.settings-menu-accordion {
    font-family: var(--font-body);
    font-size: 13px;
}

.settings-nav-sidebar .back-crm-btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.settings-nav-sidebar .back-crm-btn:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateX(-2px);
}

.accordion-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 3px 0;
}

body.light-theme .accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.accordion-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    text-transform: none;
    font-size: 12.5px;
    letter-spacing: 0.1px;
    white-space: nowrap;
    user-select: none;
}

.accordion-header .block-icon {
    font-size: 13px;
    width: 16px;
    color: var(--primary);
    opacity: 0.85;
    flex-shrink: 0;
    text-align: center;
}

.accordion-header .block-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(120, 120, 120, 0.12);
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
    line-height: 1.3;
}

body.dark-theme .accordion-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.accordion-header:hover {
    background-color: rgba(99, 102, 241, 0.05);
    color: var(--primary);
}

body.light-theme .accordion-header:hover {
    background-color: rgba(99, 102, 241, 0.06);
    color: var(--primary);
}

.accordion-item.expanded > .accordion-header {
    color: var(--primary);
}

.accordion-header .arrow-icon {
    font-size: 10px;
    color: var(--text-muted);
    width: 12px;
    margin-left: auto;
    transition: transform var(--transition-speed) ease;
    flex-shrink: 0;
    text-align: right;
}

.accordion-content {
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    margin-top: 3px;
    margin-bottom: 6px;
}

/* Show content when expanded */
.accordion-item.expanded .accordion-content {
    display: flex;
}

.accordion-item.expanded .arrow-icon {
    transform: rotate(0deg);
}

.accordion-subgroup-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 8px 12px 3px 12px;
    margin-top: 4px;
    list-style: none;
    user-select: none;
    border-top: 1px dashed var(--border-color);
}

.accordion-link {
    display: block;
    padding: 7px 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accordion-link:hover:not(.disabled):not(.active) {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    transform: translateX(2px);
}

.accordion-link.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.accordion-link.active:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    filter: brightness(1.08);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
    transform: translateX(2px);
}

.accordion-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.settings-search-empty {
    padding: 16px 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* --- MASS ACTIONS BAR (VTIGER STYLE) --- */
.mass-action-bar {
    display: none;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
    animation: massBarFadeIn 0.2s ease-out forwards;
}

body.light-theme .mass-action-bar {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: none;
}

@keyframes massBarFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mass-action-info {
    display: flex;
    align-items: center;
}

.mass-selected-badge {
    background: var(--primary, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.mass-action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.mass-action-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    font-size: 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-sidebar);
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: all var(--transition-speed) ease;
}

.mass-action-buttons button:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

.mass-action-buttons .danger-btn {
    color: #ffffff;
    border: none;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.mass-action-buttons .danger-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.mass-action-buttons .edit-btn {
    color: var(--primary);
    border-color: rgba(99, 102, 241, 0.2);
    background-color: var(--bg-sidebar);
}

.mass-action-buttons .edit-btn:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: var(--primary);
    color: var(--primary);
}

.mass-action-buttons .merge-btn {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
    background-color: var(--bg-sidebar);
}

.mass-action-buttons .merge-btn:hover {
    background-color: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
    color: #10b981;
}

.mass-action-buttons .export-btn {
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.25);
    background-color: var(--bg-sidebar);
}

.mass-action-buttons .export-btn:hover {
    background-color: rgba(2, 132, 199, 0.1);
    border-color: #0284c7;
    color: #0284c7;
}

.mass-action-buttons .run-btn {
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.25);
    background-color: var(--bg-sidebar);
}

.mass-action-buttons .run-btn:hover {
    background-color: rgba(99, 102, 241, 0.12);
    border-color: #6366f1;
    color: #6366f1;
}

.checkbox-cell {
    width: 48px;
    text-align: center !important;
    vertical-align: middle !important;
}

.checkbox-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* --- TALLY APP CUSTOM STYLES --- */
:root {
    --tally-primary: #6366f1;
    --tally-primary-rgb: 99, 102, 241;
}

.tally-boards-grid .stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 180px;
    position: relative;
    overflow: hidden;
}

body.light-theme .tally-boards-grid .stat-card {
    background: rgba(255, 255, 255, 0.65);
}

.tally-boards-grid .stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 10px 25px -10px rgba(99, 102, 241, 0.25);
}

.tally-boards-grid .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--accent-gradient);
    opacity: 0.8;
}

.tally-boards-grid .board-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    font-family: var(--font-title);
}

.tally-boards-grid .board-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.tally-boards-grid .board-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.tally-boards-grid .board-stats strong {
    color: var(--text-primary);
}

.tally-boards-grid .board-actions {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.tally-boards-grid .stat-card:hover .board-actions {
    opacity: 1;
}

/* Counter Widget Card */
.counter-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 220px;
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .counter-card {
    background: rgba(255, 255, 255, 0.7);
}

.counter-card:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Colors highlights */
.counter-card.indigo-theme { border-top: 4px solid #6366f1; }
.counter-card.emerald-theme { border-top: 4px solid #10b981; }
.counter-card.teal-theme { border-top: 4px solid #14b8a6; }
.counter-card.amber-theme { border-top: 4px solid #f59e0b; }
.counter-card.rose-theme { border-top: 4px solid #f43f5e; }
.counter-card.violet-theme { border-top: 4px solid #8b5cf6; }

.counter-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

.counter-delete-btn {
    opacity: 0;
    color: var(--text-muted);
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all var(--transition-speed) ease;
}

.counter-card:hover .counter-delete-btn {
    opacity: 1;
}

.counter-delete-btn:hover {
    color: #ef4444;
}

.counter-value-container {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-title);
    letter-spacing: -1px;
    transition: transform 0.1s ease-out;
}

.counter-value.pop-animate {
    transform: scale(1.25);
}

.counter-step-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.counter-actions-row {
    display: flex;
    width: 100%;
    gap: 8px;
}

.counter-btn {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.light-theme .counter-btn {
    background: rgba(0, 0, 0, 0.02);
}

.counter-btn:active {
    transform: scale(0.95);
}

.counter-btn.increment {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.25);
    color: #6366f1;
    flex-grow: 2;
}

.counter-btn.increment:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #6366f1;
}

.counter-btn.decrement:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-secondary);
}

.counter-reset-btn {
    width: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.counter-reset-btn:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

/* Tally Distribution Bars */
.tally-dist-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tally-dist-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.tally-dist-bar-bg {
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

body.light-theme .tally-dist-bar-bg {
    background: rgba(0, 0, 0, 0.04);
}

.tally-dist-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tally-dist-bar-fill.indigo { background-color: #6366f1; }
.tally-dist-bar-fill.emerald { background-color: #10b981; }
.tally-dist-bar-fill.teal { background-color: #14b8a6; }
.tally-dist-bar-fill.amber { background-color: #f59e0b; }
.tally-dist-bar-fill.rose { background-color: #f43f5e; }
.tally-dist-bar-fill.violet { background-color: #8b5cf6; }

/* Vtiger-style App Menu CSS Styles */
.app-menu-toggle {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    margin-right: 4px;
}

.app-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--primary);
}

body.light-theme .app-menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.vtiger-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999998 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.vtiger-menu-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.vtiger-menu-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: -320px; /* Hidden offscreen, sliding behind sidebar */
    width: 320px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    z-index: 9999999 !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25);
}

body.light-theme .vtiger-menu-drawer {
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
}

.vtiger-menu-drawer.open {
    left: 70px !important; /* Slides out next to the 70px mini-sidebar */
    opacity: 1;
}

.vtiger-menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.vtiger-menu-drawer-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vtiger-menu-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.vtiger-menu-close-btn:hover {
    color: var(--color-priority-high);
}

.vtiger-menu-section {
    margin-bottom: 24px;
}

.vtiger-menu-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
    padding-bottom: 4px;
}

.vtiger-menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vtiger-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed) ease;
}

.vtiger-menu-item i {
    width: 18px;
    font-size: 14px;
    text-align: center;
}

.vtiger-menu-item:hover {
    background-color: rgba(var(--primary-rgb), 0.08);
    color: var(--text-primary);
    transform: translateX(6px);
}

/* ==========================================================================
   HRMS Module Styles
   ========================================================================== */

/* Sub-Tab Navigation */
.filter-hrms-tab {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    transition: all var(--transition-speed) ease;
}

body.light-theme .filter-hrms-tab {
    background-color: rgba(0, 0, 0, 0.02);
}

.filter-hrms-tab:hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
    border-color: rgba(99, 102, 241, 0.3);
}

.filter-hrms-tab.active {
    background: var(--accent-gradient);
    color: #ffffff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.15);
}

/* HRMS Active view control */
.hrms-subview {
    animation: fadeIn var(--transition-speed) ease;
}

.active-hrms-subview {
    display: block !important;
}

/* Printable PDF Slip Details Area */
#hrms-printable-slip-area {
    padding: 10px;
    background-color: #ffffff;
    color: #1e293b;
    border-radius: var(--radius-sm);
}

#hrms-printable-slip-area table th, 
#hrms-printable-slip-area table td {
    border-bottom: 1px solid #e2e8f0;
}

#hrms-printable-slip-area strong {
    color: #0f172a;
}

/* Punch Status styling */
#hrms-punch-status {
    animation: pulse 2s infinite;
}

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

/* Premium Product Form & Details Tabs */
.product-tabs-container {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 24px;
    padding-bottom: 4px;
    overflow-x: auto;
    white-space: nowrap;
}

.product-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    transition: all var(--transition-speed);
    outline: none;
}

.product-tab-btn:hover {
    color: var(--text-primary);
}

.product-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.product-tab-content {
    display: none;
    animation: fadeIn var(--transition-speed) ease;
}

.product-tab-content.active {
    display: block !important;
}

/* Grid Layout Customization for Product Tabs */
.product-grid-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
}

.product-grid-form .vtiger-form-group.full-width {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .product-grid-form {
        grid-template-columns: 1fr;
    }
    .product-grid-form .vtiger-form-group.full-width {
        grid-column: span 1;
    }
}/* ==========================================================================
   ERP Procurement Flow Styles
   ========================================================================== */

.procurement-flow-grid-container {
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

.procurement-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 210px);
    grid-template-rows: repeat(3, 90px);
    gap: 30px 45px;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

/* Specific Node Coordinates */
#flow-material-request {
    grid-column: 1;
    grid-row: 1;
}
#flow-rfq {
    grid-column: 1;
    grid-row: 2;
}
#flow-supplier-quotation {
    grid-column: 1;
    grid-row: 3;
}
#flow-supplier-payment-advance {
    grid-column: 2;
    grid-row: 2;
}
#flow-purchase-order {
    grid-column: 2;
    grid-row: 3;
}
#flow-purchase-receipt {
    grid-column: 3;
    grid-row: 2;
}
#flow-purchase-invoice {
    grid-column: 3;
    grid-row: 3;
}
#flow-procurement-payment-entry {
    grid-column: 4;
    grid-row: 3;
}

/* SVG Lines Overlay */
.procurement-flow-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.procurement-flow-connections line {
    transition: all 0.5s ease;
}

/* Searchable Select Dropdown styles */
.searchable-select-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    z-index: 1;
}

.searchable-select-wrapper.active,
.searchable-select-wrapper:focus-within {
    z-index: 1050 !important;
}

.default-form-section {
    position: relative;
    z-index: 1;
}

.default-form-section:focus-within,
.default-form-section:has(.searchable-select-wrapper.active),
.default-form-section:has(.custom-searchable-select.open),
.default-form-section:has(.vtiger-lookup-results-dropdown:not([style*="display: none"])),
.default-form-section.active-dropdown-section {
    z-index: 100 !important;
}

.accounts-form-section:focus-within,
.accounts-form-section:has(.searchable-select-wrapper.active),
.accounts-form-section:has(.custom-searchable-select.open),
.accounts-form-section.active-dropdown-section {
    z-index: 100 !important;
    position: relative;
}

.vtiger-form-group {
    position: relative;
}

.vtiger-form-group:focus-within,
.vtiger-form-group:has(.searchable-select-wrapper.active),
.vtiger-form-group:has(.custom-searchable-select.open),
.vtiger-form-group:has(.vtiger-lookup-results-dropdown:not([style*="display: none"])),
.vtiger-form-group.active-dropdown-group,
.form-group.active-dropdown-group {
    z-index: 1050 !important;
}

.default-form-grid > div:focus-within,
.default-form-grid > div:has(.searchable-select-wrapper.active),
.default-form-grid > div:has(.custom-searchable-select.open),
.default-form-grid > div.active-dropdown-cell,
.default-form-grid > div.active-dropdown-group {
    position: relative;
    z-index: 1050 !important;
}

tr.active-dropdown-row,
tr:has(.searchable-select-wrapper.active),
td.active-dropdown-cell,
td:has(.searchable-select-wrapper.active),
.lineItemTable tr:has(.searchable-select-wrapper.active),
.default-line-items-table tr:has(.searchable-select-wrapper.active) {
    position: relative !important;
    z-index: 1050 !important;
}

.table-responsive.has-active-dropdown,
.table-responsive:has(.searchable-select-wrapper.active) {
    overflow: visible !important;
    z-index: 1050 !important;
}

.searchable-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--bg-field, rgba(255, 255, 255, 0.04));
    width: 100%;
    cursor: pointer;
    min-height: 38px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchable-select-trigger:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: var(--bg-field-hover, rgba(255, 255, 255, 0.07));
}

body.light-theme .searchable-select-trigger {
    background: #ffffff;
    border-color: #cbd5e1;
}

body.light-theme .searchable-select-trigger:hover {
    border-color: #818cf8;
    background: #f8fafc;
}

.searchable-select-wrapper.active .searchable-select-trigger {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    background: var(--bg-card, #1e293b);
}

body.light-theme .searchable-select-wrapper.active .searchable-select-trigger {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.searchable-select-input {
    width: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 8px 34px 8px 12px;
    color: var(--text-primary, #f8fafc);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none !important;
}

body.light-theme .searchable-select-input {
    color: #0f172a;
}

.searchable-select-arrow {
    position: absolute;
    right: 12px;
    color: var(--text-muted, #94a3b8);
    font-size: 11px;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.searchable-select-wrapper.active .searchable-select-arrow {
    transform: rotate(180deg);
    color: var(--primary, #6366f1);
}

.searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10000;
    background: var(--bg-card, #1e293b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 6px;
    animation: dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchable-select-dropdown.drop-up {
    top: auto;
    bottom: calc(100% + 6px);
}

body.light-theme .searchable-select-dropdown {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.searchable-select-option {
    padding: 9px 12px;
    color: var(--text-secondary, #cbd5e1);
    font-size: 13px;
    font-weight: 450;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-bottom: 2px;
}

.searchable-select-option:hover,
.searchable-select-option.hover {
    background-color: rgba(99, 102, 241, 0.12);
    color: var(--text-primary, #ffffff);
}

body.light-theme .searchable-select-option {
    color: #475569;
}

body.light-theme .searchable-select-option:hover,
body.light-theme .searchable-select-option.hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.searchable-select-option.selected {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff !important;
    font-weight: 600;
}

.searchable-select-option.selected::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    margin-left: 8px;
    color: #ffffff;
}

.searchable-select-no-results {
    padding: 14px;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    text-align: center;
}

/* Ensure table cells do not clip the absolute dropdowns */
.data-table td {
    overflow: visible !important;
}
.line-items-section table {
    overflow: visible;
}
.table-responsive,
.line-items-section .table-responsive {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--primary, #6366f1) rgba(255, 255, 255, 0.05);
}

.table-responsive::-webkit-scrollbar,
.line-items-section .table-responsive::-webkit-scrollbar {
    height: 8px !important;
}
.table-responsive::-webkit-scrollbar-track,
.line-items-section .table-responsive::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb,
.line-items-section .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.6);
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb:hover,
.line-items-section .table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--primary, #6366f1);
}
body.light-theme .table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9;
}
body.light-theme .table-responsive::-webkit-scrollbar-thumb {
    background: #94a3b8;
}
body.light-theme .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.analytics-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.modal-form {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.line-items-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Constrain line items product column width */
.data-table th.th-product,
.data-table td.td-product,
.line-items-section .data-table th:nth-child(3),
.line-items-section .data-table td:nth-child(3) {
    width: 260px !important;
    min-width: 200px !important;
    max-width: 280px !important;
}

/* ==========================================================================
   Vtiger-style Dual Sidebar & Column Search & Premium UI Enhancements
   ========================================================================== */

/* Dual Sidebar System Container Layout Override */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.main-layout-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100vh;
    overflow: hidden;
}

.app-body-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 1. Left-most Mini Sidebar */
.mini-sidebar {
    width: 68px;
    min-width: 68px;
    background: linear-gradient(180deg, #0b1120 0%, #070a12 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 0 10px 0;
    gap: 0;
    z-index: 105;
    flex-shrink: 0;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.35);
    user-select: none;
    height: 100vh;
    box-sizing: border-box;
}

.mini-sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 8px;
    flex-shrink: 0;
}

.mini-sidebar-logo {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mini-menu-text {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
}

.mini-sidebar-logo:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}

.mini-sidebar-logo:active {
    transform: translateY(0) scale(0.98);
}

.mini-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    min-height: 0;
    padding: 6px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Elegant slim scrollbar for mini sidebar nav */
.mini-sidebar-nav::-webkit-scrollbar {
    width: 3px;
}
.mini-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.mini-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}
.mini-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mini-nav-item {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 17.5px;
    text-decoration: none;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
    box-sizing: border-box;
}

.mini-nav-item i {
    font-size: 17.5px;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), filter 0.24s cubic-bezier(0.4, 0, 0.2, 1), color 0.24s ease;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Ensure no dark low-contrast colors are unreadable on dark mini sidebar */
.mini-nav-item i[style*="#4f46e5"],
.mini-nav-item i[style*="#4F46E5"],
.mini-nav-item i[style*="rgb(79, 70, 229)"],
.mini-nav-item i[style*="var(--primary)"] {
    color: #818cf8 !important;
}

.mini-nav-item i[style*="#0198cc"],
.mini-nav-item i[style*="#0284c7"] {
    color: #38bdf8 !important;
}

.mini-nav-item i[style*="#8e44ad"],
.mini-nav-item i[style*="#8E44AD"] {
    color: #c084fc !important;
}

.mini-nav-item i[style*="#16a085"],
.mini-nav-item i[style*="#16A085"] {
    color: #2dd4bf !important;
}

.mini-nav-item i[style*="#7f8c8d"],
.mini-nav-item i[style*="#7F8C8D"] {
    color: #cbd5e1 !important;
}

.mini-nav-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0.08);
}

.mini-nav-item:hover i {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
}

.mini-nav-item.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(168, 85, 247, 0.25) 100%);
    border-color: rgba(165, 180, 252, 0.65);
    color: #ffffff;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transform: scale(1.03);
}

.mini-nav-item.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #818cf8 0%, #c084fc 100%);
    box-shadow: 0 0 10px #818cf8;
}

.mini-nav-item.active i {
    color: #ffffff !important;
    filter: drop-shadow(0 0 10px rgba(165, 180, 252, 0.9)) !important;
}

/* Category Dividers in Mini Sidebar */
.mini-nav-divider {
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 4px 0;
    border-radius: 1px;
    flex-shrink: 0;
}

/* Modern Floating Glassmorphism Tooltip for mini-nav-item */
.mini-nav-item::after {
    content: attr(data-title);
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f8fafc;
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 999;
}

.mini-nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Mini Sidebar Footer Dock (Removed - all items integrated into mini-sidebar-nav) */
.mini-sidebar-footer {
    display: none !important;
}

/* 2. Secondary Sidebar */
.secondary-sidebar {
    width: 240px;
    min-width: 240px;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px 16px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 100;
    flex-shrink: 0;
}

.secondary-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0 !important;
}

.secondary-sidebar.compact {
    width: 56px !important;
    min-width: 56px !important;
    padding: 16px 6px !important;
}

.secondary-sidebar.compact .secondary-sidebar-header span,
.secondary-sidebar.compact .secondary-sidebar-search,
.secondary-sidebar.compact .secondary-list-item span,
.secondary-sidebar.compact .secondary-section-title span,
.secondary-sidebar.compact .secondary-item-count {
    display: none !important;
}

.secondary-sidebar.compact .secondary-list-item {
    justify-content: center;
    padding: 10px 0;
}

.secondary-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 38px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.secondary-sidebar-search {
    margin-bottom: 14px;
    position: relative;
}

.secondary-sidebar-search input {
    width: 100%;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 8px 12px 8px 32px;
    outline: none;
    font-size: 12px;
    transition: all var(--transition-speed);
}

.secondary-sidebar-search input:focus {
    border-color: var(--primary);
}

.secondary-sidebar-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 12px;
}

.secondary-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 14px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--bg-sidebar);
    padding: 4px 0;
    z-index: 5;
}

.secondary-list-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.secondary-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.secondary-list-item:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--text-primary);
}

.secondary-list-item.active {
    background-color: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
    font-weight: 600;
    border-left: 3px solid var(--active-suite-color, var(--primary));
    padding-left: 9px;
}

.secondary-item-count {
    font-size: 10px;
    background-color: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--text-muted);
}

body.light-theme .secondary-item-count {
    background-color: rgba(0,0,0,0.05);
}

.secondary-sidebar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.sidebar-tag-pill {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-tag-pill:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sidebar-tag-pill.active-tag {
    box-shadow: 0 0 0 2px var(--primary, #6366f1);
    font-weight: 700 !important;
}

/* 3. Divider Line & Collapsible Handle */
.sidebar-toggle-handle {
    position: absolute;
    left: calc(44px + 240px);
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 20px;
    height: 38px;
    background-color: var(--bg-sidebar, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 102;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color var(--transition-speed, 0.2s), border-color var(--transition-speed, 0.2s);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.secondary-sidebar.compact + .sidebar-toggle-handle {
    left: calc(44px + 56px) !important;
}

.secondary-sidebar.collapsed + .sidebar-toggle-handle {
    left: 44px !important;
}

.app-container.hide-secondary-sidebar .sidebar-toggle-handle,
.app-container.hide-secondary-sidebar #sidebar-toggle-handle {
    display: none !important;
}

.sidebar-toggle-handle:hover {
    border-color: var(--primary, #6366f1);
    background-color: var(--bg-surface, #f8fafc);
}

.sidebar-toggle-handle i {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform var(--transition-speed, 0.2s);
}

.sidebar-toggle-handle:hover i {
    color: var(--primary, #6366f1);
}

.secondary-sidebar.collapsed + .sidebar-toggle-handle i {
    transform: rotate(180deg);
}

/* Main Content Padding adjustments to match dual sidebars */
.main-content {
    padding: 0px 24px 24px 24px;
    overflow-x: auto;
}

/* Topbar breadcrumb styling */
.vtiger-breadcrumb {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.vtiger-breadcrumb .active-crumb {
    color: var(--primary);
    font-weight: 700;
}

/* Table Header Inline Column Search Row */
.search-row-tr {
    background-color: rgba(255,255,255,0.01) !important;
}

body.light-theme .search-row-tr {
    background-color: rgba(0,0,0,0.01) !important;
}

.search-row-tr td {
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--border-color) !important;
    min-width: 0;
    box-sizing: border-box;
}

.column-search-input {
    width: 100%;
    min-width: 0;
    height: 32px;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 5px 8px;
    outline: none;
    font-size: 12px;
    box-sizing: border-box;
    transition: all var(--transition-speed);
}

select.column-search-input,
.column-search-select {
    height: 32px;
    padding: 4px 22px 4px 8px !important;
    background-position: right 6px center !important;
    background-size: 10px 10px !important;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    background-color: var(--bg-field);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 60px;
}

input[type="date"].column-search-input,
input[type="datetime-local"].column-search-input {
    min-height: 32px;
    height: 32px;
    padding: 4px 8px;
    box-sizing: border-box;
}

.column-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.btn-table-search {
    background-color: var(--primary, #6366f1);
    border: none;
    color: #ffffff;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.btn-table-search:hover {
    background-color: var(--primary-hover, #4f46e5);
    opacity: 1;
}

.btn-table-search-clear {
    background: var(--bg-surface, #e2e8f0) !important;
    color: var(--text-secondary, #64748b) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    height: 32px;
    width: 28px;
    padding: 0 !important;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
    box-shadow: none !important;
}

.btn-table-search-clear:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: scale(1.05);
}

/* Checkbox and Icons Cell Styling */
.checkbox-cell {
    width: 40px;
    text-align: center;
    padding-right: 0 !important;
}

.checkbox-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.row-actions-cell {
    width: 90px;
    white-space: nowrap;
    text-align: center;
}

.row-action-icon {
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    margin: 0 4px;
    transition: color var(--transition-speed);
}

.row-action-icon:hover {
    color: var(--text-primary);
}

.row-action-icon.view-icon:hover {
    color: var(--primary);
}

.row-action-icon.star-icon.active {
    color: #fbbf24; /* yellow star */
}

.row-action-icon.star-icon:hover {
    color: #fbbf24;
}

.row-action-icon.menu-icon {
    position: relative;
}

.row-action-icon.menu-icon:hover {
    color: var(--primary);
}

/* Purple phone badge */
.phone-badge {
    background-color: #6366f1;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.phone-badge:hover {
    opacity: 0.9;
}

/* Email link styling */
.email-link, .lookup-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.email-link:hover, .lookup-link:hover {
    text-decoration: underline;
}



/* Table Pagination Controls */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 10px 18px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.pagination-left {
    font-size: 13px;
    color: var(--text-muted);
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-btn {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.page-btn:hover:not(:disabled) {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-color: var(--primary);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-info {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0 8px;
}

/* Context Action Dropdown Menu for rows */
.row-context-menu {
    position: absolute;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px 0;
    min-width: 120px;
    z-index: 9999;
    display: none;
}

.row-context-menu-item {
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition-speed);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#default-more-dropdown-menu {
    min-width: 210px;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background-color: var(--bg-card, #ffffff);
}

#default-more-dropdown-menu .row-context-menu-item {
    white-space: nowrap;
    padding: 9px 16px;
    font-size: 13px;
}

@media (max-width: 1366px) {
    .default-view-header-actions {
        gap: 6px !important;
    }
    .default-view-header-actions .primary-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    .default-view-header-actions .btn-secondary {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

.row-context-menu-item:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    color: var(--text-primary);
}

/* View switcher button bar */
.view-switcher-bar {
    display: flex;
    align-items: center;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
    margin-right: 12px;
}

.view-switch-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    min-width: 34px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    transition: all var(--transition-speed);
}

.view-switch-btn:hover {
    color: var(--text-primary);
}

.view-switch-btn.active {
    background-color: var(--primary);
    color: #ffffff;
}

/* Hide original sidebar when dual sidebar is active */
.sidebar {
    display: none !important;
}



/* Vtiger style Reference/Lookup Fields */
.vtiger-reference-field-container {
    display: flex;
    align-items: stretch;
    position: relative;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.vtiger-reference-field-container:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.reference-module-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.03);
    border-right: 1px solid var(--border-color);
    padding: 0 10px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    user-select: none;
}

body.light-theme .reference-module-select-wrapper {
    background-color: rgba(0, 0, 0, 0.02);
}

.reference-module-select {
    border: none !important;
    background: transparent !important;
    padding: 0 15px 0 0 !important;
    outline: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    color: var(--text-primary) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: none !important;
}

.reference-module-select-wrapper .fa-chevron-down {
    position: absolute;
    right: 10px;
    font-size: 10px;
    pointer-events: none;
    color: var(--text-muted);
}

.reference-input-wrapper {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.reference-search-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    outline: none !important;
}

.reference-clear-btn {
    position: absolute;
    right: 10px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    display: none;
    transition: color 0.2s;
    user-select: none;
}

.reference-clear-btn:hover {
    color: var(--text-primary);
}

.reference-action-btn {
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    background-color: rgba(255, 255, 255, 0.01) !important;
    padding: 0 14px !important;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.reference-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
}

body.light-theme .reference-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

.reference-action-btn:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Autocomplete Dropdown */
.reference-autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
}

.reference-autocomplete-item {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reference-autocomplete-item:hover, .reference-autocomplete-item.active {
    background-color: var(--primary);
    color: #ffffff;
}

.reference-autocomplete-item .item-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.reference-autocomplete-item:hover .item-sub, .reference-autocomplete-item.active .item-sub {
    color: rgba(255, 255, 255, 0.7);
}

/* Modal hover row selection */
.modal-row-hover {
    transition: background-color 0.2s;
}
.modal-row-hover:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}
body.light-theme .modal-row-hover:hover {
    background-color: rgba(79, 70, 229, 0.05) !important;
}

/* --- PREMIUM FILE UPLOAD CUSTOM FIELD STYLES --- */
.pycrm-upload-container {
    width: 100%;
    margin-top: 4px;
}

.pycrm-upload-zone {
    border: 2px dashed var(--border-color);
    background-color: var(--bg-field);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 110px;
}

.pycrm-upload-zone:hover, .pycrm-upload-zone.dragover {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.04);
}

.pycrm-upload-icon {
    font-size: 24px;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.pycrm-upload-zone:hover .pycrm-upload-icon {
    transform: translateY(-3px);
}

.pycrm-upload-text {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.pycrm-upload-subtext {
    font-size: 11px;
    color: var(--text-muted);
}

.pycrm-upload-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    width: 100%;
    transition: border-color var(--transition-speed);
}

.pycrm-upload-preview:hover {
    border-color: var(--primary);
}

.pycrm-upload-preview-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.pycrm-upload-preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pycrm-upload-preview-info .file-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.pycrm-upload-preview-info .file-name:hover {
    color: var(--primary);
}

.pycrm-upload-preview-info .file-action-links {
    display: flex;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.pycrm-upload-preview-info .file-action-links a {
    color: var(--primary);
    text-decoration: none;
}

.pycrm-upload-preview-info .file-action-links a:hover {
    text-decoration: underline;
}

.pycrm-upload-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pycrm-upload-remove-btn:hover {
    color: var(--color-lost);
    background-color: rgba(239, 68, 68, 0.1);
}

/* Uploading Progress States */
.pycrm-upload-progress-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pycrm-upload-progress-track {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    height: 6px;
    width: 100%;
    overflow: hidden;
}

body.light-theme .pycrm-upload-progress-track {
    background-color: rgba(0, 0, 0, 0.05);
}

.pycrm-upload-progress-bar {
    background: var(--accent-gradient);
    height: 100%;
    width: 0%;
    transition: width 0.2s ease;
    border-radius: 4px;
}

.pycrm-upload-progress-text {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    font-weight: 500;
}

/* Hide secondary sidebar for detail/create/edit views */
.app-container.hide-secondary-sidebar .secondary-sidebar {
    display: none !important;
}
.app-container.hide-secondary-sidebar .sidebar-toggle-handle {
    display: none !important;
}

/* --- VOICE NOTE RECORDER & PLAYER STYLES --- */

/* Glassmorphic custom audio player wrapper */
.voice-note-player-wrapper {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.75) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
    max-width: 320px;
    backdrop-filter: var(--backdrop-blur);
    box-shadow: var(--shadow-sm);
}

body.light-theme .voice-note-player-wrapper {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(226, 232, 240, 0.9) 100%);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

.voice-note-mic-badge {
    background: var(--primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    flex-shrink: 0;
    font-size: 13px;
}

.voice-note-player-wrapper audio {
    width: 100%;
    height: 28px;
    outline: none;
}

/* Voice recorder container row inside forms */
.voice-recorder-container-row {
    background-color: var(--bg-field);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.voice-recorder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recorder-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.close-voice-recorder-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
    transition: color var(--transition-speed);
}

.close-voice-recorder-btn:hover {
    color: var(--color-lost);
}

.voice-recorder-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.recorder-timer {
    font-family: monospace;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.recording-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-lost);
    border-radius: 50%;
    display: inline-block;
    animation: flash 1s infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.recorder-controls-btn-group {
    display: flex;
    gap: 8px;
}

.recorder-btn {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

.recorder-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary);
}

.recorder-btn.btn-voice-record {
    color: var(--color-won);
}

.recorder-btn.btn-voice-stop {
    color: var(--color-lost);
}

.recorder-btn.btn-voice-discard {
    color: var(--text-muted);
}

.recorder-btn.btn-voice-discard:hover {
    color: var(--color-lost);
    border-color: var(--color-lost);
    background-color: rgba(239, 68, 68, 0.05);
}

.recorder-btn.btn-voice-attach {
    color: var(--color-won);
    border-color: var(--color-won);
    background-color: rgba(16, 185, 129, 0.05);
}

.recorder-btn.btn-voice-attach:hover {
    background-color: var(--color-won);
    color: #ffffff;
}

.recorder-preview-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

.recorder-audio-preview {
    width: 100%;
    height: 28px;
    outline: none;
}

/* Audio wave animation representation */
.audio-wave-animation {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 12px;
}

.audio-wave-bar {
    width: 2px;
    height: 100%;
    background-color: var(--primary);
    border-radius: 1px;
    animation: bounce 0.8s ease-in-out infinite alternate;
}

.audio-wave-bar:nth-child(2) { animation-delay: 0.15s; }
.audio-wave-bar:nth-child(3) { animation-delay: 0.3s; }
.audio-wave-bar:nth-child(4) { animation-delay: 0.45s; }

@keyframes bounce {
    from { transform: scaleY(0.2); }
    to { transform: scaleY(1); }
}

/* Mic toggle button next to textarea */
.btn-toggle-voice-recorder {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 10px;
    font-size: 12px;
    transition: all var(--transition-speed);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-toggle-voice-recorder:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.05);
}

/* Topbar Profile Dropdown Styling */
.profile-dropdown-container {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    z-index: 1060;
}

.profile-avatar-trigger {
    align-items: center;
    background-color: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 36px;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    overflow: hidden;
    transition: all var(--transition-speed);
    backdrop-filter: var(--backdrop-blur);
}

.profile-avatar-trigger:hover {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.topbar-user-avatar {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-dropdown-card {
    position: absolute;
    top: 48px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: var(--backdrop-blur);
    z-index: 100005;
    display: none;
    flex-direction: column;
    padding: 16px 18px;
    box-sizing: border-box;
    animation: dropdownFadeIn 0.25s ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.profile-dropdown-card.active {
    display: flex;
}

/* Header inside dropdown card */
.profile-card-header {
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 14px;
}

.profile-card-image-container {
    width: 90px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.profile-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.profile-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-card-username {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-body);
}

.profile-card-role {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Footer / Actions inside dropdown card */
.profile-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background-color: var(--bg-field);
    transition: all var(--transition-speed);
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

.profile-card-link i {
    font-size: 12px;
    flex-shrink: 0;
}

.profile-card-link:hover {
    color: var(--text-primary);
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.1);
}

.profile-card-link.sign-out-btn {
    grid-column: 1 / -1;
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.04);
    font-weight: 600;
    margin-top: 4px;
}

.profile-card-link.sign-out-btn:hover {
    color: #ffffff;
    border-color: #ef4444;
    background-color: #ef4444;
}

/* ==========================================================================
   Premium Email & Campaign Split-Editor Upgrades
   ========================================================================== */

/* Layout Scroll Locks */
.app-container.split-editor-mode .main-content {
    overflow-y: hidden;
}

/* Redesigned Mautic Split Layout */
.mautic-split-editor {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    height: calc(100vh - 141px) !important;
    align-items: stretch;
    margin-bottom: 0;
}

/* Editor Form Scroll Control */
.editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.editor-pane form {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

.editor-form-body {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

/* Fix Form Groups & Input Sizes */
.editor-pane .vtiger-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-pane .vtiger-form-group.editor-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Enable flex-child compression */
}

/* CKEditor Flex Grow and Heights */
.editor-pane .ck-editor {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

.editor-pane .ck-editor__main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-pane .ck-editor__editable_inline {
    flex-grow: 1 !important;
    min-height: 180px !important;
    max-height: none !important;
    overflow-y: auto;
}

/* Modern Placeholders Helper Card */
.placeholder-helper-card {
    background: rgba(99, 102, 241, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

body.light-theme .placeholder-helper-card {
    background: rgba(79, 70, 229, 0.02);
}

.placeholder-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-secondary);
}

.placeholder-card-header .helper-info {
    font-size: 11px;
    color: var(--primary);
    text-transform: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.placeholder-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
}

.placeholder-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.placeholder-select-group .compact-select {
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--bg-field) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    outline: none !important;
    height: 34px !important;
    cursor: pointer;
    flex-grow: 1;
    min-width: 100px;
}

.placeholder-select-group .or-separator {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.placeholder-output-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.placeholder-output-group .compact-output {
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-family: monospace !important;
    border-radius: var(--radius-sm) !important;
    background-color: rgba(99, 102, 241, 0.05) !important;
    border: 1px dashed rgba(var(--primary-rgb), 0.4) !important;
    color: var(--primary) !important;
    width: 175px !important;
    height: 34px !important;
    text-align: center !important;
    font-weight: 600;
}

body.light-theme .placeholder-output-group .compact-output {
    background-color: rgba(79, 70, 229, 0.04) !important;
}

.placeholder-output-group .icon-btn-secondary {
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.placeholder-output-group .icon-btn-secondary:hover {
    color: var(--primary);
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.08);
}

/* Premium Email Mock Client Header */
.preview-pane {
    background-color: var(--bg-sidebar);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.preview-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.light-theme .preview-header {
    background-color: #f8fafc;
}

/* Window Action Controls */
.preview-window-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.preview-window-controls .control-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.preview-window-controls .control-dot.close { background-color: #ef4444; }
.preview-window-controls .control-dot.minimize { background-color: #f59e0b; }
.preview-window-controls .control-dot.maximize { background-color: #10b981; }

.preview-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Desktop & Mobile View Toggles */
.preview-device-toggles {
    display: flex;
    gap: 4px;
}

.device-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all var(--transition-speed);
}

.device-toggle-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
}

body.light-theme .device-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.device-toggle-btn.active {
    color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.1);
}

/* Mock Email Envelope Header */
.email-envelope-info {
    background-color: rgba(255, 255, 255, 0.01);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.light-theme .email-envelope-info {
    background-color: #ffffff;
}

.envelope-row {
    display: flex;
    font-size: 12px;
    line-height: 1.4;
}

.envelope-label {
    width: 65px;
    font-weight: 600;
    color: var(--text-muted);
}

.envelope-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Simulator Canvas Frame styling */
.preview-canvas-container {
    flex-grow: 1;
    background-color: #f1f5f9;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: all 0.3s ease;
}

body:not(.light-theme) .preview-canvas-container {
    background-color: #0d131f;
}

.preview-canvas {
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 28px;
    width: 100%;
    max-width: 600px;
    min-height: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

/* Phone Bezel Simulator Frame */
.preview-pane.mobile-view .preview-canvas-container {
    align-items: center;
}

.preview-pane.mobile-view .preview-canvas {
    max-width: 360px;
    min-height: 520px;
    height: 520px;
    border-radius: 32px;
    border: 10px solid #1e293b;
    box-shadow: 0 16px 36px rgba(0,0,0,0.25);
    overflow-y: auto;
    padding: 20px;
}

/* Premium Form Actions */
.vtiger-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: auto; /* Push actions block to bottom */
}

.vtiger-save-btn {
    background: var(--accent-gradient) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    transition: all var(--transition-speed) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

.vtiger-save-btn:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
}

.vtiger-cancel-link {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-field) !important;
    border-radius: var(--radius-sm);
    padding: 9px 18px;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all var(--transition-speed);
}

.vtiger-cancel-link:hover {
    color: var(--text-primary) !important;
    border-color: var(--text-secondary) !important;
    text-decoration: none !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

body.light-theme .vtiger-cancel-link:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Light theme overrides for CKEditor */
body.light-theme .ck.ck-editor__main>.ck-editor__editable {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

body.light-theme .ck.ck-toolbar {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}

/* CKEditor Premium Custom Focus ring */
.ck.ck-editor__main>.ck-editor__editable.ck-focused {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

/* Settings Mode Sidebar Swapping inside Secondary Sidebar */
.app-container.settings-mode #secondary-sidebar .settings-nav-sidebar {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto !important;
    max-height: 100%;
    padding-right: 4px;
    padding-bottom: 120px !important;
}

.settings-menu-accordion {
    padding-bottom: 60px;
}

/* Custom Scrollbar for Settings Nav Sidebar */
.app-container.settings-mode #secondary-sidebar .settings-nav-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-container.settings-mode #secondary-sidebar .settings-nav-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-container.settings-mode #secondary-sidebar .settings-nav-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.app-container.settings-mode #secondary-sidebar .settings-nav-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

.app-container.settings-mode #secondary-sidebar .secondary-sidebar-header,
.app-container.settings-mode #secondary-sidebar .secondary-sidebar-search,
.app-container.settings-mode #secondary-sidebar #secondary-sidebar-content {
    display: none !important;
}

@media (max-width: 1180px) {
    .reports-workspace,
    .reports-results-grid {
        grid-template-columns: 1fr;
    }

    .reports-sidebar {
        min-height: 0;
    }

    .reports-list {
        max-height: 260px;
    }

    .reports-builder-grid,
    .reports-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Custom Deal Warning Badges for Kanban Cards */
.deal-warning-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.deal-warning-badge.overdue {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.deal-warning-badge.stagnant {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.deal-warning-badge.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Related Sales Records Tabs Component */
.tab-buttons {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}
.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}
.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
body.light-theme .tab-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}
.tab-btn.active {
    color: #ffffff;
    background: var(--primary);
}

/* Dashboard Interactive Clickable Analytics Charts and Elements */
.dashboard-clickable {
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.chart-bar.dashboard-clickable:hover,
.dashboard-column-bar.dashboard-clickable:hover,
.dashboard-funnel-segment.dashboard-clickable:hover,
.dashboard-gauge.dashboard-clickable:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.dashboard-pie.dashboard-clickable:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dashboard-svg-chart circle.dashboard-clickable:hover {
    r: 7 !important;
    filter: brightness(1.25);
}

.dashboard-metric-value.dashboard-clickable:hover,
.dashboard-gauge-value.dashboard-clickable:hover {
    color: var(--primary) !important;
    transform: scale(1.05);
}

/* Calendar View Styling */
.calendar-view-container {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: var(--backdrop-blur);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 15px;
}

.calendar-ctrl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.calendar-nav-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 10px;
    min-width: 150px;
    text-align: center;
    color: var(--text-primary);
}

.calendar-field-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-select-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.calendar-select {
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition-speed);
}

.calendar-select:focus {
    border-color: var(--primary);
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
    padding-bottom: 4px;
}

.calendar-weekday {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(110px, 1fr);
    gap: 8px;
}

.calendar-day-cell {
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 110px;
    transition: all 0.2s ease;
    position: relative;
}

body.light-theme .calendar-day-cell {
    background-color: rgba(0, 0, 0, 0.01);
}

.calendar-day-cell:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    background-color: rgba(var(--primary-rgb), 0.02);
}

.calendar-day-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    align-self: flex-start;
}

.calendar-day-cell.other-month {
    opacity: 0.4;
    background-color: transparent;
}

.calendar-day-cell.today {
    border-color: var(--primary);
    background-color: rgba(var(--primary-rgb), 0.05);
}

.calendar-day-cell.today .calendar-day-number {
    color: var(--primary);
}

.calendar-events-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 85px;
    padding-right: 2px;
}

.calendar-events-container::-webkit-scrollbar {
    width: 3px;
}
.calendar-events-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.calendar-event {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.12) 0%, rgba(var(--primary-rgb), 0.04) 100%);
    color: var(--text-primary);
}

.calendar-event:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.calendar-event.priority-high {
    border-left-color: var(--color-priority-high);
    background: linear-gradient(90deg, rgba(244, 63, 94, 0.15) 0%, rgba(244, 63, 94, 0.04) 100%);
}
.calendar-event.priority-medium {
    border-left-color: var(--color-priority-medium);
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.04) 100%);
}
.calendar-event.priority-low {
    border-left-color: var(--color-priority-low);
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0.04) 100%);
}

.calendar-event.status-won, .calendar-event.status-approved, .calendar-event.status-closed, .calendar-event.status-completed, .calendar-event.status-paid {
    border-left-color: var(--color-won);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.04) 100%);
}

.calendar-event.status-lost, .calendar-event.status-rejected, .calendar-event.status-cancelled {
    border-left-color: var(--color-lost);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%);
}

.calendar-event.status-qualified, .calendar-event.status-in-progress, .calendar-event.status-escalated {
    border-left-color: var(--color-qualified);
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.04) 100%);
}

/* ==========================================================================
   MODULE JUMP (COMMAND PALETTE) STYLES
   ========================================================================== */
.module-jump-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(8, 12, 20, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    z-index: 10000; /* Extremely high z-index to overlay everything else */
    animation: fadeInOverlay 0.2s ease-out;
}

body.light-theme .module-jump-modal-overlay {
    background-color: rgba(15, 23, 42, 0.4);
}

.module-jump-modal-container {
    width: 620px;
    max-width: 90%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideDownModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme .module-jump-modal-container {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.module-jump-search-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.module-jump-search-header .search-icon {
    font-size: 18px;
    color: var(--text-muted);
}

#module-jump-search-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    padding: 4px 0;
}

.module-jump-search-header .close-hint {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.module-jump-results-container {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.module-jump-results-container::-webkit-scrollbar {
    width: 6px;
}
.module-jump-results-container::-webkit-scrollbar-track {
    background: transparent;
}
.module-jump-results-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.module-jump-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.module-jump-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

body.light-theme .module-jump-item-icon {
    background-color: rgba(0, 0, 0, 0.04);
}

.module-jump-item-icon i {
    font-size: 15px;
}

.module-jump-item-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.module-jump-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.module-jump-item-category {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.module-jump-item.selected {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.module-jump-item.selected .module-jump-item-icon {
    background-color: rgba(var(--primary-rgb), 0.15);
}

.module-jump-item.selected .module-jump-item-name {
    color: var(--primary);
}

.module-jump-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-muted);
    background-color: rgba(0, 0, 0, 0.12);
}

body.light-theme .module-jump-footer {
    background-color: rgba(0, 0, 0, 0.02);
}

kbd, .jump-kbd {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

body.light-theme kbd, body.light-theme .jump-kbd {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.module-jump-trigger-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-color: var(--border-color);
    background-color: var(--bg-card);
    transition: all 0.2s ease;
}

.module-jump-trigger-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary);
}

.module-jump-no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

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

@keyframes slideDownModal {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Pivot Table Styles */
.pivot-table-styled {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
}

.pivot-table-styled th {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

.pivot-corner-header {
    font-style: italic;
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    border-right: 2px solid var(--border-color);
}

.pivot-row-header {
    background-color: rgba(var(--primary-rgb), 0.02);
    border-right: 2px solid var(--border-color);
    font-weight: 500;
}

.pivot-data-cell {
    text-align: right;
    transition: background-color 0.15s ease;
}

.pivot-data-cell:hover {
    background-color: rgba(var(--primary-rgb), 0.04);
}

.pivot-cell-val-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-bottom: 4px;
}

.pivot-cell-val-group:last-child {
    margin-bottom: 0;
}

.pivot-cell-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pivot-cell-val {
    font-size: 12px;
}

.pivot-empty-val {
    color: var(--text-muted);
    opacity: 0.5;
}

.pivot-row-total-cell {
    background-color: rgba(var(--primary-rgb), 0.03);
    border-left: 2px dashed var(--border-color);
    text-align: right;
}

.pivot-column-total-row td {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    border-top: 2px solid var(--border-color);
    font-weight: bold;
}

.pivot-grand-total-cell {
    background-color: rgba(var(--primary-rgb), 0.1) !important;
    color: var(--primary) !important;
}

/* ═══════════════════ SALES FLOW PIPELINE STEPPER ═══════════════════ */

.sf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 130px;
    padding: 20px 14px;
    border-radius: 12px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: default;
    box-shadow: var(--shadow-sm);
}

.sf-step:hover {
    background: var(--bg-card);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.sf-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sf-step-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    transition: color 0.3s ease;
}

.sf-step-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--bg-app);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.sf-step-action {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.sf-step-action:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

/* Active step */
.sf-step-active {
    background: rgba(var(--primary-rgb), 0.08) !important;
    border-color: rgba(var(--primary-rgb), 0.3) !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.05);
}

.sf-step-active .sf-step-icon {
    background: linear-gradient(135deg, var(--primary), rgba(var(--primary-rgb), 0.7));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
}

.sf-step-active .sf-step-label {
    color: var(--primary);
}

.sf-step-active .sf-step-badge {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
}

/* Completed step */
.sf-step-completed {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05);
}

.sf-step-completed .sf-step-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
    color: #fff;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.sf-step-completed .sf-step-label {
    color: #10b981;
}

.sf-step-completed .sf-step-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}

/* Connector */
.sf-connector {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 40px;
    max-width: 120px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.sf-connector-line {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    min-width: 30px;
    transition: background 0.4s ease;
}

.sf-conn-arrow {
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.4s ease;
    margin-left: -2px;
}

.sf-connector-active .sf-connector-line {
    background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.4));
}

.sf-connector-active .sf-conn-arrow {
    color: var(--primary);
}

.sf-connector-completed .sf-connector-line {
    background: linear-gradient(90deg, #10b981, rgba(16, 185, 129, 0.4));
}

.sf-connector-completed .sf-conn-arrow {
    color: #10b981;
}

/* Linked document chips */
.sf-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.sf-linked-chip:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
    transform: translateY(-1px);
}

.sf-linked-chip .sf-chip-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.sf-linked-chip .sf-chip-icon.chip-so {
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
}

.sf-linked-chip .sf-chip-icon.chip-dn {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
}

.sf-linked-chip .sf-chip-icon.chip-si {
    background: rgba(14, 165, 233, 0.12);
    color: #38bdf8;
}

.sf-linked-chip .sf-chip-icon.chip-pe {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
}

.sf-chip-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sf-chip-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
}

.sf-chip-meta {
    font-size: 10px;
    color: var(--text-secondary);
}

/* Pipeline animation */
@keyframes sfPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.sf-step-active .sf-step-icon {
    animation: sfPulse 2.5s ease-in-out infinite;
}

/* Fullscreen Visual Email Builder Overlay */
.visual-builder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1e1e24;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

.builder-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c2c35;
    padding: 12px 24px;
    border-bottom: 1px solid #3d3d4a;
    color: #ffffff;
    height: 60px;
    box-sizing: border-box;
}

.builder-navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

.builder-navbar-left i {
    color: #6366f1;
}

.builder-navbar-actions {
    display: flex;
    gap: 12px;
}

.builder-navbar-actions button {
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.builder-navbar-actions .btn-cancel {
    background-color: transparent;
    border: 1px solid #5d5d70;
    color: #e2e8f0;
}

.builder-navbar-actions .btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #ffffff;
}

.builder-navbar-actions .btn-save {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.builder-navbar-actions .btn-save:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.builder-editor-container {
    flex-grow: 1;
    height: calc(100vh - 60px);
    position: relative;
}

#gjs-container {
    height: 100%;
    width: 100%;
}

/* Custom Searchable Select (Dropdown) styling */
.custom-searchable-select {
    position: relative;
    width: 100%;
}

.custom-searchable-select .select-selected {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    user-select: none;
}

body.light-theme .custom-searchable-select .select-selected {
    background-color: #ffffff;
}

.custom-searchable-select .select-selected::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--transition-speed) ease;
}

.custom-searchable-select.open .select-selected::after {
    transform: rotate(180deg);
}

.custom-searchable-select.open .select-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.custom-searchable-select .select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: 280px;
    overflow: hidden;
}

body.light-theme .custom-searchable-select .select-dropdown {
    background-color: #ffffff;
}

.custom-searchable-select .select-search-container {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.05);
}

body.light-theme .custom-searchable-select .select-search-container {
    background-color: #f8fafc;
}

.custom-searchable-select .select-search-container i {
    color: var(--text-muted);
    font-size: 12px;
}

.custom-searchable-select .select-search-container input {
    border: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    outline: none !important;
    width: 100% !important;
    box-shadow: none !important;
}

.custom-searchable-select .select-options {
    overflow-y: auto;
    flex-grow: 1;
}

.custom-searchable-select .select-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.custom-searchable-select .select-option:hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--text-primary);
}

.custom-searchable-select .select-option.selected {
    background-color: var(--primary);
    color: #ffffff;
    font-weight: 600;
}

/* --- PYCRM LOADING SYSTEM --- */

/* 1. Slim Top Progress Bar */
#global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #d946ef, #3b82f6);
    z-index: 999999;
    transition: width 0.4s cubic-bezier(0.08, 0.82, 0.17, 1), opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.6), 0 0 5px rgba(217, 70, 239, 0.4);
    pointer-events: none;
}

#global-progress-bar.active {
    opacity: 1;
}

/* 2. Topbar Activity Spinner */
.topbar-activity-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    color: var(--primary);
    font-size: 14px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
}

.topbar-activity-spinner.active {
    opacity: 1;
}

.topbar-activity-spinner span {
    font-size: 11px;
    margin-left: 8px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* 3. Fullscreen Operation-Blocking Loader Overlay */
.global-blocking-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(7, 10, 20, 0.65);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: all !important;
    user-select: none;
}

body.light-theme .global-blocking-loader {
    background: rgba(241, 245, 249, 0.65);
}

.global-blocking-loader.active {
    opacity: 1;
    visibility: visible;
}

.blocking-loader-card {
    background: var(--glass-bg, rgba(15, 23, 42, 0.9));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 16px);
    padding: 32px 48px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary-glow, rgba(99, 102, 241, 0.25));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 300px;
    max-width: 440px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.global-blocking-loader.active .blocking-loader-card {
    transform: scale(1);
}

body.light-theme .blocking-loader-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 20px rgba(99, 102, 241, 0.15);
}

.blocking-loader-spinner-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blocking-loader-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(99, 102, 241, 0.15);
    border-top-color: var(--primary, #6366f1);
    border-right-color: #8b5cf6;
    border-radius: 50%;
    animation: blockingSpin 0.9s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}

@keyframes blockingSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.blocking-loader-icon {
    font-size: 22px;
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulseIcon 1.5s ease-in-out infinite alternate;
}

@keyframes pulseIcon {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.blocking-loader-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
    margin: 0;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}

.blocking-loader-message {
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
    font-family: var(--font-body);
}

/* 4. Skeleton Loading Shimmer Animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

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

.skeleton-animated {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.03) 25%, 
        rgba(255, 255, 255, 0.08) 37%, 
        rgba(255, 255, 255, 0.03) 63%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}

body.light-theme .skeleton-animated {
    background: linear-gradient(90deg, 
        rgba(0, 0, 0, 0.04) 25%, 
        rgba(0, 0, 0, 0.09) 37%, 
        rgba(0, 0, 0, 0.04) 63%
    );
    background-size: 200% 100%;
}

/* 4. Skeleton layouts for modules */
.skeleton-view-loader {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 28px;
    width: 100%;
    animation: fadeIn 0.3s ease;
}

.skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.skeleton-title {
    width: 200px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.skeleton-actions {
    display: flex;
    gap: 12px;
}

.skeleton-btn {
    width: 110px;
    height: 38px;
    border-radius: var(--radius-sm);
}

.skeleton-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius-md);
    width: 100%;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
}

.skeleton-table-row {
    height: 40px;
    border-radius: var(--radius-sm);
    width: 100%;
}

/* Button Loading States */
.btn-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

.btn-loading i,
.btn-loading span {
    opacity: 0 !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2.5px solid rgba(255, 255, 255, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spinner-spin 0.6s linear infinite;
    z-index: 10;
}

body.light-theme .btn-loading::after {
    border: 2.5px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
}

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

/* Safety guard: Tab navigation buttons should never show loading spinner or hide label text */
.lead-tab-btn.btn-loading,
.tab-btn.btn-loading,
[data-tab].btn-loading,
.lead-tab-bar .btn-loading {
    color: inherit !important;
    pointer-events: auto !important;
}
.lead-tab-btn.btn-loading::after,
.tab-btn.btn-loading::after,
[data-tab].btn-loading::after,
.lead-tab-bar .btn-loading::after {
    display: none !important;
}
.lead-tab-btn.btn-loading i,
.lead-tab-btn.btn-loading span,
.tab-btn.btn-loading i,
.tab-btn.btn-loading span,
[data-tab].btn-loading i,
[data-tab].btn-loading span {
    opacity: 1 !important;
}

/* Related list icon-only tab buttons */
.lead-tab-bar .rel-icon-tab,
.lead-tab-btn.rel-icon-tab,
.vt-tab.rel-icon-tab,
.tab-btn.rel-icon-tab,
.rel-icon-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    min-width: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #64748b) !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8)) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    position: relative !important;
    outline: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.lead-tab-bar .rel-icon-tab i,
.lead-tab-btn.rel-icon-tab i,
.vt-tab.rel-icon-tab i,
.tab-btn.rel-icon-tab i,
.rel-icon-tab i {
    font-size: 13px !important;
    margin: 0 !important;
    display: inline-block !important;
}

.lead-tab-bar .rel-icon-tab:hover,
.lead-tab-btn.rel-icon-tab:hover,
.vt-tab.rel-icon-tab:hover,
.tab-btn.rel-icon-tab:hover,
.rel-icon-tab:hover {
    color: var(--primary, #6366f1) !important;
    background: var(--bg-hover, rgba(99, 102, 241, 0.06)) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.12) !important;
}

.lead-tab-bar .rel-icon-tab.active,
.lead-tab-btn.rel-icon-tab.active,
.vt-tab.rel-icon-tab.active,
.tab-btn.rel-icon-tab.active,
.rel-icon-tab.active {
    color: var(--primary, #6366f1) !important;
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.16) !important;
}

/* Related List Badge (Count Pill) */
.lead-tab-badge-rel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: rgba(99, 102, 241, 0.12) !important;
    color: var(--primary, #6366f1) !important;
    margin-left: 2px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

.rel-icon-tab:hover .lead-tab-badge-rel,
.rel-icon-tab.active .lead-tab-badge-rel {
    background: var(--primary, #6366f1) !important;
    color: #ffffff !important;
}

/* Dark Theme Adjustments for Related List Tabs */
body.dark-theme .lead-tab-bar .rel-icon-tab,
body.dark-theme .lead-tab-btn.rel-icon-tab,
body.dark-theme .vt-tab.rel-icon-tab,
body.dark-theme .tab-btn.rel-icon-tab,
body.dark-theme .rel-icon-tab {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme .lead-tab-bar .rel-icon-tab:hover,
body.dark-theme .lead-tab-btn.rel-icon-tab:hover,
body.dark-theme .vt-tab.rel-icon-tab:hover,
body.dark-theme .tab-btn.rel-icon-tab:hover,
body.dark-theme .rel-icon-tab:hover {
    color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.16) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.25) !important;
}

body.dark-theme .lead-tab-bar .rel-icon-tab.active,
body.dark-theme .lead-tab-btn.rel-icon-tab.active,
body.dark-theme .vt-tab.rel-icon-tab.active,
body.dark-theme .tab-btn.rel-icon-tab.active,
body.dark-theme .rel-icon-tab.active {
    color: #a5b4fc !important;
    background: rgba(99, 102, 241, 0.24) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

body.dark-theme .lead-tab-badge-rel {
    background: rgba(99, 102, 241, 0.25) !important;
    color: #c7d2fe !important;
}

body.dark-theme .rel-icon-tab:hover .lead-tab-badge-rel,
body.dark-theme .rel-icon-tab.active .lead-tab-badge-rel {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* Lookup field styling */
.vtiger-lookup-container {
    position: relative;
    display: flex;
    flex-direction: column;
}

.vtiger-lookup-input-group {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.vtiger-lookup-input-group:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
}

.vtiger-lookup-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.vtiger-lookup-input {
    flex-grow: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 10px 14px !important;
    font-size: 14px;
    color: var(--text-primary);
    box-shadow: none !important;
}

.vtiger-lookup-buttons {
    display: flex;
    align-items: center;
    padding-right: 8px;
    gap: 4px;
}

.vtiger-lookup-btn {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.vtiger-lookup-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.light-theme .vtiger-lookup-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.vtiger-lookup-clear-btn {
    color: var(--color-priority-high) !important;
}

/* Autocomplete Popover Dropdown */
.vtiger-lookup-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-top: 4px;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.vtiger-lookup-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-speed);
    font-size: 14px;
    color: var(--text-primary);
}

.vtiger-lookup-item:hover, .vtiger-lookup-item.active {
    background: rgba(var(--primary-rgb), 0.15);
}

/* Lookup Modals (vTiger & Product Lookup) */
.vtiger-lookup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes modalScaleUp {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vtiger-lookup-modal-card,
.vtiger-lookup-modal-content {
    background: #111827; /* Solid dark background to prevent bleed */
    color: #f9fafb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 32px);
    margin: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: modalScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme .vtiger-lookup-modal-card,
body.light-theme .vtiger-lookup-modal-content {
    background: #ffffff; /* Solid white background for light mode */
    color: #0f172a;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.vtiger-lookup-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

body.light-theme .vtiger-lookup-modal-header {
    border-bottom: 1px solid #f1f5f9;
}

.vtiger-lookup-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.vtiger-lookup-modal-header h3 i {
    color: var(--primary, #6366f1);
    font-size: 18px;
}

.vtiger-lookup-modal-close {
    background: transparent;
    border: none;
    font-size: 18px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.vtiger-lookup-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #ffffff);
}

body.light-theme .vtiger-lookup-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.vtiger-lookup-modal-search-bar {
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 12px;
    align-items: center;
}

body.light-theme .vtiger-lookup-modal-search-bar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.vtiger-lookup-modal-search-bar .search-input-wrapper {
    position: relative;
    flex: 1;
}

.vtiger-lookup-modal-search-bar .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: 14px;
    pointer-events: none;
}

.vtiger-lookup-modal-search-bar input.modal-search-input {
    width: 100%;
    padding: 9px 14px 9px 40px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary, #f8fafc);
    font-size: 14px;
    outline: none;
    transition: all 0.15s ease;
}

body.light-theme .vtiger-lookup-modal-search-bar input.modal-search-input {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
}

.vtiger-lookup-modal-search-bar input.modal-search-input:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.vtiger-lookup-modal-body {
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 260px;
    background: transparent;
}

.vtiger-lookup-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 13.5px;
}

.vtiger-lookup-table th {
    padding: 11px 18px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted, #94a3b8);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
}

body.light-theme .vtiger-lookup-table th {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.vtiger-lookup-table td {
    padding: 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

body.light-theme .vtiger-lookup-table td {
    border-bottom: 1px solid #f1f5f9;
}

.vtiger-lookup-row {
    cursor: pointer;
    transition: background 0.15s ease;
}

.vtiger-lookup-row:hover {
    background: rgba(99, 102, 241, 0.1);
}

body.light-theme .vtiger-lookup-row:hover {
    background: rgba(99, 102, 241, 0.06);
}

.product-code-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

body.light-theme .product-code-badge {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.product-name-text {
    font-weight: 600;
    color: var(--text-primary, #f8fafc);
}

body.light-theme .product-name-text {
    color: #0f172a;
}

.product-category-text {
    color: var(--text-secondary, #94a3b8);
}

body.light-theme .product-category-text {
    color: #64748b;
}

.product-price-text {
    font-weight: 700;
    color: var(--primary, #6366f1);
}

.product-stock-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.product-stock-badge.stock-in {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

body.light-theme .product-stock-badge.stock-in {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.product-stock-badge.stock-out {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

body.light-theme .product-stock-badge.stock-out {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.current-selected-badge {
    font-size: 11px;
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 500;
}

body.light-theme .current-selected-badge {
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.select-this-prod-btn {
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: var(--primary, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25) !important;
}

.select-this-prod-btn:hover {
    background: var(--primary-hover, #4f46e5) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.35) !important;
}

.vtiger-lookup-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
}

body.light-theme .vtiger-lookup-modal-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}

.modal-pagination-info {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Lookup Modal Search & Pagination Buttons */
.vtiger-lookup-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f8fafc);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-sizing: border-box;
}

body.light-theme .vtiger-lookup-pagination-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vtiger-lookup-pagination-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
    transform: translateY(-1px);
}

body.light-theme .vtiger-lookup-pagination-btn:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.vtiger-lookup-pagination-btn:active:not(:disabled) {
    transform: translateY(0);
}

.vtiger-lookup-pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Primary Search Button in Lookup Modal */
.modal-search-btn {
    padding: 9px 20px;
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #4f46e5 100%));
    color: #ffffff !important;
    border: 1px solid transparent !important;
    box-shadow: 0 3px 12px rgba(99, 102, 241, 0.3);
}

body.light-theme .modal-search-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff !important;
    border: 1px solid transparent !important;
}

.modal-search-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 5px 18px rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}

.modal-search-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/* Quick Create Modal Styling */
.vtiger-quick-create-modal-card {
    width: 700px !important;
    max-width: 95vw !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    border-radius: 16px !important;
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

body.light-theme .vtiger-quick-create-modal-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}

/* Quick Create Header */
.vtiger-quick-create-modal-card .vtiger-lookup-modal-header {
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-lookup-modal-header {
    border-bottom: 1px solid #f1f5f9 !important;
    background: #fafafa !important;
}

.vtiger-quick-create-modal-card .vtiger-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vtiger-quick-create-modal-card .vtiger-modal-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-modal-header-icon {
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
}

.vtiger-quick-create-modal-card .vtiger-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vtiger-quick-create-modal-card .vtiger-modal-title {
    margin: 0 !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #f8fafc) !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    letter-spacing: -0.01em;
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-modal-title {
    color: #0f172a !important;
}

.vtiger-quick-create-modal-card .vtiger-modal-subtitle {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--text-secondary, #94a3b8) !important;
    font-weight: 400 !important;
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-modal-subtitle {
    color: #64748b !important;
}

.vtiger-quick-create-modal-card .vtiger-lookup-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
}

.vtiger-quick-create-modal-card .vtiger-lookup-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f8fafc);
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-lookup-modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Quick Create Body & Grid */
.vtiger-quick-create-body {
    padding: 22px 26px !important;
    max-height: calc(88vh - 145px) !important;
    overflow-y: auto !important;
    flex: 1;
}

.vtiger-quick-create-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 20px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

.vtiger-quick-create-grid .vtiger-form-group.full-width {
    grid-column: span 2 !important;
}

/* Form Groups & Controls inside Quick Create */
.vtiger-quick-create-body .vtiger-form-group {
    display: grid !important;
    grid-template-columns: minmax(120px, 35%) 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    min-width: 0 !important;
}

.vtiger-quick-create-body .vtiger-form-group.full-width {
    grid-column: span 2 !important;
    grid-template-columns: minmax(120px, 17.5%) 1fr !important;
    align-items: start !important;
}

.vtiger-quick-create-body .vtiger-form-group.full-width label {
    padding-top: 8px !important;
}

.vtiger-quick-create-body .vtiger-form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.01em;
}

body.light-theme .vtiger-quick-create-body .vtiger-form-group label {
    color: #475569;
}

.vtiger-quick-create-body .qc-required-asterisk {
    color: #ef4444;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.vtiger-quick-create-body .form-control {
    width: 100%;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}

/* Light Theme Inputs */
body.light-theme .vtiger-quick-create-body input.form-control,
body.light-theme .vtiger-quick-create-body select.form-control,
body.light-theme .vtiger-quick-create-body textarea.form-control {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

body.light-theme .vtiger-quick-create-body input.form-control:hover,
body.light-theme .vtiger-quick-create-body select.form-control:hover,
body.light-theme .vtiger-quick-create-body textarea.form-control:hover {
    border-color: #94a3b8 !important;
}

body.light-theme .vtiger-quick-create-body input.form-control:focus,
body.light-theme .vtiger-quick-create-body select.form-control:focus,
body.light-theme .vtiger-quick-create-body textarea.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    background: #ffffff !important;
}

/* Dark Theme Inputs */
.vtiger-quick-create-body input.form-control,
.vtiger-quick-create-body select.form-control,
.vtiger-quick-create-body textarea.form-control {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

.vtiger-quick-create-body input.form-control:hover,
.vtiger-quick-create-body select.form-control:hover,
.vtiger-quick-create-body textarea.form-control:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

.vtiger-quick-create-body input.form-control:focus,
.vtiger-quick-create-body select.form-control:focus,
.vtiger-quick-create-body textarea.form-control:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
    background: rgba(15, 23, 42, 0.85) !important;
}

/* Input Sizing */
.vtiger-quick-create-body input.form-control,
.vtiger-quick-create-body select.form-control {
    height: 38px !important;
    padding: 8px 12px !important;
}

.vtiger-quick-create-body textarea.form-control {
    min-height: 80px !important;
    max-height: 180px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    resize: vertical !important;
}

/* Custom Select Dropdown Arrow */
.vtiger-quick-create-body select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px 14px !important;
    padding-right: 36px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
}

/* Lookup Input Group inside Quick Create */
.vtiger-quick-create-body .vtiger-lookup-input-group {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

body.light-theme .vtiger-quick-create-body .vtiger-lookup-input-group {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.vtiger-quick-create-body .vtiger-lookup-input-group:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

body.light-theme .vtiger-quick-create-body .vtiger-lookup-input-group:hover {
    border-color: #94a3b8 !important;
}

.vtiger-quick-create-body .vtiger-lookup-input-group:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

body.light-theme .vtiger-quick-create-body .vtiger-lookup-input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.vtiger-quick-create-body .vtiger-lookup-input {
    height: 100% !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
}

.vtiger-quick-create-body .vtiger-lookup-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding-right: 6px !important;
}

.vtiger-quick-create-body .vtiger-lookup-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted, #94a3b8) !important;
    transition: all 0.15s ease !important;
}

.vtiger-quick-create-body .vtiger-lookup-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

body.light-theme .vtiger-quick-create-body .vtiger-lookup-btn:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

.vtiger-quick-create-body .vtiger-lookup-create-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
}

.vtiger-quick-create-body .vtiger-lookup-clear-btn:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* Loading State */
.vtiger-qc-loading {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-secondary, #94a3b8);
    font-size: 13.5px;
}

.vtiger-qc-loading i {
    font-size: 24px;
    color: var(--primary, #6366f1);
}

/* Footer & Buttons */
.vtiger-quick-create-modal-card .vtiger-lookup-modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
}

body.light-theme .vtiger-quick-create-modal-card .vtiger-lookup-modal-footer {
    background: #fafafa !important;
    border-top: 1px solid #f1f5f9 !important;
}

.vtiger-quick-create-modal-card .modal-cancel-btn {
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary, #f8fafc) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.vtiger-quick-create-modal-card .modal-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

body.light-theme .vtiger-quick-create-modal-card .modal-cancel-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .vtiger-quick-create-modal-card .modal-cancel-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    transform: translateY(-1px);
}

.vtiger-quick-create-modal-card .modal-save-btn {
    padding: 8px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border: none !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.vtiger-quick-create-modal-card .modal-save-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.45) !important;
    filter: brightness(1.06) !important;
}

.vtiger-quick-create-modal-card .modal-save-btn:active:not(:disabled) {
    transform: translateY(0) !important;
}

.vtiger-quick-create-modal-card .modal-save-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* --- MASS EDIT MODAL STYLING --- */
.vtiger-mass-edit-modal-card {
    width: 820px !important;
    max-width: 95vw !important;
    max-height: calc(100vh - 32px) !important;
    margin: auto !important;
    border-radius: 16px !important;
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    color: var(--text-primary, #f8fafc);
}

body.light-theme .vtiger-mass-edit-modal-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    color: #0f172a;
}

.vtiger-mass-edit-modal-card .mass-edit-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-header {
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
}

.vtiger-mass-edit-modal-card .mass-edit-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vtiger-mass-edit-modal-card .mass-edit-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-header-icon {
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
}

.vtiger-mass-edit-modal-card .mass-edit-toolbar {
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.vtiger-mass-edit-modal-card .mass-edit-search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.vtiger-mass-edit-modal-card .mass-edit-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
}

.vtiger-mass-edit-modal-card .mass-edit-search-input {
    width: 100%;
    padding: 7px 12px 7px 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #f8fafc);
    font-size: 12.5px;
    outline: none;
    transition: all 0.2s ease;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-search-input {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}

.vtiger-mass-edit-modal-card .mass-edit-search-input:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.vtiger-mass-edit-modal-card .mass-edit-body {
    padding: 16px 24px;
    max-height: calc(88vh - 195px);
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vtiger-mass-edit-modal-card .mass-edit-field-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-field-row {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.vtiger-mass-edit-modal-card .mass-edit-field-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-field-row:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.vtiger-mass-edit-modal-card .mass-edit-field-row.is-active {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-field-row.is-active {
    background: #eef2ff !important;
    border-color: #818cf8 !important;
}

.vtiger-mass-edit-modal-card .mass-edit-field-label {
    width: 200px;
    min-width: 180px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-field-label {
    color: #475569;
}

.vtiger-mass-edit-modal-card .mass-edit-field-row.is-active .mass-edit-field-label {
    color: var(--primary, #6366f1) !important;
}

.vtiger-mass-edit-modal-card .mass-edit-field-input-container {
    flex-grow: 1;
}

.vtiger-mass-edit-modal-card .mass-edit-field-input-container .form-control {
    width: 100%;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #f8fafc);
    outline: none;
    transition: all 0.2s ease;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-field-input-container .form-control {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}

.vtiger-mass-edit-modal-card .mass-edit-field-input-container .form-control:focus {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.vtiger-mass-edit-modal-card .mass-edit-footer {
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

body.light-theme .vtiger-mass-edit-modal-card .mass-edit-footer {
    background: #fafafa;
    border-top: 1px solid #f1f5f9;
}

.vtiger-mass-edit-modal-card .modal-cancel-btn {
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary, #f8fafc) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.light-theme .vtiger-mass-edit-modal-card .modal-cancel-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.vtiger-mass-edit-modal-card .modal-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-1px);
}

body.light-theme .vtiger-mass-edit-modal-card .modal-cancel-btn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

.vtiger-mass-edit-modal-card .modal-save-btn {
    padding: 8px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.vtiger-mass-edit-modal-card .modal-save-btn:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(99, 102, 241, 0.45) !important;
    filter: brightness(1.06) !important;
}

.vtiger-mass-edit-modal-card .modal-save-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* --- SALES SIGNALS SLIDE-OUT DRAWER --- */
.sales-signals-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: rgba(21, 29, 48, 0.85); /* Premium glassmorphism */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-body);
    color: var(--text-primary);
}

body.light-theme .sales-signals-drawer {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: -10px 0 30px rgba(15, 23, 42, 0.08);
}

.sales-signals-drawer.open {
    right: 0;
}

.sales-signals-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.sales-signals-drawer .drawer-header h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.sales-signals-drawer .drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-signals-drawer .text-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.sales-signals-drawer .text-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

.sales-signals-drawer .close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.sales-signals-drawer .close-btn:hover {
    color: var(--color-lost);
}

.sales-signals-drawer .drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Signal Card Styling */
.signal-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    gap: 12px;
    position: relative;
    transition: all 0.25s ease;
    cursor: pointer;
}

body.light-theme .signal-card {
    background: rgba(15, 23, 42, 0.02);
}

.signal-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: rgba(255, 255, 255, 0.06);
}

body.light-theme .signal-card:hover {
    background: rgba(15, 23, 42, 0.04);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.signal-card.unread {
    border-left: 3px solid var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.signal-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

body.light-theme .signal-icon-wrapper {
    background: rgba(15, 23, 42, 0.05);
}

.signal-card.unread .signal-icon-wrapper {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
}

.signal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.signal-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
}

.signal-card-msg {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.signal-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.signal-card-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.signal-card-actions {
    display: flex;
    gap: 8px;
}

.signal-action-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
}

.signal-action-link:hover {
    text-decoration: underline;
}

.signal-delete-btn, .signal-read-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.signal-delete-btn:hover {
    color: var(--color-lost);
    background: rgba(239, 68, 68, 0.1);
}

.signal-read-btn:hover {
    color: var(--color-won);
    background: rgba(16, 185, 129, 0.1);
}

/* Empty State Styling */
.drawer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60%;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.drawer-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.drawer-empty-state p {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-secondary);
}

.drawer-empty-state span {
    font-size: 0.85rem;
}

/* Bell Dot Pulse Animation */
.notification-badge {
    position: relative;
}

.notification-badge .badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-lost); /* red */
    border-radius: 50%;
    display: none; /* Hidden by default */
}

.notification-badge.unread .badge-dot {
    display: block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* SalesSignals Floating Action Button (FAB) */
.sales-signals-fab {
    position: fixed;
    bottom: 155px;
    right: 26px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 990;
    color: #ffffff;
    font-size: 1.4rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sales-signals-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.sales-signals-fab:active {
    transform: scale(0.95);
}
.sales-signals-fab .fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444; /* bright red */
    color: #ffffff;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card, #151d30);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
body.light-theme .sales-signals-fab .fab-badge {
    border-color: #ffffff;
}

/* SalesSignals Categories */
.signal-card.comments {
    border-left: 3px solid #10b981;
}
.signal-card.comments .signal-icon-wrapper {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}
.signal-card.ratings {
    border-left: 3px solid #f59e0b;
}
.signal-card.ratings .signal-icon-wrapper {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
.signal-card.score {
    border-left: 3px solid #a855f7;
}
.signal-card.score .signal-icon-wrapper {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}
.signal-card.general {
    border-left: 3px solid #3b82f6;
}
.signal-card.general .signal-icon-wrapper {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

/* Custom Hover for actions */
.sales-signals-drawer .drawer-header-actions .close-btn {
    font-size: 1.1rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.sales-signals-drawer .drawer-header-actions .close-btn:hover {
    color: var(--primary);
}
.sales-signals-drawer .drawer-header-actions #signals-mark-all-read-btn:hover {
    color: #10b981 !important;
}
.sales-signals-drawer .drawer-header-actions #signals-clear-all-btn:hover {
    color: #ef4444 !important;
}
.sales-signals-drawer .drawer-header-actions #signals-settings-btn:hover {
    color: #6366f1 !important;
}

/* ===== COHORT ANALYSIS STYLES ===== */
.cohort-config-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.cohort-config-grid .config-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cohort-config-grid .config-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.cohort-config-grid .config-field select,
.cohort-config-grid .config-field input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-surface);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}

.cohort-config-grid .config-field select:focus,
.cohort-config-grid .config-field input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.cohort-heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 13px;
    font-family: 'Inter', 'Outfit', sans-serif;
}

.cohort-heatmap-table thead th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

.cohort-heatmap-table .cohort-label-col {
    text-align: left;
    min-width: 120px;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-card) !important;
}

.cohort-heatmap-table .cohort-size-col {
    min-width: 70px;
}

.cohort-label-cell {
    padding: 10px 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    background: var(--bg-card);
    border-radius: 6px;
    position: sticky;
    left: 0;
    z-index: 1;
}

.cohort-size-cell {
    padding: 10px 14px;
    text-align: center;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(99, 102, 241, 0.05);
    border-radius: 6px;
}

.cohort-cell {
    padding: 10px 12px;
    text-align: center;
    font-weight: 600;
    font-size: 12.5px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    min-width: 72px;
}

.cohort-cell:hover:not(.cohort-cell-empty) {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    z-index: 10;
    position: relative;
}

.cohort-cell-empty {
    background: transparent !important;
    cursor: default;
}

.cohort-summary-row td {
    border-top: 2px solid var(--border-color);
}

.cohort-summary-row .cohort-label-cell {
    background: rgba(99, 102, 241, 0.06);
}

.cohort-tooltip {
    position: fixed;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.7;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 220px;
    animation: cohortTooltipIn 0.15s ease-out;
}

@keyframes cohortTooltipIn {
    from { opacity: 0; transform: translateY(4px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cohort-tooltip .tooltip-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    color: #a5b4fc;
}

.cohort-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cohort-tooltip .tooltip-label {
    color: rgba(255,255,255,0.6);
}

.cohort-tooltip .tooltip-value {
    font-weight: 600;
}

.cohort-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
}

.cohort-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.cohort-empty-state h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
}

.cohort-empty-state p {
    font-size: 13px;
    max-width: 400px;
}

.cohort-results-fade-in {
    animation: cohortFadeIn 0.5s ease-out;
}

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

@media (max-width: 900px) {
    .cohort-config-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .cohort-config-grid {
        grid-template-columns: 1fr;
    }
}

/* List View Sortable Headers Styling */
.data-table th.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.data-table th.sortable-header:hover {
    background-color: rgba(var(--primary-rgb), 0.05);
    color: var(--text-primary);
}

.data-table th.sortable-header i.fa-solid {
    margin-right: 2px;
}

/* Dashboard Global Filters Bar styling */
.dashboard-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    margin-bottom: 24px;
    backdrop-filter: var(--backdrop-blur);
    animation: slideUp var(--transition-speed) ease;
    position: relative;
    z-index: 100;
}

.dashboard-filters-bar.collapsed {
    display: none !important;
}

.dashboard-filters-bar:focus-within,
.dashboard-filters-bar:has(.active) {
    z-index: 1050 !important;
}

.dashboard-filters-bar .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
    position: relative;
}

.dashboard-filters-bar .filter-item:focus-within,
.dashboard-filters-bar .filter-item:has(.active) {
    z-index: 1050 !important;
}

.dashboard-filters-bar .filter-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-filters-bar .filter-item label i {
    color: var(--primary);
}

.dashboard-filters-bar .filter-select {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-field);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.dashboard-filters-bar .btn-reset-filters {
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-speed);
}

/* ==================== Unified Timeline Entry Styles ==================== */
.timeline-entry-activity,
.timeline-entry-task,
.timeline-entry-deal,
.timeline-entry-campaign,
.timeline-entry-document {
    border-radius: 6px;
    padding: 10px 12px !important;
    transition: background 0.2s ease;
}

.timeline-entry-activity:hover,
.timeline-entry-task:hover,
.timeline-entry-deal:hover,
.timeline-entry-campaign:hover,
.timeline-entry-document:hover {
    background: rgba(255, 255, 255, 0.03);
}

.timeline-entry-task { border-left-color: #f59e0b !important; }
.timeline-entry-deal { border-left-color: #10b981 !important; }
.timeline-entry-campaign { border-left-color: #8b5cf6 !important; }
.timeline-entry-document { border-left-color: #06b6d4 !important; }

/* ==========================================================================
   Line Item Block – Premium UI
   ========================================================================== */

/* ── Container ── */
.line-item-block-container {
    margin-top: 24px;
    padding: 0;
    grid-column: span 2;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.line-item-block-container:hover {
    box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.18);
}

/* ── Title bar ── */
.line-item-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.line-item-block-title .line-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.3);
}

.line-item-block-title .line-item-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(6, 182, 212, 0.15);
    margin-left: auto;
}

/* ── Table wrapper ── */
.line-item-table-wrap {
    overflow-x: auto;
    padding: 0;
}

.line-item-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.line-item-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.line-item-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.2);
    border-radius: 3px;
}

/* ── Table ── */
.line-item-block-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

/* Header */
.line-item-block-table thead th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--bg-field);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.line-item-block-table thead th:first-child {
    padding-left: 20px;
}

.line-item-block-table thead th:last-child {
    text-align: center;
    width: 56px;
}

/* Body rows */
.line-item-block-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.line-item-block-table tbody tr:last-child {
    border-bottom: none;
}

.line-item-block-table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

/* Cells */
.line-item-block-table tbody td {
    padding: 4px 8px;
    vertical-align: middle;
}

.line-item-block-table tbody td:first-child {
    padding-left: 12px;
}

/* Row number indicator */
.line-item-block-table tbody tr {
    counter-increment: line-row;
}

/* ── Cell inputs ── */
.custom-field-input-cell {
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-body);
    transition: all 0.2s ease;
    outline: none;
}

.custom-field-input-cell:hover {
    border-color: rgba(var(--primary-rgb), 0.2);
    background: rgba(var(--primary-rgb), 0.02);
}

.custom-field-input-cell:focus {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.custom-field-input-cell::placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}

/* Checkbox in cell */
.custom-field-input-cell[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 2px solid var(--border-color);
    cursor: pointer;
    accent-color: var(--primary);
}

/* Select in cell */
select.custom-field-input-cell {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

/* ── Delete row button ── */
.line-item-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.line-item-delete-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    transform: scale(1.1);
}

.line-item-delete-btn:active {
    transform: scale(0.95);
}

/* ── Add row button ── */
.add-line-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 16px 16px;
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed rgba(var(--primary-rgb), 0.3);
    border-radius: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.add-line-row-btn:hover {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.1);
    transform: translateY(-1px);
}

.add-line-row-btn:active {
    transform: translateY(0);
}

.add-line-row-btn i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.add-line-row-btn:hover i {
    transform: rotate(90deg);
}

/* ── Detail view table (read-only) ── */
.line-item-detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.line-item-detail-table thead tr {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-bottom: 1px solid var(--border-color);
}

.line-item-detail-table thead th {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.line-item-detail-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.line-item-detail-table tbody tr:last-child {
    border-bottom: none;
}

.line-item-detail-table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.line-item-detail-table tbody td {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-primary);
}

.line-item-detail-table tbody td:empty::after,
.line-item-detail-table tbody td .line-item-empty {
    color: var(--text-muted);
    font-style: italic;
}

.line-item-detail-table .no-entries-row td {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Row animation ── */
@keyframes lineItemRowIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.line-item-block-table tbody tr {
    animation: lineItemRowIn 0.25s ease forwards;
}

/* ── Light theme overrides ── */
body.light-theme .line-item-block-container {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

body.light-theme .line-item-block-container:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

body.light-theme .line-item-block-title {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.04) 0%, rgba(99, 102, 241, 0.02) 100%);
}

body.light-theme .line-item-block-table thead th {
    background: #f8fafc;
    color: #475569;
}

body.light-theme .custom-field-input-cell:hover {
    background: rgba(99, 102, 241, 0.03);
}

body.light-theme .custom-field-input-cell:focus {
    background: rgba(99, 102, 241, 0.04);
}

body.light-theme .line-item-detail-table thead tr {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
}

body.light-theme .line-item-detail-table thead th {
    color: #475569;
}

.dashboard-clickable-metric-row {
    transition: background-color 0.15s ease-in-out;
}

.dashboard-clickable-metric-row:hover {
    background-color: rgba(99, 102, 241, 0.06) !important;
}

.widget-dropdown-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
}

.widget-dropdown-item:hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: var(--primary) !important;
}

/* Glassmorphism panel & table global custom styling */
.glass-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.glass-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    color: var(--text-primary);
}

.glass-table th {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
}

.glass-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Theme overrides for active tab btn styling in dynamic modules */
.tab-btn.active {
    color: #ffffff !important;
    background: var(--primary) !important;
}

body.light-theme .tab-btn:not(.active) {
    color: var(--text-secondary) !important;
}

body.light-theme .tab-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary) !important;
}

/* Tally Sync & Collapsible Hierarchical Account Styles */
.acc-hierarchy-node {
    margin-top: 2px;
}
.acc-row-header {
    transition: background-color var(--transition-speed);
    border-radius: var(--radius-sm);
}
.acc-row-header:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
body.light-theme .acc-row-header:hover {
    background: rgba(0, 0, 0, 0.02) !important;
}
.acc-children-container {
    margin-left: 4px;
}
.tb-toggle-icon, .toggle-icon {
    cursor: pointer;
    font-size: 10px;
}

/* Custom Company Switcher styles */
.company-switcher-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.company-switcher-btn {
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: all var(--transition-speed);
    backdrop-filter: var(--backdrop-blur);
    user-select: none;
    box-sizing: border-box;
}

.company-switcher-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.08);
    border-color: var(--primary);
}

body.light-theme .company-switcher-btn {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-theme .company-switcher-btn:hover {
    background-color: #f8fafc;
    border-color: #6366f1;
}

.company-switcher-btn .building-icon {
    color: var(--text-secondary);
    font-size: 13px;
}

body.light-theme .company-switcher-btn .building-icon {
    color: #64748b;
}

#active-company-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.company-switcher-btn .caret-icon {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: 4px;
    transition: transform var(--transition-speed) ease;
}

.company-switcher-container.open .company-switcher-btn .caret-icon {
    transform: rotate(180deg);
}

.company-switcher-container.open .company-switcher-btn {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

body.light-theme .company-switcher-container.open .company-switcher-btn {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.company-switcher-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    width: max-content;
    max-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
    background-color: var(--bg-card, #1e293b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    padding: 6px;
    transform-origin: top right;
    animation: dropdownFadeIn var(--transition-speed) ease;
}

.company-switcher-dropdown::-webkit-scrollbar {
    width: 5px;
}

.company-switcher-dropdown::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}

body.light-theme .company-switcher-dropdown {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.company-switcher-container.open .company-switcher-dropdown {
    display: flex;
}

.company-dropdown-item {
    align-items: center;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary, #cbd5e1);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 500;
    transition: all var(--transition-speed);
    user-select: none;
    white-space: nowrap;
    text-align: left;
}

.company-dropdown-item .company-dropdown-name {
    flex: 1;
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.light-theme .company-dropdown-item {
    color: #475569;
}

.company-dropdown-item:hover {
    background-color: rgba(99, 102, 241, 0.12);
    color: var(--text-primary, #ffffff);
}

body.light-theme .company-dropdown-item:hover {
    background-color: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
}

.company-dropdown-item.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #ffffff !important;
    font-weight: 600;
}

.company-dropdown-item .company-item-icon {
    font-size: 12px;
    opacity: 0.7;
}

.company-dropdown-item.active .company-item-icon {
    color: #ffffff;
    opacity: 1;
}

.company-dropdown-item .check-icon {
    margin-left: auto;
    font-size: 11px;
    display: none;
}

.company-dropdown-item.active .check-icon {
    display: block;
    color: #ffffff;
}

/* Premium Compact Line Items Table Styling */
.line-items-section .data-table th,
.line-items-section .data-table td,
form .data-table th,
form .data-table td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
}

.data-table td input:not([type="checkbox"]):not([type="radio"]),
.data-table td select,
.data-table td textarea {
    padding: 6px 10px !important;
    font-size: 13px !important;
    height: 34px !important;
    box-sizing: border-box;
    background-color: var(--bg-field, rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 4px !important;
    color: var(--text-primary) !important;
    width: 100% !important;
}

body.light-theme .data-table td input:not([type="checkbox"]):not([type="radio"]),
body.light-theme .data-table td select,
body.light-theme .data-table td textarea {
    background-color: #ffffff !important;
    border: 1px solid #d2d6dc !important;
    color: #1a202c !important;
}

.data-table td input[readonly] {
    background-color: rgba(255, 255, 255, 0.01) !important;
    border-color: transparent !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

body.light-theme .data-table td input[readonly] {
    background-color: #f7fafc !important;
    border-color: transparent !important;
}

.data-table td input:focus,
.data-table td select:focus {
    border-color: var(--primary, #3b82f6) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.25) !important;
}

.data-table td .searchable-select-trigger {
    height: 34px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    background: var(--bg-field, rgba(255, 255, 255, 0.03)) !important;
}

.data-table td .searchable-select-input {
    padding: 6px 30px 6px 10px !important;
    height: 32px !important;
    font-size: 13px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.data-table td .pq-row-total {
    text-align: right !important;
}

/* Modern trash icon button style */
.pq-row-delete-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s, color 0.2s !important;
    color: var(--danger, #ef4444) !important;
}

.pq-row-delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

/* Custom Widgets for Enquiry Monitoring and Target & Incentive Dashboard */
.em-tab-btn {
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    outline: none;
}
.em-tab-btn.active {
    color: var(--primary, #3b82f6);
    border-bottom-color: var(--primary, #3b82f6);
}
.em-tab-btn:hover {
    color: var(--text-primary, #f1f5f9);
}
.em-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.em-stat-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    padding: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.em-stat-num {
    font-size: 24px;
    font-weight: 800;
}
.em-stat-label {
    font-size: 10px;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    margin-top: 4px;
    display: flex;
    align-items: center;
}
.em-priority-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.em-priority-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    overflow: hidden;
}
.em-priority-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255,255,255,0.01);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.em-priority-header:hover {
    background: rgba(255,255,255,0.03);
}
.em-prio-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.em-prio-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.em-prio-indicator.prio-high { background-color: var(--danger, #ef4444); box-shadow: 0 0 8px var(--danger, #ef4444); }
.em-prio-indicator.prio-medium { background-color: var(--warning, #f59e0b); box-shadow: 0 0 8px var(--warning, #f59e0b); }
.em-prio-indicator.prio-low { background-color: var(--info, #3b82f6); box-shadow: 0 0 8px var(--info, #3b82f6); }

.em-leads-list {
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.05);
}
.em-lead-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.em-lead-item:last-child {
    border-bottom: none;
}
.em-lead-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.em-lead-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.em-lead-name:hover {
    text-decoration: underline;
}
.em-lead-company {
    font-size: 10px;
    color: var(--text-muted);
}
.em-empty-list {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

.td-donut-chart {
    transition: background 0.5s ease;
}

/* Add Widget Placeholder Card */
.add-widget-placeholder-card {
    border: 2px dashed var(--border-color) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    resize: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.add-widget-placeholder-card:hover {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.04) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm) !important;
}

.add-widget-placeholder-card:hover i {
    transform: scale(1.1);
    color: var(--primary-hover) !important;
}

/* Premium Container Card */
.premium-card {
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    margin-bottom: 25px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.light-theme .premium-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.02);
    background: #ffffff;
}
.premium-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* Premium Accordion Header */
.premium-card-header {
    background: var(--bg-field);
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    border-left: 4px solid var(--primary);
}
body.light-theme .premium-card-header {
    background: #f8fafc;
}
.premium-card-header span {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: 0.75px;
}
.premium-card-header i {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

/* --- CUSTOM TOGGLE SWITCH STYLES --- */
.switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.switch-label:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.switch-label span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.switch, .toggle-switch {
    position: relative !important;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

/* Hide default HTML checkbox */
.switch input, .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.switch > .slider, .toggle-switch > .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
}

body.light-theme .switch > .slider, body.light-theme .toggle-switch > .slider {
    background: #e2e8f0;
}

.switch > .slider:before, .toggle-switch > .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.light-theme .switch > .slider:before, body.light-theme .toggle-switch > .slider:before {
    background-color: #ffffff;
}

.switch input:checked + .slider, .toggle-switch input:checked + .slider {
    background: var(--accent-gradient);
    border-color: transparent;
}

.switch input:checked + .slider:before, .toggle-switch input:checked + .slider:before {
    transform: translateX(20px);
    background-color: #ffffff;
}

/* Close button hover effects */
#signals-settings-close-btn {
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
}

#signals-settings-close-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-lost, #ef4444) !important;
    transform: rotate(90deg);
}

body.light-theme #signals-settings-close-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Password Visibility Toggle Styles */
.password-input-container {
    position: relative;
    width: 100%;
}

.password-input-container input {
    width: 100%;
    padding-right: 42px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: color var(--transition-speed, 0.2s) ease;
    z-index: 10;
}

.password-toggle-btn:hover {
    color: var(--primary, #6366f1);
}


/* ============================================
   LIST PAGE UI ENHANCEMENTS
   ============================================ */

#default-details-breadcrumb-container,
.vtiger-breadcrumb {
    display: none !important;
}

.vtiger-breadcrumb .breadcrumb-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vtiger-breadcrumb .breadcrumb-parent-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.18);
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.vtiger-breadcrumb .breadcrumb-parent-link:hover {
    background: rgba(99, 102, 241, 0.16);
    color: var(--primary, #6366f1);
    transform: translateY(-1px);
}

.vtiger-breadcrumb .breadcrumb-sep {
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
    margin: 0 2px;
}

.vtiger-breadcrumb .active-crumb {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vtiger-breadcrumb .header-id-pill {
    display: none !important;
}

.vtiger-breadcrumb .header-icon-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary, #64748b);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.vtiger-breadcrumb .header-icon-action:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary, #6366f1);
    border-color: rgba(99, 102, 241, 0.2);
}

.vtiger-breadcrumb .breadcrumb-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vtiger-breadcrumb .header-status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(99, 102, 241, 0.12);
    color: var(--primary, #6366f1);
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.vtiger-breadcrumb .header-metric-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.vtiger-breadcrumb .breadcrumb-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtiger-breadcrumb .header-pager-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    padding: 2px 6px;
    border-radius: 8px;
}

body.dark-theme .vtiger-breadcrumb .header-pager-box {
    background: rgba(255, 255, 255, 0.05);
}

.vtiger-breadcrumb .header-pager-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748b);
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
}

.vtiger-breadcrumb .header-pager-btn:hover:not(:disabled) {
    background: var(--primary, #6366f1);
    color: #ffffff;
}

.vtiger-breadcrumb .header-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vtiger-breadcrumb .header-pager-info {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    padding: 0 4px;
    white-space: nowrap;
}

.vtiger-breadcrumb .header-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.vtiger-breadcrumb .header-quick-btn.primary {
    background: var(--primary, #6366f1);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.vtiger-breadcrumb .header-quick-btn.primary:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}

.vtiger-breadcrumb .header-quick-btn.secondary {
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1e293b);
    border-color: var(--border-color, rgba(0, 0, 0, 0.12));
}

.vtiger-breadcrumb .header-quick-btn.secondary:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: var(--primary, #6366f1);
    color: var(--primary, #6366f1);
}

/* --- Premium Tagging System Styling --- */
.header-tags-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    user-select: none;
}

.tag-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.tag-pill .remove-tag-btn {
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: #ffffff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    transition: background 0.15s ease;
    padding: 0;
    margin-left: 2px;
}

.tag-pill .remove-tag-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

.add-tag-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary, #6366f1);
    border: 1px dashed rgba(99, 102, 241, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-tag-trigger-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--primary, #6366f1);
    transform: translateY(-1px);
}

.tag-input-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tag-inline-input {
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 11px;
    border: 1px solid var(--primary, #6366f1);
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1e293b);
    outline: none;
    width: 105px;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.tag-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 150px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.tag-autocomplete-item {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tag-autocomplete-item:hover, .tag-autocomplete-item.active {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary, #6366f1);
}

.tag-autocomplete-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* --- 2. View Header — Elevated Hero Section --- */
.view-header {
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    flex-wrap: nowrap;
    gap: 12px;
}

.view-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

.header-titles h1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Canonical Vtiger 7 List View Header Title & Breadcrumb */
#view-modular-container[data-view-type="list"] .view-header::after,
.view-header:has(#default-list-header-title)::after {
    display: none !important;
}

#default-list-header-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    gap: 8px !important;
    letter-spacing: normal !important;
}

#default-list-title-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 17px !important;
    white-space: nowrap !important;
}

.list-header-module-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-secondary, #64748b) !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: color 0.15s ease, opacity 0.15s ease !important;
    line-height: 1 !important;
    user-select: text;
}

.list-header-module-label:hover {
    color: var(--primary, #6366f1) !important;
}

.list-header-sep {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted, #94a3b8) !important;
    font-size: 11px !important;
    opacity: 0.6 !important;
    margin: 0 1px !important;
    line-height: 1 !important;
    user-select: none;
}

.list-header-sep i {
    font-size: 11px !important;
}

.list-header-filter-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #0f172a) !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    user-select: text;
}

body.light-theme .list-header-filter-name {
    color: #0f172a !important;
}

body.dark-theme .list-header-filter-name {
    color: #f8fafc !important;
}


/* Record count badge in header */
.record-count-badge {
    display: none !important;
}

/* --- 3. View Switcher — Premium Pill Toggle --- */
.view-switcher-bar {
    background-color: var(--bg-field);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    padding: 3px;
    border-radius: var(--radius-sm);
}

.view-switch-btn {
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 34px;
    height: 32px;
    font-size: 13px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-switch-btn i {
    transition: transform 0.2s ease;
}

.view-switch-btn:hover i {
    transform: scale(1.15);
}

.view-switch-btn.active {
    background: var(--primary) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    color: #ffffff !important;
    font-weight: 700;
}
.view-switch-btn.active i {
    color: #ffffff !important;
}

.btn-secondary.active,
.secondary-btn.active,
.btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* --- 4. Button Micro-interactions --- */
.primary-btn i,
.btn-primary i,
.btn-secondary i,
.secondary-btn i {
    transition: transform 0.2s ease;
}

.primary-btn:hover i,
.btn-primary:hover i,
.btn-secondary:hover i,
.secondary-btn:hover i {
    transform: rotate(90deg);
}

.btn-secondary, .secondary-btn {
    position: relative;
    overflow: hidden;
}

.btn-secondary::before, .secondary-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    background: var(--accent-gradient);
    border-radius: 0 3px 3px 0;
    transition: transform 0.25s ease;
}

.btn-secondary:hover::before, .secondary-btn:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* --- 5. Table Container — Premium Glass Card with Fixed Scroll Container --- */
#default-list-view,
#expenses-list-view,
#sd-tickets-list-view {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#view-modular-container .view-header,
#default-list-view .view-header {
    flex-shrink: 0 !important;
    margin-bottom: 14px !important;
}

#default-list-view .table-container,
#expenses-list-view .table-container,
#sd-tickets-list-view .table-container,
#view-modular-container[data-view-type="list"] > .table-container,
.table-container:has(> #default-data-table) {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    background: var(--bg-card);
    overflow: auto !important;
    display: block !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    position: relative;
    transition: box-shadow 0.3s ease;
}

#default-pagination {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    padding: 8px 16px !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

#default-pagination .pagination-right {
    padding-right: 85px !important;
}

#default-list-view .table-container::before,
#expenses-list-view .table-container::before,
#sd-tickets-list-view .table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-gradient);
    z-index: 25;
    opacity: 0.7;
    pointer-events: none;
}

#default-list-view .table-container:hover,
#expenses-list-view .table-container:hover,
#sd-tickets-list-view .table-container:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-theme #default-list-view .table-container:hover,
body.light-theme #expenses-list-view .table-container:hover,
body.light-theme #sd-tickets-list-view .table-container:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* --- 6. Table Header — Sophisticated Column Headers (Fixed / Sticky) --- */
.data-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
}

.data-table thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 21;
    background-color: var(--bg-modal, var(--bg-card));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}

body.light-theme .data-table thead tr:first-child th {
    background-color: #ffffff;
}

/* Fix search row (row 2: inline column filter inputs) */
.data-table thead tr.search-row-tr td {
    position: sticky;
    top: var(--th-header-height, 41px);
    z-index: 20;
    background-color: var(--bg-modal, var(--bg-card)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--border-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

body.light-theme .data-table thead tr.search-row-tr td {
    background-color: #ffffff !important;
}

.data-table thead tr:first-child {
    border-bottom: 2px solid transparent;
    background-image: linear-gradient(var(--bg-field), var(--bg-field)), var(--accent-gradient);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.data-table th:first-child,
.data-table td:first-child {
    padding-left: 16px !important;
}

.data-table th:last-child,
.data-table td:last-child {
    padding-right: 24px !important;
}

.data-table th.sortable-header {
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    min-width: 120px;
}

.data-table th[data-field="status"],
.data-table th[data-field="salesorders_status"],
.data-table th[data-field="invoicestatus"],
.data-table th[data-field="quotestage"],
.data-table th[data-field="postatus"],
.data-table th[data-field="leadstatus"],
.data-table th[data-field="ticketstatus"],
.data-table th[data-field="priority"],
.data-table th[data-field="stage"] {
    min-width: 140px;
}

.data-table th[data-field*="_no"],
.data-table th[data-field*="number"],
.data-table th[data-field="createdtime"],
.data-table th[data-field="modifiedtime"] {
    min-width: 155px;
}

.data-table th.sortable-header:hover {
    background-color: rgba(var(--primary-rgb), 0.06);
    color: var(--text-primary);
}

.data-table th.sortable-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background: var(--primary);
    transition: transform 0.25s ease;
    border-radius: 2px;
}

.data-table th.sortable-header:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* --- 7. Table Rows — Elevated Data Display --- */
.data-table tbody tr:nth-child(even) {
    background-color: rgba(var(--primary-rgb), 0.015);
}

body.light-theme .data-table tbody tr:nth-child(even) {
    background-color: rgba(var(--primary-rgb), 0.02);
}

.data-table tr.clickable-row td:first-child {
    position: relative;
}

.data-table tr.clickable-row td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent-gradient);
    transform: scaleY(0);
    transition: transform 0.2s ease;
    border-radius: 0 3px 3px 0;
    z-index: 1;
}

.data-table tr.clickable-row:hover td:first-child::before {
    transform: scaleY(1);
}

.data-table tr.clickable-row:hover {
    background-color: rgba(var(--primary-rgb), 0.06) !important;
}

.data-table tr.clickable-row.selected-row {
    background-color: rgba(var(--primary-rgb), 0.05) !important;
    box-shadow: inset 3px 0 0 var(--primary) !important;
}

body.light-theme .data-table tr.clickable-row.selected-row {
    background-color: #f6f8ff !important;
}

body.light-theme .data-table tr.clickable-row.selected-row:hover {
    background-color: #edf1fe !important;
}

.data-table tr.clickable-row.selected-row td {
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.12) !important;
}

/* Row entrance animation */
@keyframes rowSlideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.data-table tbody tr.clickable-row {
    animation: rowSlideIn 0.3s ease forwards;
    content-visibility: auto;
    contain-intrinsic-size: auto 48px;
}

.data-table tbody tr.clickable-row:nth-child(1) { animation-delay: 0.02s; }
.data-table tbody tr.clickable-row:nth-child(2) { animation-delay: 0.04s; }
.data-table tbody tr.clickable-row:nth-child(3) { animation-delay: 0.06s; }
.data-table tbody tr.clickable-row:nth-child(4) { animation-delay: 0.08s; }
.data-table tbody tr.clickable-row:nth-child(5) { animation-delay: 0.10s; }
.data-table tbody tr.clickable-row:nth-child(6) { animation-delay: 0.12s; }
.data-table tbody tr.clickable-row:nth-child(7) { animation-delay: 0.14s; }
.data-table tbody tr.clickable-row:nth-child(8) { animation-delay: 0.16s; }
.data-table tbody tr.clickable-row:nth-child(9) { animation-delay: 0.18s; }
.data-table tbody tr.clickable-row:nth-child(10) { animation-delay: 0.20s; }
.data-table tbody tr.clickable-row:nth-child(n+11) { animation-delay: 0.22s; }

/* Enhanced checkbox */
.checkbox-cell input[type="checkbox"] {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    transition: box-shadow 0.2s ease;
}

.checkbox-cell input[type="checkbox"]:checked {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* --- 8. Search Row — Refined Inline Filters --- */
.search-row-tr {
    border-bottom: 2px solid transparent !important;
    background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, rgba(var(--primary-rgb), 0.2), transparent) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

.btn-table-search {
    background: var(--primary, #6366f1) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);
    transition: all 0.2s ease;
}

.btn-table-search:hover {
    background: var(--primary-hover, #4f46e5) !important;
    opacity: 1;
    transform: none;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.column-search-input {
    border-radius: 6px;
    transition: all 0.25s ease;
}

.column-search-input::placeholder {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    opacity: 0.7;
}

.column-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    background-color: var(--bg-card);
}

/* --- 9. Pagination — Premium Navigation Controls --- */
.table-pagination {
    margin-top: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--bg-card);
    backdrop-filter: var(--backdrop-blur);
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.pagination-left::before {
    content: '\f0ca';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 11px;
    color: var(--primary);
    opacity: 0.7;
}

.pagination-left span {
    font-weight: 600;
    color: var(--text-primary);
}

.page-btn {
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(var(--primary-rgb), 0.15);
}

.page-info {
    background: rgba(var(--primary-rgb), 0.08);
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
}

.page-info span {
    color: var(--primary);
    font-weight: 700;
}

/* --- 10. Mass Action Bar — Premium Floating Strip --- */
.mass-action-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    background: rgba(var(--primary-rgb), 0.04);
    animation: massBarSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.light-theme .mass-action-bar {
    background: rgba(var(--primary-rgb), 0.03);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
}

@keyframes massBarSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mass-selected-badge {
    background: var(--accent-gradient);
    color: #ffffff;
    border: none;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
}

/* --- 11. Empty State — Engaging Illustration --- */
.list-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
}

.list-empty-state-icon {
    font-size: 48px;
    color: var(--text-muted);
    opacity: 0.4;
    animation: emptyBounce 2s ease-in-out infinite;
}

@keyframes emptyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.list-empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}

.list-empty-state-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 300px;
    text-align: center;
    line-height: 1.5;
}

/* --- 12. Row Data Formatting Enhancements --- */
.data-table td .status-badge {
    position: relative;
    padding-left: 18px;
    letter-spacing: 0.3px;
}

.data-table td .status-badge::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.data-table td a.email-link,
.data-table td a.phone-link,
.data-table td a.website-link {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

.data-table td a.email-link::after,
.data-table td a.phone-link::after,
.data-table td a.website-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.25s ease;
}

.data-table td a.email-link:hover::after,
.data-table td a.phone-link:hover::after,
.data-table td a.website-link:hover::after {
    width: 100%;
}

.data-table td a.lookup-link {
    color: var(--primary);
    text-decoration: none;
    position: relative;
    font-weight: 500;
    transition: color 0.2s ease;
}

.data-table td a.lookup-link:hover {
    color: var(--primary-hover);
}

.data-table td a.lookup-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent-gradient);
    transition: width 0.25s ease;
    border-radius: 1px;
}

.data-table td a.lookup-link:hover::after {
    width: 100%;
}

.data-table td .tbl-name,
.data-table td.tbl-name {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Currency value highlight */
.data-table td strong {
    color: var(--color-won);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Phone icon animation */
.data-table td .phone-icon {
    transition: transform 0.2s ease;
    font-size: 11px;
}

.data-table td a.phone-link:hover .phone-icon {
    transform: rotate(-15deg) scale(1.1);
}

/* --- 13. Custom Scrollbar --- */
.table-container::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.4);
}

body.light-theme .table-container::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.15);
}

body.light-theme .table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.3);
}

/* --- Row Actions Column Enhancement --- */
.row-actions-cell {
    width: 70px;
}

.tbl-actions .action-icon-btn,
.tbl-actions .row-action-icon,
.tbl-action-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm, 6px) !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-secondary, #64748b) !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.tbl-actions .action-icon-btn:hover,
.tbl-actions .row-action-icon:hover,
.tbl-action-btn:hover,
.tbl-action-btn.edit-btn:hover {
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.12) !important;
    border-color: var(--primary, #6366f1) !important;
    color: var(--primary, #6366f1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(var(--primary-rgb, 99, 102, 241), 0.15) !important;
}

.tbl-action-btn.danger-btn {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
    color: #ef4444 !important;
    box-shadow: none !important;
}

.tbl-action-btn.danger-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Blueprint Actions & Row Action Buttons */
.blueprint-actions-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.blueprint-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    background: rgba(99, 102, 241, 0.06) !important;
    color: var(--primary, #6366f1) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    outline: none !important;
}

.blueprint-action-btn:hover {
    background: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

.blueprint-action-btn:active {
    transform: translateY(0) scale(0.95) !important;
}

.blueprint-action-btn.delete,
.blueprint-action-btn.delete-tr-btn {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.blueprint-action-btn.delete:hover,
.blueprint-action-btn.delete-tr-btn:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

.blueprint-action-btn.delete:active,
.blueprint-action-btn.delete-tr-btn:active {
    transform: translateY(0) scale(0.95) !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Manage columns button hover */
#default-manage-columns-btn:hover {
    color: var(--primary) !important;
    transform: scale(1.1);
}
/* --- 14. PRESET PREMIUM UI UPGRADES & MICRO-INTERACTIONS --- */

/* Scrollbar standardization globally */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.2);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.45);
}
body.light-theme ::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.15);
}
body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.35);
}

/* Button Upgrades (Linear Gradients & Shadows) */
.primary-btn, .btn-primary {
    background: var(--accent-gradient);
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.25) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease !important;
}
.primary-btn:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.4) !important;
    filter: brightness(1.05) !important;
}
.primary-btn:active, .btn-primary:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2) !important;
}

.btn-secondary, .secondary-btn {
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-color) !important;
}
.btn-secondary:hover, .secondary-btn:hover {
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-1px) !important;
}
.btn-secondary:active, .secondary-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.danger-btn {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.danger-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(244, 63, 94, 0.4) !important;
}

/* Inputs Glow Focus State */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important;
    outline: none !important;
    background-color: var(--bg-field) !important;
    transition: all 0.2s ease !important;
}

/* Modern Status Badges & Pills */
.status-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}
.badge-won, .badge-success, .badge-completed, .badge-approved, .badge-resolved {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}
.badge-lost, .badge-danger, .badge-rejected, .badge-escalated {
    background-color: rgba(244, 63, 94, 0.12) !important;
    color: #f43f5e !important;
    border: 1px solid rgba(244, 63, 94, 0.25) !important;
}
.badge-lead, .badge-open {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}
.badge-contacted, .badge-warning, .badge-in-progress, .badge-pending {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
.badge-qualified {
    background-color: rgba(139, 92, 246, 0.12) !important;
    color: #8b5cf6 !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
.badge-unqualified, .badge-on-hold, .badge-closed {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(100, 116, 139, 0.25) !important;
}

/* Analytics Card hover and styling upgrades */
.analytics-card, .dashboard-grid > div {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
    contain: layout style paint;
    will-change: transform;
}
.analytics-card:hover, .dashboard-grid > div:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md), 0 10px 30px rgba(var(--primary-rgb), 0.08);
}
.analytics-card::before, .dashboard-grid > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.25s ease;
}
.analytics-card:hover::before, .dashboard-grid > div:hover::before, .card:hover::before {
    background: var(--accent-gradient);
}

/* Table Row Highlights */
.data-table tbody tr {
    transition: background-color 0.2s ease;
}
.data-table tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.04) !important;
}
body.light-theme .data-table tbody tr:hover {
    background-color: rgba(var(--primary-rgb), 0.02) !important;
}

/* Auth / Login Card Upgrade */
.auth-card {
    background: rgba(21, 29, 48, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: var(--shadow-lg), 0 0 80px rgba(99, 102, 241, 0.15) !important;
    backdrop-filter: blur(24px) !important;
}
body.light-theme .auth-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: var(--shadow-lg), 0 0 80px rgba(79, 70, 229, 0.08) !important;
}
.auth-btn {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3) !important;
    transition: all 0.25s ease !important;
}
.auth-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.45) !important;
}
.auth-form-group input {
    background-color: var(--bg-field) !important;
    border: 1px solid var(--border-color) !important;
    transition: all 0.25s ease !important;
}
.auth-form-group input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
}

/* Sidebar navigation item transformations */
.nav-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500;
}
.nav-item:hover {
    background-color: rgba(var(--primary-rgb), 0.06) !important;
    transform: translateX(4px);
}
.nav-item.active {
    background: var(--accent-gradient) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.35) !important;
    font-weight: 600;
}
.sidebar-user {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    padding: 12px !important;
    border: 1px solid var(--border-color);
    margin-top: 15px;
    transition: all 0.25s ease;
}
.sidebar-user:hover {
    background: rgba(var(--primary-rgb), 0.04);
    border-color: var(--primary);
}
body.light-theme .sidebar-user {
    background: rgba(0, 0, 0, 0.02);
}
body.light-theme .sidebar-user:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

/* Spotlight Search (Cmd+K) Command Palette */
#spotlight-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#spotlight-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#spotlight-modal {
    width: 90%;
    max-width: 650px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

#spotlight-overlay.show #spotlight-modal {
    transform: scale(1);
    opacity: 1;
}

.spotlight-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(var(--primary-rgb), 0.03);
}

.spotlight-input-wrapper i {
    font-size: 20px;
    color: var(--text-muted);
}

#spotlight-input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 24px 20px;
    font-size: 22px;
    color: var(--text-primary);
    outline: none;
    box-shadow: none;
}

#spotlight-input::placeholder {
    color: var(--text-muted);
    font-weight: 300;
}

#spotlight-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.spotlight-result-item {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.15s ease;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.spotlight-result-item.selected,
.spotlight-result-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    transform: translateX(4px);
}

.spotlight-result-item i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.spotlight-result-item.selected i,
.spotlight-result-item:hover i {
    color: var(--primary);
}

.spotlight-result-item .title {
    font-size: 15px;
    font-weight: 500;
    flex: 1;
}

.spotlight-result-item .shortcut {
    font-size: 11px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 600;
}

.spotlight-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    font-size: 15px;
}

/* ── Field Voice Dictation Mic Button ── */
.field-voice-mic-container {
    position: fixed;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.field-voice-mic-container.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.field-voice-mic-btn {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.light-theme .field-voice-mic-btn {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.field-voice-mic-btn:hover {
    background: var(--primary, #6366f1);
    color: #ffffff;
    border-color: var(--primary, #6366f1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.field-voice-mic-icon {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.field-voice-mic-pulse {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    opacity: 0;
    pointer-events: none;
}

.field-voice-mic-container.is-listening .field-voice-mic-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.6) !important;
}

.field-voice-mic-container.is-listening .field-voice-mic-pulse {
    animation: field-mic-pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes field-mic-pulse-ring {
    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Tooltip */
.field-voice-mic-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
}

.field-voice-mic-container:hover .field-voice-mic-tooltip,
.field-voice-mic-container.is-listening .field-voice-mic-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Product Lookup Search & Selection (vTiger Style) */
.product-lookup-group {
    display: flex;
    gap: 4px;
    align-items: center;
    width: 100%;
    max-width: 280px;
}

.product-lookup-group .searchable-select-wrapper {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 38px);
}

.product-lookup-btn {
    height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15)) !important;
    border-radius: 6px !important;
    color: var(--text-primary, #f8fafc) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.product-lookup-btn:hover {
    background: var(--primary, #3b82f6) !important;
    color: #ffffff !important;
    border-color: var(--primary, #3b82f6) !important;
}

.product-code-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
}

/* International Phone Input Component Styles */
.intl-phone-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
}

.intl-country-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 100%;
    min-height: 38px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-right: none;
    border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
    background: var(--bg-field, #f8fafc);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.intl-country-picker:hover {
    background: var(--bg-hover, #f1f5f9);
    border-color: var(--primary, #3b82f6);
}

.intl-country-picker .intl-flag {
    font-size: 17px;
    line-height: 1;
}

.intl-country-picker .intl-dial-code {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}

.intl-country-picker .intl-arrow {
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
    margin-left: 2px;
}

.intl-input-field {
    flex: 1 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin: 0 !important;
}

.intl-country-dropdown {
    position: absolute;
    z-index: 99999;
    width: 290px;
    max-height: 320px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: intlDropdownFade 0.15s ease-out;
}

@keyframes intlDropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.intl-search-box {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-field, #f8fafc);
}

.intl-search-icon {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    margin-right: 8px;
}

.intl-search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    font-size: 13px !important;
    color: var(--text-primary, #0f172a) !important;
    padding: 2px 0 !important;
}

.intl-country-list {
    overflow-y: auto;
    max-height: 260px;
    padding: 4px 0;
}

.intl-country-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: background 0.12s ease;
}

.intl-country-option:hover {
    background: var(--bg-hover, rgba(59, 130, 246, 0.08));
}

.intl-country-option.selected {
    background: var(--bg-active, rgba(59, 130, 246, 0.15));
    font-weight: 600;
}

.intl-opt-flag {
    font-size: 17px;
    width: 22px;
    text-align: center;
}

.intl-opt-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intl-opt-code {
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
}

/* Redesigned Profile Preferences Modal */
.pref-modal-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    border-radius: 20px;
    width: 540px;
    max-width: 95%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    color: var(--text-primary);
    backdrop-filter: blur(16px);
    animation: prefModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes prefModalPop {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.pref-modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.pref-modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: transparent;
    transform: rotate(90deg) scale(1.05);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.pref-modal-banner {
    position: relative;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
    height: 110px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0;
    overflow: visible;
}

.pref-modal-banner-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    background-size: 14px 14px;
    opacity: 0.5;
}

.pref-modal-avatar-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(42px);
    z-index: 2;
}

.pref-modal-avatar-ring {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 4px;
    background: var(--bg-card, #ffffff);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.pref-modal-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-field, #f8fafc);
    display: block;
}

.pref-modal-avatar-overlay {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(3px);
}

.pref-modal-avatar-ring:hover .pref-modal-avatar-overlay {
    opacity: 1;
}

.pref-modal-user-name {
    font-size: 19px;
    font-weight: 700;
    margin-top: 8px;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.pref-modal-user-role {
    font-size: 11px;
    color: var(--primary, #6366f1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    margin-top: 4px;
}

.pref-modal-form {
    padding: 20px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.pref-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-card, rgba(255, 255, 255, 0.6));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.pref-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.pref-section-title i {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.pref-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pref-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pref-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.pref-required {
    color: #ef4444;
}

.pref-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.pref-input-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.pref-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    outline: none;
    background: var(--bg-field, #f8fafc);
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pref-input:hover {
    border-color: var(--border-hover, #cbd5e1);
}

.pref-input:focus {
    border-color: var(--primary, #6366f1);
    background: var(--bg-card, #ffffff);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.pref-input-wrapper:focus-within .pref-input-icon {
    color: var(--primary, #6366f1);
}

.pref-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
}

.pref-btn-cancel {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pref-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
    border-color: var(--border-hover, #cbd5e1);
}

.pref-btn-save {
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--primary, #6366f1) 0%, #4f46e5 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pref-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45);
}
/* Universal Leads-Style Arrow Steps Status Bar */
.arrow-steps-container {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.arrow-steps {
    overflow-x: auto;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1px 0;
    height: 26px;
    scrollbar-width: thin;
}
.arrow-steps .step, .arrow-steps .lasty {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #475569;
    cursor: pointer;
    margin: 0 2px;
    padding: 2px 8px 2px 18px;
    position: relative;
    background-color: #d9e3f7;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    text-transform: none;
    height: 24px;
    line-height: 20px;
}

.arrow-steps .step:after,
.arrow-steps .step:before,
.arrow-steps .lasty:before {
    content: " ";
    position: absolute;
    top: 0;
    right: -11px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 11px solid #d9e3f7;
    z-index: 2;
    transition: border-color 0.15s ease;
}

.arrow-steps .lasty:after {
    display: none !important;
}

.arrow-steps .lasty {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding-right: 9px;
}

.arrow-steps .step:before, .arrow-steps .lasty:before {
    right: auto;
    left: 0;
    border-left: 11px solid var(--bg-card, #fff);
    z-index: 1;
}

.arrow-steps .step:first-child:before {
    display: none;
}

.arrow-steps .step:first-child:after {
    border-left: 11px solid #6366f1;
}

.arrow-steps .step:first-child {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    background-color: #6366f1;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding-left: 9px;
}

.arrow-steps .step.current, .arrow-steps .lasty.current {
    color: #fff;
    background-color: #23468c;
    font-weight: 700;
}

.arrow-steps .step.current:after {
    border-left: 11px solid #23468c;
}

.arrow-steps .step span, .arrow-steps .lasty span {
    position: relative;
    white-space: nowrap;
}

.arrow-steps::-webkit-scrollbar {
    height: 3px;
}

.arrow-steps::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.arrow-steps::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Universal Key Fields & Summary Layout Card Styles for All Modules */
.lead-three-columns-layout, .dashboard-analytics-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 20px;
    align-items: start;
    width: 100%;
}

.lead-card {
    background: var(--bg-card, rgba(255, 255, 255, 0.45));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    border-radius: var(--radius-md, 12px);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: var(--backdrop-blur, blur(10px));
    margin-bottom: 20px;
}

.lead-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 10px;
}

.lead-details-grid-custom {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-details-grid-custom .default-detail-item {
    display: grid;
    grid-template-columns: 160px 1fr !important;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    font-size: 13px;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lead-details-grid-custom .default-detail-item > div:last-child,
.lead-details-grid-custom .default-detail-item span,
.lead-details-grid-custom .default-detail-item a,
.summary-info-item a,
.summary-info-item span,
.default-detail-item a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0;
}

.lead-details-grid-custom .default-detail-item:hover {
    background: rgba(99, 102, 241, 0.05);
    border-color: var(--border-hover);
}

/* Leads Summary Tab Redesign Styles */
#module-details-tab-content-summary .dashboard-analytics-grid {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
}

#module-details-tab-content-summary .dashboard-analytics-grid > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-width: 0 !important;
}

#module-key-fields-card[style*="display: none"] {
    display: none !important;
}

.summary-info-item {
    background: var(--bg-field, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-sm, 8px);
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.summary-info-item:hover {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

#summary-log-type-selector .btn-type-pill:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

#summary-action-telecrm:hover,
#summary-action-quickbook:hover,
#summary-action-convert:hover,
#summary-action-enrich:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

@media (max-width: 1024px) {
    #module-details-tab-content-summary .dashboard-analytics-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Layout containment for independent sections - limits reflow scope */
.sidebar {
    contain: layout style;
}

/* GPU layer promotion for frequently animated elements */
.modal-content,
.toast-container,
.toast {
    will-change: transform, opacity;
}

/* Respect user's reduced motion preference + major perf boost */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Skip rendering of closed modals — ~45 pre-rendered overlays in the DOM */
.modal-overlay[style*="display: none"],
.modal-overlay[style*="display:none"],
.modal[style*="display: none"],
.modal[style*="display:none"] {
    content-visibility: hidden;
    contain-intrinsic-size: 0 0;
}

/* Global Modal Overlay — viewport-centered, no scroll confusion */
.modal-overlay,
.custom-modal-overlay,
.vtiger-lookup-modal-overlay,
.crm-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
}

.custom-modal-container,
.modal-card,
.modal-container,
.modal-content,
.modal-dialog,
.vtiger-lookup-modal-card,
.vtiger-quick-create-modal-card,
.vtiger-mass-edit-modal-card {
    margin: auto !important;
    max-height: calc(100vh - 32px) !important;
}

@media (max-height: 720px) {
    .modal-overlay,
    .custom-modal-overlay,
    .vtiger-lookup-modal-overlay,
    .crm-modal-overlay {
        padding: 8px !important;
    }
    .custom-modal-container,
    .modal-card,
    .modal-container,
    .modal-content,
    .modal-dialog,
    .vtiger-lookup-modal-card,
    .vtiger-quick-create-modal-card,
    .vtiger-mass-edit-modal-card {
        max-height: calc(100vh - 16px) !important;
    }
}

/* Global Sleek Custom Webkit Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.5);
}

/* Elevated Global Button Focus & Active States */
.btn-primary, button.primary-btn {
    background: var(--accent-gradient);
    border: 1px solid transparent;
    color: #ffffff;
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover, button.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.45);
    filter: brightness(1.08);
}

.btn-primary:active, button.primary-btn:active {
    transform: translateY(0);
}

/* Sleek Badge Pill Styling */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.badge-pill-success {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.badge-pill-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.badge-pill-danger {
    background: rgba(244, 63, 94, 0.15);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.badge-pill-info {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Redesigned Edit Company Modal UI */
.company-modal-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    width: 720px;
    max-width: 95vw;
    max-height: 90vh;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary, #0f172a);
    animation: companyModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes companyModalPop {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-input-field {
    width: 100%;
    height: 38px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--text-primary, #0f172a) !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.modal-input-field:focus {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

body.dark-theme .modal-input-field {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

.company-modal-close-btn:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.06)) !important;
    color: var(--text-primary, #0f172a) !important;
}

/* Kanban Card Fields Configuration Modal */
.kanban-config-modal-dialog {
    background: var(--bg-sidebar, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 16px;
    width: 680px;
    max-width: 95%;
    height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    color: var(--text-primary, #0f172a);
}

.kanban-config-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
}

.kanban-config-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-config-subtitle {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.kanban-config-close-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanban-config-close-btn:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.06);
}

.kanban-config-body {
    flex: 1;
    display: flex;
    padding: 16px;
    gap: 16px;
    overflow: hidden;
}

.kanban-config-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.kanban-config-pane-left {
    border-right: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    padding-right: 16px;
}

.kanban-config-pane-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kanban-config-search-input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
    background: var(--bg-field, #f1f5f9);
    color: var(--text-primary, #0f172a);
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.kanban-config-search-input:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.kanban-config-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.kanban-avail-item {
    padding: 8px 12px;
    background: var(--bg-card, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s ease;
}

.kanban-avail-item:hover {
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
    border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3);
    transform: translateX(2px);
}

.kanban-avail-item i {
    color: var(--primary, #6366f1);
    font-size: 11px;
}

.kanban-selected-item {
    padding: 8px 12px;
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.25);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--text-primary, #0f172a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.15s ease;
}

.kanban-selected-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-badge-idx {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb, 99, 102, 241), 0.15);
    color: var(--primary, #6366f1);
}

.kanban-selected-item-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kanban-action-icon-btn {
    background: none;
    border: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 3px 5px;
    font-size: 11px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanban-action-icon-btn:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.08);
}

.kanban-action-icon-btn.remove-btn:hover {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.12);
}

.kanban-config-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
}

.kanban-config-btn-reset {
    background: transparent;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
    color: var(--text-secondary, #475569);
    font-weight: 600;
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kanban-config-btn-reset:hover {
    color: var(--text-primary, #0f172a);
    border-color: var(--text-secondary, #475569);
    background: rgba(0, 0, 0, 0.04);
}

.kanban-config-btn-cancel {
    background: transparent;
    border: none;
    color: #f43f5e;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.kanban-config-btn-cancel:hover {
    background: rgba(244, 63, 94, 0.1);
}

.kanban-config-btn-save {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 8px;
}
.kanban-config-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.kanban-config-btn-save:active {
    transform: translateY(0);
}

/* Modern Profile Header Card & Stats Styling */
.lead-profile-header-card {
    background: var(--bg-card, rgba(15, 23, 42, 0.72));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
    border-radius: var(--radius-md, 10px);
    padding: 10px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.05));
    backdrop-filter: var(--backdrop-blur, blur(16px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 100 !important;
}

body.light-theme .lead-profile-header-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.lead-profile-header-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    border-top-left-radius: var(--radius-md, 10px);
    border-top-right-radius: var(--radius-md, 10px);
}

.lead-header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.lead-header-identity-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 260px;
}

.lead-header-right-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

#lead-header-actions-container:empty ~ #lead-header-right-divider {
    display: none !important;
}

.lead-header-pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.lead-back-btn, #default-details-back-btn {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12)) !important;
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-primary, #0f172a) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.lead-back-btn:hover, #default-details-back-btn:hover {
    background: var(--bg-surface, #f8fafc) !important;
    border-color: var(--primary, #6366f1) !important;
    color: var(--primary, #6366f1) !important;
}

#default-details-nav-group {
    display: inline-flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
}

#default-details-nav-group button,
#default-details-prev-btn,
#default-details-next-btn {
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12)) !important;
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-secondary, #64748b) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#default-details-nav-group button:hover,
#default-details-prev-btn:hover,
#default-details-next-btn:hover {
    background: var(--bg-surface, #f8fafc) !important;
    border-color: var(--primary, #6366f1) !important;
    color: var(--primary, #6366f1) !important;
}

.lead-nav-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color, rgba(0, 0, 0, 0.12));
    margin: 0 2px;
    flex-shrink: 0;
}

.lead-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    font-family: var(--font-heading);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    flex-shrink: 0;
}

.lead-profile-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lead-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lead-record-title,
.lead-name-row h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-family: var(--font-heading);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

.lead-badges-row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.lead-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    height: 20px;
    line-height: 16px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
}

.lead-badge.badge-status-raw,
.lead-badge.badge-status-paid {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}

body.light-theme .lead-badge.badge-status-raw,
body.light-theme .lead-badge.badge-status-paid {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.3);
}

.lead-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    line-height: 1.25;
}

.lead-meta-dot {
    color: var(--text-muted, #94a3b8);
    font-size: 9px;
}

.lead-subtitle:empty + .lead-meta-dot {
    display: none !important;
}

.lead-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}

.lead-header-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.lead-header-actions button,
.lead-header-actions a,
.lead-header-actions .btn-secondary,
.lead-header-actions .primary-btn,
.lead-header-actions .danger-btn,
.lead-header-actions .lead-header-action-btn,
.lead-header-actions .doc-primary-action-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.lead-header-actions button[style*="display: none"],
.lead-header-actions a[style*="display: none"],
.lead-header-actions .btn-secondary[style*="display: none"],
.lead-header-actions .primary-btn[style*="display: none"],
.lead-header-actions [style*="display: none"] {
    display: none !important;
}

.lead-header-actions .primary-btn,
.lead-header-actions .doc-primary-action-btn {
    background: var(--accent-gradient, linear-gradient(135deg, #6366f1 0%, #a855f7 100%)) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
}

.lead-header-actions .primary-btn:hover,
.lead-header-actions .doc-primary-action-btn:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
}

.lead-header-actions .btn-secondary {
    background: var(--bg-card, #ffffff) !important;
    color: var(--text-primary, #0f172a) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12)) !important;
}

.lead-header-actions .btn-secondary:hover {
    background: var(--bg-surface, #f8fafc) !important;
    border-color: var(--primary, #6366f1) !important;
    color: var(--primary, #6366f1) !important;
    transform: translateY(-1px) !important;
}

.lead-header-actions .danger-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.lead-header-actions .danger-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

#lead-header-more-btn {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.lead-header-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    padding-top: 6px;
    margin-top: 4px;
}

body.light-theme .lead-header-bottom-row {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.lead-header-pipeline-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.lead-header-stats-strip,
.lead-header-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.lead-header-stats:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.lead-header-stat-chip,
.lead-stat-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface, #f8fafc);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 6px;
    padding: 3px 9px !important;
    height: 26px;
    min-width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transition: all 0.15s ease;
}

body.light-theme .lead-header-stat-chip,
body.light-theme .lead-stat-card {
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.08);
}

.lead-header-stat-chip:hover,
.lead-stat-card:hover {
    border-color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.04);
}

.stat-chip-label,
.stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

body.light-theme .stat-label {
    color: #64748b;
}

.stat-chip-value,
.stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-family: var(--font-heading);
    word-break: normal;
    white-space: nowrap;
}

body.light-theme .stat-value {
    color: #0f172a;
}

.lead-tab-more-dropdown-menu {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, rgba(0,0,0,0.12));
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 6px 0;
    overflow: hidden;
}

body.light-theme .lead-tab-more-dropdown-menu {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12);
}

.lead-tab-more-item {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.lead-tab-more-item:hover {
    background: var(--bg-field, #f1f5f9);
    color: var(--primary, #4f46e5);
}

body.light-theme .lead-tab-more-item:hover {
    background: #f1f5f9;
}

/* ==========================================================================
   Modern Full-Height Responsive Kanban Board & Pipeline Design
   ========================================================================== */

body.kanban-view-active .main-content {
    overflow-y: hidden;
    padding-bottom: 8px;
}

body.kanban-view-active .view-header {
    margin-bottom: 6px;
    gap: 8px;
}

body.kanban-view-active .vtiger-breadcrumb {
    margin-bottom: 4px;
}

body.kanban-view-active .views-container,
body.kanban-view-active #view-modular-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
}

/* Kanban Container - Takes full remaining viewport */
#default-kanban-view,
.kanban-view-container {
    display: none;
    flex-direction: column;
    height: calc(100vh - 142px);
    min-height: 480px;
    margin-top: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#default-kanban-view.active-kanban,
#default-kanban-view[style*="display: flex"],
#default-kanban-view[style*="display: block"] {
    display: flex !important;
}

/* Kanban Toolbar - Single compact horizontal bar */
#default-kanban-view .kanban-toolbar,
.kanban-toolbar {
    flex-shrink: 0;
    margin-bottom: 6px;
    padding: 6px 12px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.kanban-toolbar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.kanban-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-field, #f8fafc);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    padding: 4px 10px;
    height: 32px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.kanban-toolbar-controls select,
.kanban-native-select {
    width: auto !important;
    max-width: 160px;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}

/* Pipeline Mini-Stats Strip - Compact single row (~34px) */
.deals-pipeline-kpi-strip,
.kanban-mini-stats-strip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    overflow-x: auto;
    white-space: nowrap;
    height: 34px;
    box-sizing: border-box;
}

.kpi-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.kpi-strip-item i {
    font-size: 13px;
}

.kpi-strip-label {
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.kpi-strip-value {
    color: var(--text-primary, #0f172a);
    font-weight: 700;
}

.kpi-strip-divider {
    width: 1px;
    height: 16px;
    background: var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

.kpi-strip-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.kpi-strip-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #0f172a);
}

/* Kanban Board - Fills all remaining height */
.deals-kanban-board,
.leads-kanban-board,
.kanban-board {
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    align-items: stretch;
}

/* Kanban Column - Full height, fixed width */
.deals-kanban-column,
.leads-kanban-column,
.kanban-column {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    flex-shrink: 0;
    width: 290px;
    min-width: 290px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.light-theme .deals-kanban-column,
body.light-theme .leads-kanban-column,
body.light-theme .kanban-column {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

.deals-col-dragover,
.leads-kanban-column.drag-over {
    background-color: rgba(99, 102, 241, 0.05) !important;
    border-color: var(--primary, #6366f1) !important;
}

/* Stage top accent stripe */
.deals-column-accent-bar {
    height: 4px;
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #94a3b8;
    flex-shrink: 0;
}
.deals-column-accent-bar.stage-new, .deals-column-accent-bar.stage-lead { background: #94a3b8; }
.deals-column-accent-bar.stage-reporting, .deals-column-accent-bar.stage-proposal { background: #a855f7; }
.deals-column-accent-bar.stage-need-analysis, .deals-column-accent-bar.stage-contacted { background: #06b6d4; }
.deals-column-accent-bar.stage-negotiation, .deals-column-accent-bar.stage-negotiation-review { background: #f59e0b; }
.deals-column-accent-bar.stage-won, .deals-column-accent-bar.stage-closed-won { background: #10b981; }
.deals-column-accent-bar.stage-lost, .deals-column-accent-bar.stage-closed-lost { background: #f43f5e; }

/* Column Header - Pinned at top of column */
.deals-column-header,
.kanban-column-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 8px 14px;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.deals-column-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0;
    letter-spacing: -0.2px;
}

.deals-column-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.deals-stage-total {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #334155);
}

.deals-stage-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    padding: 2px 7px;
    border-radius: 10px;
}

/* Cards List - Internally scrollable */
.deals-kanban-cards,
.leads-kanban-cards,
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px 12px 10px;
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Slim modern scrollbar */
.deals-kanban-cards::-webkit-scrollbar,
.leads-kanban-cards::-webkit-scrollbar,
.kanban-cards::-webkit-scrollbar,
.deals-kanban-board::-webkit-scrollbar,
.leads-kanban-board::-webkit-scrollbar,
.kanban-board::-webkit-scrollbar {
    width: 5px;
    height: 6px;
}
.deals-kanban-cards::-webkit-scrollbar-track,
.leads-kanban-cards::-webkit-scrollbar-track,
.kanban-cards::-webkit-scrollbar-track,
.deals-kanban-board::-webkit-scrollbar-track,
.leads-kanban-board::-webkit-scrollbar-track,
.kanban-board::-webkit-scrollbar-track {
    background: transparent;
}
.deals-kanban-cards::-webkit-scrollbar-thumb,
.leads-kanban-cards::-webkit-scrollbar-thumb,
.kanban-cards::-webkit-scrollbar-thumb,
.deals-kanban-board::-webkit-scrollbar-thumb,
.leads-kanban-board::-webkit-scrollbar-thumb,
.kanban-board::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}
.deals-kanban-cards::-webkit-scrollbar-thumb:hover,
.leads-kanban-cards::-webkit-scrollbar-thumb:hover,
.kanban-cards::-webkit-scrollbar-thumb:hover,
.deals-kanban-board::-webkit-scrollbar-thumb:hover,
.leads-kanban-board::-webkit-scrollbar-thumb:hover,
.kanban-board::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.65);
}

/* Empty Stage Placeholder */
.deals-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: var(--text-muted, #94a3b8);
    font-size: 11.5px;
    border: 1.5px dashed var(--border-color, #e2e8f0);
    border-radius: 8px;
    margin: 8px 0;
    text-align: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.01);
}

/* Card Item */
.deals-kanban-card {
    background-color: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: grab;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 5px;
    user-select: none;
    position: relative;
    flex-shrink: 0;
}

body.light-theme .deals-kanban-card {
    background-color: #ffffff;
    border-color: #e2e8f0;
}

.deals-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.deals-kanban-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.deals-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.deals-card-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.deals-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary, #64748b);
}

.deals-card-company {
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deals-card-divider {
    color: #cbd5e1;
    font-size: 10px;
}

.deals-card-amount {
    font-weight: 600;
    color: var(--text-primary, #334155);
}

/* User Avatar Initials Badge */
.deals-avatar-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
    text-transform: capitalize;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.deals-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Bottom Quick Drop Zone Target Bar */
.deals-bottom-drop-zone {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    padding: 10px 18px;
    border-radius: 40px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.24s ease;
}

.deals-bottom-drop-zone.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.deals-drop-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    cursor: copy;
    border: 2px dashed transparent;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.deals-drop-pill.closed-lost {
    background: #f43f5e;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4);
}

.deals-drop-pill.closed-won {
    background: #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.deals-drop-pill.drag-hover {
    transform: scale(1.08);
    border-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ===================================================================
   VTIGER CRM COMMENTS & ROLL UP FEATURE STYLES (MODERN REDESIGN)
   =================================================================== */
.vtiger-comments-widget {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.vtiger-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    gap: 12px;
    flex-wrap: wrap;
}

.vtiger-comments-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtiger-comments-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.vtiger-comments-count-pill {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary, #3b82f6);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
}

.vtiger-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtiger-rollup-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-field, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 4px 10px;
    border-radius: 20px;
    user-select: none;
    transition: border-color 0.2s ease;
}

.vtiger-rollup-control:hover {
    border-color: var(--border-hover, #cbd5e1);
}

.vtiger-rollup-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}

.vtiger-rollup-tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.vtiger-rollup-tooltip-icon {
    color: var(--text-secondary, #94a3b8);
    font-size: 13px;
    transition: color 0.15s ease;
}

.vtiger-rollup-tooltip-wrapper:hover .vtiger-rollup-tooltip-icon {
    color: var(--primary, #3b82f6);
}

.vtiger-rollup-tooltip-box {
    display: none !important;
    position: absolute;
    right: -10px;
    top: 26px;
    width: 280px;
    background: #0f172a;
    color: #f8fafc;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    z-index: 9999;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    animation: vtigerTooltipFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vtigerTooltipFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.vtiger-rollup-tooltip-wrapper:hover .vtiger-rollup-tooltip-box {
    display: block !important;
}

/* Modern Toggle Switch */
.vtiger-toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.vtiger-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.vtiger-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px;
}

.vtiger-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.vtiger-toggle-switch input:checked + .vtiger-toggle-slider {
    background-color: #10b981;
}

.vtiger-toggle-switch input:checked + .vtiger-toggle-slider:before {
    transform: translateX(16px);
}

.vtiger-feed-refresh-btn {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s ease;
}

.vtiger-feed-refresh-btn:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
}

/* ===================================================================
   COMPOSER CARD & TOOLS
   =================================================================== */
.vtiger-composer-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 18px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.vtiger-composer-card:focus-within {
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.vtiger-composer-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 220px;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1.5;
    border: none;
    background: transparent;
    color: var(--text-primary, #1e293b);
    outline: none !important;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.vtiger-composer-textarea::placeholder {
    color: var(--text-muted, #94a3b8);
}

.vtiger-attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0 4px 0;
    border-top: 1px dashed var(--border-color, #e2e8f0);
    margin-top: 6px;
}

.vtiger-attached-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-field, #f1f5f9);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.vtiger-attached-file-chip .file-remove {
    cursor: pointer;
    color: #ef4444;
    margin-left: 2px;
    font-weight: bold;
}

.vtiger-voice-recording-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 8px 0 4px 0;
    font-size: 12px;
    color: #ef4444;
    font-weight: 600;
}

.recording-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    margin-right: 6px;
    animation: vtigerPulse 1.2s infinite ease-in-out;
}

@keyframes vtigerPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.btn-stop-voice {
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.vtiger-composer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--border-color, #f1f5f9);
    flex-wrap: wrap;
    gap: 8px;
}

.vtiger-composer-actions-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vtiger-composer-tool-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748b);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.vtiger-composer-tool-btn:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--primary, #3b82f6);
}

.vtiger-composer-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vtiger-composer-shortcut-hint {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
}

.vtiger-composer-shortcut-hint kbd {
    background: var(--bg-field, #f1f5f9);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 10px;
    font-family: inherit;
}

.vtiger-composer-submit-btn {
    background: linear-gradient(135deg, var(--primary, #3b82f6) 0%, #2563eb 100%);
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

.vtiger-composer-submit-btn:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.vtiger-composer-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.vtiger-emoji-popover {
    position: absolute;
    bottom: 34px;
    left: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    z-index: 100;
}

.vtiger-emoji-popover span {
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease;
}

.vtiger-emoji-popover span:hover {
    background: var(--bg-hover, #f1f5f9);
}

/* ===================================================================
   FEED LIST & COMMENT ITEMS
   =================================================================== */
.vtiger-comments-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.vtiger-feed-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vtiger-comments-empty-state {
    text-align: center;
    padding: 32px 16px;
    background: var(--bg-field, #f8fafc);
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 10px;
    margin-top: 6px;
}

.vtiger-comments-empty-state .empty-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin: 0 auto 10px auto;
}

.vtiger-comments-empty-state .empty-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 4px;
}

.vtiger-comments-empty-state .empty-desc {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    max-width: 280px;
    margin: 0 auto;
}

.vtiger-comment-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 10px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    position: relative;
}

.vtiger-comment-item:hover {
    border-color: var(--border-hover, #cbd5e1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.vtiger-comment-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vtiger-comment-content {
    flex: 1;
    min-width: 0;
}

.vtiger-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.vtiger-comment-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vtiger-comment-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.vtiger-comment-date {
    font-size: 11.5px;
    color: var(--text-secondary, #64748b);
}

.vtiger-comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.vtiger-comment-item:hover .vtiger-comment-actions {
    opacity: 1;
}

.vtiger-comment-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.vtiger-comment-action-btn:hover {
    color: var(--primary, #3b82f6);
    background: var(--bg-hover, #f1f5f9);
}

.vtiger-rollup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.08);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2);
    text-decoration: none;
    transition: all 0.15s ease;
}

.vtiger-rollup-badge:hover {
    background: rgba(99, 102, 241, 0.15);
    text-decoration: none;
}

.vtiger-comment-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary, #334155);
    white-space: pre-wrap;
    word-break: break-word;
}

.vtiger-mention-tag {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary, #2563eb);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
}

.vtiger-comment-link {
    color: var(--primary, #3b82f6);
    text-decoration: none;
    word-break: break-all;
}

.vtiger-comment-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Global Utility Classes (Flex, Spacing, Sizing, Typography, Grid)
   ========================================================================== */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-items-baseline { align-items: baseline !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 16px !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 16px !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 4px !important; }
.p-2 { padding: 8px !important; }
.p-3 { padding: 16px !important; }
.p-4 { padding: 24px !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 16px !important; padding-right: 16px !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.text-muted { color: var(--text-muted, #64748b) !important; }
.text-primary { color: var(--primary, #6366f1) !important; }
.text-danger { color: #ef4444 !important; }
.text-warning { color: #f59e0b !important; }
.text-success { color: #10b981 !important; }
.text-info { color: #0ea5e9 !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* Grid Helpers */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.row > * {
    box-sizing: border-box;
    padding-left: 8px;
    padding-right: 8px;
}
.row.g-2 { margin-left: -4px; margin-right: -4px; }
.row.g-2 > * { padding-left: 4px; padding-right: 4px; }
.row.g-3 { margin-left: -12px; margin-right: -12px; }
.row.g-3 > * { padding-left: 12px; padding-right: 12px; }
.row.g-4 { margin-left: -16px; margin-right: -16px; }
.row.g-4 > * { padding-left: 16px; padding-right: 16px; }

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-md-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 768px) {
    .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================================
   GAMESCOPE LAUNCH CONTEST MODERN MODAL STYLES
   ======================================================== */
.gamescope-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 18, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000 !important;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gamescope-modal-overlay.show {
    display: flex !important;
    opacity: 1;
}

.gamescope-modal-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    transform: scale(0.95) translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.gamescope-modal-overlay.show .gamescope-modal-container {
    transform: scale(1) translateY(0);
}

body.light-theme .gamescope-modal-overlay {
    background: rgba(15, 23, 42, 0.45);
}

body.light-theme .gamescope-modal-container {
    background: #ffffff;
    border-color: rgba(99, 102, 241, 0.18);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* Modal Glow / Ambient Light */
.gamescope-modal-glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 160px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 80%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

/* Modal Header */
.gamescope-modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 26px 16px 26px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}

.gamescope-header-info {
    flex: 1;
}

.gamescope-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(236, 72, 153, 0.15) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f59e0b;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.gamescope-header-badge i {
    font-size: 11px;
    color: #f59e0b;
}

.gamescope-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.02em;
}

.gamescope-title-icon {
    color: #f59e0b;
    font-size: 20px;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.4));
}

.gamescope-modal-subtitle {
    margin: 4px 0 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}

.gamescope-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.gamescope-modal-close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    transform: rotate(90deg);
}

/* Modal Form Container */
.gamescope-modal-form {
    position: relative;
    z-index: 1;
    padding: 20px 26px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gamescope-modal-form::-webkit-scrollbar {
    width: 6px;
}
.gamescope-modal-form::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 9999px;
}

/* Form Sections & Quick Templates */
.gamescope-form-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gamescope-section-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.gamescope-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}

.gamescope-template-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.gamescope-template-btn .tmpl-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.gamescope-template-btn .tmpl-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gamescope-template-btn .tmpl-text strong {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gamescope-template-btn .tmpl-text small {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gamescope-template-btn:hover {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.gamescope-template-btn.active {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 1px #f59e0b;
}

.gamescope-template-btn.active .tmpl-text strong {
    color: #f59e0b;
}

body.light-theme .gamescope-template-btn {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.light-theme .gamescope-template-btn:hover {
    background: #f1f5f9;
}
body.light-theme .gamescope-template-btn.active {
    background: #fffbeb;
    border-color: #f59e0b;
}

/* Form Groups & Inputs */
.gamescope-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gamescope-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.gamescope-field-label .required {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}

.gamescope-field-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.gamescope-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.gamescope-input-icon {
    position: absolute;
    left: 14px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.gamescope-input-addon {
    position: absolute;
    left: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #10b981;
    pointer-events: none;
    z-index: 2;
}

.gamescope-form-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: var(--bg-field);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13.5px;
    font-family: var(--font-body);
    outline: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.gamescope-form-input.no-icon {
    padding-left: 14px;
}

.gamescope-form-input.has-addon {
    padding-left: 32px;
}

.gamescope-form-input:focus {
    border-color: var(--primary);
    background: var(--bg-field-focus);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.gamescope-form-input:focus + .gamescope-input-icon,
.gamescope-input-wrap:focus-within .gamescope-input-icon {
    color: var(--primary);
}

.gamescope-textarea {
    resize: vertical;
    min-height: 56px;
    line-height: 1.45;
    padding: 10px 14px;
}

.gamescope-date-input {
    padding-left: 38px;
    cursor: pointer;
}

/* Visual Metric Cards Selector */
.gamescope-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

@media (max-width: 580px) {
    .gamescope-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gamescope-metric-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: var(--bg-field);
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gamescope-metric-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.06);
    transform: translateY(-1px);
}

.gamescope-metric-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2);
}

.gamescope-metric-card .metric-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.gamescope-metric-card .metric-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.gamescope-metric-card .metric-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gamescope-metric-card .metric-desc {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.gamescope-metric-card .metric-check {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 11px;
    color: var(--primary);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.gamescope-metric-card.active .metric-check {
    opacity: 1;
    transform: scale(1);
}

body.light-theme .gamescope-metric-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.light-theme .gamescope-metric-card:hover {
    background: #f1f5f9;
}
body.light-theme .gamescope-metric-card.active {
    background: #eef2ff;
    border-color: #6366f1;
}

/* 2 Column Rows */
.gamescope-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 540px) {
    .gamescope-form-row {
        grid-template-columns: 1fr;
    }
}

/* Quick Selection Chips */
.gamescope-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.gamescope-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gamescope-chip:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary);
    color: var(--text-primary);
}

.gamescope-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

body.light-theme .gamescope-chip {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}
body.light-theme .gamescope-chip:hover {
    background: #e2e8f0;
    color: #0f172a;
}
body.light-theme .gamescope-chip.active {
    background: var(--primary);
    color: #ffffff;
}

/* Duration Presets Bar */
.gamescope-duration-presets {
    display: flex;
    gap: 4px;
}

.gamescope-duration-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gamescope-duration-btn:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
    border-color: var(--primary);
}

.gamescope-duration-btn.active {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

/* Live Contest Preview Section */
.gamescope-preview-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gamescope-preview-header {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.gamescope-preview-card {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.preview-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 700;
    color: #10b981;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.preview-trophy-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.preview-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.preview-desc {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preview-metrics-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
}

body.light-theme .preview-metrics-row {
    background: rgba(255, 255, 255, 0.7);
}

.preview-metric-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.preview-lbl {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

.preview-val {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-val.preview-goal {
    color: #10b981;
}

.preview-reward-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-secondary);
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

body.light-theme .preview-reward-row {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Modal Footer */
.gamescope-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 26px 22px 26px;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

.gamescope-btn-secondary {
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gamescope-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
}

body.light-theme .gamescope-btn-secondary {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}
body.light-theme .gamescope-btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.gamescope-btn-launch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #6366f1 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(236, 72, 153, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gamescope-btn-launch:hover {
    background-position: 100% 100%;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.5);
}

.gamescope-btn-launch:active {
    transform: translateY(0);
}

.gamescope-btn-launch .launch-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.gamescope-btn-launch:hover .launch-icon {
    transform: translate(2px, -2px) rotate(10deg);
}

.gamescope-btn-launch:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==============================================================================
   MULTI-CHANNEL SOCIAL COMPOSER STUDIO
   ============================================================================== */
.social-composer-dialog {
    background: var(--bg-card, #ffffff) !important;
    width: 1120px !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 22px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalPopIn {
    0% { transform: scale(0.96) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.social-composer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
}

.social-composer-body {
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    gap: 24px;
    padding: 24px 26px;
    overflow-y: auto;
    flex-grow: 1;
    align-items: start;
}

@media (max-width: 900px) {
    .social-composer-body {
        grid-template-columns: 1fr;
    }
}

.social-composer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 26px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

/* Channel Pills */
.social-acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.social-acc-pill:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.04);
    transform: translateY(-1px);
}

.social-acc-pill.selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.social-acc-pill input[type="checkbox"] {
    accent-color: #6366f1;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

/* AI Assistant Toolbar */
.social-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-ai-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: #6366f1;
    color: #6366f1;
    transform: translateY(-1px);
}

/* Hashtag Chips */
.social-tag-chip {
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
    color: #6366f1;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.social-tag-chip:hover {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
    transform: translateY(-1px);
}

/* Timing Selection Cards */
.social-timing-option {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.social-timing-option:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.02);
}

.social-timing-option.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.06);
}

/* Platform Preview Mockups */
.social-preview-container {
    background: var(--bg-surface, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.social-preview-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

body.dark-theme .social-preview-card {
    background: #1e293b;
    border-color: #334155;
}

/* ==========================================================================
   PyCRM Modern Modal & Dialog System (Alert, Confirm, Prompt)
   ========================================================================== */
.crm-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px;
    box-sizing: border-box;
}

.crm-modal-overlay.active {
    display: flex !important;
    animation: crmFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.crm-modal-overlay.closing {
    animation: crmFadeOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    pointer-events: none;
}

.crm-modal-overlay.closing .crm-modal-card {
    animation: crmModalPopOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

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

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

@keyframes crmModalPop {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes crmModalPopOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.94) translateY(10px);
    }
}

.crm-modal-accent-bar {
    height: 4px;
    width: 100%;
    flex-shrink: 0;
}

.crm-modal-accent-bar.danger {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.crm-modal-accent-bar.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.crm-modal-accent-bar.success {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.crm-modal-accent-bar.info {
    background: linear-gradient(90deg, #6366f1, #818cf8);
}

.crm-modal-accent-bar.question {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.crm-modal-subtitle {
    font-size: 12.5px;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
    font-weight: 400;
}

.crm-modal-card {
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: crmModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

body.dark-theme .crm-modal-card {
    background: #1e293b;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.crm-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 14px 24px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    position: relative;
}

body.dark-theme .crm-modal-header {
    border-color: rgba(255, 255, 255, 0.06);
}

.crm-modal-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.crm-modal-icon-badge.info {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.crm-modal-icon-badge.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.crm-modal-icon-badge.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.crm-modal-icon-badge.success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.crm-modal-icon-badge.question {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

.crm-modal-title-group {
    flex: 1;
    min-width: 0;
}

.crm-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}

body.dark-theme .crm-modal-title {
    color: #f8fafc;
}

.crm-modal-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.crm-modal-close-btn:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.05);
}

body.dark-theme .crm-modal-close-btn:hover {
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.1);
}

.crm-modal-body {
    padding: 16px 24px 20px 24px;
    font-size: 14px;
    color: var(--text-secondary, #475569);
    line-height: 1.6;
    max-height: 60vh;
    overflow-y: auto;
}

body.dark-theme .crm-modal-body {
    color: #cbd5e1;
}

.crm-modal-message {
    word-break: break-word;
}

.crm-modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary, #1e293b);
}

body.dark-theme .crm-modal-label {
    color: #e2e8f0;
}

.crm-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-field, #f8fafc);
    color: var(--text-primary, #0f172a);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

body.dark-theme .crm-modal-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

.crm-modal-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    background: var(--bg-card, #ffffff);
}

body.dark-theme .crm-modal-input:focus {
    background: #1e293b;
}

.crm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--bg-surface, #f8fafc);
    border-top: 1px solid var(--border-color, #f1f5f9);
}

body.dark-theme .crm-modal-actions {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.06);
}

.crm-btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    outline: none;
}

.crm-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

.crm-btn-primary {
    background: var(--primary, #6366f1);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.crm-btn-primary:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.crm-btn-danger {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.crm-btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

.crm-btn-warning {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.crm-btn-warning:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.crm-btn-success {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.crm-btn-success:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.crm-btn-secondary {
    background: transparent;
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-primary, #334155);
}

body.dark-theme .crm-btn-secondary {
    border-color: #475569;
    color: #cbd5e1;
}

.crm-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #0f172a);
}

body.dark-theme .crm-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

/* Modern Toggle Switch Component */
.switch {
    position: relative !important;
    display: inline-block !important;
    width: 36px !important;
    height: 20px !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

.switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.switch .slider,
.switch .slider.round {
    position: absolute !important;
    cursor: pointer !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: #cbd5e1 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 20px !important;
}

.switch .slider:before,
.switch .slider.round:before {
    position: absolute !important;
    content: "" !important;
    height: 14px !important;
    width: 14px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: #ffffff !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.switch input:checked + .slider,
.switch input:checked + .slider.round {
    background: var(--primary, #6366f1) !important;
}

.switch input:checked + .slider:before,
.switch input:checked + .slider.round:before {
    transform: translateX(16px) !important;
}

.switch input:focus + .slider {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25) !important;
}

/* ==========================================================================
   Form Field Placeholders Visibility Configuration
   When body.hide-form-placeholders (or html.hide-form-placeholders) is set,
   hide placeholders inside form fields, cards, and modal dialogs.
   Excludes global navigation search inputs.
   ========================================================================== */
body.hide-form-placeholders form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders form textarea::placeholder,
body.hide-form-placeholders .modal-form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .modal-form textarea::placeholder,
body.hide-form-placeholders .form-group input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .form-group textarea::placeholder,
body.hide-form-placeholders .form-control:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .analytics-card input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .analytics-card textarea::placeholder,
body.hide-form-placeholders .glass-card input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .glass-card textarea::placeholder,
body.hide-form-placeholders .view input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .view textarea::placeholder,
body.hide-form-placeholders .modal input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .modal textarea::placeholder,
body.hide-form-placeholders .modal-overlay input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
body.hide-form-placeholders .modal-overlay textarea::placeholder,
html.hide-form-placeholders form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
html.hide-form-placeholders form textarea::placeholder,
html.hide-form-placeholders .modal-form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
html.hide-form-placeholders .modal-form textarea::placeholder,
html.hide-form-placeholders .form-group input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
html.hide-form-placeholders .form-group textarea::placeholder,
html.hide-form-placeholders .form-control:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
html.hide-form-placeholders .view input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::placeholder,
html.hide-form-placeholders .view textarea::placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 0 !important;
}

body.hide-form-placeholders form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
body.hide-form-placeholders form textarea::-webkit-input-placeholder,
body.hide-form-placeholders .modal-form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
body.hide-form-placeholders .modal-form textarea::-webkit-input-placeholder,
body.hide-form-placeholders .form-group input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
body.hide-form-placeholders .form-group textarea::-webkit-input-placeholder,
body.hide-form-placeholders .form-control:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
body.hide-form-placeholders .view input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
body.hide-form-placeholders .view textarea::-webkit-input-placeholder,
html.hide-form-placeholders form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
html.hide-form-placeholders form textarea::-webkit-input-placeholder,
html.hide-form-placeholders .view input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-webkit-input-placeholder,
html.hide-form-placeholders .view textarea::-webkit-input-placeholder {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 0 !important;
}

body.hide-form-placeholders form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-moz-placeholder,
body.hide-form-placeholders form textarea::-moz-placeholder,
body.hide-form-placeholders .modal-form input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-moz-placeholder,
body.hide-form-placeholders .modal-form textarea::-moz-placeholder,
body.hide-form-placeholders .form-group input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-moz-placeholder,
body.hide-form-placeholders .form-group textarea::-moz-placeholder,
body.hide-form-placeholders .form-control:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-moz-placeholder,
body.hide-form-placeholders .view input:not([type="search"]):not([id*="search"]):not([id*="Search"]):not([class*="search"]):not([class*="Search"]):not(.global-search-input)::-moz-placeholder,
body.hide-form-placeholders .view textarea::-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* =====================================================================
   PYCRM QUICK BOOK MODAL MODERN SUITE
   ===================================================================== */
#quick-book-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

#quick-book-modal .qb-modal-card {
    width: 100%;
    max-width: 640px;
    background: var(--bg-card, #ffffff);
    border-radius: 18px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: qbModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qbModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qb-tab-btn {
    transition: all 0.2s ease;
    border-bottom: 2.5px solid transparent !important;
}

.qb-tab-btn.active {
    color: #4f46e5 !important;
    border-bottom-color: #4f46e5 !important;
    background: rgba(99, 102, 241, 0.04) !important;
}

#qb-slots-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-field, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    min-height: 52px;
    max-height: 180px;
    overflow-y: auto;
    align-items: center;
}

.qb-slot-chip {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #334155);
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    user-select: none;
}

.qb-slot-chip:hover:not(:disabled):not(.selected) {
    border-color: #6366f1;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}

.qb-slot-chip.selected {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.qb-slot-chip.booked, .qb-slot-chip:disabled {
    background: var(--bg-field, #f1f5f9);
    color: #94a3b8;
    border-color: var(--border-color, #e2e8f0);
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}

/* ==========================================================================
   AESTHETIC CSS STYLESHEETS CUSTOMIZATION:
   Harmonic Gradients, Layout Grids, Modern Typography & Visual Polish
   ========================================================================== */

/* ─── 1. Harmonic Gradients & Color Tokens ────────────────────────────── */
:root {
    --gradient-aurora: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    --gradient-sunset: linear-gradient(135deg, #f43f5e 0%, #fb923c 50%, #facc15 100%);
    --gradient-emerald: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    --gradient-neon: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #f43f5e 100%);
    --gradient-cosmic: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 100%);
    --gradient-glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    --mesh-glow: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.18) 0px, transparent 50%),
                 radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
                 radial-gradient(at 50% 100%, rgba(6, 182, 212, 0.12) 0px, transparent 50%);
}

.gradient-aurora { background: var(--gradient-aurora) !important; }
.gradient-sunset { background: var(--gradient-sunset) !important; }
.gradient-emerald { background: var(--gradient-emerald) !important; }
.gradient-neon { background: var(--gradient-neon) !important; }
.gradient-cosmic { background: var(--gradient-cosmic) !important; }

/* Gradient Text Utilities */
.text-gradient-primary {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.text-gradient-aurora {
    background: var(--gradient-aurora);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.text-gradient-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* ─── 2. Responsive Layout Grids ──────────────────────────────────────── */
.grid-layout-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.grid-layout-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.grid-layout-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.grid-layout-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.grid-layout-sidebar-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .grid-layout-2col,
    .grid-layout-3col,
    .grid-layout-4col,
    .grid-layout-sidebar-main {
        grid-template-columns: 1fr;
    }
}

/* ─── 3. Modern Typography System ─────────────────────────────────────── */
.heading-hero {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.heading-display {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}
.heading-section {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.subheading-muted {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.text-balance {
    text-wrap: balance;
}

/* ─── 4. Aesthetic Micro-interactions & Glass Containers ──────────────── */
.card-glass-aesthetic {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
}
.card-glass-aesthetic:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow);
    border-color: var(--border-hover);
}

/* ─── 5. Sharing Rules Layout & Advanced Sharing Parity ──────────────── */
#sharing-rules-table {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#sharing-rules-table th {
    white-space: normal !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
    padding: 12px 6px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

#sharing-rules-table th:first-child {
    padding-left: 14px !important;
}

#sharing-rules-table th:last-child {
    padding-right: 14px !important;
}

#sharing-rules-table td {
    white-space: normal !important;
}

.expand-custom-rules-btn {
    transition: all 0.2s ease !important;
}

.expand-custom-rules-btn:hover {
    border-color: var(--primary, #6366f1) !important;
    color: var(--primary, #6366f1) !important;
    background: rgba(99, 102, 241, 0.08) !important;
}

.sharing-rules-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}


/* === Classic Vtiger Sidebar Layout (Overlay Drawer with Flyout on Hover) === */
.classic-sidebar,
.classic-sidebar-backdrop {
    display: none !important;
}

/* ==========================================================================
   Vtiger 7 Canonical App Menu Architecture (SidebarAppMenu.tpl parity)
   Blueprint: C:\wamp64\www\democrm\layouts7\skins\sales\style.css:472-650
   ========================================================================== */
.app-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    backdrop-filter: blur(2px);
    transition: opacity 0.2s ease;
}
.app-menu-backdrop.active {
    display: block !important;
}

.app-menu {
    width: 230px !important;
    max-width: 230px !important;
    height: 100vh !important;
    padding-top: 0;
    padding-bottom: 40px;
    color: #e2e8f0;
    position: fixed !important;
    border: 0;
    top: 0px !important;
    left: 0 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    background: #2C3B49 !important;
    z-index: 10000 !important;
    display: none;
    overflow-y: auto;
    overflow-x: visible;
    box-sizing: border-box;
    font-family: inherit;
    user-select: none;
}
.app-menu.open {
    display: block !important;
    animation: vtigerAppMenuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes vtigerAppMenuSlideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.app-menu .app-menu-top-row {
    margin: 0;
    padding: 0;
}

.app-menu .app-switcher-container {
    display: inline-block;
    width: 44px !important;
    height: 44px !important;
    text-align: center;
    background: #2C3B49;
    cursor: pointer;
    line-height: 44px !important;
    transition: background 0.15s ease;
    box-sizing: border-box !important;
}
.app-menu .app-switcher-container:hover {
    background: #596875;
}
.app-menu .app-switcher-container .app-icon {
    color: #ffffff;
    font-size: 18px;
    line-height: 42px;
    opacity: 0.9;
}

.app-menu .app-list {
    margin: 0;
    padding: 0;
}

.app-menu .app-item {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #ffffff !important;
    cursor: pointer;
    display: block;
    background-color: #2C3B49;
    padding: 12px 14px !important;
    margin: 0;
    opacity: 0.88;
    text-shadow: 0 0 1px #000;
    transition: all 0.18s ease;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
    border-left: 4px solid transparent;
}

.app-menu .app-item:hover,
.app-menu .app-item.active-app-item,
.app-menu .dropdown.open > .app-item {
    opacity: 1 !important;
    background: #596875 !important;
    color: #ffffff !important;
}

/* Vtiger 7 App Category Distinct Left Border Colors */
.app-menu .app-item-color-MARKETING {
    border-left: 4px solid #EF5E29 !important;
}
.app-menu .app-item-color-SALES {
    border-left: 4px solid #3CB878 !important;
}
.app-menu .app-item-color-INVENTORY {
    border-left: 4px solid #F1C40F !important;
}
.app-menu .app-item-color-SUPPORT {
    border-left: 4px solid #6297C3 !important;
}
.app-menu .app-item-color-PROJECT,
.app-menu .app-item-color-PROJECTS {
    border-left: 4px solid #8E44AD !important;
}
.app-menu .app-item-color-ACCOUNTING {
    border-left: 4px solid #27AE60 !important;
}
.app-menu .app-item-color-TOOLS {
    border-left: 4px solid #EF5E29 !important;
}

.app-menu .app-icon-list {
    width: 20px;
    font-size: 15px;
    text-align: center;
    margin-right: 12px;
    display: inline-block;
}

.app-menu .app-name {
    display: inline-block;
    max-width: 140px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.app-menu .fa-chevron-right {
    font-size: 11px;
    float: right;
    margin-top: 4px;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.app-menu .dropdown.open > .app-item .fa-chevron-right,
.app-menu .app-item:hover .fa-chevron-right {
    opacity: 1;
    transform: translateX(3px);
}

.app-menu .app-list-divider {
    border-top: 1px solid #596875;
    margin: 8px 0;
}

.app-menu .app-item-misc {
    font-size: 13px;
    font-weight: 500;
}

/* Canonical Vtiger 7 Flyout Submenu (.app-modules-dropdown) */
.app-menu .dropdown {
    position: relative;
}

.app-menu .app-modules-dropdown {
    left: 230px !important;
    top: 0 !important;
    position: fixed;
    width: 230px;
    height: 100vh;
    font-size: 13px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #2C3B49 !important;
    box-shadow: 6px 0 20px rgba(0, 0, 0, 0.45);
    border: none;
    border-left: 1px solid #3f4e5e;
    border-radius: 0;
    margin: 0;
    padding: 10px 0 40px 0;
    display: none;
    z-index: 10001;
    box-sizing: border-box;
}

.app-menu .dropdown.open > .app-modules-dropdown {
    display: block !important;
}

.app-menu .app-modules-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-menu .app-modules-dropdown li a {
    background: transparent;
    padding: 10px 18px;
    color: #e2e8f0 !important;
    text-shadow: 0 0 1px #000;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.app-menu .app-modules-dropdown li a:hover,
.app-menu .app-modules-dropdown li.active a {
    background: #596875 !important;
    color: #ffffff !important;
    border-left-color: #3CB878 !important;
}

.app-menu .app-modules-dropdown .module-icon {
    font-size: 13px;
    width: 20px;
    text-align: center;
    color: #cbd5e1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-menu .app-modules-dropdown .module-name {
    word-wrap: break-word;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scrollbar styling for Vtiger App Menu */
.app-menu::-webkit-scrollbar,
.app-menu .app-modules-dropdown::-webkit-scrollbar {
    width: 5px;
}
.app-menu::-webkit-scrollbar-thumb,
.app-menu .app-modules-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* ==========================================================================
   Canonical Vtiger 7 App Module Navigator (Menubar.tpl & SidebarHeader.tpl)
   Blueprint: C:\wamp64\www\democrm\layouts\v7\skins\sales\style.css:388-405, 928-1002
   ========================================================================== */
.module-navigator-sidebar {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    background: #2C3B49 !important;
    border-right: 1px solid #1a252f !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 102;
    flex-shrink: 0 !important;
    user-select: none;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Active Suite Header Indicator Badge (SidebarHeader.tpl:5-9) */
.module-navigator-sidebar .app-indicator-icon-container {
    width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    cursor: pointer;
    background: #EF5E29; /* Default to Marketing */
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.module-navigator-sidebar .app-indicator-icon-container:hover {
    filter: brightness(1.1);
}
.module-navigator-sidebar .app-indicator-icon-container .app-indicator-icon {
    font-size: 20px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

/* Suite Theme Colors */
.module-navigator-sidebar .app-MARKETING { background: #EF5E29 !important; }
.module-navigator-sidebar .app-SALES { background: #3CB878 !important; }
.module-navigator-sidebar .app-INVENTORY { background: #F1C40F !important; }
.module-navigator-sidebar .app-SUPPORT { background: #6297C3 !important; }
.module-navigator-sidebar .app-PROJECTS, .module-navigator-sidebar .app-PROJECT { background: #8E44AD !important; }
.module-navigator-sidebar .app-ACCOUNTING { background: #27AE60 !important; }
.module-navigator-sidebar .app-PROCUREMENT { background: #8E44AD !important; }
.module-navigator-sidebar .app-TOOLS, .module-navigator-sidebar .app-SETTINGS { background: #EF5E29 !important; }

/* Vertical Module Shortcuts List (Menubar.tpl:7-19) */
.module-navigator-sidebar .modules-menu {
    width: 100% !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.module-navigator-sidebar .modules-menu::-webkit-scrollbar {
    width: 3px !important;
}
.module-navigator-sidebar .modules-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
}
.module-navigator-sidebar .modules-menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
}
.module-navigator-sidebar .modules-menu ul li,
.module-navigator-sidebar .modules-menu li {
    width: 44px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
    position: relative;
}
.module-navigator-sidebar .modules-menu ul li a,
.module-navigator-sidebar .modules-menu li a {
    color: #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: all 0.15s ease !important;
}
.module-navigator-sidebar .modules-menu ul li a i,
.module-navigator-sidebar .modules-menu li a i {
    font-size: 16px !important;
    line-height: 1 !important;
}
.module-navigator-sidebar .modules-menu ul li a > span:not(.custom-module-badge),
.module-navigator-sidebar .modules-menu li a > span:not(.custom-module-badge) {
    display: none !important;
}
.module-navigator-sidebar .modules-menu ul li:hover,
.module-navigator-sidebar .modules-menu li:hover {
    background: #596875 !important;
}
.module-navigator-sidebar .modules-menu ul li:hover a,
.module-navigator-sidebar .modules-menu li:hover a {
    color: #ffffff !important;
}
.module-navigator-sidebar .modules-menu ul li.active,
.module-navigator-sidebar .modules-menu li.active {
    background: #010101 !important;
}
.module-navigator-sidebar .modules-menu ul li.active a,
.module-navigator-sidebar .modules-menu li.active a {
    color: #ffffff !important;
    border-left: 3px solid var(--active-suite-color, #3CB878) !important;
}

/* Custom Module 2-Letter Badge inside Module Navigator */
.module-navigator-sidebar .custom-module-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    padding: 2px 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 3px !important;
    color: #ffffff !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Vtiger 7 Page Module Navigator (#modnavigator / .modules-menu in Menubar.tpl) */
.topbar-menu-bar,
#topbar-menu-bar,
.layout-classic-sidebar .topbar-menu-bar,
html.layout-classic-sidebar .topbar-menu-bar,
body.layout-classic-sidebar .topbar-menu-bar {
    display: none !important;
}

.mini-sidebar,
.layout-classic-sidebar .mini-sidebar,
html.layout-classic-sidebar .mini-sidebar,
body.layout-classic-sidebar .mini-sidebar {
    display: none !important;
}

.topbar-left .topbar-menu-toggle-btn,
.topbar-menu-toggle-btn,
#topbar-menu-toggle-btn,
.layout-classic-sidebar .topbar-left .topbar-menu-toggle-btn,
.layout-classic-sidebar .topbar-menu-toggle-btn,
html.layout-classic-sidebar .topbar-left .topbar-menu-toggle-btn,
html.layout-classic-sidebar .topbar-menu-toggle-btn,
body.layout-classic-sidebar .topbar-left .topbar-menu-toggle-btn,
body.layout-classic-sidebar .topbar-menu-toggle-btn {
    display: inline-flex !important;
}

/* Pincode & Postal Code Auto-Fetch Visual Styles */
@keyframes pincodeAutofillPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
        border-color: #10b981 !important;
        background-color: rgba(16, 185, 129, 0.08);
    }
    40% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
        border-color: #10b981 !important;
        background-color: rgba(16, 185, 129, 0.05);
    }
    100% {
        box-shadow: none;
        border-color: inherit;
        background-color: transparent;
    }
}

.pincode-autofill-highlight {
    animation: pincodeAutofillPulse 1.8s ease-out !important;
}

.pincode-input-loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
}

.pincode-autofill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 2px 8px;
    border-radius: 9999px;
    margin-left: 6px;
    animation: fadeIn 0.2s ease-in;
}

/* ==========================================================================
   MODERN CRM USABILITY & Vtiger UX UPGRADES
   1. Global Quick Create Modal & Dropdown
   2. Workspace Focus Selector (Role-Based Decluttering)
   3. Slide-Over List View Quick Preview Drawer
   4. Form Progressive Disclosure & Density Control
   ========================================================================== */

/* 1. Global Quick Create Modal */
.qc-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: qcFadeIn 0.2s ease-out;
}

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

.qc-modal-card {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    width: 100%;
    max-width: 680px;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.25), 0 0 1px 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: qcSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

@keyframes qcSlideUp {
    from { transform: translateY(20px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.qc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

.qc-modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qc-modal-icon {
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
}

.qc-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    font-family: 'Outfit', -apple-system, sans-serif;
}

.qc-modal-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.qc-modal-close-btn:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.05);
}

.qc-modal-form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qc-fields-grid {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 150px);
}

.qc-field-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qc-field-item.col-span-full {
    grid-column: 1 / -1;
}

.qc-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.qc-required-asterisk {
    color: #ef4444;
    font-weight: 700;
}

.qc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

/* Quick Create Dropdown Menu in Topbar */
.quick-create-dropdown-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.quick-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.45) !important;
}

.quick-create-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    animation: qcMenuDrop 0.18s ease-out;
}

@keyframes qcMenuDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.qc-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

.qc-menu-grid {
    padding: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.qc-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-primary, #1e293b);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.qc-menu-item:hover {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary, #6366f1);
    transform: translateX(2px);
}

.qc-menu-item i {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

/* 2. Workspace Focus Selector (Role-Based) */
.workspace-selector-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.workspace-selector-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--bg-field, #f1f5f9);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    transition: all 0.15s ease;
    user-select: none;
}

.workspace-selector-btn:hover {
    border-color: var(--primary, #6366f1);
    background: var(--bg-card, #ffffff);
}

.workspace-selector-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 290px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    z-index: 1000;
    display: none;
    overflow: hidden;
    animation: qcMenuDrop 0.18s ease-out;
}

.workspace-selector-dropdown.show {
    display: block;
}

.workspace-dropdown-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #64748b);
    background: var(--bg-surface, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.workspace-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-left: 3px solid transparent;
}

.workspace-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.06);
}

.workspace-dropdown-item.active {
    background: rgba(99, 102, 241, 0.08);
    border-left-color: var(--primary, #6366f1);
}

.workspace-dropdown-item i {
    font-size: 15px;
    margin-top: 3px;
    width: 20px;
    text-align: center;
}

.workspace-dropdown-item .ws-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workspace-dropdown-item .ws-info strong {
    font-size: 13px;
    color: var(--text-primary, #0f172a);
}

.workspace-dropdown-item .ws-info span {
    font-size: 11.5px;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

.workspace-dropdown-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 4px 0;
}

/* 3. Slide-Over List View Quick Preview Drawer */
.quick-preview-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 9998;
}

.quick-preview-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 440px;
    max-width: 90vw;
    background: var(--bg-card, #ffffff);
    box-shadow: -8px 0 35px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-preview-drawer.open {
    transform: translateX(0);
}

.qp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

.qp-title-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.qp-module-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.qp-record-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qp-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.qp-close-btn:hover {
    color: var(--text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.05);
}

.qp-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    overflow-x: auto;
}

.qp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-field, #f8fafc);
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.qp-call-btn:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.qp-wa-btn:hover {
    background: #22c55e;
    color: #ffffff;
    border-color: #22c55e;
}

.qp-email-btn:hover {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
}

.qp-edit-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.qp-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
}

.qp-summary-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-surface, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 16px;
}

.qp-field-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color, #e2e8f0);
}

.qp-field-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.qp-field-label {
    color: var(--text-muted, #64748b);
    font-weight: 500;
    flex-shrink: 0;
}

.qp-field-value {
    color: var(--text-primary, #0f172a);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.qp-badge-val {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary, #6366f1);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11.5px;
}

.qp-footer {
    padding: 16px 22px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #f8fafc);
}

/* 4. Progressive Form Disclosure */
.btn-toggle-density.active {
    background: var(--bg-card, #ffffff) !important;
    color: var(--primary, #6366f1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.form-density-hidden {
    display: none !important;
}

/* Email Composer Visual & Rich Text Styling */
#email-body-editor,
#email-compose-editor {
    font-family: inherit;
    word-break: break-word;
}

#email-body-editor:empty:before,
#email-compose-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted, #94a3b8);
    pointer-events: none;
    font-style: italic;
}

#email-body-editor table,
#email-compose-editor table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8px 0 !important;
    font-size: 13px !important;
}

#email-body-editor table td,
#email-body-editor table th,
#email-compose-editor table td,
#email-compose-editor table th {
    border: 1px solid var(--border-color, #cbd5e1) !important;
    padding: 6px 10px !important;
    vertical-align: top !important;
}

#email-body-editor figure.table,
#email-compose-editor figure.table {
    margin: 6px 0 !important;
    width: 100% !important;
    overflow-x: auto;
}

#email-body-editor h1, #email-body-editor h2, #email-body-editor h3, #email-body-editor h4,
#email-compose-editor h1, #email-compose-editor h2, #email-compose-editor h3, #email-compose-editor h4 {
    margin: 6px 0 4px 0;
    color: var(--text-primary);
    font-weight: 700;
}

#email-body-editor p,
#email-compose-editor p {
    margin: 4px 0;
    line-height: 1.5;
}

#email-body-editor a,
#email-compose-editor a {
    color: var(--primary, #3b82f6);
    text-decoration: underline;
}

.details-editor-btn:hover {
    background: var(--bg-card-hover, rgba(0,0,0,0.06)) !important;
    color: var(--primary, #6366f1) !important;
}

.details-editor-btn.active {
    background: var(--primary, #6366f1) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Vtiger Standard Field Validation & Currency Input Architecture
   Based on C:\wamp64\www\democrm\layouts\v7\modules\Vtiger\resources\validation.js
   ========================================================================== */

.input-error,
.form-control.input-error,
select.form-control.input-error,
textarea.form-control.input-error,
.currency-input-group.input-error .form-control,
.vtiger-lookup-group.input-error .vtiger-lookup-input,
.vtiger-lookup-input.input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

body:not(.light-theme) .input-error,
body:not(.light-theme) .form-control.input-error,
body:not(.light-theme) select.form-control.input-error,
body:not(.light-theme) textarea.form-control.input-error,
body:not(.light-theme) .currency-input-group.input-error .form-control,
body:not(.light-theme) .vtiger-lookup-group.input-error .vtiger-lookup-input,
body:not(.light-theme) .vtiger-lookup-input.input-error {
    border-color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

.vtiger-lookup-group.input-error {
    border-color: #ef4444 !important;
}

.vtiger-field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ef4444;
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.35;
    animation: vtigerErrorFadeIn 0.15s ease-out;
}

body:not(.light-theme) .vtiger-field-error {
    color: #f87171;
}

.vtiger-field-error i {
    font-size: 11px;
    flex-shrink: 0;
}

@keyframes vtigerErrorFadeIn {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Vtiger Currency Input Group */
.currency-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}

.currency-input-group .currency-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border-color, #cbd5e1);
    border-right: none;
    border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
    color: var(--text-secondary, #64748b);
    font-weight: 700;
    font-size: 14px;
    user-select: none;
    transition: border-color 0.15s ease;
}

body:not(.light-theme) .currency-input-group .currency-addon {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-color, rgba(255, 255, 255, 0.15));
    color: var(--text-primary, #f8fafc);
}

.currency-input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    flex: 1;
    min-width: 0;
}



/* Vtiger CRM Date Input Group */
.vtiger-date-input-group {
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
}

.vtiger-date-input-group .dateField {
    flex: 1 1 auto !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

.vtiger-date-input-group .input-group-addon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04)) !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    border-left: none !important;
    border-top-right-radius: var(--radius-sm, 6px) !important;
    border-bottom-right-radius: var(--radius-sm, 6px) !important;
    cursor: pointer !important;
    color: var(--text-secondary, #64748b) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none !important;
}

.vtiger-date-input-group:hover .input-group-addon,
.vtiger-date-input-group:focus-within .input-group-addon {
    color: var(--primary, #6366f1) !important;
    background: var(--bg-hover, rgba(99, 102, 241, 0.08)) !important;
    border-color: var(--primary, #6366f1) !important;
}

.vtiger-date-input-group:focus-within .dateField {
    border-color: var(--primary, #6366f1) !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15) !important;
    z-index: 2;
}