@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700&display=swap');

:root {
    /* --- Work Tasks Theme (Red & Slate) --- */
    /* DEFAULT TO DARK MODE (User Request) */

    /* Dimensions */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 80px;

    /* Dark Mode Palette (Default) */
    --bg-primary: #0f172a;
    /* Slate 900 */
    --bg-sidebar: #1e293b;
    /* Slate 800 */
    --bg-card: #1e293b;
    --bg-card-hover: #334155;
    /* Slate 700 */
    --bg-input: #334155;

    /* Brand Colors */
    --primary: #dc2626;
    /* Red 600 */
    --primary-light: #f87171;
    --accent: #dc2626;

    /* Text */
    --text-primary: #f1f5f9;
    /* Slate 100 */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --text-light: #ffffff;
    --text-muted: #64748b;

    /* Borders & Shadows */
    --border: #334155;
    --shadow: 0 0 transparent;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);

    --radius-md: 12px;
    --radius-sm: 8px;

    /* Status Colors */
    --danger: #ef4444;
    --success: #16a34a;
    --warning: #f59e0b;

    --pastel-red: rgba(248, 113, 113, 0.15);
    --pastel-blue: rgba(59, 130, 246, 0.1);
    --pastel-green: rgba(22, 163, 74, 0.15);
    --pastel-purple: rgba(168, 85, 247, 0.15);

    /* Misc */
    /* Gradients (Dark Mode Default) */
    --bg-gradient: var(--bg-primary);
}

[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-sidebar: rgba(255, 255, 255, 0.85);
    --bg-card: rgba(255, 255, 255, 0.8);
    --bg-card-hover: #ffffff;
    --bg-input: rgba(0, 0, 0, 0.03);

    --primary: #dc2626;
    --primary-light: #ef4444;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --border: rgba(0, 0, 0, 0.1);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Light Mode Gradient (Strong Red/White) */
    /* Top-Left intense white, fading into soft red, then deeper red at bottom-right */
    --bg-gradient: linear-gradient(135deg, #ffffff 0%, #fff1f2 50%, #fecaca 100%);

    --pastel-red: rgba(220, 38, 38, 0.1);
    --glow-primary: 0 0 10px rgba(220, 38, 38, 0.3);
}

.toggle-sidebar-btn {
    display: none !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbar (System Look) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Adaptive Gradient / Image */
    background: var(--bg-gradient);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.modal-title,
.main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* --- Layout --- */

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width-collapsed);
    /* Permanent collapsed width */
    height: 100vh;
    background: var(--bg-sidebar);
    z-index: 10001;
    /* keep sidebar above modal */

    /* Glass Effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 24px 12px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    /* transition removed as it is permanent */
    z-index: 100;
}

/* .sidebar.collapsed removed as it is default */

.sidebar-header {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
}

.logo-text {
    display: none;
    /* Always hidden in compact mode */
}

/* Navigation */
/* Navigation Tooltips */
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center icon */
    gap: 0;
    /* No gap needed */
    padding: 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    position: relative;
    /* For tooltip positioning */
}

.nav-item.active {
    background: var(--pastel-red);
    color: var(--primary);
    font-weight: 600;
}

.nav-item.active svg {
    stroke: var(--primary);
}

/* Tooltip Logic */
.nav-item span {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    /* Dark Slate tooltip */
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-item span::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent #1e293b transparent transparent;
}

.nav-item:hover span {
    opacity: 1;
}

/* Create Button */
.create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.create-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3);
}

.create-btn span {
    display: none;
    /* Hide text in compact mode */
}

/* Main Content Adjusted */
.main-content {
    margin-left: var(--sidebar-width-collapsed);
    /* Fixed margin */
    /* Padding Reduced */
    padding: 20px;

    /* Responsive Height Logic */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ensure it tracks viewport height */

    flex-grow: 1;
    width: calc(100% - var(--sidebar-width-collapsed));
}

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

.main-title {
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* --- Email Composition Modal (Gmail Style) --- */
.email-modal {
    position: fixed;
    bottom: 0;
    right: 80px;
    /* Left of chat/sidebar margin */
    width: 500px;
    height: 600px;
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3);
    z-index: 10010;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.email-header {
    background: var(--bg-sidebar);
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

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

.email-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.email-input {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
}

.email-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.02);
}

.email-textarea {
    flex-grow: 1;
    width: 100%;
    padding: 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: none;
}

.email-textarea:focus {
    outline: none;
}

.email-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.btn-send-email {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-send-email:hover {
    background: var(--primary-light);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* --- Kanban Board (High Density Layout) --- */
.kanban-board {
    display: flex;
    gap: 10px;
    /* Reduced: 16px → 10px */
    width: 100%;
    padding-bottom: 24px;
    align-items: flex-start;
    /* Fixed height removed, using flex-grow */
    flex: 1;
    /* height: calc(100vh - 120px); REMOVED */
    /* Fill remaining height */
    min-height: 0;
    /* Fix flex child scrolling */
    overflow-x: auto;
    /* Allow horizontal scroll if needed */
}

.kanban-column {
    flex: 1;
    /* Stretch to fill space equally */
    min-width: 140px;
    /* Reduced: 14.2% approx */
    /* min-width: 200px; REMOVED */
    max-width: 100%;
    /* Allow expanding */
    display: flex;
    flex-direction: column;
    max-height: 100%;
    background: transparent;
    /* Clean column look */
}

.column-header {
    padding: 10px 4px;
    /* Reduced: 16px → 10px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    /* Reduced: 8px → 4px */
}

.column-title {
    font-size: 12px;
    /* Reduced: 14px → 12px */
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-count {
    background: var(--bg-input);
    padding: 2px 6px;
    /* Reduced: 8px → 6px */
    border-radius: 12px;
    font-size: 11px;
    /* Reduced: 12px → 11px */
    font-weight: 600;
    color: var(--text-secondary);
}

.column-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 6px;
    /* Reduced: 8px → 6px */
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Reduced: 12px → 4px for high density */
    min-height: 100px;
    /* Ensure minimum drop area */
    /* Reduced opacity for column background */
    background: rgba(0, 0, 0, 0.1);
    /* Subtle background for "grid" feel */
    border-radius: 8px;
    /* Rounded corners */
    border: 1px dashed transparent;
    /* Placeholder for drag state */
    transition: all 0.2s ease;
}

.column-body.drag-over {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Lead Cards (Work Task Style - High Density) */
.lead-card {
    background: var(--bg-card);
    /* Changed to RGBA for transparency */
    /* Glass Effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid var(--border);
    border-radius: 8px;
    /* Reduced for compactness */
    padding: 6px 8px;
    /* Dramatically reduced: 16px → 6px 8px */
    box-shadow: var(--shadow);
    /* Fix Interaction Issues */
    cursor: pointer !important;
    /* Force "Hand" cursor */
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    /* Prevent squash */
}

.lead-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* Deeper shadow on hover */
    cursor: pointer !important;
    background: var(--bg-card-hover);
    border-color: var(--primary);
    /* Subtle highlight */
}

.lead-company {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    /* Reduced: 15px → 13px */
    color: var(--text-primary);
    margin-bottom: 2px;
    /* Reduced: 4px → 2px */
    line-height: 1.3;
    /* Tighter line height */
}

.lead-decisor {
    font-size: 11px;
    /* Reduced: 13px → 11px */
    color: var(--text-secondary);
    margin-bottom: 4px;
    /* Reduced: 12px → 4px */
    display: flex;
    align-items: center;
    gap: 4px;
    /* Reduced: 6px → 4px */
}

/* Tags (Pills) */
.lead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Reduced: 8px → 4px */
}

.lead-tag {
    font-size: 10px;
    /* Reduced: 11px → 10px */
    padding: 3px 7px;
    /* Reduced: 4px 10px → 3px 7px */
    border-radius: 20px;
    /* Fully rounded pill */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    /* Slightly reduced */
}

/* Specific Tag Styles */
.tag-cadence {
    background: var(--pastel-red);
    color: var(--primary);
    border: 1px solid transparent;
}

/* --- Modals (Full Screen Panel - Native Look) --- */
/* Modal Overlay & Animation */
.modal-overlay {
    position: fixed;
    top: 0;
    left: var(--sidebar-width-collapsed);
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* below sidebar */
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

.modal-card {
    background: var(--bg-card);
    width: 500px;
    max-width: 90%;
    max-height: 80vh;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-overlay.show .modal-card {
    transform: none;
}

/* --- LEAD MODAL SPECIFIC (CENTERED POPUP) --- */
/* Target the specific class used in #leadModal if different, or add this class */
.lead-modal-content {
    background: var(--bg-card);
    width: 95vw;
    max-width: 1400px;
    /* Wide but not full full */
    height: 90vh;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Header/Body/Footer scrolling handled inside */
    transform: scale(0.95);

    /* CSV Import Modal specific styling */
    #csvImportModal.modal-overlay {
        justify-content: center;
    }

    #csvImportModal .modal-card {
        width: 500px;
        max-width: 90%;
        max-height: 80vh;
        height: auto;
        margin: auto;
        transform: none;
    }

    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Ensure it is centered by the flex parent rule in .modal-overlay */
    margin: auto;
    /* Forces centering in flex container */
    position: relative;
}

.modal-overlay.show .lead-modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Override Overlay to justify center for this modal type if needed, 
   but 'justify-content: flex-end' is on default overlay for drawers. 
   We need to override that for this specific modal instance or generally.
   Let's check if we can make #leadModal overlay centered. */

#leadModal {
    justify-content: center;
    /* Center the popup */
    backdrop-filter: blur(8px);
    /* Stronger blur */
    -webkit-backdrop-filter: blur(8px);
}

.modal-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-sidebar);
}

.modal-body {
    padding: 32px;
    overflow-y: auto;
    flex-grow: 1;
    background: var(--bg-primary);
    /* Slight contrast for body */
}

/* Clean Inputs */
.input-group {
    margin-bottom: 20px;
    /* More vertical breathing room */
}

.input-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    /* Highlight labels with brand color */
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px;

    /* Glass Effect */
    background: transparent;
    backdrop-filter: blur(4px);

    border-top: 1px solid var(--border);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.2s;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    outline: none;
    border-color: var(--primary);

    /* Neon Glow */
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.25);
    background: rgba(255, 255, 255, 0.03);
}

/* Modal Tabs & Content */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
    padding: 0 24px;
    flex-shrink: 0;
    /* Keep header fixed */
}

.tab-btn,
.user-tab-btn {
    padding: 16px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active,
.user-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.user-tab-content {
    display: none;
    padding: 24px;
    /* Optional: add some padding if needed, or rely on inner elements */
    overflow-y: auto;
    /* Ensure content scrolls if needed */
    height: 100%;
    /* Take full height */
}

.user-tab-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

.tab-content {
    display: none;
    flex-grow: 1;
    /* Fill remaining vertical space */
    overflow-y: auto;
    /* Enable Vertical Scroll */
    padding: 24px 32px 80px 32px;
    /* Increased bottom padding to clear scroll */
    background: var(--bg-primary);
    min-height: 0;
    /* Critical for flex scrolling */
    /* height: 100%; REMOVED to prevent overflow */
}

.tab-content.active {
    display: block;
}

/* Modal Actions */
.modal-actions {
    padding: 24px 32px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    /* Fixed footer */
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn-cancel {
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-btn-cancel:hover {
    background: var(--border);
}

.modal-btn-confirm {
    background: var(--primary);
    color: white;
}

.modal-btn-confirm:hover {
    background: var(--primary-light);
}

/* --- Toast Notifications (Fixed Global) --- */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    padding: 16px 20px;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    pointer-events: auto;
    animation: slideInToast 0.4s ease forwards;
}

@keyframes slideInToast {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- Login Screen (F1 Glass Theme) --- */
#auth-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Changed from 100vw to avoid horizontal scroll */
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    z-index: 99999;

    /* Background Image */
    background-image: url('../assets/login-bg-f1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Centering */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Prevent scroll on the wrapper level */
    overscroll-behavior: none;
    /* Prevent rubber-banding */
}

/* Hide Left Side for this Theme (Fix Layout Shift) */
.auth-left {
    display: none;
}

/* Blur Overlay (Texture) */
.auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darkening */
    backdrop-filter: blur(8px);
    /* Strong Blur */
    z-index: 1;
}

/* Centered Glass Card */
.auth-right {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 20px;
    display: flex;
    /* Ensure centering context */
    justify-content: center;
}

.login-card {
    width: 100%;
    max-width: 440px;
    /* Slightly adjusted */
    padding: 40px 30px;
    /* Reduced padding for better fit */

    background: rgba(255, 255, 255, 0.1);
    /* Glass White */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 24px;
    text-align: center;
    color: white;

    /* Safety for small screens */
    max-height: 90vh;
    overflow-y: auto;
    /* Hide scrollbar for aesthetics */
    scrollbar-width: none;
}

.login-card::-webkit-scrollbar {
    display: none;
}

.login-logo {
    width: 160px;
    /* Even bigger */
    margin: 0 auto 40px auto;
    /* More bottom margin */
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.login-title {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.login-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    font-weight: 400;
}

/* Inputs (Modified for Dark/Glass) */
.auth-input {
    width: 100%;
    background: rgba(15, 23, 42, 0.6);
    /* Darker, more contrast */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 14px 16px;
    /* Comfortable padding */
    border-radius: 12px;
    /* Smooth corners */
    font-size: 15px;
    outline: none;
    transition: all 0.2s ease;
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.auth-input:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--primary);
}

.auth-btn {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    background: var(--primary);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

.google-btn {
    background: white;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.google-btn:hover {
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.google-icon {
    width: 20px;
    height: 20px;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-divider span {
    padding: 0 10px;
}

/* Conflicting Auth Styles Removed */

/* Utility / Helpers */
.hidden {
    display: none !important;
}

/* --- Modal Structure Fix --- */
.modal {
    background: var(--bg-card);
    width: 500px;
    min-width: 400px;
    height: 100%;
    display: flex;
    /* CRITICAL FIX: Enable Flexbox */
    flex-direction: column;
    /* Stack Header, Body, Footer */
}

/* ... existing animation ... */

/* --- Cadence "Native Checklist" Styles --- */
.checklist-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;
}

.cadence-card {
    background: var(--bg-card);
    /* or darker if card is white */
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card-header {
    background: var(--bg-sidebar);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.card-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.card-tasks {
    display: flex;
    flex-direction: column;
}

.task-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
    cursor: pointer;
}

.task-item:last-child {
    border-bottom: none;
}

.task-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.task-item.checked {
    background: rgba(var(--primary-rgb), 0.05);
    /* Needs variable or hardcoded */
    background: rgba(16, 185, 129, 0.1);
    /* Green tint for success */
}

.task-item.checked .task-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Custom Native Checkbox */
.task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-secondary);
    border-radius: 6px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    /* Added for interactivity */
}

/* Ensure the whole item feels clickable */
.task-item {
    cursor: pointer;
}

.task-item.checked .task-checkbox {
    background: #10b981;
    /* Emerald 500 */
    border-color: #10b981;
}

.task-item.checked .task-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.task-text {
    flex-grow: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.remove-task-btn {
    opacity: 0;
    background: none;
    border: none;
    color: var(--pastel-red);
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.task-item:hover .remove-task-btn {
    opacity: 1;
}

.card-footer {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--border);
}

.add-task-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 4px 0;
}

.add-task-btn:hover {
    text-decoration: underline;
}

/* Edit Mode Styles */
.edit-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.edit-icon-wrapper:hover {
    background: rgba(255, 255, 255, 0.1);
}

.edit-icon {
    width: 14px;
    height: 14px;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.edit-icon.active {
    color: var(--primary);
}

/* Hide remove buttons by default */
.remove-task-btn {
    display: none;
}

/* Show them when visible class is added via JS */
.remove-task-btn.visible {
    display: block;
    opacity: 1;
    /* Reset opacity logic if needed */
}

/* Card Visual when Editing */
.cadence-card.editing {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        top: auto;
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border);
        padding: 12px;
        justify-content: space-around;
        background: var(--bg-sidebar);
    }

    .sidebar-header,
    .create-btn,
    .settings-section,
    .nav-item span {
        display: none;
    }

    .nav-item {
        padding: 8px;
        margin: 0;
    }

    .main-content {
        margin-left: 0;
        margin-bottom: 70px;
        /* Space for bottom nav */
        padding: 20px;
        width: 100%;
    }

    .kanban-board {
        flex-direction: column;
        height: auto;
        overflow-y: visible;
    }

    .kanban-column {
        width: 100%;
    }

    .modal-overlay {
        left: 0;
        align-items: flex-end;
        /* Bottom sheet on mobile? Or just full */
    }
}

/* --- New Settings UI (Clean Aesthetic) --- */
.settings-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.settings-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding-left: 4px;
}

.settings-section-title.danger {
    color: var(--danger);
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.settings-card.danger-card {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.settings-row {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    gap: 20px;
}

.settings-card .settings-row:last-child {
    border-bottom: none;
}

/* Info & Labels */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-grow: 1;
}

.settings-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-label.danger-text {
    color: var(--danger);
    font-weight: 600;
}

.settings-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Inputs within settings */
.settings-input {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    margin-top: 4px;
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Avatar Specific */
.avatar-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer / Actions */
.settings-footer {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* --- METRICS & DASHBOARD --- */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-color: var(--primary);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    opacity: 0.8;
}

.metric-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
}

.chart-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    min-height: 350px;
    /* Ensure space for chart */
}

/* --- New Button System --- */
.btn-secondary,
.btn-outline,
.btn-danger-outline,
.theme-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

/* Primary/Solid */
.btn-secondary {
    background: var(--primary);
    color: white;
    border: none;
}

.btn-secondary:hover {
    background: var(--primary-light);
}

/* Outline/Ghost */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-secondary);
}

/* Danger */
.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.btn-danger-outline:hover {
    background: var(--danger);
    color: white;
}

/* Theme Toggle specific */
.theme-toggle-group {
    display: flex;
    background: var(--bg-input);
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
}

.theme-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.theme-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Theme Dots */
.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.theme-dot.light {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
}

.theme-dot.dark {
    background: #1e293b;
    border: 1px solid #475569;
}

.divider {
    height: 1px;
    background: var(--border);
    margin: 0 24px;
}

/* Email Action Button in Tasks */
.email-action-btn {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--primary);
    cursor: pointer;
    margin-left: 8px;
    /* Gap from text */
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Prevent squashing */
    transition: all 0.2s;
    opacity: 0.8;
}

.email-action-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
}


/* Floating Action Button (Email) */
.fab-email {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    display: none;
    /* Managed by JS */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    /* Above toasts and modals */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
    /* Hidden state */
}

.fab-email.visible {
    display: flex !important;
    transform: scale(1);
    animation: popIn 0.3s forwards;
}

.fab-email:hover {
    background: var(--primary-light);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6);
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- FORCE LEFT SIDE MODAL (User Request) --- */
.modal-overlay {
    justify-content: flex-start !important;
    /* Align left */
    align-items: flex-start !important;
    left: 80px !important;
    /* Collapsed sidebar width */
}

body:not(.sidebar-collapsed) .modal-overlay {
    left: 260px !important;
    /* Expanded sidebar width */
}

.modal-card {
    transform: translateX(-100%) !important;
    /* Slide from left */
    border-right: 1px solid var(--border);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
}

.modal-overlay.show .modal-card {
    transform: translateX(0) !important;
}

@media (max-width: 768px) {
    .modal-overlay {
        left: 0 !important;
    }
}

/* --- FINAL UI FIXES (Modal Left + Z-Index) --- */
.modal-overlay {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    left: 80px !important;
    z-index: 9990 !important;
    /* Below FAB */
}

body:not(.sidebar-collapsed) .modal-overlay {
    left: 260px !important;
}

.modal-card {
    transform: translateX(-100%) !important;
    border-right: 1px solid var(--border);
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.5) !important;
}

.modal-overlay.show .modal-card {
    transform: translateX(0) !important;
}

.fab-email {
    z-index: 10001 !important;
    /* Above Lead Modal */
}

.email-modal {
    z-index: 20002 !important;
    /* Higher than #leadModal (105) and overlays */
}

@media (max-width: 768px) {
    .modal-overlay {
        left: 0 !important;
    }
}


/* --- FINAL MODAL REFINEMENT (Alignment + Blur + Z-Index) --- */
.modal-overlay {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    left: 80px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9990 !important;
}

body:not(.sidebar-collapsed) .modal-overlay {
    left: 260px !important;
}

.modal-card {
    transform: translateX(-100%) !important;
    border-right: 1px solid var(--border);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.modal-overlay.show .modal-card {
    transform: translateX(0) !important;
}

.fab-email {
    z-index: 10001 !important;
}

.email-modal {
    z-index: 10002 !important;
}

@media (max-width: 768px) {
    .modal-overlay {
        left: 0 !important;
    }
}


/* --- STRICT ALIGNMENT OVERRIDE --- */
.modal-overlay {
    padding: 0 !important;
    margin: 0 !important;
}

.modal-card {
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 100vh !important;
}


/* --- FINAL FIX FOR MODAL ALIGNMENT (ABSOLUTE) --- */
.modal-overlay {
    left: 80px !important;
    width: calc(100% - 80px) !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

.modal-card {
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 100vh !important;
    border-left: none !important;
}


/* --- STRICT ALIGNMENT & ANIMATION FIX --- */
.sidebar {
    width: 80px !important;
}

/* Force Sidebar Width */

.modal-overlay {
    left: 80px !important;
    width: calc(100% - 80px) !important;
    justify-content: flex-start !important;
    padding: 0 !important;
}

.modal-card {
    margin: 0 !important;
    border-radius: 0 !important;
    /* Kill all radius for test */
    height: 100vh !important;
    border-left: none !important;
    /* Animation Reset */
    transform: translateX(-100%);
}

.modal-overlay.show .modal-card {
    transform: translateX(0) !important;
}


/* --- FINAL DEFINITIVE SEAL (CAULK GAP) --- */
.modal-card {
    width: 600px !important;
    /* SEAL THE GAP: A solid shadow to the left covers sub-pixels */
    box-shadow: -5px 0 0 var(--bg-card), 10px 0 30px rgba(0, 0, 0, 0.5) !important;
    margin-left: 0 !important;
    border-left: none !important;
}

.modal-overlay {
    padding-left: 0 !important;
    left: 80px !important;
    width: calc(100% - 80px) !important;
    justify-content: flex-start !important;
}


/* --- REVERTED TO STABLE STATE --- */
.sidebar {
    z-index: 100 !important;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 80px !important;
    right: 0;
    bottom: 0;
    width: auto !important;

    display: none;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;

    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 9990 !important;
}

.modal-overlay.show {
    display: flex !important;
}

.modal-card {
    height: 100vh !important;
    max-width: 600px;
    width: 600px;

    position: relative !important;
    /* Revert from fixed */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;

    /* Revert Shadow */
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;

    /* Animation */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.show .modal-card {
    transform: translateX(0) !important;
}

/* --- Performance Dashboard --- */

#performance-view {
    height: 100%;
    width: 100%;
}

.performance-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 32px;
    height: 100%;
}

.perf-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.perf-header h3 {
    font-size: 20px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.perf-header .subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Ranking Column */
.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ranking-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.ranking-card.top-rank {
    background: linear-gradient(145deg, var(--bg-card), #2a1111);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
}

.ranking-card:hover {
    transform: translateX(4px);
    background: var(--bg-card-hover);
}

.rank-pos {
    font-size: 24px;
    font-weight: 800;
    width: 30px;
    text-align: center;
    color: var(--text-muted);
}

.top-rank .rank-pos {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
    /* Make emoji glow */
}

.rank-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-input);
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.rank-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--text-secondary);
}

.rank-info {
    flex-grow: 1;
}

.rank-name {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rank-badge {
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.rank-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.rank-bar-fill {
    height: 100%;
    background: var(--primary);
    /* Defaults to red */
    border-radius: 3px;
}

.top-rank .rank-bar-fill {
    background: linear-gradient(90deg, #f87171, #dc2626);
}

/* Goals Column (Glassmorphism) */
.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.goal-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.goal-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.goal-values {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.val-current {
    color: var(--text-primary);
}

.val-target {
    font-size: 16px;
    color: var(--text-muted);
    font-weight: 500;
}

.goal-progress-bg {
    width: 100%;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    margin-bottom: 8px;
}

.goal-progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.goal-percent {
    font-size: 12px;
    text-align: right;
    color: var(--text-secondary);
}

/* Admin Visibility */
.admin-only-btn {
    display: none !important;
}

body.is-admin .admin-only-btn {
    display: inline-flex !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Admin Table Styles --- */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary);
}

.admin-table th {
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.1);
}

.admin-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.status-active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* --- Transfer Modal Popup Overrides --- */
#transferModal.modal-overlay {
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    justify-content: center !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 10005 !important;
    padding: 20px !important;
}

#transferModal .modal {
    width: 500px !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 85vh !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.7) !important;
    margin: 0 !important;
    position: relative;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

#transferModal.show .modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

#transferModal .modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#transferModal .modal-body {
    padding: 24px;
    overflow-y: auto;
}

#transferModal .modal-actions {
    padding: 16px 24px 24px;
    background: transparent;
    justify-content: flex-end;
    gap: 12px;
}

/* --- Full Screen Left Drawer Overrides (#leadModal, #eventModal, #userStatsModal) --- */
#leadModal.modal-overlay,
#eventModal.modal-overlay,
#userStatsModal.modal-overlay {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    z-index: 20000 !important;

    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: 0 !important;
}

#leadModal .modal,
#eventModal .modal,
#userStatsModal .modal-card {
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 24px 24px 0 !important;
    border-left: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5) !important;

    transform: translateX(-100%);
    opacity: 1;
    background: var(--bg-card);
}

#leadModal.show .modal,
#eventModal.show .modal,
#userStatsModal.show .modal-card {
    transform: translateX(0) !important;
}

/* Ensure Email Box is always on top of these interactions */
.email-modal,
.fab-email {
    z-index: 30000 !important;
    /* Supreme Z-Index */
}

/* --- Custom Lead Modal Positioning (Sidebar Aligned) --- */
#leadModal {
    /* Align left next to sidebar */
    justify-content: flex-start !important;

    /* Allow interaction with background (e.g., email modal) */
    background: transparent !important;
    /* Remove dark overlay */
    pointer-events: none !important;
    /* Let clicks pass through empty space */

    /* Lower z-index so Email Modal (z-2000) is on top if needed. */
    z-index: 105 !important;

    /* Adjust 'left' to match sidebar width hardcoded to avoid variable issues */
    left: 80px !important;

    /* Ensure no gap */
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    right: auto !important;
    width: auto !important;
    /* Auto width to wrap content/modal */
}

#leadModal .modal {
    pointer-events: auto !important;
    /* Re-enable pointer events for the modal itself */
    transform: translateX(-100%);
    /* Slide from Left */

    /* Ensure it aligns to the left edge of this container */
    margin-right: auto !important;
    margin-left: 0 !important;

    /* Fixed Positioning Dimensions */
    height: 100vh;
    width: 600px;
    max-width: 90vw;

    border-radius: 0 24px 24px 0 !important;
    /* Flat left side */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* Rounded on right only */
    border-left: 1px solid var(--border);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.3);
    /* Shadow to the RIGHT */

    background: var(--bg-card);
    /* Ensure bg */
    display: flex;
    flex-direction: column;
}

/* --- FullCalendar Layout & Dark Theme Overrides --- */
#agenda-view {
    display: flex;
    flex-direction: column;
    /* Flex Growth to fill remaining space */
    flex-grow: 1;
    height: auto !important;
}

#calendar {
    flex-grow: 1;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    /* Shadow for depth */
    box-shadow: var(--shadow);
}

/* Override FullCalendar Variables for Dark Mode */
:root {
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--bg-input);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-border-color: var(--border);
    --fc-button-text-color: #fff;
    --fc-button-bg-color: var(--primary);
    --fc-button-border-color: var(--primary);
    --fc-button-hover-bg-color: var(--primary-light);
    --fc-button-hover-border-color: var(--primary-light);
    --fc-button-active-bg-color: var(--primary-light);
    --fc-button-active-border-color: var(--primary-light);

    --fc-event-bg-color: var(--primary);
    --fc-event-border-color: var(--primary);
    --fc-event-text-color: #fff;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

    --fc-today-bg-color: rgba(220, 38, 38, 0.1) !important;
    --fc-now-indicator-color: var(--primary);
}

/* Specific Element Overrides */
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--border);
}

.fc-col-header-cell-cushion,
.fc-daygrid-day-number {
    color: var(--text-primary);
    text-decoration: none !important;
}

.fc-daygrid-day:hover {
    background: rgba(255, 255, 255, 0.02);
}

.fc .fc-toolbar-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    color: var(--text-primary);
}

.fc-scroller::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.fc-scroller::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* --- WhatsApp Chat UI --- */
.chat-container {
    display: flex;
    height: 100%;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.chat-sidebar {
    width: 320px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
}

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

.chat-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.chat-list {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chat-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.chat-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.chat-info {
    overflow: hidden;
}

.chat-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-last-msg {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-window {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    position: relative;
}

.chat-header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-row {
    display: flex;
    width: 100%;
}

.message-row.msg-me {
    justify-content: flex-end;
}

.message-row.msg-other {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 60%;
    padding: 10px 14px;
    border-radius: 12px;
    position: relative;
    font-size: 14px;
    line-height: 1.4;
}

.msg-other .message-bubble {
    background: #202020;
    color: var(--text-primary);
    border-top-left-radius: 0;
}

.msg-me .message-bubble {
    background: #005c4b;
    /* WhatsApp Green Dark */
    color: white;
    border-top-right-radius: 0;
}

.msg-me .message-bubble.pending {
    opacity: 0.7;
}

.msg-time {
    font-size: 10px;
    text-align: right;
    opacity: 0.6;
    margin-top: 4px;
}

.chat-input-area {
    padding: 10px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
}

.chat-input-area input {
    flex-grow: 1;
    background: #2a2a2a;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    color: white;
    outline: none;
}

.chat-input-area button {
    background: #00a884;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s;
}

.chat-input-area button:hover {
    background: #008f6f;
}

.empty-state,
.loading-spinner,
.error-msg {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
    width: 100%;
}

/* --- Global Toast Notifications --- */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 200000 !important;
    /* Ultra high to override Lead Modal (105) and Email Modal (30000) */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Let clicks pass through container area */
}

.toast {
    pointer-events: auto;
    /* Re-enable clicks on toast/buttons */
}

/* --- Fix Transfer Modal (Center & Top) --- */
#transferModal {
    left: 0 !important;
    /* Reset left offset */
    justify-content: center !important;
    /* Center horizontally */
    align-items: center !important;
    /* Center vertically */
    z-index: 21000 !important;
    /* Ensure on top */
}

#transferModal .modal {
    transform: none !important;
    /* increasing stability */
    margin: auto !important;
}

/* --- Transfer Modal Styling --- */
.kpi-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
    /* Increased from 30px */
}

.transfer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    /* Padding for focus/selection outlines */
}

.transfer-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.transfer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--primary);
}

.transfer-card.selected {
    border-color: var(--primary);
    background: rgba(195, 15, 69, 0.1);
    /* Assuming primary red tint */
    box-shadow: 0 0 0 2px var(--primary);
}

.transfer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.transfer-name {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.2;
}

.transfer-email {
    font-size: 0.75em;
    color: var(--text-secondary);
    word-break: break-all;
    opacity: 0.8;
}

/* Spinner for Transfer Modal */
.loader-spinner {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-left-color: var(--primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* --- Cadence UI Modernization --- */
.cadence-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 24px;
    /* Space between days */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    /* For header radius */
    transition: all 0.3s ease;
}

.cadence-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.cadence-card .card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cadence-card .card-tasks {
    padding: 8px 0;
    /* Adjusted padding */
}

/* Adjust checklist items inside card */
.cadence-card .checklist-item {
    padding: 12px 20px;
    /* More breathing room */
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.cadence-card .checklist-item:last-child {
    border-bottom: none;
}

.cadence-card .checklist-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* --- Cadence Inline Select Styling --- */
.inline-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.9em;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' 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 10px center;
    background-size: 16px;
    padding-right: 40px;
    /* Space for icon */
}

.inline-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(195, 15, 69, 0.2);
}

.inline-select option {
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 10px;
}

/* Add Task Row Layout */
.add-task-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.inline-btn-confirm,
.inline-btn-cancel {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 36px;
    height: 38px;
    /* Match select height approx */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.inline-btn-confirm:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: #10b981;
}

.inline-btn-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* --- PREMIUM METRICS DASHBOARD --- */
.kpi-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
    /* Increased padding */
}

.kpi-card-premium {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    border-color: var(--border-hover);
}

/* Subtle Gradient Overlay on Hover */
.kpi-card-premium::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.kpi-card-premium:hover::after {
    opacity: 1;
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

/* --- Charts Split Layout --- */
.charts-dashboard-split {
    display: grid;
    grid-template-columns: 4fr 6fr;
    /* Funnel smaller, Activity wider */
    gap: 40px;
    /* Increased gap from 24px */
}

@media (max-width: 1024px) {
    .charts-dashboard-split {
        grid-template-columns: 1fr;
        /* Stack on smaller screens */
    }
}

.chart-box-premium {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

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

.chart-header h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-canvas-wrapper {
    position: relative;
    height: 350px;
    /* Taller charts */
    width: 100%;
}

/* --- Settings View Styles (Restored) --- */

.settings-container {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.settings-group {
    margin-bottom: 32px;
}

.settings-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-left: 4px;
}

.settings-section-title.danger {
    color: var(--danger);
}

.settings-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.settings-card.danger-card {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.05);
}

.settings-row {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    gap: 20px;
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-content {
    flex-grow: 1;
}

.settings-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settings-label.danger-text {
    color: var(--danger);
}

.settings-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.settings-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 8px;
}

.settings-footer {
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.avatar-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Active Call Button Animation */
@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.pulsing-btn {
    animation: pulse-red 2s infinite;
}

/* --- Settings Vertical Layout --- */
.settings-layout {
    display: block;
    height: 100%;
    overflow: hidden;
    /* Main container fixed */
}

.settings-sidebar {
    background: var(--bg-sidebar);
    /* Or slightly different shade */
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.settings-main {
    padding: 24px 32px;
    overflow-y: auto;
    background: var(--bg-main);
}

.vertical-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vertical-tab-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
}

.vertical-tab-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.vertical-tab-btn.active {
    background: var(--primary-light);
    /* Or primary with opacity */
    color: var(--primary);
    /* Or white if solid bg */
    font-weight: 600;
}

/* If utilizing solid primary for active state: */
.vertical-tab-btn.active {
    background: rgba(37, 99, 235, 0.1);
    /* Light Blue bg */
    color: var(--primary);
}

.settings-tab-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PIPELINE MODE SWITCHER FORCE VISIBILITY */
#pipeline-filter-bar {
    z-index: 100 !important;
    position: relative !important;
    opacity: 1 !important;
}

.pipeline-mode-btn {
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.pipeline-mode-btn.active {
    background: var(--primary) !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}