/* === TotalFlow CRM Stylesheet v5.4 === */

/* --- 1. Root Variables & Global Setup --- */
:root {
    --primary-color: #4361ee;
    --secondary-color: #6b7280;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --accent-color: #facc15;

    --bs-body-bg: #010409;
    --bs-body-color: #c9d1d9;
    --sidebar-bg: #0d1117;
    --card-bg: #0d1117;
    --header-bg: #0d1117;
    --menu-hover-bg: rgba(173, 186, 199, 0.1);
    --heading-text: #e6edf3;
    --light-text: #8b949e;
    --bs-border-color: #30363d;
    --border-color-2: #4b5563;
    --input-bg: #010409;
    --input-border: #30363d;
    --input-text: #c9d1d9;
    --input-placeholder: #6e7681;
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #82b5fb;

    --border-radius: 0.5rem;
    --border-radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.25);
    --transition-speed: 0.25s;
}

body.light-mode {
    --bs-body-bg: #f4f7fc;
    --bs-body-color: #212529;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --menu-hover-bg: #e9ecef;
    --heading-text: #343a40;
    --light-text: #6c757d;
    --bs-border-color: #dee2e6;
    --border-color-2: #d1d5db;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #212529;
    --input-placeholder: #6c757d;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
html { height: 100%; }
/* styles.css - AFTER */
body { 
  background-color: var(--bs-body-bg); 
  color: var(--bs-body-color); 
  font-size: 14px; 
  line-height: 1.6; 
  height: 100vh; 
  /* The overflow: hidden; property has been removed. */
  transition: background-color var(--transition-speed), color var(--transition-speed); 
}
.hidden {
  display: none !important;
}
a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--bs-link-hover-color); }


/* =================================== */
/* === 2. AUTHENTICATION SCREEN    === */
/* =================================== */
body.auth-active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 15px;
}
body.auth-active.light-mode {
    background-color: #f8f9fa;
}

#authContainer {
    width: 100%;
}
#authContainer .container.auth {
    width: 100%;
    max-width: 450px;
    background: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px 35px 50px;
    margin: 20px auto;
    position: relative;
    overflow: visible;
}
.container.auth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--primary-color);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.app-logo {
    display: block;
    margin: 0 auto 30px;
    max-width: 170px;
}
.container.auth h1.title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    color: var(--heading-text);
}
.container.auth h1.title strong {
    color: var(--primary-color);
}
.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--input-text);
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 25px;
    cursor: pointer;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
.google-signin-btn:hover {
    background-color: var(--menu-hover-bg);
}
.google-signin-btn img {
    width: 18px;
    height: 18px;
}
.separator {
    display: flex;
    align-items: center;
    color: var(--light-text);
    font-size: 13px;
    margin: 0 5px 25px;
}
.separator::before, .separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color-2);
}
.separator span {
    margin: 0 15px;
    font-weight: 500;
}
.form-group {
    margin-bottom: 22px;
    position: relative;
}
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 8px;
}
.form-group .input-wrapper {
    position: relative;
}
.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.form-group input[type="password"] {
    padding-right: 45px;
}
.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.password-toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--light-text);
}
.password-toggle-icon:hover {
    color: var(--primary-color);
}
.action-link {
    text-align: right;
    margin-bottom: 22px;
    margin-top: -10px;
}
.action-link a {
    font-weight: 500;
    font-size: 13px;
}
.container.auth .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.container.auth .btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: translateY(-1px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.container.auth .btn:disabled {
    background-color: var(--secondary-color);
    opacity: 0.65;
    cursor: not-allowed;
}
.spinner-border-sm {
    display: none;
    width: 1em;
    height: 1em;
    border: .2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: .75s linear infinite spinner-border;
}
@keyframes spinner-border { to { transform: rotate(360deg); } }

.btn.loading .spinner-border-sm { display: inline-block; }
.btn.loading .btn-text { opacity: 0; }
.btn.loading { pointer-events: none; }

.feedback-message {
    padding: 10px 15px;
    margin-top: 15px;
    border-radius: var(--border-radius);
    font-size: 14px;
    text-align: left;
    border: 1px solid transparent;
    display: none; /* JS will add .show */
    align-items: center;
    gap: 8px;
}
.feedback-message.show { display: flex; }
.feedback-message.success { background-color: color-mix(in srgb, var(--success-color) 15%, transparent); color: var(--success-color); border-color: color-mix(in srgb, var(--success-color) 30%, transparent); }
.feedback-message.error { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 30%, transparent); }

.switch-view {
    text-align: center;
    font-size: 14px;
    color: var(--light-text);
    margin-top: 15px;
}
.switch-view a {
    color: var(--bs-link-color);
    font-weight: 600;
}


/* =================================== */
/* === 3. APPLICATION SHELL        === */
/* =================================== */
#appWrapper { display: flex; height: 100vh; }
.sidebar { width: 240px; background-color: var(--sidebar-bg); border-right: 1px solid var(--bs-border-color); display: flex; flex-direction: column; padding: 1.5rem 0; flex-shrink: 0; transition: background-color var(--transition-speed), border-color var(--transition-speed); }
.sidebar-header {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--bs-border-color);
}
.sidebar-logo { height: 92px; margin-right: 10.75rem; }
.sidebar-title { font-weight: 600; font-size: 1.2rem; color: var(--heading-text); }
/* in styles.css, REPLACE the old rule */

.sidebar-nav .nav-link.active {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    font-weight: 600;
    /* The box-shadow property has been removed */
}
.sidebar-nav ul { list-style: none; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    margin: 0.1rem 1rem;
    border-radius: var(--border-radius);
    color: var(--light-text);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s; /* Removed transform and border-left-color from transition */
    /* border-left property removed */
}

.sidebar-nav .nav-link i { margin-right: 1rem; width: 20px; text-align: center; font-size: 1.1rem; }
.sidebar-nav .nav-link span {
    white-space: normal;
    line-height: 1.4;
}

.sidebar-nav .nav-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
    /* transform property removed */
}
.sidebar-nav .nav-link.active {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    font-weight: 600;
    /* border-left-color property removed */
}
/* --- MODIFICATION START: Enhanced Centered & Styled Settings Link --- */
/* --- 7. SIDEBAR FOOTER (Revised for Dropdown) --- */

.sidebar-footer {
    padding: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Container for the new dropdown to position the menu correctly */
.footer-dropdown-container {
    position: relative; 
    width: 100%;
}

/* This styles the trigger button ("Options") and the FlowCore AI button */
.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 1rem;
    margin: 0;
    background-color: var(--menu-hover-bg);
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    color: var(--light-text);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.sidebar-footer .nav-link:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.sidebar-footer .nav-link i {
    margin-right: 0.75rem;
}

.footer-logo-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    object-fit: contain;
}

/* The dropdown menu itself */
.footer-dropdown-menu {
    position: absolute;
    bottom: calc(100% + 8px); /* Position it above the button */
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    min-width: 100%;
    animation: fadeIn 0.2s ease;
}

/* Links inside the dropdown */
.footer-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--bs-body-color);
    font-weight: 500;
    white-space: nowrap;
}

.footer-dropdown-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.footer-dropdown-link i.fa-fw {
    width: 1.2em;
    text-align: center;
}

/* This is the container for the Upgrade button that is shown/hidden */
#upgradeBtnContainer {
    width: 100%;
}

/* This styles the "Upgrade Plan" button itself */
.btn-upgrade-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    border: none;
    font-weight: 600;
    font-size: 1rem;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(90deg, #4285F4, #9B59B6);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-upgrade-plan:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    filter: brightness(1.1);
}
/* Incolla questo codice alla fine del tuo file styles.css */

/* --- CORREZIONE ALLINEAMENTO HEADER --- */

/* 1. Imposta un'altezza coerente per entrambe le intestazioni per garantire che i loro bordi inferiori si allineino. */
.top-header,
.sidebar-header {
    height: 70px;
    box-sizing: border-box;
}

/* 2. Rimuovi il padding verticale principale dalla sidebar che spinge il contenuto verso il basso. */
.sidebar {
    padding-top: 0;
    padding-bottom: 0;
}

/* 3. Aggiungi padding all'area di navigazione per ripristinare la spaziatura verticale. */
.sidebar-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* styles.css - AFTER */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.top-header {
    /* FIX: Use min-height instead of a fixed height. 
       This allows the header to contain the dropdown without being stretched. */
    min-height: 70px; 
    
    /* FIX: Explicitly set overflow to visible to prevent clipping. */
    overflow: visible;

    /* These are your existing styles, which should remain. */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.search-bar,
.prompt-bar {
    display: flex;
    align-items: center;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    padding: 0.6rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    gap: 0.5rem;
}

.search-bar:focus-within,
.prompt-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.search-bar i { color: var(--light-text); }
.search-bar input,
.prompt-bar input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    width: 100%;
    color: var(--input-text);
}
.search-bar input { margin-left: 0.75rem; }

.user-actions { display: flex; align-items: center; gap: 1.25rem; }
.icon-btn { font-size: 1.3rem; color: var(--light-text); cursor: pointer; position: relative; background: none; border: none; }
.notification-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background-color: var(--danger-color); border-radius: 50%; border: 1.5px solid var(--header-bg); }

/* Theme Toggle Switch */
.theme-switch-wrapper { display: flex; align-items: center; }
.theme-switch { position: relative; display: inline-block; width: 56px; height: 30px; cursor: pointer; }
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--input-bg); border: 1px solid var(--bs-border-color); border-radius: 34px; transition: all var(--transition-speed); }
.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: var(--card-bg); border: 1px solid var(--bs-border-color); border-radius: 50%; transition: all var(--transition-speed); box-shadow: var(--shadow-sm); }
.slider .icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--accent-color); transition: opacity 0.15s ease-in-out; z-index: 1; }
.slider .sun { left: 7px; opacity: 0; } .slider .moon { right: 7px; opacity: 1; }
input:checked + .slider { background-color: var(--primary-color); border-color: var(--primary-color); }
input:checked + .slider:before { transform: translateX(26px); background-color: white; border-color: transparent; }
input:checked + .slider .sun { opacity: 1; color: white; } input:checked + .slider .moon { opacity: 0; }

/* User Menu */
.user-menu-container { position: relative; }
.user-avatar-btn { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; }
.user-avatar-btn img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--bs-border-color); }
/* in styles.css */

/* User Menu Dropdown Enhancement */
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1050;
    min-width: 240px; /* Increased min-width for better spacing */
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg); /* Softer, larger radius */
    /* Adds a modern, soft shadow for depth */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    padding: 0.75rem; /* Add padding around the entire dropdown */
    /* Smooth fade-in animation */
    animation: fadeIn 0.2s ease-out;
}

.user-menu-user-info {
    padding: 0.5rem 0.75rem; /* Adjust padding for the user info section */
    margin-bottom: 0.5rem; /* Add space below the user info */
}

#userMenuDisplayName {
    font-weight: 600;
    font-size: 1rem; /* Slightly larger font size */
    color: var(--heading-text);
}

#userMenuEmail {
    font-size: 0.85rem; /* Slightly larger font size */
    color: var(--light-text);
}

.dropdown-divider {
    height: 1px;
    margin: 0.75rem 0; /* Increased margin for more separation */
    background-color: var(--bs-border-color);
}

.user-menu-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem; /* Increased padding for links */
    text-decoration: none;
    color: var(--bs-body-color);
    border-radius: var(--border-radius); /* Add border-radius to links */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-menu-nav-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.user-menu-nav-link.logout-item:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}

.user-menu-nav-link i.fa-fw {
    width: 1.2em;
    text-align: center;
    font-size: 1rem; /* Consistent icon size */
}
.user-menu-nav-link i.fa-fw { width: 1.2em; text-align: center; }

/* =================================== */
/* === 4. MAIN CANVAS & DASHBOARD  === */
/* =================================== */
/* in styles.css */

/* REPLACE this rule */
.canvas {
    padding: 1rem 2rem; /* This was "padding: 2rem;" */
    overflow-y: auto;
    flex-grow: 1;
}
.content-section { display: none; }
.content-section.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.grid-container { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: min-content; gap: 2rem; }
.grid-item { background-color: var(--card-bg); padding: 1.5rem; border-radius: var(--border-radius-lg); border: 1px solid var(--bs-border-color); box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s; }
.grid-item:hover {
    border-color: var(--border-color-2);
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--input-border); }
.card-header h2 { font-size: 1.1rem; font-weight: 600; color: var(--heading-text); margin: 0; }
.card-header .badge { background-color: color-mix(in srgb, var(--primary-color) 20%, transparent); color: var(--primary-color); padding: 0.3rem 0.6rem; font-size: 0.8rem; border-radius: var(--border-radius); font-weight: 600; }
.kpi-strip { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 0; background: none; border: none; box-shadow: none; }
.kpi-strip:hover { transform: none; box-shadow: none; }
.kpi-card { text-align: center; background-color: var(--card-bg); padding: 1.5rem; border-radius: var(--border-radius-lg); border: 1px solid var(--bs-border-color); }
.ai-activity { grid-column: span 8; }
.sales-funnel { grid-column: span 4; }
.quick-actions {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.calendar { grid-column: span 4; }

/* =================================== */
/* === 5. COMPONENT STYLING        === */
/* =================================== */
.kpi-card h3 { font-size: 0.85rem; color: var(--light-text); margin-bottom: 0.75rem; text-transform: uppercase; font-weight: 500; }
.kpi-card .value { font-size: 2.5rem; font-weight: 600; color: var(--heading-text); margin-bottom: 0.25rem; line-height: 1.1; }
.kpi-card .change { font-size: 0.9rem; font-weight: 500; }
.kpi-card .change.positive { color: var(--success-color); }
.kpi-card .change.negative { color: var(--danger-color); }
.kpi-card .change.neutral { color: var(--secondary-color); }

.mission-list { list-style: none; }
.mission-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--input-border); font-size: 0.95rem; }
.mission-list li:last-child { border-bottom: none; }
.status { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--border-radius); }
.status.running { background-color: color-mix(in srgb, var(--info-color) 20%, transparent); color: var(--info-color); }
.status.waiting { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: var(--warning-color); }
.status.done { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); }

.prompt-bar {
    margin-top: 1rem;
    padding: 0.5rem;
    padding-left: 1rem;
}

.btn-secondary-outline { background-color: transparent; border-color: var(--secondary-color); color: var(--secondary-color); }
.btn-secondary-outline:hover:not(:disabled) { background-color: var(--secondary-color); color: white; }

.funnel-chart { display: flex; flex-direction: column; gap: 4px; }
.funnel-stage { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; border-radius: 4px; color: #FFF; font-weight: 500; position: relative; background: var(--stage-color); width: var(--stage-value); transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1); }

/* --- 9. QUICK ACTIONS RE-STYLE (V3) --- */

/* The main container is now a seamless card. Padding is removed and overflow is hidden
   to contain the hover effect of its children within the rounded corners. */
.quick-actions {
    grid-column: span 8;
    display: block;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden; 
}

/* The title now has its own internal padding */
.quick-actions-title-main {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
}

.quick-action-list {
    display: flex;
    flex-direction: column;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Each item now has horizontal padding to make the hover effect edge-to-edge */
    padding: 1rem 1.5rem; 
    text-decoration: none;
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-border-color);
    transition: background-color 0.2s ease;
}

/* This is the new hover effect you requested */
.quick-action-item:hover {
    background-color: var(--menu-hover-bg); /* Standard grey hover color */
}

.quick-action-list a.quick-action-item:first-of-type {
    border-top: none;
}

.quick-action-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform 0.2s ease-in-out;
}

.quick-action-item:hover .quick-action-icon {
    transform: scale(1.08);
}

.quick-action-icon.soft-blue { background-color: #E9F2FF; color: #4A90E2; }
.quick-action-icon.soft-green { background-color: #E8FBF5; color: #2EBD85; }
.quick-action-icon.soft-orange { background-color: #FFF6E7; color: #F5A623; }
.quick-action-icon.soft-purple { background-color: #F8ECFD; color: #BD10E0; }

.quick-action-text {
    flex-grow: 1;
    align-self: center;
}

.quick-action-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading-text);
    margin-bottom: 2px;
}
    
.quick-action-subtitle {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
    
.quick-action-chevron {
    color: var(--secondary-color);
    transition: transform 0.2s ease, color 0.2s ease;
}
    
.quick-action-item:hover .quick-action-chevron {
    transform: translateX(3px);
    color: var(--primary-color);
}
.calendar { text-align: center; }
/* in styles.css */

/* Replaces the old .mini-calendar style */
.mini-calendar {
    height: 220px;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    padding: 0.75rem; /* Adds some internal spacing */
    overflow-y: auto;  /* THIS IS THE FIX: Adds a scrollbar when content overflows */
}
.open-agenda-btn {
    width: 100%;
    font-weight: 600;
    padding: 0.8rem;
    background-color: var(--primary-color);
    border: none;
    color: #fff;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}
.open-agenda-btn:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

.help-beacon { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background-color: var(--primary-color); color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow-lg); z-index: 1000; }
.placeholder-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--light-text); background-color: var(--card-bg); border-radius: var(--border-radius-lg); padding: 2rem; }
.placeholder-content h2 { color: var(--heading-text); margin-bottom: 1rem; text-transform: capitalize; }

/* =================================== */
/* === 6. RESPONSIVE STYLES        === */
/* =================================== */
@media (max-width: 1300px) {
    .ai-activity { grid-column: span 12; }
    .sales-funnel { grid-column: span 12; }
    .quick-actions { grid-column: span 7; }
    .calendar { grid-column: span 5; }
}
@media (max-width: 992px) {
    .sidebar { display: none; }
    .top-header .search-bar input { width: 150px; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .quick-actions, .calendar { grid-column: span 12; }
}
@media (max-width: 768px) {
    .kpi-strip { grid-template-columns: 1fr; }
    .top-header { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 1rem; }
    .canvas { padding: 1.5rem 1rem; }
}

/* Generic primary button style */
.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: var(--border-radius);
    font-weight: 500;
}
.btn-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

/* Style for circle-squared ICON buttons */
.btn-create,
.prompt-bar .btn {
    height: 40px;
    width: 40px;
    padding: 0;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.user-avatar-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background-color: var(--secondary-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-avatar-initial {
    font-size: 1.2rem;
    font-weight: 600;
    color: #FFF;
    line-height: 1;
}
/* --- 8. CUSTOM SCROLLBAR STYLING --- */

/* This targets the main content area's scrollbar */
.canvas {
    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--input-bg);
}

/* For WebKit browsers (Chrome, Safari, Edge) */
.canvas::-webkit-scrollbar {
    width: 8px; /* Sets a thinner scrollbar */
}

.canvas::-webkit-scrollbar-track {
    background: var(--input-bg); /* Sets the color of the scrollbar's background track */
}

.canvas::-webkit-scrollbar-thumb {
    background-color: var(--primary-color); /* Sets the handle color to your theme's blue */
    border-radius: 10px; /* Makes the handle have rounded corners */
    border: 2px solid var(--input-bg); /* Adds a small border that matches the track */
}

.canvas::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black); /* Makes the handle slightly darker on hover */
}
/* --- 10. AI COMMAND CENTER --- */
.page-header {
    margin-bottom: 1.5rem;
}
.page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
}
.page-header p {
    color: var(--light-text);
    font-size: 1rem;
}

.global-prompt-bar {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.global-prompt-bar input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--input-text);
}
.prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.btn-run {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Main Layout */
.ai-command-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}
.main-column, .sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Mission List */
.mission-list { list-style: none; }
.mission-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--input-border);
}
.mission-list li:last-child { border-bottom: none; }
.mission-info { flex-grow: 1; margin-right: 1rem; }
.goal-summary { font-weight: 500; }
.progress-bar {
    height: 6px;
    background: var(--input-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.progress-bar div {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 3px;
}
.mission-details { display: flex; align-items: center; gap: 1rem; }
.status-chip { font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: var(--border-radius); text-transform: capitalize; }
.status-chip.queued { background-color: color-mix(in srgb, var(--secondary-color) 20%, transparent); color: var(--secondary-color); }
.status-chip.running { background-color: color-mix(in srgb, var(--info-color) 20%, transparent); color: var(--info-color); }
.status-chip.completed { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); }
.status-chip.error { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); }
.time-info { font-size: 0.85rem; color: var(--light-text); white-space: nowrap; }

/* Review Queue */
.review-queue { display: flex; flex-direction: column; gap: 1rem; }
.review-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--menu-hover-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}
.review-actions { display: flex; gap: 0.5rem; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }
.btn-success { background-color: var(--success-color); color: #fff; }
.btn-success:hover { background-color: color-mix(in srgb, var(--success-color) 85%, black); }

/* Table Styling */
.styled-table { width: 100%; border-collapse: collapse; }
.styled-table th, .styled-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--input-border);
}
.styled-table thead th { font-weight: 600; color: var(--light-text); }
.styled-table.compact td, .styled-table.compact th { padding: 0.5rem; }

/* Mini Theme Toggle for Skills */
.theme-switch.mini { width: 40px; height: 22px; }
.theme-switch.mini .slider:before { height: 16px; width: 16px; left: 2px; bottom: 2px; }
.theme-switch.mini input:checked + .slider:before { transform: translateX(18px); }

/* Playbook Library */
.playbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.playbook-card {
    background-color: var(--menu-hover-bg);
    border-radius: var(--border-radius);
    padding: 1rem;
    border: 1px solid var(--input-border);
}
.playbook-card strong, .playbook-card small { display: block; }
.playbook-card small { color: var(--light-text); margin-top: 0.25rem; }

/* Help List */
.card-subtle { background-color: var(--input-bg); border-color: transparent; }
.help-list { list-style: none; color: var(--light-text); font-size: 0.85rem; }
.help-list code { background: var(--bs-border-color); padding: 2px 4px; border-radius: 4px; }

/* Dropdown */
.dropdown-container { position: relative; }
.dropdown-toggle { display: flex; align-items: center; gap: 0.5rem; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 10;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 0;
    box-shadow: var(--shadow-md);
    min-width: 150px;
}
.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}
.dropdown-item:hover { background-color: var(--menu-hover-bg); }

/* Details Drawer */
.details-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1090;
    
    /* Animation: Start hidden */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out; /* Controls fade in/out */
}
.details-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background-color: var(--sidebar-bg);
    z-index: 1100;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.details-drawer.is-open {
    transform: translateX(0);
}
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
.drawer-header h3 { font-size: 1.2rem; margin: 0; }
.close-drawer-btn { background: none; border: none; color: var(--light-text); font-size: 1.5rem; cursor: pointer; }
.drawer-content { padding: 1.5rem; overflow-y: auto; flex-grow: 1; }
.drawer-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--bs-border-color); margin-bottom: 1rem; }
.tab-link {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--light-text);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}
.steps-list { padding-left: 1.2rem; }
.steps-list li { margin-bottom: 0.5rem; }
/* --- 10. AI COMMAND CENTER (V3 - Final Button Polish) --- */

/* Page Header */
.ai-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.ai-page-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}
.ai-page-header p {
    color: var(--light-text);
    font-size: 1rem;
    max-width: 600px;
}

/* High-Visibility Prompt Bar */
.global-prompt-bar-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 95%, black), var(--card-bg));
    box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.2);
    transition: all 0.2s ease-out;
}
.global-prompt-bar-v2:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent), 0 6px 20px rgba(0,0,0,0.15);
}
.global-prompt-bar-v2 .prompt-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    opacity: 0.8;
}
.global-prompt-bar-v2 input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--input-text);
    height: 48px;
}
.global-prompt-bar-v2 .prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.global-prompt-bar-v2 .btn-run {
    height: 44px;
    border-radius: 12px; /* Consistent circle-squared shape */
}
.global-prompt-bar-v2 .btn-run span {
    margin-left: 0.5rem;
}


/* Tab Navigation */
.ai-command-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 2rem;
}
.tab-nav {
    display: flex;
    gap: 0.5rem;
}
.tab-nav .tab-link {
    padding: 0.75rem 1.25rem;
    color: var(--light-text);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.tab-nav .tab-link:hover {
    color: var(--heading-text);
    background-color: var(--menu-hover-bg);
}
.tab-nav .tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Tab Content Panes */
.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tab-pane.active {
    display: block;
}

/* Main Button & Badge Styling */
.btn-c-sq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: 12px; /* Main circle-squared shape */
    font-weight: 600;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
    cursor: pointer;
}
.btn-c-sq.icon-only {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.1rem;
}
.btn-c-sq.soft-gray {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
}
.btn-c-sq.soft-gray:hover {
    background-color: var(--bs-border-color);
    color: var(--heading-text);
}
.btn-c-sq.soft-green {
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
}
.btn-c-sq.soft-green:hover {
    background-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
.btn-c-sq.soft-blue {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
}
.btn-c-sq.soft-blue:hover {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.btn-c-sq.soft-red {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}
.btn-c-sq.soft-red:hover {
    background-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

/* --- MODIFICATION: New Badge Style --- */
.badge-soft {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 1rem; /* Pill shape for badges */
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: color-mix(in srgb, var(--primary-color) 100%, white);
}


/* Missions Layout & Components */
.missions-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
.mission-list-v2 { list-style: none; }
.mission-list-v2 li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--input-border);
}
.mission-list-v2 li:last-child { border-bottom: none; }
.text-blue { color: #3b82f6; }
.text-green { color: #22c55e; }

/* Standalone Card Header for Tabs */
.card-header-standalone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.card-header-standalone h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--heading-text);
}

/* Playbooks Grid */
.playbooks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.playbook-card-v2 {
    background: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: all 0.2s ease;
}
.playbook-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-2);
}
.playbook-icon-v2 {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
.bg-blue { background-color: #3b82f6; }
.bg-green { background-color: #22c55e; }
.bg-orange { background-color: #f97316; }

.playbook-card-v2 h3 { font-size: 1.1rem; font-weight: 600; color: var(--heading-text); margin-bottom: 0.5rem; }
.playbook-card-v2 p { color: var(--light-text); font-size: 0.9rem; flex-grow: 1; margin-bottom: 1rem; }
.playbook-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--input-border); font-size: 0.8rem; color: var(--light-text); font-weight: 500; }

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.skill-card { background: var(--card-bg); border: 1px solid var(--bs-border-color); border-radius: var(--border-radius-lg); padding: 1.5rem; }
.skill-card.disabled { opacity: 0.6; }
.skill-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.skill-icon { font-size: 1.2rem; color: var(--light-text); }
.skill-header h3 { flex-grow: 1; font-size: 1.1rem; font-weight: 600; color: var(--heading-text); }
.skill-card p { color: var(--light-text); font-size: 0.9rem; }

/* Table and Review Actions */
.table-responsive { overflow-x: auto; }
.review-actions { display: flex; gap: 0.75rem; } /* Increased gap */

/* --- MODIFICATION: Consistent Approve/Reject Buttons --- */
.btn-success { 
    background-color: var(--success-color); 
    color: #fff;
    border-radius: 12px; /* Consistent circle-squared shape */
    padding: 0.6rem 1.25rem;
}
.btn-success:hover { background-color: color-mix(in srgb, var(--success-color) 85%, black); }
/* --- V4 - Interactive Hover Effects --- */

/* Add a background color change to card hovers */
#ai-command-section .playbook-card-v2:hover,
#ai-command-section .skill-card:hover {
    background-color: var(--menu-hover-bg);
}

/* Add hover effect to mission lists, review cards, and table rows */
#ai-command-section .mission-list-v2 li:hover,
#ai-command-section .review-card:hover,
#ai-command-section .styled-table tbody tr:hover {
    background-color: var(--menu-hover-bg);
    border-radius: var(--border-radius); /* Add a slight radius for table rows on hover */
    cursor: pointer;
}

/* Ensure table row hover does not mess up table layout */
#ai-command-section .styled-table {
    border-collapse: separate; /* Required for border-radius on tr */
    border-spacing: 0;
}
/* --- V5 - Styled Filter Controls --- */
#ai-command-section .filter-bar {
    display: flex;
    gap: 0.75rem;
}

/* Base style for both input and select */
#ai-command-section .form-control-sm {
    background-color: var(--input-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    height: 40px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#ai-command-section .form-control-sm:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Custom styling for the select dropdown */
#ai-command-section select.form-control-sm {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2rem; /* Make space for the custom arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Custom styling for the date input's calendar icon */
#ai-command-section input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

#ai-command-section input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Invert the calendar icon color for dark mode to make it visible */
body:not(.light-mode) #ai-command-section input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
}
/* --- 11. LEAD ENGINE SECTION --- */
.lead-engine-layout {
    display: grid;
    grid-template-columns: 1fr 320px; /* Main column and fixed-width sidebar */
    gap: 2rem;
    align-items: flex-start;
}

.lead-engine-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lead-engine-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

/* Lead Source Overview Cards */
.lead-source-overview {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.source-card {
    position: relative; /* This parent rule is necessary */
    overflow: visible;  /* Allows the button's shadow to show */
}

.delete-source-icon {
    /* Sizing & Position */
    position: absolute;
    top: -8px;   /* Positions it slightly outside the card for prominence */
    right: -8px;  /* Positions it slightly outside the card */
    width: 28px;  /* Increased size for an easier click target */
    height: 28px;
    z-index: 2;   /* Ensures it sits on top of the card content */
    
    /* Appearance */
    background-color: var(--card-bg); /* Match the card background */
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--light-text);
    box-shadow: var(--shadow-sm); /* Adds a subtle lift */
    
    /* Icon Centering */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem; /* Larger icon */

    /* Interaction & Animation */
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transform: scale(0.8); /* Start slightly smaller for a "pop" effect */
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* A bouncy transition */
}
.source-icon.website { background-color: #4A90E2; }
.source-icon.hunter { background-color: #F5A623; }
.source-icon.idx { background-color: #7ED321; }
.source-icon.manual { background-color: #BD10E0; }

.source-info .count {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
}
.source-info .name {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
.source-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background-color: var(--card-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    color: var(--light-text);
    cursor: pointer;
    transition: all 0.2s;
}
.source-connect-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--menu-hover-bg);
}

/* Filters Bar */
.lead-filters-bar {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.filter-group, .filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.filter-link {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Lead Table Enhancements */
.lead-table .lead-name {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.lead-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.lead-name .name-text {
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}
.lead-name .email-text {
    font-size: 0.85rem;
    color: var(--light-text);
    display: block;
}
.owner-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* ADDED to center content (initials/icons) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* Good for initials */
    font-size: 0.8rem; /* Good for icons or initials */
    overflow: hidden; /* Important for containing child <img> tags correctly */
}
.tag-source {
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}
.tag-source.website { background-color: color-mix(in srgb, #4A90E2 20%, transparent); color: #4A90E2; }
.tag-source.idx { background-color: color-mix(in srgb, #7ED321 20%, transparent); color: #7ED321; }
.tag-source.hunter { background-color: color-mix(in srgb, #F5A623 20%, transparent); color: #F5A623; }

.status-badge {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 1rem; /* pill shape */
    font-size: 0.8rem;
    text-align: center;
    display: inline-block;
}
.status-badge.new { background-color: color-mix(in srgb, var(--info-color) 20%, transparent); color: var(--info-color); }
.status-badge.qualified { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); }
.status-badge.contact { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: var(--warning-color); }

.score-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 20px;
}
.score-bar .score-fill {
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 4px;
    min-width: 50px;
}
.score-bar span {
    font-weight: 600;
    color: var(--light-text);
    font-size: 0.9rem;
}
.table-footer {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--light-text);
}
.pagination {
    display: flex;
    gap: 0.5rem;
}

/* Sidebar Components */
.metrics-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    text-align: center;
}
.metric-item .metric-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}
.metric-item .metric-label {
    font-size: 0.8rem;
    color: var(--light-text);
    display: block;
}
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tags-list .tag {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.feed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.feed-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: var(--heading-text);
}
.feed-list .feed-status {
    font-size: 0.8rem;
    color: var(--light-text);
}
/* --- 11. LEAD ENGINE SECTION (Full & Consolidated) --- */

/* Main Layout & Components */
.lead-engine-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Lead Source Overview Cards */
.lead-source-overview {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.source-card {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--card-bg);
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
}

.source-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.source-icon.website { background-color: #4A90E2; }
.source-icon.hunter { background-color: #F5A623; }
.source-icon.idx { background-color: #7ED321; }
.source-icon.manual { background-color: #BD10E0; }

.source-info .count {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
}
.source-info .name {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
.source-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    background-color: var(--card-bg);
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    color: var(--light-text);
    cursor: pointer;
    transition: all 0.2s;
}
.source-connect-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--menu-hover-bg);
}

/* Lead Table & Associated Elements */
#leadsTable tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}
#leadsTable tbody tr:hover {
    background-color: var(--menu-hover-bg);
}

.lead-table .lead-name {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.lead-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.lead-name .name-text {
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}
.lead-name .email-text {
    font-size: 0.85rem;
    color: var(--light-text);
    display: block;
}
.owner-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.tag-source {
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}
.tag-source.website { background-color: color-mix(in srgb, #4A90E2 20%, transparent); color: #4A90E2; }
.tag-source.idx { background-color: color-mix(in srgb, #7ED321 20%, transparent); color: #7ED321; }
.tag-source.hunter { background-color: color-mix(in srgb, #F5A623 20%, transparent); color: #F5A623; }

.status-badge {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 1rem; /* pill shape */
    font-size: 0.8rem;
    text-align: center;
    display: inline-block;
}
.status-badge.new { background-color: color-mix(in srgb, var(--info-color) 20%, transparent); color: var(--info-color); }
.status-badge.qualified { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); }
.status-badge.contact { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: var(--warning-color); }

.score-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 20px;
}
.score-bar .score-fill {
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 4px;
    min-width: 50px;
}
.score-bar span {
    font-weight: 600;
    color: var(--light-text);
    font-size: 0.9rem;
}
.table-footer {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: var(--light-text);
}
.pagination {
    display: flex;
    gap: 0.5rem;
}


/* Togglable Metrics Drawer */
.metrics-drawer-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    background-color: var(--sidebar-bg);
    border-left: 1px solid var(--bs-border-color);
    z-index: 1040; /* Below modals but above content */
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 25px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.metrics-drawer-container.is-open {
    transform: translateX(0);
}
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem 0.75rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
.drawer-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
}
.drawer-content {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.metrics-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    text-align: center;
}
.metric-item .metric-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}
.metric-item .metric-label {
    font-size: 0.8rem;
    color: var(--light-text);
    display: block;
}
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.tags-list .tag {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.feed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.feed-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: var(--heading-text);
}
.feed-list .feed-status {
    font-size: 0.8rem;
    color: var(--light-text);
}

/* Adjusts main content when drawer is open */
.main-content {
    transition: margin-right 0.3s ease-in-out;
}
.main-content.metrics-drawer-open {
    margin-right: 340px;
    transition: margin-right 0.3s ease-in-out;
}
/* In styles.css */

/*
  REPLACE the existing .modal-overlay and .modal-panel styles
  with this corrected block.
*/
/* In styles.css, replace the old modal styles with this entire block */

.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none; /* Start completely hidden */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 1050;

  /* --- Animation State (Start Hidden) --- */
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.modal-overlay.is-visible {
  /* --- Animation State (End Visible) --- */
  opacity: 1;
}

.modal-panel {
  background-color: var(--card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: 90vh;

  /* --- Animation State (Start Hidden) --- */
  opacity: 0;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.2s ease-out;
}

.modal-overlay.is-visible .modal-panel {
  /* --- Animation State (End Visible) --- */
  opacity: 1;
  transform: scale(1);
}

/* Make sure you have a rule to hide any modal that might
   still have the .hidden class from the old logic. */
.modal-overlay.hidden {
  display: none;
}


/* Applica la larghezza massima specifica per ogni modale */
#leadProfileModal {
    max-width: 700px;
}
#connectSourceModal {
    max-width: 750px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--input-border);
}
.modal-header .lead-name h2 {
    font-size: 1.25rem;
    font-weight: 600;
}
.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
        max-height: calc(90vh - 200px); 

}
.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--input-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: var(--input-bg);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.btn-danger {
    background-color: var(--danger-color);
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background-color: color-mix(in srgb, var(--danger-color) 85%, black);
}
/* --- 12. UI REFINEMENTS (Buttons & Editable Cards) --- */

/* Fix "Add Lead" button dimensions in the header */
.header-actions .header-action-btn {
    height: 44px; /* Matches the height of circle-squared buttons */
    padding: 0 1.25rem;
    font-weight: 600;
}
.header-actions .header-action-btn i {
    margin-right: 0.6rem;
}


/* Styling for Editable KPI/Metrics Cards */
.card-editable .metrics-list {
    grid-template-columns: 1fr; /* Stack them in a single column */
    gap: 1rem;
    text-align: left;
}
.card-editable .metric-item {
    position: relative;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}
.card-editable .metric-item:hover {
    background-color: var(--menu-hover-bg);
}
.metric-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.75rem;
    background-color: var(--card-bg);
    padding: 4px;
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 0.2s;
}
.metric-item:hover .metric-actions {
    opacity: 1;
}
.metric-actions i {
    cursor: pointer;
    color: var(--light-text);
}
.metric-actions i:hover {
    color: var(--primary-color);
}
.metric-actions i.fa-trash-alt:hover {
    color: var(--danger-color);
}


/* Well-styled Modal Buttons */
.modal-footer {
    justify-content: space-between; /* Pushes button groups to each side */
    align-items: center;
}
.footer-actions-left, .footer-actions-right {
    display: flex;
    gap: 0.75rem;
}
/* Styling for the new delete icon on source cards */
.source-card {
    position: relative; /* Needed to position the delete icon */
}
.source-card.is-deleting {
    opacity: 0;
    transform: scale(0.9);
}
.delete-source-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    color: var(--light-text);
    background-color: color-mix(in srgb, var(--card-bg) 50%, transparent);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.source-card:hover .delete-source-icon {
    opacity: 1;
    transform: scale(1);
}

/* On button hover, it gets a more dramatic, clear effect */
.delete-source-icon:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: #fff;
    transform: scale(1.15) rotate(90deg); /* Rotates for a dynamic feel */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--danger-color) 40%, transparent); /* Adds a red glow */
}
/* --- Styles for the Connect Source Modal --- */
.modal-header-text .name-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading-text);
}
.modal-header-text .email-text {
    font-size: 0.9rem;
    color: var(--light-text);
}

.source-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates a 2-column grid */
    gap: 1rem;
}

.source-selection-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.source-selection-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.source-selection-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--input-bg);
}

.source-selection-card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--bs-border-color);
}


.source-selection-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}
/* Define colors for the new selectable cards */
.source-selection-icon.prequalify { background-color: #4A90E2; }
.source-selection-icon.hunter { background-color: #F5A623; }
.source-selection-icon.flownetwork { background-color: #BD10E0; }
.source-selection-icon.flowinbox { background-color: #7ED321; }

.source-selection-text h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
}

.source-selection-text p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--light-text);
}
/* --- 12. AGENTIC WORKBENCH STYLES (FULL & FINAL) --- */

/* Main Prompt Bar on Dashboard */
.aw-prompt-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease-out;
}
.aw-prompt-bar:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent), var(--shadow-lg);
}
.aw-prompt-bar .prompt-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
}
.aw-prompt-bar input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 1rem;
    color: var(--input-text);
    height: 48px;
}
.aw-prompt-bar .prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.aw-prompt-bar .btn-c-sq.soft-gray {
    width: 44px;
    height: 44px;
}
.aw-prompt-bar .btn-run {
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 12px;
    font-weight: 600;
}
.aw-prompt-bar .btn-run span {
    margin-left: 0.5rem;
}

/* Suggestion Cards */
.suggestion-card {
    cursor: pointer;
}
.suggestion-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}
.suggestion-card h3, .suggestion-card p {
    text-align: left;
}


/* General Layout & Tab Panes */
.sub-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.sub-tab-pane.active {
    display: block;
}
.aw-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: flex-start;
}
.aw-card-large { grid-column: span 2; }
.aw-card-small { grid-column: span 1; }

/* Active Runs List */
.aw-mission-list { padding: 0 1.5rem 1rem; list-style: none;}
.aw-mission-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--input-border);
}
.aw-mission-list li:last-child {
    border-bottom: none;
}
.progress-bar div.error {
    background-color: var(--danger-color);
}

/* Data Hub Drop Zone */
.ingestion-area { padding: 1.5rem; }
.drop-zone {
    border: 2px dashed var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    text-align: center;
    background-color: var(--input-bg);
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.drop-zone:hover {
    border-color: var(--primary-color);
    transform: scale(1.02);
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 5%, transparent) 0%, transparent 70%);
}
.drop-zone i { color: var(--light-text); margin-bottom: 1rem; }
.drop-zone p { color: var(--heading-text); font-weight: 500; }

/* Workflows Card Actions */
.playbook-card-v2 p { flex-grow: 0; margin-bottom: 1rem; }
.playbook-actions {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--input-border);
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Analytics KPIs and Chart */
.kpi-grid {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.kpi-card-alt {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
}
.kpi-card-alt span {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--heading-text);
}
.kpi-card-alt label {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
.aw-chart-container {
    padding: 1.5rem;
    height: 300px;
}
/* --- 13. COMMUNICATION HUB (V4 - SMOOTHER ANIMATION) --- */

/* --- A. Collapsible Header --- */
#comm-hub-section.active { 
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px - 2rem); 
}
.comm-hub-header {
    flex-shrink: 0;
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--card-bg);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#comm-hub-section.collapsed .comm-hub-header {
    margin-bottom: 1rem;
    height: 46px; /* Height of just the toggle button */
}

#comm-hub-section.collapsed .header-main-content {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
    padding: 0 1.5rem;
}

.header-toggle-btn {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 24px;
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    z-index: 5;
}
.header-toggle-btn i {
    transition: transform 0.3s ease;
}

#comm-hub-section.collapsed .header-toggle-btn i {
    transform: rotate(180deg);
}

/* --- B. Main 3-Pane Container --- */
.comm-hub-main-container {
    flex-grow: 1;
    display: grid;
    /* Define the grid with a smooth transition for column resizing */
    grid-template-columns: minmax(280px, 20%) 5px 1fr 5px 280px; 
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    /* THIS IS THE KEY CHANGE for smoother animations */
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.comm-hub-main-container.details-hidden {
    /* The last column (details) and its resizer are smoothly animated to 0px */
    grid-template-columns: minmax(280px, 25%) 5px 1fr 0px 0px; /* List | Resizer | Reading | Resizer (hidden) | Details (hidden) */
}


.comm-hub-resizer {
    background-color: var(--bs-border-color);
    cursor: col-resize;
    transition: background-color 0.2s ease;
    z-index: 1; 
}

.comm-hub-resizer:hover {
    background-color: var(--primary-color);
}


.comm-hub-resizer-horizontal {
    background-color: var(--bs-border-color);
    height: 5px;
    cursor: row-resize; 
    transition: background-color 0.2s ease;
    z-index: 1; 
}

.comm-hub-resizer-horizontal:hover {
     background-color: var(--primary-color);
}

/* --- C. General Pane Styling --- */
.comm-hub-list-pane,
.comm-hub-reading-pane,
.comm-hub-details-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}
.comm-hub-list-pane { border-right: 1px solid var(--bs-border-color); }
.comm-hub-reading-pane { border-right: 1px solid var(--bs-border-color); }
/* Style for the "View Full Profile" button in Comm Hub details */
.comm-hub-details-pane .btn-view-profile {
    width: 100%;
    margin-top: auto; /* Keeps it at the bottom */
    /* Updated styles to match soft-blue buttons */
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent); /* Soft blue background */
    color: var(--primary-color); /* Primary color text */
    font-weight: 600;
    padding: 0.8rem 1.25rem;
    border-radius: var(--border-radius);
    box-shadow: none; /* Remove box-shadow for soft buttons */
    transition: all 0.2s ease-out;
    border: none;
    cursor: pointer;
}

.comm-hub-details-pane .btn-view-profile:hover {
    transform: translateY(-2px);
    /* Updated hover to match soft-blue buttons */
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent); /* Darker soft blue on hover */
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent); /* Subtle shadow on hover */
    color: var(--primary-color); /* Keep text color consistent on hover */
}
/* --- Styling for Custom Form Controls (e.g., Lead Status dropdown) --- */
.form-control-custom {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 0.75rem;
    height: 38px;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
select.form-control-custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}
input[type="datetime-local"] {
    position: relative;
    color: var(--input-text);
}

/* Hides the default browser text and allows our placeholder to show */
input[type="datetime-local"]::-webkit-datetime-edit {
    color: transparent;
}
input[type="datetime-local"]:focus::-webkit-datetime-edit {
    color: var(--input-text); /* Show the date/time text when the user focuses the input */
}

/* A pseudo-element to create a custom placeholder */
input[type="datetime-local"]::before {
    content: 'Select date and time'; /* The placeholder text */
    position: absolute;
    color: var(--input-placeholder);
    display: block;
    width: 100%;
}

/* Hide the placeholder when the user has selected a value */
input[type="datetime-local"]:focus::before,
input[type="datetime-local"]:valid::before {
    display: none;
}


.form-control-custom:focus {
    outline: none;
    border-color: var(--primary-color); /* Primary color border on focus */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); /* Subtle shadow on focus */
}

/* Ensure options are styled correctly in dark mode */
.form-control-custom option {
    background-color: var(--input-bg); /* Background for options */
    color: var(--input-text); /* Text color for options */
}
.pane-header {
    display: flex; /* <-- ADDED for flexbox alignment */
    align-items: center; /* <-- ADDED for vertical alignment */
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
.pane-content {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}
.pane-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-2) transparent;
}
.pane-content::-webkit-scrollbar { width: 6px; }
.pane-content::-webkit-scrollbar-track { background: transparent; }
.pane-content::-webkit-scrollbar-thumb { background-color: var(--border-color-2); border-radius: 6px; }

/* --- D. Pane 1: Conversation List --- */
.conversation-list { list-style: none; }
.conversation-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--input-border);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    transition: background-color 0.2s ease;
}
.conversation-item:last-child { border-bottom: none; }
.conversation-item:hover { background-color: var(--menu-hover-bg); }
.conversation-item.active {
    background-color: var(--primary-color) !important;
    color: white;
}
.conversation-item.unread .convo-sender,
.conversation-item.unread .convo-subject {
    font-weight: 700;
    color: var(--heading-text);
}
.conversation-item.active .convo-sender,
.conversation-item.active .convo-subject,
.conversation-item.active .convo-preview,
.conversation-item.active .convo-timestamp {
    color: rgba(255, 255, 255, 0.9);
}
.conversation-item.active.unread::before {
    background-color: white;
}

.convo-channel-icon {
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}
.convo-channel-icon.email { background-color: #4A90E2; }
.convo-channel-icon.chat { background-color: #2EBD85; }
.convo-channel-icon.sms { background-color: #f97316; }
.conversation-item.active .convo-channel-icon i,
.convo-channel-icon .fa-star { color: var(--accent-color); }
.conversation-item:not(.active) .convo-channel-icon.email .fa-star { color: white; }

.convo-details { flex-grow: 1; overflow: hidden; }
.convo-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.convo-sender { font-weight: 600; font-size: 0.9rem; color: var(--heading-text); }
.convo-timestamp { font-size: 0.75rem; color: var(--light-text); }
.convo-subject { font-size: 0.85rem; color: var(--light-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-preview { font-size: 0.85rem; color: var(--light-text); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- E. Pane 2: Reading & Composer --- */
.comm-hub-reading-pane {
    display: grid; 
    grid-template-rows: auto 1fr 5px auto; 
    overflow: hidden;
    border-right: 1px solid var(--bs-border-color);
}
.reading-header-info {
    flex-grow: 1; /* <-- ADDED to take up available space */
}
.reading-header-info h3 { font-size: 1.1rem; margin: 0 0 4px; color: var(--heading-text); }
.reading-header-info p { margin: 0; color: var(--light-text); font-size: 0.85rem; }
.reading-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center; 
    margin-left: auto; /* <-- THIS IS THE KEY CHANGE to push the icons to the right */
}
/* in styles.css - AFTER (Replace the block above) */
.comm-hub-reading-pane .pane-content {
    padding: 1.5rem;
    /* THE FIX: Force this container to scroll vertically when content overflows */
    overflow-y: auto !important; 
    /* THE FIX: Force the grid to allow this item to shrink */
    min-height: 0 !important; 
}
.message { display: flex; gap: 1rem; margin-bottom: 1.5rem; max-width: 90%; }
.message.self { margin-left: auto; flex-direction: row-reverse; }
.message .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.message-content { background: var(--input-bg); border-radius: 1rem; padding: 0.75rem 1.25rem; border: 1px solid var(--input-border); }
.message.self .message-content { background: var(--primary-color); color: #fff; border-color: transparent; }
.message.self .message-content p,
.message.self .message-header .sender-name,
.message.self .message-header .timestamp { color: #fff; }
.message-header { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }

.composer-area { border-top: 1px solid var(--bs-border-color); padding: 1rem; background-color: var(--sidebar-bg); flex-shrink: 0; }
.composer-textarea { min-height: 80px; padding: 0.75rem; border: 1px solid var(--input-border); border-radius: var(--border-radius); margin-bottom: 1rem; background: var(--bs-body-bg); }
.composer-textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.composer-actions { display: flex; justify-content: space-between; align-items: center; }
.left-actions, .right-actions { display: flex; align-items: center; gap: 0.75rem; }
.composer-actions .btn-run { gap: 0.6rem; padding: 0 1rem; height: 44px; }

/* --- F. Pane 3: Details Pane --- */
.comm-hub-details-pane {
    display: flex; /* Keep flex for content layout */
    flex-direction: column;
    background-color: var(--sidebar-bg);
    /* Manages the fade-in/out effect AND sizing */
    transition: all 0.3s ease-out; /* Transition all properties for smooth hide/show */
    opacity: 1;
    pointer-events: auto; /* Allow interactions by default */
    width: 280px; /* Default width */
    flex-shrink: 0; /* Prevents it from shrinking by default */
}

.comm-hub-main-container.details-hidden .comm-hub-details-pane {
    /* When hidden, the panel becomes transparent, non-interactive, and effectively zero width */
    opacity: 0;
    pointer-events: none;
    width: 0; /* Collapse its width */
    overflow: hidden; /* Hide overflow content during transition */
    padding: 0; /* Remove padding when hidden */
    border-left: none; /* Remove border when hidden */
}

.comm-hub-details-pane .pane-content { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; }
.comm-hub-details-pane .pane-header h3 { font-size: 1.1rem; color: var(--heading-text); }
.details-contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.details-contact-card .lead-avatar { width: 64px; height: 64px; font-size: 2rem; }
.details-contact-card .name-text { font-size: 1.1rem; font-weight: 600; color: var(--heading-text); }
.details-contact-card .email-text { font-size: 0.9rem; color: var(--light-text); }
.details-section h4 { font-size: 0.8rem; font-weight: 600; color: var(--light-text); margin-bottom: 0.75rem; text-transform: uppercase; }
.quick-action-list.stacked .quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    color: var(--bs-body-color);
}
.quick-action-list.stacked .quick-action-item:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}
/* --- 14. ENHANCED BUTTON & COMPOSE MODAL --- */

/* A more prominent, solid button style */
.btn-primary-filled {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent);
    transition: all 0.2s ease-out;
}
.btn-primary-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--primary-color) 30%, transparent);
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
}

/* Styles for the compose modal itself */
.compose-modal-panel {
    max-width: 800px;
    height: 80vh;
    max-height: 700px;
}

.compose-modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.compose-modal-body .form-group {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--input-border);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.compose-modal-body .form-group label {
    font-weight: 600;
    color: var(--light-text);
}

.compose-modal-body .form-group input {
    flex-grow: 1;
    border: none;
    background: none;
    outline: none;
    color: var(--input-text);
    font-size: 1rem;
    height: 40px;
}

.compose-modal-body .form-group-textarea {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
}

.compose-modal-body .form-group-textarea label {
     font-weight: 600;
     color: var(--light-text);
     margin-bottom: 0.75rem;
     flex-shrink: 0;
}

.compose-modal-body .composer-textarea {
    flex-grow: 1;
    border: none;
    padding: 0;
    background-color: transparent;
    min-height: 200px;
}
.compose-modal-body .composer-textarea:focus {
    box-shadow: none;
}

.compose-modal-panel .modal-footer {
    justify-content: space-between;
}
/* --- Styles for the new composer prompt container (COMM HUB) --- */
.composer-prompt-container {
    display: flex;
    align-items: center; /* Changed from flex-end to center for better vertical alignment */
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem; /* Adjusted padding to match the image */
    border: 1px solid var(--input-border);
    border-radius: 1rem; /* More rounded corners */
    background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 95%, black), var(--card-bg)); /* Matching background gradient */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.2); /* Matching shadow */
    margin-bottom: 1rem;
    transition: all 0.2s ease-out; /* Smooth transition for hover/focus */
}

.composer-prompt-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent), 0 6px 20px rgba(0,0,0,0.15); /* Focus shadow */
}

/* Style for the new plus button */
.composer-prompt-container .plus-btn {
    height: 44px; /* Ensure consistent button height */
    width: 44px; /* Ensure consistent button width */
    font-size: 1.2rem; /* Adjust icon size */
    flex-shrink: 0;
}


.composer-prompt-container .composer-textarea {
    flex-grow: 1;
    margin-bottom: 0;
    padding: 0; /* No internal padding for the textarea, it's now handled by parent */
    min-height: 44px; /* Ensure a minimum height for the textarea to match buttons */
    max-height: 150px;
    overflow-y: auto;
    border: none; /* Remove border from textarea itself */
    background: none; /* Remove background from textarea itself */
    color: var(--input-text); /* Ensure text color is consistent */
    font-size: 1rem; /* Consistent font size */
    outline: none; /* Remove outline on focus */
    resize: none; /* Disable manual resizing by user */
}

/* Styles for the attachment/template buttons on the right of the input */
.composer-prompt-container .composer-prompt-actions { /* New class name */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.composer-prompt-container .composer-prompt-actions .btn-c-sq {
    height: 44px; /* Consistent height for these buttons */
    width: 44px; /* Consistent width for these buttons */
    font-size: 1.1rem; /* Adjust icon size */
}

/* Adjust the overall composer-area's padding if necessary, it should mostly contain the prompt container and send actions */
.composer-area {
    padding: 1rem 1.5rem;
    background-color: var(--sidebar-bg);
}

/* Ensure the main composer-actions (Send/AI Draft) remain on the right */
.composer-actions {
    display: flex;
    justify-content: flex-end; /* Push action buttons to the right */
    align-items: center;
    gap: 0.75rem;
    /* Removed padding here, as it's now on the .composer-area */
    /* If you want space between prompt container and these buttons, keep a margin-top on these buttons or a padding-bottom on the prompt container */
}

/* Ensure the AI Draft and Send buttons also have consistent heights */
.composer-actions .btn-c-sq,
.composer-actions .btn-primary {
    height: 44px;
    border-radius: 12px; /* Consistent with other btn-c-sq */
    font-weight: 600;
}
.composer-actions .btn-primary {
    padding: 0 1.25rem; /* Adjust padding for text and icon */
}
/* Further refined composer area for icon-only buttons */
.composer-prompt-container {
    /* Existing styles for the container */
    justify-content: space-between; /* Ensures the plus button is left, and actions are right */
}

.composer-prompt-container .composer-prompt-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Gap between AI Draft and Send buttons */
    flex-shrink: 0;
}

.composer-prompt-container .composer-prompt-actions .btn-c-sq.icon-only,
.composer-prompt-container .composer-prompt-actions .btn.icon-only-send {
    width: 44px; /* Ensure consistent width for icon-only buttons */
    height: 44px; /* Ensure consistent height for icon-only buttons */
    padding: 0; /* Remove padding for icon-only buttons */
    font-size: 1.1rem; /* Adjust icon size */
    flex-shrink: 0;
}

.composer-prompt-container .composer-prompt-actions .btn.icon-only-send {
    /* Specific styles for the send button if needed, e.g., to override btn-primary padding */
    background-color: var(--primary-color);
    color: #fff;
    border: none;
}

.composer-prompt-container .composer-prompt-actions .btn.icon-only-send:hover {
     background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

/* Ensure the main composer-actions div, now empty, doesn't take up space if not needed */
.composer-area .composer-actions {
    display: none; /* Hide if it's no longer used for buttons */
}
/* --- 15. LISTING STUDIO --- */

/* Make table avatars square for property images */
#listingsTable .lead-avatar {
    border-radius: var(--border-radius);
    width: 48px;
    height: 48px;
    background-color: var(--input-bg);
}

/* Wizard Styles */
.wizard-content {
    padding: 1.5rem 2rem;
    overflow-y: auto;
    flex-grow: 1;
}

.wizard-step {
    display: none;
    animation: fadeIn 0.5s ease;
}
.wizard-step.active {
    display: block;
}

.wizard-step h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--heading-text);
}
.wizard-step p {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 2rem;
}

/* Form Grid for Wizard */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.form-grid .form-group {
    margin-bottom: 0;
}
.form-grid .form-group.span-2 {
    grid-column: span 2;
}

/* Compliance & Syndication Lists */
.compliance-checklist, .syndication-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.compliance-checklist li, .syndication-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--input-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}
.compliance-checklist li label, .syndication-list li label {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* --- Style updates for Listing Studio --- */

.filter-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
}

.filter-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Make form controls match the image */
#listing-studio-section .form-control-sm {
    border: 1px solid var(--border-color-2);
    width: 140px; /* Give them a consistent width */
}

/* Kebab Menu Dropdown Styles */
.action-cell {
    position: relative;
    text-align: right; /* Aligns the kebab button to the right of the cell */
}

/* in styles.css */

.action-cell .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute; /* FIX: Takes the menu out of the layout flow */
    top: calc(100% + 5px); /* FIX: Positions it 5px below the parent cell */
    right: 0; /* FIX: Aligns it to the right of the cell */
    z-index: 10; /* FIX: Ensures it appears on top of other card content */
    min-width: 180px;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    animation: fadeIn 0.1s ease-out;
}
/* in styles.css */

#leadsTable tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}
#leadsTable tbody tr:hover {
    background-color: var(--menu-hover-bg);
}

.action-cell .dropdown-item {
    display: flex; /* Use flex to align icon and text */
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.action-cell .dropdown-item:hover {
    background-color: var(--menu-hover-bg);
}

.action-cell .dropdown-item.delete-btn:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    font-weight: 500;
}
/* --- Enhanced Filter Control Styles for Listing Studio --- */

.filter-controls .form-control-sm {
    background-color: var(--menu-hover-bg); /* Gives the soft gray background color */
    border: 1px solid transparent;           /* Removes the hard border line */
    border-radius: 12px;                     /* Creates the "circle-squared" effect */
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem; /* A bit more horizontal padding */
    height: 40px;
    width: 150px;
    transition: all 0.2s ease;
}

/* Add a subtle hover effect */
.filter-controls .form-control-sm:hover {
    background-color: var(--bs-border-color);
}

/* Keep the focus style clear and consistent */
.filter-controls .form-control-sm:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Ensure the custom arrow in the select dropdowns remains visible */
.filter-controls select.form-control-sm {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem; /* Make space for arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}
/* --- 16. DEAL ROOM STYLES --- */
.pipeline-overview {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
}
.stage-counter {
    flex-grow: 1;
    padding: 1rem;
    text-align: center;
    border-radius: 12px;
    background-color: var(--menu-hover-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.stage-counter:hover {
    background-color: var(--bs-border-color);
}
.stage-counter.active {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.stage-counter span { display: block; }
.stage-counter span.count { font-size: 1.75rem; font-weight: 600; color: var(--heading-text); }

#dealsTable .deal-row { cursor: pointer; }
#dealsTable .deal-row:hover { background-color: var(--menu-hover-bg); }

/* Drawer Styles */
.compliance-ribbon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    flex-shrink: 0;
}
.compliance-ribbon.good { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); }
.compliance-ribbon.warning { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: var(--warning-color); }
.compliance-ribbon.danger { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); }

.drawer-tab-pane { display: none; }
.drawer-tab-pane.active { display: block; animation: fadeIn 0.3s; }

/* Bulk Actions Bar */
.bulk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 12px;
    margin-bottom: 1rem;
    animation: fadeIn 0.3s;
}
.bulk-actions-bar.hidden { display: none; }
.bulk-actions-bar span { font-weight: 600; }
.bulk-actions-bar .actions { display: flex; gap: 0.5rem; }
.bulk-actions-bar .btn-c-sq { background-color: rgba(255,255,255,0.1); color: #fff; }
.bulk-actions-bar .btn-c-sq:hover { background-color: rgba(255,255,255,0.2); }
.bulk-actions-bar .btn-c-sq.soft-red { background-color: var(--danger-color); }
/* --- Assign Lead Modal Styles --- */
.assign-lead-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex-grow: 1; /* Allows the list to take available space */
}
.assign-lead-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid var(--input-border);
}
.assign-lead-list li:last-child {
    border-bottom: none;
}
.assign-lead-list li:hover {
    background-color: var(--menu-hover-bg);
}
.assign-lead-list li.selected {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    font-weight: 600;
}
.assign-lead-list .lead-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}
.assign-lead-list .lead-info .name-text {
    font-weight: 600;
    color: var(--heading-text);
}
.assign-lead-list .lead-info .email-text {
    font-size: 0.85rem;
    color: var(--light-text);
}
.assign-lead-list .placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--light-text);
}
/* --- 17. ENHANCED MODAL FOOTER BUTTONS --- */

/* Base style for all buttons inside the Assign Lead modal footer */
/* --- 19. ENHANCED DEAL WIZARD FOOTER BUTTONS (Soft Color Style) --- */

/* Style for the modal footer container */
#newDealModalFooter {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -5px 15px -5px rgba(0,0,0,0.1);
}

/* Base style for ALL buttons in the wizard footer */
#newDealModalFooter .btn {
    border-radius: 12px; /* Creates the "squared circle" shape */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
}

/* Specific styling for the "Back" button (already a soft style) */
#newDealModalFooter #dealWizardBackBtn {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
}

#newDealModalFooter #dealWizardBackBtn:hover:not(:disabled) {
    background-color: var(--bs-border-color);
    transform: translateY(-1px);
}

/* Clear disabled state for the "Back" button */
#newDealModalFooter #dealWizardBackBtn:disabled {
    background-color: var(--input-bg);
    color: var(--light-text);
    opacity: 0.7;
    cursor: not-allowed;
}

/* --- NEW "SOFT COLOR" STYLES for the primary buttons --- */
#newDealModalFooter #dealWizardNextBtn,
#newDealModalFooter #dealWizardCreateBtn {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

#newDealModalFooter #dealWizardNextBtn:hover:not(:disabled),
#newDealModalFooter #dealWizardCreateBtn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-color) 10%, transparent);
}
/* Style for the "Cancel" button */
#assignLeadModal #cancelAssignLeadBtn {
    background-color: var(--menu-hover-bg); /* Soft gray background */
    color: var(--bs-body-color);
}

#assignLeadModal #cancelAssignLeadBtn:hover {
    background-color: var(--bs-border-color); /* Slightly darker gray on hover */
    transform: translateY(-1px);
}

/* Style for the main "Assign Selected Lead" button */
#assignLeadModal #confirmAssignLeadBtn {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

#assignLeadModal #confirmAssignLeadBtn:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

/* Style for the "Assign" button when it is DISABLED */
#assignLeadModal #confirmAssignLeadBtn:disabled {
    background-color: var(--bs-border-color);
    color: var(--light-text);
    box-shadow: none;
    cursor: not-allowed;
}
/* --- 18. NEW DEAL WIZARD MODAL --- */

#newDealModal.modal-panel {
    display: flex !important;
    flex-direction: column !important;
    height: 85vh; /* Keeps the modal from being taller than the screen */
}

/* 2. This tells the header, stepper, and footer to maintain their
      natural height and not shrink, even if content is large. */
#newDealModal .modal-header,
#newDealModal .deal-wizard-stepper,
#newDealModal .modal-footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
    display: flex !important; /* Forcefully ensures the footer is visible */
}

/* 3. This is the main fix. It tells the modal's body to:
      - Grow to fill all available vertical space (flex-grow: 1).
      - Add a vertical scrollbar ONLY if its content is too tall (overflow-y: auto).
      This prevents the modal itself from growing off-screen.
*/
#newDealModal .modal-body {
    overflow-y: auto;
    flex-grow: 1;    
}

/* Stepper Navigation */
.deal-wizard-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--input-bg);
    flex-shrink: 0; /* Prevents the stepper from shrinking */
}


/* Modal Footer */
#newDealModalFooter {
    flex-shrink: 0; /* Prevents the footer from shrinking */
}
.step-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--light-text);
    font-weight: 600;
    transition: color 0.3s ease;
}

.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 2px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: all 0.3s ease;
}

.step-item.active .step-icon {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.step-item.active .step-label {
    color: var(--heading-text);
}
.step-item.completed .step-icon {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: #fff;
}
.step-item.completed .step-label {
    color: var(--light-text);
}


.step-connector {
    flex-grow: 1;
    height: 2px;
    background-color: var(--bs-border-color);
    margin: 0 1rem;
}

/* Wizard Step Content */
.deal-wizard-step {
    display: none;
    animation: fadeIn 0.2s ease-out;
}
.deal-wizard-step.active {
    display: block;
}

/* Re-usable form styles within the wizard */
.deal-wizard-step .form-group {
    margin-bottom: 1.5rem;
}
.deal-wizard-step .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.deal-wizard-step .form-group input,
.deal-wizard-step .form-group select {
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text);
}
.deal-wizard-step .form-group input:focus,
.deal-wizard-step .form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.input-with-link {
    display: flex;
    align-items: center;
}
.input-with-link input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.input-with-link a {
    display: inline-block;
    padding: 0 1rem;
    height: 44px;
    line-height: 44px;
    background-color: var(--menu-hover-bg);
    border: 1px solid var(--input-border);
    border-left: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    white-space: nowrap;
    font-weight: 500;
}

/* Review Step Panel */
.review-summary-panel {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.review-section {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
}
.review-section h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}
.review-section p {
    margin-bottom: 0.5rem;
    color: var(--light-text);
}
.review-section p strong {
    color: var(--bs-body-color);
    margin-right: 0.5rem;
}

.key-dates-timeline {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}
/* --- 20. DEAL WIZARD - LISTING SELECTION CARDS --- */

#dealListingSelectionContainer {
    margin-bottom: 1.5rem;
}

.listing-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-height: 350px;
    overflow-y: auto;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.listing-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    border: 2px solid var(--bs-border-color);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.listing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-2);
}

.listing-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-4px) scale(1.02);
}

.listing-card-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--menu-hover-bg);
}

.listing-card-info {
    padding: 0.75rem;
}

.listing-card-info .address {
    font-weight: 600;
    color: var(--heading-text);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card-info .price {
    font-size: 0.85rem;
    color: var(--light-text);
}

.listing-cards-container .placeholder-card {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--light-text);
    font-weight: 500;
}

/* Manual Entry Header */
.manual-entry-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 1rem;
    height: 24px; /* Reserve space to prevent layout shift */
}

.manual-entry-header a {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--bs-link-color);
}
.manual-entry-header a i {
    margin: 0 0.5rem;
}
/* --- 21. DEAL WIZARD ENHANCED CHECKBOXES (IMPROVED) --- */

.syndication-list {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-lg);
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--light-text);
  transition: all 0.25s ease-out;
}

/* On hover, the border becomes the primary color for a clear highlight */
.syndication-list:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.syndication-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  flex-shrink: 0;
  width: 22px;  /* Slightly larger */
  height: 22px; /* Slightly larger */
  background-color: var(--card-bg);
  border: 2px solid var(--bs-border-color);
  border-radius: 6px;
  display: grid;
  place-content: center;
  transition: all 0.2s ease-in-out;
}

/* The checkmark icon inside the box */
.syndication-list input[type="checkbox"]::before {
  content: '';
  width: 12px; /* Larger checkmark */
  height: 12px; /* Larger checkmark */
  transform: scale(0);
  transition: 0.15s transform ease-in-out;
  box-shadow: inset 1em 1em #fff; /* White checkmark */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

/* When the checkbox is checked, the background fills with the primary color */
.syndication-list input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  /* Add a glow effect when checked */
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

/* When checked, the checkmark scales into view */
.syndication-list input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* When the entire label is clicked and the checkbox becomes checked, the label text style changes */
.syndication-list:has(input:checked) {
  border-color: var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.syndication-list:has(input:checked) span {
    color: var(--heading-text);
    font-weight: 600;
}
/* =================================================================== */
/* === 22. CALENDAR & APPOINTMENTS TAB (PERFORMANCE & STYLE REMAKE) === */
/* =================================================================== */

/* --- A. Main Layout & View Switcher --- */
.calendar-layout {
    display: grid;
    grid-template-columns: 280px 1fr; /* Fixed sidebar, flexible main content */
    gap: 1.5rem;
    /* Full viewport height minus header, canvas padding top/bottom */
    height: calc(100vh - 70px - 4rem); 
}

.calendar-main {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#calendarViewSwitcher .btn-group .btn-c-sq.active {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    font-weight: 600;
}

/* --- B. Calendar Sidebar --- */
.calendar-sidebar {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto;
}

.sidebar-widget .widget-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}

/* Custom Checkbox Filters in Sidebar */
.filter-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-list label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}

.filter-list label:hover {
    background-color: var(--menu-hover-bg);
}

.filter-list input[type="checkbox"] {
    appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: 6px;
    display: grid;
    place-content: center;
    transition: all 0.2s ease-in-out;
}

.filter-list input[type="checkbox"]::before {
    content: '';
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: 0.1s transform ease-in-out;
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.filter-list input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.filter-list input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Upcoming Reminders List */
.reminder-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reminder-list li {
    position: relative;
    padding-left: 1.25rem;
    font-weight: 500;
    color: var(--heading-text);
}

.reminder-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

.reminder-list li small {
    display: block;
    color: var(--light-text);
    font-size: 0.85rem;
    font-weight: 400;
}

/* --- C. Main Calendar Grid & View Switching (Performance Fix) --- */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.calendar-header h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--heading-text);
    text-align: center;
    flex-grow: 1;
}

.calendar-body-container {
    position: relative;
    flex-grow: 1;
    overflow: visible; /* <-- Change from hidden to visible */
}

.calendar-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--card-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-in-out;
}

.calendar-view.active {
    opacity: 1;
    pointer-events: auto;
}

#monthView {
    display: flex;
    flex-direction: column;
}

.calendar-grid-header, .calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}

.calendar-grid-header {
    font-weight: 600;
    color: var(--light-text);
    text-align: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.calendar-grid-body {
    flex-grow: 1;
}

.calendar-day {
    border-right: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.5rem;
    transition: background-color 0.2s ease;
    position: relative;
    cursor: pointer;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day.not-current-month {
    background-color: var(--input-bg);
    pointer-events: none;
}
.calendar-day:not(.not-current-month):hover { 
    background-color: var(--menu-hover-bg); 
}

.day-number {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--light-text);
    text-align: right;
    margin-bottom: 0.5rem;
}

.calendar-day.today .day-number {
    color: #fff;
    background-color: var(--primary-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
}

/* --- D. Modals & Drawers (Performance Fix) --- */

/* Base Overlay for all popups in this section */
#newAppointmentModalOverlay,
#dayDetailDrawerOverlay,
#eventDrawerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Animation properties */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* Active (visible) state for overlays */
#newAppointmentModalOverlay.is-visible,
#dayDetailDrawerOverlay.is-open,
#eventDrawerOverlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Panel Animation */
#newAppointmentModalOverlay .modal-panel {
    transform: scale(0.95) translateY(15px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#newAppointmentModalOverlay.is-visible .modal-panel {
    transform: scale(1) translateY(0);
}

/* Drawer Animation */
#dayDetailDrawer, #eventDrawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    background-color: var(--sidebar-bg);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--bs-border-color);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#dayDetailDrawerOverlay.is-open #dayDetailDrawer,
#eventDrawerOverlay.is-open #eventDrawer {
    transform: translateX(0);
}

/* --- E. New Appointment Modal Styling --- */

.form-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.participants-container {
    position: relative;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    transition: all 0.2s ease;
}
.participants-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.selected-participants-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
}

.participant-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--menu-hover-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.participant-pill .lead-avatar-sm {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    font-size: 0.7rem;
}
.participant-pill .remove-pill-btn {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--light-text);
}
.participant-pill .remove-pill-btn:hover {
    color: var(--danger-color);
}

.participant-search-wrapper #participantSearchInput {
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--input-border);
    background-color: transparent;
}
.participant-search-wrapper #participantSearchInput:focus {
    box-shadow: none;
}

.participant-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    z-index: 10;
    list-style: none;
    box-shadow: var(--shadow-md);
}

.participant-search-results li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
}
.participant-search-results li:hover {
    background-color: var(--menu-hover-bg);
}

/* Modal Footer Buttons */
#newAppointmentModalOverlay .modal-footer {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--bs-border-color);
}

#newAppointmentModalOverlay .modal-footer .btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border: none;
    transition: all 0.2s ease-out;
}

#newAppointmentModalOverlay .modal-footer .btn-primary {
    background-color: var(--primary-color);
    color: #fff;
}
#newAppointmentModalOverlay .modal-footer .btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* --- F. Day Detail Drawer Styling --- */
.appointment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* In styles.css */

.appointment-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
    cursor: pointer; /* <-- Add this for the hand cursor */
    transition: all 0.2s ease;
}

.appointment-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: var(--menu-hover-bg); /* <-- Add this for the grey hover state */
}

/* This is the new rule for the selected state */
.appointment-item.selected {
    background-color: var(--menu-hover-bg);
    border-color: var(--primary-color) !important; /* Use important to override other border colors */
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}



.appointment-time {
    font-weight: 600;
    color: var(--heading-text);
    width: 70px;
}

.appointment-details .appointment-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.appointment-details .appointment-participants {
    font-size: 0.85rem;
    color: var(--light-text);
}

.no-appointments-message {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--light-text);
    font-style: italic;
}

.conflict-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent);
}
/* === 23. CALENDAR VIEWS & EVENTS (WEEK, DAY, AGENDA) === */

/* === 23. CALENDAR VIEWS & EVENTS (WEEK, DAY, AGENDA) === */

/* --- A. Timeline View (For Week & Day) --- */
.timeline-view {
    display: flex;
    /* The "height: 100%;" rule has been removed to allow the timeline to expand vertically. */
}   

.time-labels {
    flex-shrink: 0;
    width: 80px;
    padding-top: 90px; /* This is the second key change: 30px (header) + 60px (all-day row) */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--light-text);
    text-align: right;
    border-right: 1px solid var(--bs-border-color);
}

/* New styles for perfect grid alignment */
.time-label {
    height: 60px; /* Match the .hour-slot height */
    flex-shrink: 0; /* Prevent flex from resizing it */
    box-sizing: border-box;
    position: relative;
    text-align: right;
    padding-right: 10px;
    /* Pull the text up so it sits ON the line, not inside the box */
    transform: translateY(-0.5em);
    line-height: 1;
    color: var(--light-text);
    font-size: 0.8rem;
    font-weight: 500;
}

/* The first label (12 AM) should not be pulled up out of view */
.time-label:first-child {
    transform: translateY(0);
    visibility: hidden; /* Hide the 12 AM label at the very top for a cleaner look */
}

/* Re-align the tick mark with the transformed text */
.time-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0.5em; /* This should now align with the text's new position */
    width: 10px;
    height: 1px;
    background-color: var(--border-color-2);
}

.timeline-grid {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* For event positioning */
}

.timeline-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7 days for week view */
    flex-shrink: 0;
    height: 30px;
    border-bottom: 1px solid var(--bs-border-color);
}
#dayView .timeline-header {
    grid-template-columns: 1fr; /* 1 day for day view */
}

.timeline-header-day {
    text-align: center;
    font-weight: 600;
    color: var(--heading-text);
    border-right: 1px solid var(--bs-border-color);
}
.timeline-header-day:last-child {
    border-right: none;
}

.timeline-body {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* This new rule targets the specific container for timed events */
.timeline-day-grid-body {
    position: relative;
    flex-grow: 1;
    background-image: linear-gradient(var(--bs-border-color) 1px, transparent 1px);
    background-size: 100% 60px;
}
#dayView .timeline-body {
    grid-template-columns: 1fr; /* 1 day for day view */
}

/* styles.css */

/* --- FIX: This rule ensures all day columns have equal width --- */
.timeline-day-column {
    border-right: 1px solid var(--bs-border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* This correctly hides overflowing content now */
    min-width: 0; /* This is the crucial addition that allows columns to shrink */
}
.timeline-day-column:last-child {
    border-right: none;
}

.hour-slot {
    height: 60px; /* This defines the row height for one hour */
    border-top: 1px solid var(--bs-border-color);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.hour-slot:last-child {
    border-bottom: none; /* No bottom border on the last row */
}

.hour-slot:hover {
    background-color: var(--menu-hover-bg); /* The grey highlight on hover */
}
.timeline-day-column:last-child {
    border-right: none;
}

/* --- B. Agenda View --- */
.agenda-view-content {
    padding: 1.5rem;
    overflow-y: auto;
}

.agenda-day-group {
    margin-bottom: 2rem;
}

.agenda-day-header {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.agenda-event-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.agenda-event-item {
    display: flex;
    gap: 1rem;
    background-color: var(--input-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    border-left: 5px solid; /* The colored priority border */
    transition: all 0.2s ease-out;
    cursor: pointer;
}
.agenda-event-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: var(--menu-hover-bg);
}

.agenda-event-time {
    font-weight: 600;
    color: var(--light-text);
    width: 120px;
}

.agenda-event-details h4 {
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 4px 0;
}
.agenda-event-details p {
    font-size: 0.9rem;
    color: var(--light-text);
    margin: 0;
}

/* --- C. Event Styling & Prioritization Colors --- */
.calendar-event {
    position: absolute;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    cursor: pointer;
}
.calendar-event:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
    box-shadow: var(--shadow-md);
}
.event-title {
    font-weight: 600;
    display: block;
}
.event-time {
    opacity: 0.8;
}

/* Soft Color Palette for Event Types */
.event-showing, .agenda-event-item.event-showing {
    background-color: color-mix(in srgb, #3b82f6 80%, black); /* Soft Blue */
    border-color: #3b82f6;
}
.event-meeting, .agenda-event-item.event-meeting {
    background-color: color-mix(in srgb, #16a34a 80%, black); /* Soft Green */
    border-color: #16a34a;
}
.event-task, .agenda-event-item.event-task {
    background-color: color-mix(in srgb, #f97316 80%, black); /* Soft Orange */
    border-color: #f97316;
}
.event-deadline, .agenda-event-item.event-deadline {
    background-color: color-mix(in srgb, #dc2626 80%, black); /* Soft Red */
    border-color: #dc2626;
}
.event-personal, .agenda-event-item.event-personal {
    background-color: color-mix(in srgb, #7c3aed 80%, black); /* Soft Purple */
    border-color: #7c3aed;
}

/* Month view event indicators */
.day-events {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.event-dot.event-showing { background-color: #3b82f6; }
.event-dot.event-meeting { background-color: #16a34a; }
.event-dot.event-task { background-color: #f97316; }
.event-dot.event-deadline { background-color: #dc2626; }
.event-dot.event-personal { background-color: #7c3aed; }
/* === 24. ENHANCED AGENDA VIEW STYLES === */

.agenda-event-item {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Increased gap for better spacing */
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-lg); /* Softer, larger radius */
    border: 1px solid transparent; /* Prepare for hover border */
    border-left-width: 5px; /* Keep the colored left border for emphasis */
    transition: all 0.2s ease-out;
    cursor: pointer;
}

.agenda-event-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-2);
}

.agenda-event-time {
    font-weight: 600;
    color: var(--heading-text);
    width: 130px; /* Give it a fixed width */
    flex-shrink: 0;
    text-align: right;
    font-size: 0.9rem;
}

/* NEW: Icon styles */
.agenda-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular icon background */
    flex-shrink: 0;
    font-size: 1rem;
}

.agenda-event-details h4 {
    margin: 0 0 2px 0; /* Adjust margin */
    font-weight: 600;
    font-size: 1rem;
}

.agenda-event-details p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--light-text);
}


/* --- New Soft Color Palette --- */

/* Showing (Blue) */
.agenda-event-item.event-showing {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-left-color: var(--primary-color);
}
.agenda-event-item.event-showing .agenda-event-icon {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}
.agenda-event-item.event-showing .agenda-event-details h4 {
    color: var(--primary-color);
}


/* Meeting (Green) */
.agenda-event-item.event-meeting {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    border-left-color: var(--success-color);
}
.agenda-event-item.event-meeting .agenda-event-icon {
    background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
    color: var(--success-color);
}
.agenda-event-item.event-meeting .agenda-event-details h4 {
    color: var(--success-color);
}

/* Task (Orange) */
.agenda-event-item.event-task {
    background-color: color-mix(in srgb, var(--warning-color) 15%, transparent);
    border-left-color: var(--warning-color);
}
.agenda-event-item.event-task .agenda-event-icon {
    background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
    color: var(--warning-color);
}
.agenda-event-item.event-task .agenda-event-details h4 {
    color: var(--warning-color);
}

/* Deadline (Red) */
.agenda-event-item.event-deadline {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border-left-color: var(--danger-color);
}
.agenda-event-item.event-deadline .agenda-event-icon {
    background-color: color-mix(in srgb, var(--danger-color) 20%, transparent);
    color: var(--danger-color);
}
.agenda-event-item.event-deadline .agenda-event-details h4 {
    color: var(--danger-color);
}

/* Personal (Purple) */
.agenda-event-item.event-personal {
    background-color: color-mix(in srgb, #7c3aed 10%, transparent);
    border-left-color: #7c3aed;
}
.agenda-event-item.event-personal .agenda-event-icon {
    background-color: color-mix(in srgb, #7c3aed 20%, transparent);
    color: #7c3aed;
}
.agenda-event-item.event-personal .agenda-event-details h4 {
    color: #7c3aed;
}
.calendar-event {
    position: absolute;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: none; /* Use border instead of shadow for a flatter look */
    transition: all 0.2s ease;
    cursor: pointer;
}

.calendar-event .event-title {
    font-weight: 600;
    display: block;
    font-size: 0.85rem;
}

.calendar-event .event-time {
    font-weight: 500;
    opacity: 0.8;
}

/* --- Base Style for Events in AGENDA View --- */
.agenda-event-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid transparent;
    border-left-width: 5px; /* Keeps the colored left accent bar */
    transition: all 0.2s ease-out;
    cursor: pointer;
}

.agenda-event-item:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-2);
}

.agenda-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1rem;
}

.agenda-event-details h4 {
    margin: 0 0 2px 0;
    font-weight: 600;
    font-size: 1rem;
}


/* --- DYNAMIC SOFT COLOR THEME --- */

/* Showing (Blue) */
.calendar-event.event-showing,
.agenda-event-item.event-showing {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    color: var(--primary-color);
}
.agenda-event-item.event-showing .agenda-event-icon {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
}
.agenda-event-item.event-showing .agenda-event-details h4 {
    color: var(--primary-color);
}


/* Meeting (Green) */
.calendar-event.event-meeting,
.agenda-event-item.event-meeting {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 30%, transparent);
    color: var(--success-color);
}
.agenda-event-item.event-meeting .agenda-event-icon {
    background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
    color: var(--success-color);
}
.agenda-event-item.event-meeting .agenda-event-details h4 {
    color: var(--success-color);
}


/* Task (Orange) */
.calendar-event.event-task,
.agenda-event-item.event-task {
    background-color: color-mix(in srgb, var(--warning-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning-color) 40%, transparent);
    color: color-mix(in srgb, var(--warning-color) 85%, black); /* Darker text for yellow */
}
.agenda-event-item.event-task .agenda-event-icon {
    background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
    color: color-mix(in srgb, var(--warning-color) 85%, black);
}
.agenda-event-item.event-task .agenda-event-details h4 {
    color: color-mix(in srgb, var(--warning-color) 85%, black);
}


/* Deadline (Red) */
.calendar-event.event-deadline,
.agenda-event-item.event-deadline {
    background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
    color: var(--danger-color);
}
.agenda-event-item.event-deadline .agenda-event-icon {
    background-color: color-mix(in srgb, var(--danger-color) 20%, transparent);
    color: var(--danger-color);
}
.agenda-event-item.event-deadline .agenda-event-details h4 {
    color: var(--danger-color);
}


/* Personal (Purple) */
.calendar-event.event-personal,
.agenda-event-item.event-personal {
    background-color: color-mix(in srgb, #7c3aed 10%, transparent);
    border-color: color-mix(in srgb, #7c3aed 30%, transparent);
    color: #7c3aed;
}
.agenda-event-item.event-personal .agenda-event-icon {
    background-color: color-mix(in srgb, #7c3aed 20%, transparent);
    color: #7c3aed;
}
.agenda-event-item.event-personal .agenda-event-details h4 {
    color: #7c3aed;
}
/* =================================== */
/* === 26. WORKFLOW AUTOMATION (AGENT-BASED) === */
/* =================================== */

/* --- A. Sub-Navbar --- */
.sub-navbar {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 2rem;
}

.sub-nav-link {
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    color: var(--light-text);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Aligns with the parent border */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.2s ease;
}

.sub-nav-link:hover {
    color: var(--heading-text);
    background-color: var(--menu-hover-bg);
}

.sub-nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.automation-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.automation-pane.active {
    display: block;
}


/* --- B. Agent Roster --- */
.agent-roster-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.agent-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--card-bg);
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    transition: all 0.2s ease-out;
    cursor: pointer;
    position: relative;
}

.agent-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-2);
}

.agent-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    flex-shrink: 0;
}

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

.agent-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0 0 4px;
}

.agent-info p {
    font-size: 0.9rem;
    color: var(--light-text);
    margin: 0;
}

.agent-status-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 0.5rem;
    flex-shrink: 0;
}

.agent-status-light.running {
    background-color: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
}

.agent-status-light.paused {
    background-color: var(--warning-color);
    box-shadow: 0 0 8px var(--warning-color);
}

.agent-menu-btn {
    height: 36px;
    width: 36px;
}

/* --- C. Playbook Board (Kanban) --- */
.playbook-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    min-height: 500px;
}

.kanban-column {
    background-color: var(--input-bg);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.kanban-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 0 0.5rem 1rem;
    border-bottom: 1px solid var(--input-border);
    margin-bottom: 1rem;
}

.kanban-header .item-count {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.kanban-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.playbook-capsule {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: grab;
    transition: box-shadow 0.2s ease;
}
.playbook-capsule:active {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
}

.capsule-agent-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.capsule-info h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 2px;
}

.capsule-info span {
    font-size: 0.8rem;
    color: var(--light-text);
}


/* --- D. Drawers, Modals & Run Monitor --- */
.summary-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--light-text);
}
.summary-item strong {
    color: var(--heading-text);
    font-weight: 600;
}
.linked-playbook-list {
    list-style: none;
    padding: 0 1rem 1rem;
}
.linked-playbook-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--input-border);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.linked-playbook-list li:last-child {
    border-bottom: none;
}


.run-monitor-panel {
    position: fixed;
    right: 0;
    top: 70px; /* Below top header */
    width: 320px;
    height: auto;
    max-height: calc(100vh - 90px);
    background-color: var(--sidebar-bg);
    border: 1px solid var(--bs-border-color);
    border-right: none;
    border-radius: 12px 0 0 12px;
    box-shadow: var(--shadow-lg);
    z-index: 1045;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.run-monitor-panel:not(.hidden) {
    transform: translateX(0);
}

.run-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}
.run-monitor-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
}
#closeRunMonitorBtn {
    background: none; border: none; font-size: 1.1rem; color: var(--light-text); cursor: pointer;
}

.run-monitor-list {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.run-item {
    display: flex;
    gap: 0.75rem;
}
.run-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.run-item-details {
    flex-grow: 1;
}
.run-playbook-name, .run-current-step { display: block; }
.run-playbook-name { font-weight: 600; font-size: 0.9rem; }
.run-current-step { font-size: 0.8rem; color: var(--light-text); }
.run-item.error .run-current-step { color: var(--danger-color); }

.run-progress-bar {
    height: 4px;
    background-color: var(--input-border);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.run-progress-bar div {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.run-item-time {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
}

/* --- E. Playbook Builder --- */
.trigger-selection-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.trigger-card {
    padding: 2rem;
    border: 2px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.trigger-card:hover {
    border-color: var(--border-color-2);
    transform: translateY(-5px);
}
.trigger-card.selected {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    transform: translateY(-5px);
    box-shadow: 0 0 15px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.trigger-card i { color: var(--primary-color); margin-bottom: 1rem; }
.trigger-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--heading-text); }
.trigger-card p { color: var(--light-text); font-size: 0.9rem; }
/* =================================== */
/* === 27. AUTOMATION SETTINGS PANE === */
/* =================================== */

.settings-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.settings-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--heading-text);
}
.settings-header p {
    color: var(--light-text);
    font-size: 1rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}

.settings-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.settings-column .card .card-header {
    padding-bottom: 1rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--input-border);
}
.settings-column .card .card-content {
    padding: 1.5rem;
}

.settings-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.settings-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-list li span {
    font-weight: 500;
    color: var(--bs-body-color);
}

.settings-divider {
    height: 1px;
    background-color: var(--input-border);
    margin: 1.5rem 0;
}

.settings-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}
.settings-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.settings-column .form-group {
    margin-bottom: 1.5rem;
}
.settings-column .form-group.inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-column .form-group label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}
.settings-column .form-group.inline label {
    margin-bottom: 0;
}


.time-window-inputs {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.time-window-inputs span {
    font-weight: 600;
    color: var(--light-text);
}

.metric-display {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    background-color: var(--input-bg);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.notification-group {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--input-border);
}
.notification-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.notification-group h4 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 1rem;
}
.channel-toggles {
    display: flex;
    gap: 1.5rem;
}
.channel-toggles label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}
.channel-toggles input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary-color);
}

/* --- 28. ENHANCED SETTINGS FOOTER BUTTONS (Soft Style) --- */

/* Base style for both buttons in the settings footer */
.settings-footer .btn {
    border-radius: 12px; /* Consistent "circle-squared" shape */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
}

/* "Reset to Defaults" - Soft Gray Secondary Button */
.settings-footer .btn.btn-secondary-outline {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.settings-footer .btn.btn-secondary-outline:hover {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* "Save Changes" - Soft Blue Primary Button */
.settings-footer .btn.btn-primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.settings-footer .btn.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

@media (max-width: 992px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}
/* =================================== */
/* === 29. AGENT ROSTER ENHANCEMENTS === */
/* =================================== */

/* Wrapper for agent card action buttons */
.agent-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto; /* Pushes buttons to the right */
    flex-shrink: 0;
}

/* Info button specific style */
.agent-info-btn {
    height: 36px;
    width: 36px;
}

/* --- Soft Agent Avatar Backgrounds --- */
.agent-avatar.soft-red {
    background-color: color-mix(in srgb, #e54d4d 20%, var(--card-bg));
    color: #fca5a5;
}
.agent-avatar.soft-green {
    background-color: color-mix(in srgb, #479e53 20%, var(--card-bg));
    color: #86efac;
}
.agent-avatar.soft-yellow {
    background-color: color-mix(in srgb, #f2c94c 20%, var(--card-bg));
    color: #fde047;
}
.agent-avatar.soft-cyan {
    background-color: color-mix(in srgb, #56ccf2 20%, var(--card-bg));
    color: #67e8f9;
}
.agent-avatar.soft-purple {
    background-color: color-mix(in srgb, #9b51e0 20%, var(--card-bg));
    color: #d8b4fe;
}

/* --- Agent Description Modal --- */
#agentDescriptionModal .modal-body {
    line-height: 1.7;
    font-size: 1rem;
    color: var(--light-text);
}

#agentDescriptionModal .modal-header-text .name-text {
    color: var(--heading-text);
}

#agentDescriptionModal .modal-header-text .email-text {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1rem;
}
/* --- Agent Description Modal Footer Buttons (Soft Style) --- */

/* Targets the footer container itself */
#agentDescriptionModal .modal-footer {
    justify-content: flex-end; /* Aligns buttons to the right */
    background-color: var(--input-bg); /* Gives a slightly different background */
    border-top: 1px solid var(--input-border);
}

/* Base style for both buttons in this specific footer */
#agentDescriptionModal .modal-footer .btn {
    border-radius: 12px; /* Consistent "circle-squared" shape */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
}

/* "Close" button - Soft Gray Style */
#agentDescriptionModal .modal-footer #closeAgentDescriptionFooterBtn {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

#agentDescriptionModal .modal-footer #closeAgentDescriptionFooterBtn:hover {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* "Watch Video" button - Soft Blue Style */
#agentDescriptionModal .modal-footer #watchVideoBtn {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

#agentDescriptionModal .modal-footer #watchVideoBtn:hover {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}
/* Aligns icon and text in modal footer primary buttons */
.modal-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
/* In styles.css */

/* --- Video Modal Styles (V3 - Cinema Size) --- */

#videoModalPanel {
    /* This is the main change: We're making the modal much wider 
      to match the shape you drew.
    */
    width: 90vw;       /* It will now use 90% of the viewport's width. */
    max-width: 1800px;   /* A very generous limit for extra-large screens. */

    /* These styles remain to keep the dark aesthetic */
    background-color: #000;
    border: 1px solid var(--bs-border-color);
    
    /* We let the video content define the height automatically */
    height: auto; 
}

/* --- In styles.css --- */

/* Add these new rules for the video container and iframe */

.video-container {
    position: relative;
    width: 100%;
    /* This is the key: It forces the container to be a 16:9 rectangle */
    aspect-ratio: 16 / 9; 
    background-color: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 /* The extra brace has been removed from here. */

#videoModalPanel {
    /* These styles will now be applied correctly. */
    width: 90vw;
    max-width: 1800px;
    background-color: #000;
    border: 1px solid var(--bs-border-color);
    height: auto;
}
/* =================================== */
/* === 30. FINANCE & TAX SECTION === */
/* =================================== */

/* Re-using .calendar-layout for the finance section's sidebar/main content structure */
#finance-section .calendar-layout {
    height: auto; /* Allow height to be determined by content */
    align-items: flex-start;
}

/* Vertical Sub-Navbar for Finance Section */
#finance-section .sub-navbar {
    flex-direction: column; /* Stack links vertically */
    border-bottom: none;
    border-right: 1px solid var(--bs-border-color); /* Vertical divider */
    margin-bottom: 0;
    padding-right: 1.5rem;
    height: 100%;
}

#finance-section .sub-nav-link {
    border-bottom: none; /* Remove bottom border */
    border-left: 3px solid transparent; /* Prepare for active indicator */
    margin-bottom: 0.25rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#finance-section .sub-nav-link.active {
    border-left-color: var(--primary-color); /* Use left border as active indicator */
    border-bottom-color: transparent;
    background-color: var(--menu-hover-bg);
}

/* Ledger & Settings Panes (re-using .automation-pane) */
#finance-section .automation-pane {
    padding: 0 1.5rem;
}

/* Standalone Header for each pane */
#finance-section .card-header-standalone {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 1.5rem;
}
#finance-section .card-header-standalone h2 {
    font-size: 1.5rem;
}

/* Ledger Table Specifics */
#finance-section .styled-table td[style*="--success-color"] {
    font-weight: 600;
}
#finance-section .styled-table td[style*="--danger-color"] {
    font-weight: 600;
}
#finance-section .styled-table .fa-receipt {
    font-size: 1.1rem;
}

/* Tax Center Layout (re-using .settings-grid) */
#tax-center-pane .settings-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

#tax-center-pane .card .card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
}

#tax-center-pane input[type="range"] {
    width: 100%;
    accent-color: var(--primary-color);
}

/* Tax Compliance Alert */
#tax-center-pane .compliance-ribbon {
    border-radius: var(--border-radius);
    margin-top: 1rem;
}
/* --- 31. FINANCE MODAL ENHANCEMENTS --- */

/* Ensures custom controls inside modals have consistent styling */
.modal-body .form-control-custom {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text);
    padding: 0.75rem 1rem;
    height: 44px;
    transition: all 0.2s ease;
}

.modal-body .form-control-custom:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.modal-body textarea.form-control-custom {
    height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Fixes the file input button text color */
.modal-body input[type="file"].form-control-custom {
    padding: 0.6rem 1rem;
}

/* Styles for the green checkmark in the ledger table */
#incomeLedgerTable .fa-check-circle.text-green {
    color: var(--success-color);
    font-size: 1.1rem;
}
/* In styles.css */

/* — Make New Income Modal Larger — */
#newIncomeModal {
  max-width: 900px;
  width: 90%;
  height: auto;
  max-height: 90vh;
}

/* — Soft-Style Footer Buttons — */
#newIncomeModal .modal-footer {
  justify-content: flex-end;
  background-color: var(--input-bg);
  border-top: 1px solid var(--input-border);
}

#newIncomeModal .modal-footer .btn {
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  transition: all 0.2s ease-out;
}

/* Cancel (Soft Gray) */
#newIncomeModal .modal-footer #cancelNewIncomeBtn {
  background-color: var(--menu-hover-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}
#newIncomeModal .modal-footer #cancelNewIncomeBtn:hover {
  background-color: var(--bs-border-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Save (Soft Blue) */
#newIncomeModal .modal-footer #saveNewIncomeBtn {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  color: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}
#newIncomeModal .modal-footer #saveNewIncomeBtn:hover {
  background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}
/* ─── Income Modal Listing Cards ─── */
#incomeListingContainer .listing-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  max-height: 300px;        /* adjust as needed */
  overflow-y: auto;
  padding: 1rem 0;
}

#incomeListingContainer .listing-card {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius);
  padding: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#incomeListingContainer .listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

#incomeListingContainer .listing-card.selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
/* styles.css */

/* Add these new styles to your styles.css file */

/* Analytics Vault Specific Styles */

/* Filter & Context Bar */
.analytics-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: var(--border-radius-lg);
}

.analytics-filter-bar .filter-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Ensure filter dropdowns and inputs use the custom form-control-sm style */
.analytics-filter-bar .form-control-sm {
    background-color: var(--menu-hover-bg);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--bs-body-color);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    height: 40px;
    width: auto; /* Allow width to adjust to content */
    min-width: 150px;
    transition: all 0.2s ease;
}

.analytics-filter-bar .form-control-sm:hover {
    background-color: var(--bs-border-color);
}

.analytics-filter-bar .form-control-sm:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Specific styling for select dropdown arrows */
.analytics-filter-bar select.form-control-sm {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.analytics-overview .kpi-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.analytics-overview .kpi-card:hover {
    /* Instead of elevating, change background and border color */
    background-color: var(--menu-hover-bg); /* Use a subtle grey from your variables */
    border-color: var(--border-color-2); /* Slightly darker border on hover */
    transform: none; /* Remove elevation */
    box-shadow: none; /* Remove shadow */
}

.analytics-overview .kpi-card .trend-sparkline {
    /* Placeholder for actual sparkline charts */
    display: inline-block;
    width: 60px;
    height: 20px;
    background-color: rgba(126, 211, 33, 0.2); /* Example background for positive trend */
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* styles.css */

/* Analytics Tabs Styling - Reverted to match .ai-command-tabs */
.analytics-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 2rem;
    /* No specific background, padding, or border-radius here to keep it subtle */
}

/* Individual tab links within the analytics section will now inherit from .tab-nav .tab-link
   This assumes your .ai-command-tabs styling is providing the default
   behavior (e.g., color, font-weight, border-bottom).
*/
.analytics-tabs .tab-nav .tab-link {
    /* Ensure no conflicting styles are overriding the main tab-link styles */
    border-radius: 0; /* Remove specific border-radius if inherited from previous iteration */
    padding-bottom: 0.75rem; /* Reset padding-bottom for consistent height */
    margin-bottom: -1px; /* Maintain alignment with bottom border */
    box-shadow: none; /* Remove box-shadow */
    background-color: transparent; /* Ensure no background on non-active tabs */
}

.analytics-tabs .tab-nav .tab-link:hover {
    background-color: var(--menu-hover-bg); /* Use a standard hover background */
    border-color: transparent; /* No special border color on hover */
    border-radius: 0; /* Remove specific border-radius if inherited from previous iteration */
}

.analytics-tabs .tab-nav .tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: transparent; /* No background for active tab */
    box-shadow: none; /* No shadow for active tab */
    border-radius: 0; /* No special border-radius for active tab */
    padding-bottom: 0.75rem; /* Ensure consistent padding with other tabs */
}

/* Specific Table Row Hover Effect for the Conversion Funnel table */
#funnel-performance-tab .styled-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#funnel-performance-tab .styled-table tbody tr:hover {
    background-color: var(--menu-hover-bg); /* Turns grey on hover */
}
.analytics-tab-content .analytics-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}




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

/* styles.css */

/* Update the .funnel-chart-horizontal and .funnel-stage-h styles */
.funnel-chart-horizontal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Slightly reduced gap for a tighter funnel look */
    padding: 1.5rem;
}

.funnel-stage-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.25rem;
    border-radius: 6px;
    color: #fff; /* Keep text white for contrast */
    font-weight: 500;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease; /* Add transition for background */
    border: 1px solid transparent; /* Add a transparent border for consistency */
}
.funnel-chart-horizontal .funnel-stage-h:nth-child(1) { /* Prospects */
    background: color-mix(in srgb, var(--primary-color) 15%, transparent); /* Even softer blue */
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    color: var(--primary-color); /* Primary text color for contrast */
}

.funnel-chart-horizontal .funnel-stage-h:nth-child(2) { /* Qualified */
    background: color-mix(in srgb, var(--info-color) 15%, transparent); /* Softer info blue */
    border-color: color-mix(in srgb, var(--info-color) 25%, transparent);
    color: var(--info-color);
}

.funnel-chart-horizontal .funnel-stage-h:nth-child(3) { /* Showing */
    background: color-mix(in srgb, var(--warning-color) 15%, transparent); /* Softer warning orange */
    border-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
    color: var(--warning-color);
}

.funnel-chart-horizontal .funnel-stage-h:nth-child(4) { /* Offer */
    background: color-mix(in srgb, var(--success-color) 15%, transparent); /* Softer success green */
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
    color: var(--success-color);
}

.funnel-chart-horizontal .funnel-stage-h:nth-child(5) { /* Closed */
    background: color-mix(in srgb, var(--accent-color) 15%, transparent); /* Softer accent yellow */
    border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
    color: var(--accent-color);
}

.funnel-stage-h span:first-child {
    font-weight: 600;
}

/* Charts Placeholder Styling */
canvas {
    max-width: 100%;
    height: auto;
    padding: 1rem;
}
/* styles.css */
/* styles.css */
/* styles.css */

/* Networking & Referrals Layout */
/* THIS IS THE KEY FIX: The styles now only apply when the section is .active */
#networking-section.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px - 2rem); /* Ensure it takes available height */
}

/* New Sub-Navbar for Networking Section */
.networking-sub-navbar {
    margin-bottom: 2rem;
    /* This will inherit styles from .sub-navbar already defined */
}

.networking-tab-content {
    flex-grow: 1; /* Allows content to expand */
    display: flex; /* Use flex to manage inner panes */
    flex-direction: column;
}

.networking-pane {
    display: none;
    flex-grow: 1; /* Allow panes to take full height */
    animation: fadeIn 0.4s ease;
    overflow-y: auto; /* Enable scrolling for pane content */
    padding-bottom: 1.5rem; /* Add some bottom padding for content */
}

.networking-pane.active {
    display: flex; /* Use flex for inner content layout */
    flex-direction: column;
}

/* Main Layout for Dashboard Pane */
.networking-main-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px; /* Left sidebar, main content, right sidebar */
    gap: 1.5rem;
    flex-grow: 1; /* Allow this grid to fill available height */
    overflow: hidden; /* Hide overflow within the grid */
}

.agent-feed-panel,
.badge-ranking-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Ensure content doesn't spill */
}

.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.pane-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pane-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Agent Feed Specific */
.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Slightly reduced gap */
}

.activity-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced gap */
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); /* Softer background */
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent); /* Softer border */
    padding: 0.75rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.activity-list li:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
}

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}
.activity-icon.soft-green {
    background-color: color-mix(in srgb, #2EBD85 80%, black); /* Soft background, strong icon color */
    color: #FFF;
}
.activity-icon.soft-blue {
    background-color: color-mix(in srgb, #4A90E2 80%, black);
    color: #FFF;
}
.activity-icon.soft-purple {
    background-color: color-mix(in srgb, #BD10E0 80%, black);
    color: #FFF;
}


.activity-details {
    flex-grow: 1;
}

.activity-details strong {
    display: block;
    font-weight: 600;
    color: var(--heading-text);
}

.activity-details .activity-time {
    font-size: 0.8rem;
    color: var(--light-text);
}

/* Map & Discovery Specific */
.map-discovery-panel {
    position: relative;
    display: flex;
    flex-direction: column;
}

.map-overlay-search {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 100%;
    max-width: 400px; /* Constrain width */
    z-index: 10;
}

.map-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--input-bg);
    color: var(--light-text);
    font-size: 1.2rem;
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Important for embedded map later */
}

.map-controls {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 10;
}

/* Badge & Ranking Panel Specific */
.badge-ranking-panel {
    transition: transform 0.3s ease-in-out;
}

/* Collapsed state for the panel */
.badge-ranking-panel.collapsed {
    transform: translateX(calc(100% - 40px)); /* Hide all but a sliver */
}

.badge-ranking-panel.collapsed .pane-content {
    display: none;
}

.badge-ranking-panel.collapsed .pane-header .btn-c-sq i {
    transform: rotate(180deg);
}

.badge-progress-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.badge-progress-item h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.5rem;
}

.badge-progress-item .progress-bar {
    height: 8px;
    background-color: var(--input-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.badge-progress-item .progress-bar div {
    height: 100%;
    border-radius: 4px;
}

.badge-progress-item span {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
}

/* Referral Exchange Board */
.referral-exchange-board {
    padding: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    flex-grow: 1; /* Allow this card to fill available height in its pane */
}

.referral-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0; /* Remove default margin */
    padding: 0 1.5rem; /* Add horizontal padding to tabs container */
}

.referral-tab-content {
    padding: 1.5rem; /* Padding for the content inside tabs */
    flex-grow: 1; /* Allow content to grow */
    display: flex;
    flex-direction: column;
}

.referral-pane-inner {
    display: none;
    flex-grow: 1; /* Allow inner panes to fill height */
}

.referral-pane-inner.active {
    display: block;
}


.referral-table .lead-name .name-text {
    font-size: 0.95rem;
}
.referral-table .lead-name .email-text {
    font-size: 0.8rem;
}

/* Referral Exchange Table Row Styling with Soft Colors */
.referral-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent; /* Base border */
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); /* Soft background */
}

.referral-table tbody tr:hover {
    background-color: var(--menu-hover-bg); /* Standard grey on hover */
    border-color: var(--border-color-2); /* Subtle border on hover */
}

/* Referral Exchange Card Actions */
.referral-table button.btn-c-sq {
    height: 32px; /* Smaller action buttons for table rows */
    font-size: 0.8rem;
    padding: 0 0.8rem;
}

/* Earnings Dashboard KPIs - NO soft colors on these specific KPI cards */
.referral-kpi {
    cursor: pointer;
    transition: all 0.2s ease;
}
.referral-kpi:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
    transform: none;
    box-shadow: none;
}

/* Agent Profile Drawer */
#agentProfileDrawer .drawer-header .lead-name {
    display: flex;
    align-items: center;
    gap: 1rem;
}
#agentProfileDrawer .drawer-header .lead-name .lead-avatar {
    width: 60px;
    height: 60px;
    font-size: 2rem;
}
#agentProfileDrawer .drawer-header .lead-name h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

#agentProfileDrawer .details-section h4,
#networkingSettingsDrawer .details-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

#agentProfileDrawer .kpi-grid {
    grid-template-columns: 1fr; /* Stack KPIs vertically in drawer for more space */
    gap: 1rem;
}

#agentProfileDrawer .quick-action-list.stacked .quick-action-item {
    padding: 0.8rem 1rem;
    font-weight: 500;
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); /* Soft background */
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent); /* Soft border */
}
#agentProfileDrawer .quick-action-list.stacked .quick-action-item:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
}


/* Referral Contract Drawer */
#referralContractDrawer .timeline-list {
    list-style: none;
    padding-left: 1rem;
    border-left: 2px solid var(--bs-border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
#referralContractDrawer .timeline-list li {
    position: relative;
    padding-left: 1.5rem;
    font-weight: 500;
    color: var(--heading-text);
}
#referralContractDrawer .timeline-list li i {
    position: absolute;
    left: -1.2rem;
    top: 2px;
    background-color: var(--sidebar-bg); /* Match drawer background to hide line */
    border-radius: 50%;
    padding: 2px;
}
#referralContractDrawer .timeline-list .timeline-date {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 400;
    margin-top: 0.2rem;
}
/* For the "Digital Contract Preview" card */
.card.soft-background {
    background-color: var(--input-bg); /* Use input background for softer look */
    border: 1px solid var(--input-border); /* Match input border */
}


/* Alerts & Notifications Modal */
.notification-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced gap */
}
.notification-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); /* Soft background */
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent); /* Soft border */
    border-radius: var(--border-radius);
    cursor: pointer;
}
.notification-list li:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
}
.notification-list li i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 3px; /* Align icon better with text */
}
.notification-list .notification-content strong {
    display: block;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 2px;
}
.notification-list .notification-content a {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Networking Settings Drawer */
#networkingSettingsDrawer .form-group .btn-group {
    display: flex;
    gap: 0; /* Remove gap between buttons */
}
#networkingSettingsDrawer .form-group .btn-group .btn-c-sq {
    border-radius: var(--border-radius); /* Default roundness */
    flex-grow: 1; /* Make them fill space */
}
#networkingSettingsDrawer .form-group .btn-group .btn-c-sq:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#networkingSettingsDrawer .form-group .btn-group .btn-c-sq:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none; /* Remove border between them */
}
#networkingSettingsDrawer .channel-toggles label {
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); /* Soft background */
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent); /* Soft border */
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
}
#networkingSettingsDrawer .channel-toggles label:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
}
/* styles.css */

/* Education Hub Layout */
#education-hub-section.active {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 70px - 2rem); /* Full height minus header and padding */
}

.education-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Main content wider, sidebar narrower */
    gap: 1.5rem;
    flex-grow: 1; /* Make the grid fill available space */
    overflow: hidden; /* Hide overflow */
}

.education-main-column, .education-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
    padding-bottom: 1.5rem; /* Padding for the bottom of the grid content */
}

/* Academy Launcher */
.academy-launcher {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    flex-shrink: 0; /* Prevent shrinking */
}

.academy-launcher-btn {
    padding: 1.25rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.academy-launcher-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.academy-launcher-btn i {
    margin-right: 1rem;
    font-size: 1.3rem;
}

.academy-progress {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.academy-progress .progress-text {
    font-size: 0.95rem;
    color: var(--light-text);
    font-weight: 500;
}
.academy-progress .progress-text strong {
    color: var(--heading-text);
}

.academy-progress .progress-bar {
    height: 8px;
    background-color: var(--input-border);
    border-radius: 4px;
    overflow: hidden;
}
.academy-progress .progress-bar div {
    height: 100%;
    background-color: var(--success-color); /* Green progress bar */
    border-radius: 4px;
}

.academy-progress .last-lesson {
    font-size: 0.85rem;
    color: var(--light-text);
}
.academy-progress .last-lesson strong {
    color: var(--bs-body-color);
}


/* Learning Paths (Accordions) */
.learning-paths-accordions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Smaller gap between accordion items */
}

.accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--card-bg);
    overflow: hidden; /* Hide overflow for content */
    transition: background-color 0.2s ease;
}

.accordion-item.active {
    border-color: var(--primary-color);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accordion-item.active .accordion-header {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.accordion-header:hover {
    background-color: var(--menu-hover-bg);
}

.accordion-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
}

.accordion-header i {
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}

.accordion-content {
    display: none; /* Controlled by JS */
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--input-border); /* Top border for content */
}

.track-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.track-list li a {
    display: block;
    padding: 0.5rem 0.75rem;
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
    border-radius: var(--border-radius);
    color: var(--primary-color);
    font-weight: 500;
    transition: all 0.2s ease;
}
.track-list li a:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
    color: var(--heading-text);
}


/* Current Course Card */
.current-course-card {
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.current-course-card .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}

.current-course-card .course-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
}

.current-course-card .completion-percent {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--success-color);
}

.current-course-card .lesson-title {
    font-size: 1rem;
    color: var(--light-text);
    font-weight: 500;
}
.current-course-card .lesson-title strong {
    color: var(--bs-body-color);
}

.current-course-card .course-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--input-border);
}

.current-course-card .btn {
    flex-grow: 1;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
}

.current-course-card .audio-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--light-text);
    font-weight: 500;
    font-size: 0.9rem;
}
.current-course-card .audio-mode-toggle .theme-switch.mini {
    width: 44px;
    height: 24px;
}
.current-course-card .audio-mode-toggle .slider:before {
    width: 18px;
    height: 18px;
    left: 2px;
    bottom: 2px;
}
.current-course-card .audio-mode-toggle input:checked + .slider:before {
    transform: translateX(20px);
}


/* Badge & Certificate Shelf */
.badge-certificate-shelf {
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
}

.shelf-content {
    display: flex;
    overflow-x: auto;
    padding-bottom: 1rem; /* Space for scrollbar */
    gap: 1.5rem;
}
.shelf-content::-webkit-scrollbar { height: 6px; }
.shelf-content::-webkit-scrollbar-track { background: transparent; }
.shelf-content::-webkit-scrollbar-thumb { background-color: var(--input-border); border-radius: 3px; }
.shelf-content::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }

.badge-item {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 3px solid transparent;
}
.badge-item:hover { transform: scale(1.05); }
.badge-item img { width: 100%; height: 100%; object-fit: cover; }
.badge-item.earned { border-color: var(--accent-color); box-shadow: 0 0 15px color-mix(in srgb, var(--accent-color) 40%, transparent); }
.badge-item.locked { filter: grayscale(100%) brightness(50%); opacity: 0.6; cursor: not-allowed; border-color: var(--light-text); }
.badge-item.locked:hover { transform: none; }

.certificate-icon {
    position: absolute;
    bottom: 5px; right: 5px;
    background-color: var(--primary-color);
    color: #FFF;
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}


/* Live Sessions Calendar */
.live-sessions-calendar {
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
}

.session-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.session-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: color-mix(in srgb, var(--info-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--info-color) 15%, transparent);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-weight: 500;
    color: var(--heading-text);
}

.session-list li:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--border-color-2);
}

.session-list li span { font-size: 0.85rem; color: var(--light-text); white-space: nowrap; flex-shrink: 0; }
.session-list li h4 { flex-grow: 1; font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--heading-text); }
.session-list li h4 strong { color: var(--primary-color); }
.session-list li .btn-c-sq { flex-shrink: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; height: auto; width: auto; }


/* AI Tutor - FlowCoach (Floating Chat Icon) */
.flowcoach-ai-tutor {
    position: fixed;
    bottom: 2rem; right: 2rem;
    width: 60px; height: 60px;
    background-color: var(--primary-color);
    color: #FFF;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: all 0.3s ease;
}
.flowcoach-ai-tutor:hover {
    transform: translateY(-3px) scale(1.05);
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

/* AI Tutor Side Drawer */
#flowcoachDrawer .chat-messages { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; flex-grow: 1; overflow-y: auto; }
#flowcoachDrawer .message { max-width: 85%; padding: 0.75rem 1rem; border-radius: var(--border-radius); font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; }
#flowcoachDrawer .message.incoming { align-self: flex-start; background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--bs-body-color); border-bottom-left-radius: 4px; }
#flowcoachDrawer .message.outgoing { align-self: flex-end; background-color: var(--primary-color); color: #fff; border-bottom-right-radius: 4px; }
#flowcoachDrawer .chat-link-lesson { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0.75rem; background-color: color-mix(in srgb, var(--primary-color) 15%, transparent); color: var(--primary-color); border-radius: var(--border-radius); font-size: 0.85rem; font-weight: 600; transition: background-color 0.2s ease; }
#flowcoachDrawer .chat-link-lesson:hover { background-color: color-mix(in srgb, var(--primary-color) 25%, transparent); }
#flowcoachDrawer .drawer-footer { padding: 1rem; border-top: 1px solid var(--bs-border-color); background-color: var(--sidebar-bg); flex-shrink: 0; }
#flowcoachDrawer .drawer-footer .composer-prompt-container { margin-bottom: 0; }

/* Academy Overlay (iframe) */
.academy-iframe-modal { max-width: 90vw; height: 90vh; border-radius: var(--border-radius-lg); overflow: hidden; }
.academy-iframe-modal .modal-header { border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0; }
.academy-iframe-modal .modal-body { flex-grow: 1; padding: 0; }
/* =================================== */
/* === SETTINGS SECTION === */
/* =================================== */

.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr; /* Fixed nav, flexible content */
    gap: 2rem;
    align-items: flex-start;
}

/* --- Settings Navigation (Left) --- */
.settings-nav ul {
    list-style: none;
    position: sticky;
    top: 2rem; /* Sticks below the canvas padding */
}

.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: var(--border-radius);
    font-weight: 500;
    color: var(--light-text);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.settings-nav-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.settings-nav-link.active {
    background-color: var(--menu-hover-bg);
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color);
}

/* --- Settings Content (Right) --- */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.settings-pane {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.settings-pane.active {
    display: flex;
}

.settings-content .card .card-header {
    padding-bottom: 1rem;
    margin-bottom: 0;
}

.settings-card-content {
    padding: 1.5rem;
}

.settings-content .form-group {
    margin-bottom: 1.5rem;
}
.settings-content .form-group:last-child {
    margin-bottom: 0;
}

.settings-content .form-group label {
    display: block;
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}
.settings-content .form-control-custom {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

.settings-pane .inline-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}
.settings-pane .inline-setting label:not(.theme-switch) {
    margin: 0;
}


/* Integration List */
.integration-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}
.integration-list li {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--input-border);
}
.integration-list li:last-child {
    border-bottom: none;
}
.integration-list i {
    font-size: 1.8rem;
    color: var(--light-text);
    width: 30px;
    text-align: center;
}
.integration-list h3 {
    margin: 0 0 4px;
    color: var(--heading-text);
}
.integration-list p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--light-text);
}
.integration-list button {
    margin-left: auto;
}
/* ======================================= */
/* === V2: REDESIGNED APPOINTMENT MODAL === */
/* ======================================= */

.appointment-modal-v2 {
    background-color: var(--sidebar-bg);
    border-radius: 12px;
}

.modal-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.modal-title-text {
    font-size: 1.1rem;
    font-weight: 600;
}
.btn-icon-only {
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.btn-icon-only:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.modal-body-v2 {
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    background-color: color-mix(in srgb, var(--primary-color) 5%, var(--sidebar-bg));
}

/* Mega Title Input */
.mega-input-wrapper {
    padding: 1rem 0 1.5rem 0;
}
.mega-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading-text);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}
.mega-input::placeholder {
    color: var(--light-text);
    font-weight: 600;
}
.mega-input:focus {
    border-bottom-color: var(--primary-color);
}

/* Form Sections and Rows */
.form-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form-section-divider {
    height: 1px;
    background-color: var(--bs-border-color);
    margin: 1rem 0;
}
.form-row {
    position: relative; /* For search results positioning */
}

/* New Input Group Style */
.input-group-v2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0 0.75rem;
    transition: all 0.2s ease;
}
.input-group-v2:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
.input-group-v2 .icon-prefix {
    color: var(--light-text);
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Generic Form Control Style */
.form-control-v2 {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--input-text);
    height: 48px;
    padding: 0 0.5rem;
}
select.form-control-v2 {
    cursor: pointer;
}
textarea.form-control-v2 {
    height: auto;
    padding: 0.75rem 0.5rem;
    resize: vertical;
}

/* Time Inputs */
.time-inputs-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-grow: 1;
}
.time-inputs-wrapper .form-control-v2 {
    height: 44px; /* Slightly smaller for datetime */
}
.all-day-toggle-v2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    cursor: pointer;
    font-weight: 500;
}
.all-day-toggle-v2 input {
    accent-color: var(--primary-color);
}

/* Pills / Chips Input (Participants, Reminders) */
.pills-input-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.pills-input-container.reminders {
    min-height: 48px;
}
.selected-pills-v2 {
    display: contents; /* Makes children part of the flex layout */
}
.pills-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--input-text);
    min-width: 150px;
    padding: 0.25rem 0.5rem;
}
.add-reminder-btn-v2 {
    background: none;
    border: none;
    color: var(--bs-link-color);
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.add-reminder-btn-v2:hover {
    color: var(--bs-link-hover-color);
}
/* ======================================= */
/* === V3: APPOINTMENT MODAL REDESIGN   === */
/* ======================================= */

.appointment-modal-v3 .notes-group {
    align-items: flex-start;
}
.appointment-modal-v3 .notes-group .icon-prefix {
    margin-top: 12px;
}

/* AI Tip Button */
.btn-ai-tip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: transparent;
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.btn-ai-tip:hover {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.btn-ai-tip img {
    width: 20px;
    height: 20px;
}

/* New Softer Footer Buttons */
.modal-footer-v2 {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--bs-border-color);
}
.btn-footer-v2 {
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-footer-v2.save {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black);
    color: #fff;
    box-shadow: 0 4px 15px -5px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.btn-footer-v2.save:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px color-mix(in srgb, var(--primary-color) 40%, transparent);
}
.btn-footer-v2.cancel {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
}
.btn-footer-v2.cancel:hover {
    background-color: var(--bs-border-color);
    color: var(--heading-text);
}
/* This new block makes the soft red color the default state */
.btn-footer-v2.delete {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    font-weight: 600; /* Makes the text slightly bolder */
}

.btn-footer-v2.delete:hover {
    /* A new, slightly darker hover effect to provide user feedback */
    background-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
    transform: translateY(-1px); /* Adds a subtle lift on hover */
}



/* FlowCore AI Chat Modal */
.ai-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.ai-modal-header img {
    width: 28px;
    height: 28px;
}
.ai-chat-log {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--input-bg);
}
.ai-chat-bubble {
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    max-width: 80%;
    line-height: 1.6;
}
.ai-chat-bubble.ai {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--input-border);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.ai-chat-bubble.user {
    background-color: var(--primary-color);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.ai-chat-input-area {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
}
#aiChatInput {
    flex-grow: 1;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    height: 44px;
    padding: 0 1rem;
    color: var(--input-text);
    outline: none;
}
#aiChatInput:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
#aiChatSendBtn {
    flex-shrink: 0;
    width: 44px;
    padding: 0;
    font-size: 1.1rem;
}
/* styles.css */

/* ======================================= */
/* === V4: ENHANCED AI CHAT INTERFACE   === */
/* ======================================= */

/* Container for an entire message (avatar + bubble) */
.chat-message-row {
    display: flex;
    gap: 0.75rem;
    max-width: 90%;
}

/* Align AI messages to the left */
.chat-message-row.ai {
    align-self: flex-start;
}

/* Align User messages to the right */
.chat-message-row.user {
    align-self: flex-end;
    flex-direction: row-reverse; /* Flips the order for avatar on the right */
}

/* Styling for the circular avatars */
.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--input-bg);
    margin-top: 4px; /* Align with top of bubble */
}
.chat-avatar img,
.chat-avatar span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Styling for the "reasoning..." bubble */
.reasoning-bubble {
    font-style: italic;
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Animation for the three dots */
.reasoning-bubble .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--light-text);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}
.reasoning-bubble .dot:nth-child(1) { animation-delay: -0.32s; }
.reasoning-bubble .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}
/* styles.css */

/* ======================================= */
/* === V5: SOFTER AI CHAT BUTTON STYLE  === */
/* ======================================= */

.ai-chat-input-area .btn-footer-v2.save {
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent); /* Soft blue background */
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    box-shadow: none; /* Remove the default prominent shadow */
}

.ai-chat-input-area .btn-footer-v2.save:hover {
    background-color: color-mix(in srgb, var(--primary-color) 30%, transparent); /* Slightly darker on hover */
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: var(--primary-color); /* Keep the text color the same */
    transform: translateY(-1px); /* Add a very subtle lift on hover */
    box-shadow: 0 4px 10px -5px rgba(0,0,0,0.1); /* A much softer shadow on hover */
}
/* styles.css */

/* ======================================= */
/* === V6: FINAL AI CHAT UI POLISH      === */
/* ======================================= */

/* Add a subtle background gradient to the chat log for depth */
.ai-chat-log {
    background-image: radial-gradient(circle at top, color-mix(in srgb, var(--primary-color) 3%, transparent) 0%, transparent 40%);
}

/* Add a soft dividing line between the chat log and input area */
.ai-chat-input-area {
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, var(--input-border), transparent) 1;
}

/* Preset Prompt Suggestions Container */
.ai-prompt-suggestions {
    padding: 0.5rem 0 1rem 55px; /* Aligns with the chat bubbles */
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Individual Preset Prompt Button Styling */
.prompt-suggestion-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    color: var(--light-text);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.prompt-suggestion-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
    border-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.prompt-suggestion-btn i {
    color: var(--primary-color);
}
/* styles.css */

/* ================================================== */
/* === V7: APPOINTMENT MODAL HEADER UI ENHANCEMENT === */
/* ================================================== */

.modal-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Style for the new AI Tip icon button in the header */
#askAItipBtn img {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

#askAItipBtn:hover img {
    transform: scale(1.1);
}

/* Remove the old, now-unused text button style */
.btn-ai-tip {
    display: none;
}
/* styles.css */

/* ================================================== */
/* === V8: NOTICEABLE GRADIENT AI BUTTON           === */
/* ================================================== */

/* Wrapper for the new AI button to control its position */
.ai-prompt-button-wrapper {
    padding: 0.5rem 0 1.5rem 0;
}

/* The main button style */
.btn-ai-gradient {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}



.btn-ai-gradient img {
    width: 22px;
    height: 22px;
}

/* The magic for the gradient text */
.gradient-text {
    font-size: 1rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Clean up the old, unused header button style */
.modal-header-actions #askAItipBtn {
    display: none;
}
/* ================================================== */
/* === V9: MODAL OVERFLOW & SIZING FIX             === */
/* ================================================== */

/* 1. Make the modal slightly wider as requested for more breathing room. */
#newAppointmentModal.appointment-modal-v3 {
    max-width: 740px; /* Increased from 680px */
}

/* 2. Make the modal body scrollable. THIS IS THE MAIN FIX. */
.modal-body-v2 {
    overflow-y: auto; /* Add vertical scrollbar ONLY when needed. */
    
    /* Set a max-height that accounts for the header and footer.
       This prevents the modal from being too tall on shorter screens. */
    max-height: calc(85vh - 130px);
    
    /* Slightly increase right padding to make room for the scrollbar */
    padding-right: 1.25rem;
}

/* 3. Improve the layout of the time inputs row to be more robust. */
.time-inputs-wrapper {
    min-width: 0; /* Allows flex items to shrink properly if needed */
}

.all-day-toggle-v2 {
    flex-shrink: 0; /* Prevent the 'All day' checkbox from being squished */
    white-space: nowrap;
}
/* ================================================== */
/* === V12: PRODUCTION MONTH VIEW STYLES           === */
/* ================================================== */

/* styles.css */

/* ================================================== */
/* === V12: PRODUCTION MONTH VIEW STYLES           === */
/* ================================================== */

/* Container for events within a day cell */
.day-events-list {
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

/* Individual event pills in the month view */
.month-event {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.month-event:hover {
    filter: brightness(1.15);
}

/* "+ X more" indicator styling */
.month-event-more {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 2px 6px;
    cursor: pointer;
}
.month-event-more:hover {
    color: var(--bs-link-color);
}

/* Soft Color Palette for Month View Events (re-using existing types) */
.month-event.event-showing { background-color: var(--primary-color); }
.month-event.event-meeting { background-color: var(--success-color); }
.month-event.event-task { background-color: var(--warning-color); color: #000; }
.month-event.event-deadline { background-color: var(--danger-color); }
.month-event.event-personal { background-color: #7c3aed; }

/* Ensure day cells have enough height */
.calendar-day {
    min-height: 120px;
}
/* styles.css */
/* ================================================== */
/* === V13: SELECTABLE COLOR PALETTE STYLES        === */
/* ================================================== */

/* This targets the container for the color picker and dropdown */
.input-group-v2.color-picker-group {
    padding: 0; /* Remove padding to make it seamless */
}

/* Wrapper for just the color swatch buttons */
.color-palette-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem; /* Add padding inside */
}

/* Individual color swatch button */
.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* A very subtle default border that matches the input background */
    border: 2px solid var(--input-border);
    cursor: pointer;
    background-clip: content-box;
    padding: 2px;
    transition: all 0.2s ease-in-out;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--border-color-2);
}

/* Style for the selected/active color swatch */
.color-swatch.active {
    transform: scale(1.2);
    border-color: var(--primary-color);
    /* Add a soft glow to enhance the "soft" feel */
    box-shadow: 0 0 10px -2px var(--primary-color);
}
/* This styles the dropdown to have a left border, acting as a separator */
#appointmentTypeSelect.form-control-v2 {
    border-left: 1px solid var(--input-border) !important;
    border-radius: 0;
    max-width: 150px; /* Give it a max width */
}
/* ================================================== */
/* === V16: DYNAMIC AGENDA & OVERLAP STYLES        === */
/* ================================================== */

/* --- Dynamic Agenda View Item Styling --- */
.agenda-event-item {
    /* Uses the --event-color variable set by JavaScript */
    background-color: color-mix(in srgb, var(--event-color, #8E9DCC) 10%, transparent);
    border-left-color: var(--event-color, #8E9DCC);
}
.agenda-event-item .agenda-event-icon {
    background-color: color-mix(in srgb, var(--event-color, #8E9DCC) 20%, transparent);
    color: var(--event-color, #8E9DCC);
}
.agenda-event-item .agenda-event-details h4 {
    color: var(--event-color, #8E9DCC);
}


/* --- Timeline Overlap Indicator ("+X more") --- */
.timeline-event-more {
    position: absolute;
    left: 10px;
    right: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--menu-hover-bg);
    text-align: center;
    cursor: pointer;
    z-index: 5; /* Sit on top of grid lines but below events */
}

.timeline-event-more:hover {
    color: var(--bs-link-color);
    background-color: var(--bs-border-color);
}

/* --- Remove old static CSS rules --- */
/* You can safely delete these old rules if they exist, 
   as color is now handled dynamically */
.calendar-event.event-showing, .calendar-event.event-meeting,
.calendar-event.event-task, .calendar-event.event-deadline, 
.calendar-event.event-personal {
    background-color: initial;
    border-color: initial;
    color: initial;
}
/* ================================================== */
/* === V17: ALL-DAY EVENT RENDERING FIX           === */
/* ================================================== */

/* This new container will sit between the day header and the timed grid */
.all-day-events-container {
    padding: 4px;
    height: 60px; /* This is the key change to match other rows */
    box-sizing: border-box; /* Ensures padding is included in the height */
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto; /* Adds a scrollbar if there are too many all-day events */
}

/* Styling for the new "pills" that represent all-day events */
.all-day-event-pill {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.2);
}
/* Styling for the All-Day Event pills */
.all-day-event-pill {
    /* ... existing styles ... */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.all-day-pill-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px; /* Add some space between title and label */
}

.all-day-pill-label {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.75;
    padding: 1px 4px;
    border-radius: 3px;
    background-color: rgba(0,0,0,0.15); /* A subtle background for the label */
    flex-shrink: 0; /* Prevent the label from shrinking */
}
/* ================================================== */
/* === V19: EVENT CARD DELETE BUTTON STYLES        === */
/* ================================================== */

/* Position the delete icon in the top-right of the event card */
.calendar-event .event-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background-color: rgba(0,0,0,0.2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transform: scale(0.8);
    transition: all 0.2s ease-in-out;
}

/* Make the delete icon appear on hover */
.calendar-event:hover .event-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.event-delete-btn:hover {
    background-color: var(--danger-color);
    transform: scale(1.15) !important;
}
/* In styles.css */

/* ================================================== */
/* === V20: WEEK VIEW ALL-DAY OVERFLOW FIX         === */
/* ================================================== */

/* This is the key fix to prevent the grid columns from resizing */
.timeline-day-column {
    overflow: hidden;
}

/* Improve the styling of all-day event pills to handle long text */
.all-day-event-pill {
    /* ... keep existing styles ... */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* This will add "..." if the title is too long */
}

/* Styling for the new "+X more" link */
.all-day-more-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 2px 8px;
    margin-top: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.all-day-more-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--bs-link-color);
}
/* In styles.css */

/* ================================================== */
/* === V20: WEEK VIEW ALL-DAY OVERFLOW FIX         === */
/* ================================================== */

/* This is the key fix to prevent the grid columns from resizing */
.timeline-day-column {
    overflow: hidden;
}

/* Improve the styling of all-day event pills to handle long text */
.all-day-event-pill {
    /* ... keep existing styles ... */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* This will add "..." if the title is too long */
}

/* Styling for the new "+X more" link */
.all-day-more-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 2px 8px;
    margin-top: 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.all-day-more-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--bs-link-color);
}
/* In styles.css, add this new block */

/* ================================================== */
/* === V8: NOTICEABLE GRADIENT AI BUTTON           === */
/* ================================================== */

/* Wrapper for the new AI button to control its position */
.ai-prompt-button-wrapper {
    padding: 0.5rem 0 1.5rem 0;
}
/* In styles.css, find and replace the existing .btn-ai-gradient block */

/* The main button style - now with smaller padding */
.btn-ai-gradient {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem; /* Slightly smaller gap */
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 8px;
    padding: 0.6rem; /* CHANGED: Reduced padding to make the button shorter */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* The hover effect - now without the elevation */
.btn-ai-gradient:hover {
    background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
    /* REMOVED: transform: translateY(-2px); */
    /* REMOVED: box-shadow: 0 6px 20px -5px color-mix(in srgb, var(--primary-color) 10%, transparent); */
}

/* Making the icon smaller */
.btn-ai-gradient img {
    width: 20px; /* CHANGED: Was 22px */
    height: 20px; /* CHANGED: Was 22px */
}

/* Making the text smaller */
.gradient-text {
    font-size: 0.9rem; /* CHANGED: Was 1rem */
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

/* Clean up the old, unused header button style */
.modal-header-actions #askAItipBtn {
    display: none;
}
/* styles.css */

/* Styling for the new button container in the calendar sidebar */
.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Increased from 0.75rem for more distance */
}
/* ======================================= */
/* === V7: GEMINI-INSPIRED REASONING UI === */
/* ======================================= */

/* This is the main bubble for the "reasoning" message */
.reasoning-bubble {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between icon and text */
    background-color: var(--input-bg); /* Use a soft, neutral background */
    border: 1px solid var(--bs-border-color);
    color: var(--light-text);
    font-weight: 500;
    overflow: hidden; /* Important for the shimmer effect */
    position: relative; /* Also for the shimmer effect */
}

/* This creates the shimmering highlight effect */
.reasoning-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start the shimmer off-screen to the left */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 30%,
        var(--menu-hover-bg) 50%,
        transparent 70%
    );
    animation: shimmer 1.5s infinite linear;
}

/* Add a new, dedicated icon for the reasoning state */
.reasoning-bubble .reasoning-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

/* The @keyframes animations for the effects */
@keyframes shimmer {
    to {
        left: 150%; /* Move the shimmer across the bubble to the right */
    }
}

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

/* Remove the old dot-based animation */
.reasoning-bubble .dot {
    display: none;
}
/* ======================================= */
/* === V8: STANDALONE REASONING INDICATOR === */
/* ======================================= */

/* This is the new container for the indicator, WITHOUT bubble styling */
.reasoning-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between icon and text */
    padding: 0.75rem 1.25rem; /* Give it the same padding as a real bubble for alignment */
    color: var(--light-text);
    font-weight: 500;
}

/* The spinning gradient icon (no changes needed here) */
.reasoning-indicator .reasoning-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

/* Keyframes for the spinning animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* ================================================== */
/* === V12: TEXT-ONLY REASONING INDICATOR        === */
/* ================================================== */

/* Styling for the reasoning text with the "wave" effect */
.reasoning-text {
    font-weight: 500;
    font-size: 1rem;
    align-self: center; /* Vertically aligns the text with the avatar */

    /* 1. Create a gradient background */
    background: linear-gradient(
      90deg,
      var(--light-text),
      #fff,
      var(--light-text)
    );
    
    /* 2. Make the background much wider than the text */
    background-size: 200% auto;

    /* 3. Clip the background to the shape of the text */
    -webkit-background-clip: text;
    background-clip: text;

    /* 4. Make the text color transparent to reveal the gradient */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 5. Apply the wave animation */
    animation: text-shimmer 2s linear infinite;
}

/* Keyframe for the text wave effect */
@keyframes text-shimmer {
    to {
        background-position: -200% center;
    }
}
/* ======================================= */
/* === V13: SOFT MODAL FOOTER BUTTONS   === */
/* ======================================= */

/* === V14: GENERIC SOFT BUTTON STYLES === */
.btn-soft {
    display: inline-flex;       /* ADD THIS */
    align-items: center;        /* ADD THIS */
    justify-content: center;    /* ADD THIS */
    gap: 0.6rem;                /* ADD THIS for spacing */
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
    cursor: pointer;
}

/* Soft blue style for "Save Changes" */
.btn-soft.primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.btn-soft.primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Soft red style for "Delete" */
.btn-soft.danger {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.btn-soft.danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--danger-color) 10%, transparent);
}
/* in styles.css */

/* The dark overlay behind the drawer */
.details-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1090;
    
    /* Animation: Start hidden */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out; /* Controls fade in/out */
}
.details-drawer-overlay.is-open {
    /* Animation: End visible */
    opacity: 1;
    pointer-events: auto;
}

.details-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    /* max-width is set on the element's style attribute */
    height: 100%;
    background-color: var(--sidebar-bg);
    z-index: 1100;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    
    /* Animation: Start off-screen to the right */
    transform: translateX(100%); 
    /* This transition is the key for the smooth slide animation */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.details-drawer.is-open {
    /* Animation: Slide into view */
    transform: translateX(0); 
}
/* Styling for the new Deal Room Analytics filter */
#dealAnalyticsTimespan {
    min-width: 140px;
    width: auto;
}
/* Add this new class for the soft green button style */
.btn-soft.green {
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}

.btn-soft.green:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--success-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--success-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--success-color) 10%, transparent);
}
/* === V14: GENERIC SOFT BUTTON STYLES === */
.btn-soft {
    display: inline-flex;       /* ADD THIS */
    align-items: center;        /* ADD THIS */
    justify-content: center;    /* ADD THIS */
    gap: 0.6rem;                /* ADD THIS for spacing */
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
    cursor: pointer;
}
/* Soft blue style for primary actions like "Save" */
.btn-soft.primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.btn-soft.primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* --- ADD THIS NEW CLASS --- */
/* Soft gray style for secondary actions like "Cancel" */
.btn-soft.secondary {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.btn-soft.secondary:hover:not(:disabled) {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* -------------------------- */

/* Soft red style for "Delete" */
.btn-soft.danger {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    border-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
}

.btn-soft.danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--danger-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--danger-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--danger-color) 10%, transparent);
}
/* ======================================= */
/* === V15: CUSTOM MODAL SCROLLBAR      === */
/* ======================================= */

/* This targets the scrollable area inside all of your modals */
.modal-body {
  /* For Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--input-bg);
}

/* For WebKit browsers (Chrome, Safari, Edge, etc.) */
.modal-body::-webkit-scrollbar {
  width: 8px; /* Makes the scrollbar thin */
}

/* The "track" or background of the scrollbar */
.modal-body::-webkit-scrollbar-track {
  background: var(--input-bg); /* A subtle background that matches the inputs */
}

/* The draggable "thumb" of the scrollbar */
.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color); /* The primary blue color */
  border-radius: 10px; /* Fully rounded corners */
  border: 2px solid var(--input-bg); /* Creates a nice padding effect */
}

/* Makes the scrollbar slightly darker when you hover over it */
.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}
/* ======================================= */
/* === V16: STYLED FILE INPUT & PREVIEW === */
/* ======================================= */

/* Hides the default, un-stylable file input button */
#expenseReceipt {
    display: none;
}

/* Styles the <label> to look like our custom button */
.file-upload-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.file-upload-label:hover {
    background-color: var(--bs-border-color);
    color: var(--heading-text);
}

/* New container for the receipt image preview */
.receipt-preview-container {
    height: 150px;
    width: 100%;
    border-radius: var(--border-radius);
    border: 2px dashed var(--input-border);
    background-color: var(--input-bg);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-weight: 500;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: border-color 0.3s ease;
}

.receipt-preview-container.has-image {
    border-style: solid;
    border-color: var(--bs-border-color);
}
#newExpenseModal {
    max-width: 1140px; /* New, larger width */
}
/* In styles.css */

/* ======================================= */
/* === V17: CUSTOM SEARCHABLE INPUTS    === */
/* ======================================= */

.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper .search-input {
    padding-right: 2.5rem; /* Make space for the clear button */
}

/* The 'x' button to clear a selection */
.custom-select-wrapper .clear-selection-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--light-text);
    transition: color 0.2s ease, transform 0.2s ease;
}

.custom-select-wrapper .clear-selection-btn:hover {
    color: var(--danger-color);
    transform: translateY(-50%) scale(1.1);
}

/* The dropdown list for search results */
/* in styles.css */

.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block; /* This line fixes the layout issue. */
}

.search-results-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Individual items in the search results */
.search-results-list li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--input-border);
}

.search-results-list li:last-child {
    border-bottom: none;
}

.search-results-list li:hover {
    background-color: var(--menu-hover-bg);
}

.search-results-list li .item-name {
    font-weight: 500;
    color: var(--heading-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search-results-list li .item-subtext {
    font-size: 0.8rem;
    color: var(--light-text);
    display: block;
    margin-top: 2px;
}

/* Message for when no results are found */
.search-results-list .no-results {
    padding: 1rem;
    color: var(--light-text);
    text-align: center;
    font-style: italic;
}
/* ======================================= */
/* === AI-ASSIST LINK BUTTON             === */
/* ======================================= */

.btn-ai-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-ai-link:hover:not(:disabled) {
    background-color: var(--menu-hover-bg);
}

.btn-ai-link:disabled {
    cursor: not-allowed;
}

.btn-ai-link img,
.btn-ai-link .fa-spinner,
.btn-ai-link .fa-check-circle {
    width: 20px;
    height: 20px;
}

.btn-ai-link .gradient-text {
    font-size: 0.9rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.btn-ai-link .status-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
}

.btn-ai-link .success-text {
    color: var(--success-color);
}
/* styles.css */

/* =================================== */
/* === 32. TAX CENTER STYLES         === */
/* =================================== */

.tax-center-tab-content {
    margin-top: 1.5rem;
}

.tax-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tax-tab-pane.active {
    display: block;
}

/* Accordion for Estimates */
.tax-center-tab-content .accordion-item {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}

.tax-center-tab-content .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tax-center-tab-content .accordion-header:hover {
    background-color: var(--menu-hover-bg);
}

.tax-center-tab-content .accordion-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
}

.tax-center-tab-content .accordion-content {
    display: none; /* JS will toggle this */
    padding: 1.5rem;
    border-top: 1px solid var(--input-border);
}

.tax-center-tab-content .accordion-content p {
    margin-bottom: 1rem;
    color: var(--light-text);
}
.tax-center-tab-content .accordion-content p strong {
    color: var(--bs-body-color);
}

/* Tax Profile Summary Styles */
#taxProfileSummary {
    padding: 1.5rem;
    color: var(--light-text);
}
#taxProfileSummary .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--input-border);
}
#taxProfileSummary .summary-item:last-child {
    border-bottom: none;
}
#taxProfileSummary .summary-item span {
    font-weight: 500;
}
#taxProfileSummary .summary-item strong {
    font-weight: 600;
    color: var(--heading-text);
}
/* Add this to the end of styles.css */

.settings-pane-footer {
    padding: 1rem 0;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1.5rem;
}

.settings-pane-footer .btn {
    font-size: 1rem;
    padding: 0.8rem 1.8rem;
    border-radius: 12px;
}
/* Add these new styles to the end of styles.css */

/* --- ENHANCED "ADD NEW LEAD" MODAL STYLES --- */

/* Give the modal body more breathing room */
#newLeadModal .modal-body {
    padding: 1.5rem 2.5rem 2.5rem 2.5rem; /* Increased padding */
}

/* Style the headers for each section (Core Info, AI, etc.) */
#newLeadModal .modal-section-header {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 2rem 0 1.25rem 0; /* Increase vertical spacing between sections */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
    display: flex;
    align-items: center;
}

/* Remove extra top margin from the very first header */
#newLeadModal .modal-section-header:first-of-type {
    margin-top: 0;
}

/* Increase the spacing between form elements */
#newLeadModal .form-grid {
    gap: 1.5rem; /* More space between columns and rows */
}

/* Refine the AI Follow-up options container */
#aiFollowUpOptions {
    background-color: var(--input-bg); /* Use a subtle background */
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

/* Style the AI toggle switch to look like a proper form element for alignment */
.settings-pane-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px; /* Matches the height of .form-control-custom */
    padding: 0 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

.settings-pane-toggle .toggle-label {
    font-weight: 500;
    color: var(--bs-body-color);
}

#newLeadModal .form-group .switch-container span {
    color: var(--text-color);
}

/* Improve the AI disclaimer text style */
.disclaimer-text {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 25%, transparent);
    border-left: 4px solid var(--warning-color);
    border-radius: var(--border-radius);
}

.disclaimer-text i {
    margin-right: 8px;
    color: var(--warning-color);
}
/* ADD THIS TO styles.css */

/* in styles.css */

/* --- LEAD & LISTING TABLE ACTION MENU STYLES --- */
.action-cell {
    position: relative;
    text-align: right;
}

.action-cell .kebab-btn {
    /* Ensures the button itself doesn't have a background when the menu is open */
    position: relative;
    z-index: 11;
}

.action-cell .dropdown-menu {
    display: none; /* Hidden by default */
    min-width: 180px;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    animation: fadeIn 0.1s ease-out;
}

.action-cell .dropdown-menu.is-open {
    display: block;
    position: fixed; /* Takes the menu out of the table's overflow context */
    transform: translateX(-100%); /* This aligns the menu's right edge with the button's right edge */
    z-index: 1100; /* High z-index to ensure it's on top of everything */
}

.action-cell .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.action-cell .dropdown-item:hover {
    background-color: var(--menu-hover-bg);
}

.action-cell .dropdown-item.delete-btn:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    font-weight: 500;
}

/* --- Lead Engine Bulk Actions Bar --- */
.bulk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 12px;
    margin-top: 1.5rem; /* Give it some space from the header */
    animation: fadeIn 0.3s;
    box-shadow: var(--shadow-md);
}

.bulk-actions-bar span {
    font-weight: 600;
}

.bulk-actions-bar .actions {
    display: flex;
    gap: 0.5rem;
}

.bulk-actions-bar .btn-c-sq {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}

.bulk-actions-bar .btn-c-sq:hover {
    background-color: rgba(255,255,255,0.2);
}

.bulk-actions-bar .btn-c-sq.soft-red {
    background-color: var(--danger-color);
}


.action-cell .dropdown-menu.is-open {
    display: block;
    position: fixed; /* Takes the menu out of the table's overflow context */
    z-index: 1100; /* High z-index to ensure it's on top of everything */
}
/* in styles.css */

/* =================================== */
/* === LEAD PROFILE MODAL STYLES     === */
/* =================================== */

.lead-profile-modal {
    max-width: 800px;
    width: 90%;
}

.lead-profile-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: var(--input-bg);
}

.lead-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.lead-header-info {
    flex-grow: 1;
}

.lead-profile-header .name-text {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading-text);
    margin: 0;
}

.lead-profile-header .email-text {
    font-size: 1rem;
    color: var(--bs-link-color);
    margin: 0;
}

.lead-profile-header .btn-c-sq {
    align-self: flex-start; /* Aligns close button to the top */
}

.lead-profile-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2rem 2.5rem;
}

.profile-column {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-data-group .profile-data-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.profile-data-group .profile-data-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin: 0;
}

.profile-data-value.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.profile-data-value.tags-list .tag {
    background-color: var(--menu-hover-bg);
    padding: 4px 10px;
    border-radius: 6px;
}

.profile-data-value .status-badge {
    font-size: 0.9rem;
}

.profile-data-value.note-box {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    min-height: 50px;
    white-space: pre-wrap; /* Preserves line breaks in notes */
}

.lead-profile-modal .modal-footer {
    justify-content: flex-end;
}
#appWrapper.hidden {
    display: none;
}
/* styles.css */

/* styles.css */

/* ======================================= */
/* === FINAL LOG TOAST NOTIFICATION STYLES === */
/* ======================================= */

/* in styles.css */
.log-toast-container {
    position: fixed;
    bottom: 1.5rem; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* This ensures it's on top of all other content */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.log-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 320px;
    background-color: var(--card-bg);
    color: var(--bs-body-color);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}

.log-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.log-toast .toast-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.log-toast.loading .toast-icon {
    color: var(--primary-color);
}
.log-toast.success .toast-icon {
    color: var(--success-color);
}
.log-toast.error .toast-icon {
    color: var(--danger-color);
}

.fa-spin {
    animation: fa-spin 1.5s linear infinite;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* styles.css */

/* --- Add this entire new block to the end of your CSS file --- */

/* Spinner Animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.source-selection-card .spinner {
  display: none; /* Hidden by default */
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3); /* Light border */
  border-top-color: #fff; /* White spinner color */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: auto; /* Pushes the spinner to the right */
}

/* --- Loading State for the Card --- */
.source-selection-card.loading {
  pointer-events: none; /* Prevent clicking while loading */
  background-color: color-mix(in srgb, var(--primary-color) 80%, black); /* Darken the card */
  border-color: var(--primary-color);
}

.source-selection-card.loading .spinner {
  display: block; /* Show the spinner */
}

.source-selection-card.loading .source-selection-icon,
.source-selection-card.loading .source-selection-text {
  opacity: 0.25; /* Fade out the original content */
}
/* styles.css */

/* ======================================================= */
/* === SOURCE CARD LOADING & IMPORT STATUS (FINAL FIX) === */
/* ======================================================= */

.source-card {
    position: relative; /* Needed to position child elements absolutely */
    transition: all 0.3s ease;
    overflow: hidden; /* Prevents content from spilling out during animations */
}

/* The container for the main content (icon, count, name) */
.source-card .source-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* The spinner element, now perfectly centered */
.source-card .card-spinner {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* The key to perfect centering */
    width: 28px;
    height: 28px;
    border: 4px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2; /* Ensures spinner is on top */
}

/* NEW: The container for the success message (e.g., "✓ 5 leads imported") */
.source-card .import-status {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: transparent;
    color: var(--success-color);
    opacity: 0; /* Hidden by default */
    transform: scale(0.9);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* --- Loading State --- */
.source-card.is-loading {
    cursor: wait;
}

/* When loading, fade out the normal content */
.source-card.is-loading .source-content {
    opacity: 0.2;
}

/* And show the spinner */
.source-card.is-loading .card-spinner {
    display: block;
}

/* --- NEW: Imported State --- */
.source-card.is-imported {
    background-color: color-mix(in srgb, var(--success-color) 10%, var(--card-bg));
    border-color: var(--success-color);
}

/* When imported, hide the content */
.source-card.is-imported .source-content {
    opacity: 0;
    transform: scale(0.95);
}

/* And show the status message */
.source-card.is-imported .import-status {
    opacity: 1;
    transform: scale(1);
}
/* in styles.css */

/* =================================== */
/* === LEAD ENGINE METRICS DRAWER    === */
/* =================================== */

/* The dark overlay behind the drawer */
#leadMetricsDrawerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1090; /* High z-index */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* This class makes the overlay visible */
#leadMetricsDrawerOverlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* The drawer panel itself */
#leadMetricsDrawer {
    position: fixed;
    top: 0;
    right: 0; /* Positioned on the right */
    width: 100%;
    max-width: 400px;
    height: 100%;
    background-color: var(--sidebar-bg);
    z-index: 1100;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* This class slides the drawer into view */
#leadMetricsDrawer.is-open {
    transform: translateX(0);
}
/* Add this to the end of styles.css */

.lead-engine-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.lead-engine-pane.active {
    display: block;
}
/* Add this to the end of styles.css */
.table-footer .footer-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* Add this to the end of styles.css */

/* ======================================= */
/* === CUSTOM FOOTER SELECT DROPDOWN    === */
/* ======================================= */

.footer-select {
  /* Reset browser default styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Sizing and Spacing */
  height: 40px;
  padding: 0 2.5rem 0 1rem; /* top/bottom | right (for arrow) | left */
  font-size: 0.9rem;
  font-weight: 500;
  width: auto; /* Let the dropdown size to its content */

  /* Background, Border, and Color */
  background-color: var(--menu-hover-bg); /* Use the soft gray from your theme */
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px; /* Softer, more rounded corners */
  
  /* Custom Dropdown Arrow Icon */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;

  /* Transitions and Interaction States */
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.footer-select:hover {
  background-color: var(--bs-border-color);
  border-color: var(--border-color-2);
}

.footer-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

/* Ensure options are styled correctly in dark mode */
.footer-select option {
    background-color: var(--card-bg);
    color: var(--input-text);
}
/* REPLACE the previous #newLeadModal block with this one */

/* --- ENHANCED "ADD NEW LEAD" MODAL STYLES (V3 - MAXIMUM SPACING) --- */

/* Give the modal body more breathing room */
#newLeadModal .modal-body {
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

/* Style the headers for each section with SIGNIFICANTLY MORE vertical margin */
#newLeadModal .modal-section-header {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 3rem 0 1.5rem 0; /* INCREASED top margin to push sections apart */
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
    display: flex;
    align-items: center;
}

/* Remove extra top margin from the very first header */
#newLeadModal .modal-section-header:first-of-type {
    margin-top: 0;
}

/* SIGNIFICANTLY INCREASED the spacing between form elements */
#newLeadModal .form-grid {
    gap: 2.5rem 2.25rem; /* INCREASED row and column gap */
}

/* This adds a large extra bottom margin to each form group for more vertical space */
#newLeadModal .form-group {
    margin-bottom: 1rem; /* INCREASED margin for a very spaced-out feel */
}

/* Style the AI toggle switch to look like a proper form element for alignment */
.settings-pane-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px; /* Matches the height of .form-control-custom */
    padding: 0 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

.settings-pane-toggle .toggle-label {
    font-weight: 500;
    color: var(--bs-body-color);
}

/* Container for the AI options that appear when toggled */
#aiFollowUpOptions {
    background-color: var(--input-bg); /* Use a subtle background */
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

/* Improve the disclaimer text style */
.disclaimer-text {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 2rem;
    padding: 0.75rem 1rem;
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.disclaimer-text i {
    margin-right: 8px;
    color: var(--primary-color);
}
#aiFollowUpOptions {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin-top: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

/* When the container is not hidden, it will expand and fade in */
#aiFollowUpOptions:not(.hidden) {
    max-height: 500px; /* A large enough value to not clip content */
    opacity: 1;
    padding-top: 1.5rem;
}
/* ADD THIS TO THE END of styles.css */

/* Animation for the spinning status light */
@keyframes light-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* This class will be added by JavaScript to trigger the animation */
.agent-status-light.is-running {
  animation: light-spin 1.2s linear infinite;
}
/* REMOVE the old spinner CSS and ADD this block to styles.css */

/* Keyframe animation for the spinner */
@keyframes button-spinner-animation {
  to {
    transform: rotate(360deg);
  }
}

/* This is the spinner element inside the button */
.run-agent-btn .btn-spinner {
  display: none; /* The spinner is hidden by default */
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--primary-color);
  border-top-color: transparent; /* Makes it a "C" shape instead of a full circle */
  border-radius: 50%;
  animation: button-spinner-animation 0.75s linear infinite;
}

/* When the button has the .loading class... */
.run-agent-btn.loading .btn-spinner {
  display: block; /* ...show the spinner. */
}

.run-agent-btn.loading .btn-icon {
  display: none; /* ...and hide the original play icon. */
}
/* styles.css */

/* ======================================================= */
/* === 33. SENTINEL ACTIVATION MODAL STYLES            === */
/* ======================================================= */

.details-section {
    margin-bottom: 1.5rem;
}
.details-section:last-child {
    margin-bottom: 0;
}
.details-section h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.sentinel-doc-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 1rem;
    border-radius: var(--border-radius);
}
.sentinel-doc-info .fa-file-alt {
    font-size: 1.5rem;
    color: var(--light-text);
}
.sentinel-doc-info .doc-details {
    flex-grow: 1;
}
.sentinel-doc-info .doc-details strong {
    display: block;
    color: var(--heading-text);
    font-weight: 600;
}
.sentinel-doc-info .doc-details span {
    font-size: 0.85rem;
    color: var(--light-text);
}
.sentinel-doc-info .btn-c-sq {
    height: 38px;
    width: auto;
    padding: 0 1rem;
}

.sentinel-options-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sentinel-options-grid .settings-pane-toggle {
    height: auto;
    padding: 0.75rem 1rem;
}
.sentinel-helper-text {
    font-size: 0.8rem;
    color: var(--light-text);
    padding-left: 1rem;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

.sentinel-credits-info {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--light-text);
    font-weight: 500;
}
.credits-progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bs-border-color);
    border-radius: 4px;
    margin: 0.5rem 0;
    overflow: hidden;
}
.credits-progress-bar .progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.credits-text {
    text-align: right;
    font-weight: 600;
}

.credit-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    font-weight: 600;
}
.credit-warning a {
    margin-left: auto;
    text-decoration: underline;
    color: var(--danger-color);
}

#sentinelStartBtn .fa-spinner {
    display: none;
}
#sentinelStartBtn.loading .btn-text {
    display: none;
}
#sentinelStartBtn.loading .fa-spinner {
 
    display: inline-block;
}
/* styles.css */

/* ======================================= */
/* === AGENT BUTTON LOADING STATES      === */
/* ======================================= */

/* Hides the original icon when loading */
#startQuillSentinelBtn.loading > i,
.run-agent-btn.loading .btn-icon {
  display: none;
}

/* Creates and shows a spinner element using CSS pseudo-elements */
#startQuillSentinelBtn.loading::after,
.run-agent-btn.loading .btn-spinner {
    content: '';
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid currentColor; /* Uses the button's text color */
    border-top-color: transparent;
    border-radius: 50%;
    animation: button-spinner-animation 0.75s linear infinite;
}

/* Spinner Keyframe Animation */
@keyframes button-spinner-animation {
  to {
    transform: rotate(360deg);
  }
}
/* ======================================= */
/* === SENTINEL CONTRACT SELECTION CARDS === */
/* ======================================= */

.contract-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    max-height: 280px;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

.contract-selection-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    border: 2px solid var(--bs-border-color);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contract-selection-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-color-2);
}

.contract-selection-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
    background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.contract-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.contract-card-header .contract-name {
    font-weight: 600;
    color: var(--heading-text);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contract-card-header input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.contract-card-footer {
    font-size: 0.8rem;
    color: var(--light-text);
    margin-top: auto; /* Pushes footer to the bottom */
}
/* styles.css */

/* ======================================= */
/* === SENTINEL RESULTS MODAL STYLES     === */
/* ======================================= */

/* --- Loading Spinner --- */
.sentinel-loader {
    width: 60px;
    height: 60px;
    border: 5px solid var(--bs-border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* --- Results Summary --- */
.results-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.results-summary-grid .kpi-card-alt {
    padding: 1.25rem;
}

.results-summary-grid .kpi-card-alt span {
    font-size: 2.5rem;
}

.results-summary-grid .kpi-card-alt label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
}

.text-green {
    color: var(--success-color);
}
.text-red {
    color: var(--danger-color);
}

/* --- Results List --- */
.results-list-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}

.results-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

.result-item .result-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.result-item .result-details .doc-name {
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}

.result-item .result-details .result-message {
    font-size: 0.9rem;
    color: var(--light-text);
}

.result-item.success {
    border-left: 4px solid var(--success-color);
}
.result-item.success .result-icon {
    color: var(--success-color);
}

.result-item.error {
    border-left: 4px solid var(--danger-color);
}
.result-item.error .result-icon {
    color: var(--danger-color);
}
/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */

/* --- SENTINEL RESULTS MODAL STYLES --- */
.results-document-section {
    margin-bottom: 2rem;
}
.results-document-header {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.results-accordion .accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
    background-color: var(--input-bg);
    overflow: hidden;
}
.results-accordion .accordion-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background-color: var(--card-bg);
}
.results-accordion .accordion-header:hover {
    background-color: var(--menu-hover-bg);
}
.severity-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    flex-shrink: 0;
    width: 110px;
    text-align: center;
}
.severity-critical-error { background-color: #7f1d1d; }
.severity-high-risk-error { background-color: var(--danger-color); }
.severity-warning { background-color: var(--warning-color); color: #1f1f1f; }
.severity-information { background-color: var(--info-color); }
.severity-passed-check { background-color: var(--success-color); }

.accordion-description {
    font-weight: 500;
    flex-grow: 1;
}
.accordion-toggle-icon {
    transition: transform 0.3s ease;
}
.results-accordion .accordion-item.active .accordion-toggle-icon {
    transform: rotate(90deg);
}

.accordion-content {
    display: none;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}
.result-detail-block {
    margin-bottom: 1rem;
}
.result-detail-block h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.original-text-block, .suggestion-block {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    font-family: monospace;
    white-space: pre-wrap;
    font-size: 0.85rem;
}
.original-text-block {
    color: var(--danger-color);
    border-left: 3px solid var(--danger-color);
}
.suggestion-block {
    color: var(--success-color);
    border-left: 3px solid var(--success-color);
}

/* END OF CSS BLOCK */
/* in styles.css */

/* ======================================= */
/* === SENTINEL RESULTS TABS & PDF BTN === */
/* ======================================= */

.sentinel-tabs-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    background-color: var(--input-bg);
}

.sentinel-tab-link {
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--light-text);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sentinel-tab-link:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.sentinel-tab-link.active {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
}

.sentinel-tabs-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.sentinel-tab-pane {
    display: none; /* Hidden by default */
    animation: fadeIn 0.4s ease;
}

.sentinel-tab-pane.active {
    display: block; /* Shown when active */
}

/* Header for the report section */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Download PDF Button */
#downloadReportPdfBtn {
    height: 40px; /* Consistent height */
    padding: 0 1rem;
}
/* styles.css */

/* ADD THESE STYLES AT THE END OF THE FILE */

.suggestion-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    transition: all 0.2s ease-out;
}

.suggestion-card-item:hover {
    border-color: var(--primary-color);
    background-color: var(--menu-hover-bg);
}

.suggestion-time-info .date-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    display: block;
}

.suggestion-time-info .time-text {
    font-size: 0.9rem;
    color: var(--light-text);
}

.suggestion-card-item .btn-book-now {
    font-weight: 600;
    border-radius: 8px;
}
/* styles.css */

/* ADD THESE NEW STYLES FOR THE INTELLIGENCE PANEL */

.lead-intelligence-panel {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-lg);
    padding: 1rem 1.5rem 1.5rem 1.5rem;
}

.intelligence-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.intelligence-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--card-bg);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--bs-border-color);
}

.metric-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.metric-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading-text);
    display: block;
    line-height: 1.2;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
    display: block;
}
/* styles.css */

/* DELETE the old Mission Control CSS block and REPLACE it with this one. */

/* === FINAL MISSION CONTROL PANEL (V3) === */

/* Keyframes for the text shimmer/wave effect */
@keyframes text-shimmer {
    to {
        background-position: -200% center;
    }
}

/* Main panel styling - no changes needed here, but included for completeness */
.mission-control-panel {
    background-color: var(--input-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 5px 20px -5px rgba(0,0,0,0.1);
}
.mission-control-header, .mission-control-footer, .mission-control-body {
    padding: 1rem 1.5rem;
}
.mission-control-header { border-bottom: 1px solid var(--input-border); }
.mission-control-footer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This is the key change */
    gap: 1rem; /* Adds a clean space between items */
}
.mission-progress-bar {
    flex-grow: 1; height: 8px; background-color: var(--bs-border-color);
    border-radius: 4px; overflow: hidden;
}
.mission-control-header h4 { font-size: 1rem; font-weight: 600; color: var(--heading-text); margin: 0; }
.mission-plan-list { list-style: none; margin: 0; padding: 0; }
.mission-plan-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--input-border);
}
.mission-plan-list li:first-child .mission-plan-step { border-top: none; }


/* --- NEW Icon and Text Styling --- */

/* The icon container */
.mission-plan-step .step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

/* The new SVG spinner */
.mission-step-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: var(--primary-color);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

/* The checkmark icon */
.mission-plan-step .step-icon .fa-check {
    font-size: 0.9rem;
    color: #fff;
    opacity: 0; /* Hidden by default */
    transform: scale(0.5);
    transition: all 0.3s ease;
}

/* The step text */
.mission-plan-step .step-text {
    font-weight: 500;
    color: var(--light-text);
}
/* REPLACE the existing "Step Status Control" block with this one */
/* in styles.css */
/* === FINAL MISSION STEP STATUS STYLES (V5) === */

/* Keyframes for the text shimmer/wave effect */
@keyframes text-shimmer {
    to {
        background-position: -200% center;
    }
}

/* Keyframes for the spinner rotation animation */
@keyframes mission-spinner-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* The spinner element itself */
.mission-step-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--primary-color);
  border-top-color: transparent; 
  border-radius: 50%;
  animation: mission-spinner-rotation 0.8s linear infinite;
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/* Base style for the icon container */
.mission-plan-step .step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

/* Hide spinner and check by default */
.mission-plan-step .step-icon .mission-step-spinner,
.mission-plan-step .step-icon .fa-check {
    opacity: 0;
    position: absolute;
    transition: opacity 0.3s ease;
}

/* --- 1. PENDING State Styling --- */
.mission-plan-step.status-pending .step-icon {
    background-color: var(--bs-border-color); /* The grey circle */
}
.mission-plan-step.status-pending .step-text {
    color: var(--light-text);
}


/* --- 2. RUNNING State Styling --- */
.mission-plan-step.status-running .step-icon {
    background-color: transparent; /* Remove the grey circle */
}
.mission-plan-step.status-running .step-icon .mission-step-spinner {
    opacity: 1; /* Show the spinner */
}
.mission-plan-step.status-running .step-text {
    /* Apply the wave/shimmer effect */
    font-weight: 600;
    background: linear-gradient(90deg, var(--light-text), #fff, var(--light-text));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: text-shimmer 2s linear infinite;
}


/* --- 3. COMPLETED State Styling --- */
.mission-plan-step.status-completed .step-icon {
    background-color: var(--success-color); /* The green circle */
}
.mission-plan-step.status-completed .step-icon .fa-check {
    opacity: 1; /* Show the checkmark */
    color: #fff;
    font-size: 0.8rem;
}
.mission-plan-step.status-completed .step-text {
    text-decoration: line-through;
    color: var(--light-text);
}

/* ADD THIS NEW RULE INSIDE YOUR MISSION CONTROL CSS BLOCK */

/* This will style the container of the icon when a step is running */
.mission-plan-step.status-running .step-icon {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 50%; /* This is the key change to make it a circle */
}
/* ADD THIS ENTIRE NEW BLOCK TO THE END OF YOUR CSS */

/* === AI MISSION SPINNER (SOLID CIRCLE) === */

/* Keyframes for the rotation animation */
@keyframes mission-spinner-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* The spinner element itself */
.mission-step-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  
  /* Create the circle shape using borders */
  border: 3px solid var(--primary-color);
  /* Create the gap in the circle */
  border-top-color: transparent; 
  border-radius: 50%;
  
  /* Apply the rotation animation */
  animation: mission-spinner-rotation 0.8s linear infinite;

  /* The spinner is hidden until the 'status-running' class is added */
  opacity: 0; 
  transition: opacity 0.3s ease;
}

/* This is the existing rule that will now show your new spinner */
.mission-plan-step.status-running .step-icon .mission-step-spinner {
    opacity: 1; 
}
/* ADD THIS CSS TO THE END OF YOUR STYLESHEET */

/* === ATTACHMENT MODAL STYLES === */

.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.attachment-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.attachment-list li:hover {
    background-color: var(--menu-hover-bg);
}

.attachment-list li.selected {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.attachment-list .item-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--input-bg);
    border-radius: 8px;
    color: var(--light-text);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.attachment-list .item-details .item-name {
    font-weight: 600;
    color: var(--heading-text);
}
.attachment-list .item-details .item-subtext {
    font-size: 0.85rem;
    color: var(--light-text);
}

.attachment-pane {
    display: none;
}
.attachment-pane.active {
    display: block;
}

/* Style for the attached item indicator on the prompt bar */
.prompt-attachment-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}
.prompt-attachment-indicator .remove-attachment {
    cursor: pointer;
    font-weight: 700;
}
/* ADD THIS ENTIRE NEW BLOCK TO YOUR CSS */

/* === AI COMMAND SUGGESTIONS DROPDOWN === */

/* Positions the dropdown relative to the prompt bar */
/* FIND and REPLACE this CSS rule */

/* in styles.css */

/* === AI COMMAND CENTER PROMPT BAR (CORRECTED) === */

/* Find and REPLACE the existing .global-prompt-bar-v2 CSS rule with this one. */
.global-prompt-bar-v2 {
    position: relative;
    z-index: 2; /* Ensures suggestions dropdown appears correctly */
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    
    /* FIX: Replaced gradient with a solid, non-transparent background color */
    background-color: var(--input-bg); 

    /* FIX: Changed shadow to a subtle inset shadow for a cleaner look */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.05); 
    
    transition: all 0.2s ease-out;
}

.global-prompt-bar-v2:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent), 
                inset 0 1px 2px rgba(0,0,0,0.2);
}
/* FIND and REPLACE this entire CSS block */
/* in styles.css */

/* FIND AND REPLACE THIS ENTIRE CSS BLOCK */
#promptSuggestionsDropdown {
    position: absolute;
    top: calc(100% + 8px); /* Appears 8px below the prompt bar */
    left: 0;
    right: 0;
    
    /* FIX: High z-index brings the dropdown in front of other content */
    z-index: 1050; 
    
    /* FIX: Explicitly set a solid background color */
    background-color: var(--card-bg);

    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--bs-border-color);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.suggestion-item:hover {
    background-color: var(--menu-hover-bg);
}

.suggestion-item .suggestion-icon {
    font-size: 1.1rem;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.suggestion-item .suggestion-details .suggestion-name {
    font-weight: 600;
    color: var(--heading-text);
    font-size: 0.95rem;
}

.suggestion-item .suggestion-details .suggestion-description {
    font-size: 0.85rem;
    color: var(--light-text);
}
/* styles.css */

/* === FULL META ADS MODAL STYLES === */

.large-campaign-modal .modal-panel {
    max-width: 850px !important;
    height: 90vh !important;
}

#metaAdsScriptModalBody {
    display: flex;
    flex-direction: column;
}

#metaAdsCampaignScriptFormModal {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#metaAdsScriptModalBody .modal-section-header {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.75rem 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}
#metaAdsScriptModalBody .modal-section-header:first-of-type {
    margin-top: 0;
}

#metaAdsScriptModalBody .form-group {
    margin-bottom: 1.5rem;
}

#metaAdsScriptModalBody .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
    cursor: pointer;
}

.form-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}

.prompt-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.prompt-pill {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-pill:hover {
    background-color: var(--bs-border-color);
    color: var(--heading-text);
}
/* styles.css */

/* === ATTACHMENT CARD STYLES === */

.prompt-attachment-container {
    margin-bottom: -1rem; /* Pulls the prompt bar up slightly */
    position: relative;
    z-index: 1;
}

.attachment-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-radius: var(--border-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    animation: fadeIn 0.3s ease-out;
}

.attachment-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    color: var(--primary-color);
    border-radius: 8px;
    font-size: 1.2rem;
}

.attachment-card-details {
    flex-grow: 1;
}

.attachment-card-details .item-type {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    opacity: 0.8;
}

.attachment-card-details .item-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--heading-text);
}

.attachment-card .remove-attachment-btn {
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.1rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.attachment-card .remove-attachment-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--danger-color);
}

/* Remove the old, small indicator style */
.prompt-attachment-indicator {
    display: none;
}
/* === AI GENERATED SCRIPT RESULTS MODAL === */

#adScriptResultModal {
    max-width: 850px !important; /* Makes the modal wider */
    height: 90vh !important;
}

#adScriptResultModal .modal-header .modal-header-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Adds a nice icon to the header for better visual context */
#adScriptResultModal .modal-header .modal-header-text::before {
    content: '\f108'; /* Font Awesome computer/desktop icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--primary-color);
}

#adScriptResultBody {
    padding: 1.5rem; /* Adds padding around the text area */
    background-color: var(--input-bg); /* Use a soft background for the body */
    display: flex; /* Allows the content area to grow */
}

/* Styles the main content area */
#adScriptResultContent {
    background-color: var(--card-bg); /* Darker background for the text */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--bs-body-color);
    white-space: pre-wrap; /* This preserves formatting like line breaks */
    overflow-y: auto;      /* Adds a scrollbar if the content is long */
    flex-grow: 1;          /* Ensures it fills the available space */
}

/* Aligns the footer buttons */
#adScriptResultModal .modal-footer {
    justify-content: space-between;
}

/* Adds a transition for the copy button's color change */
#copyAdScriptBtn {
    transition: all 0.3s ease;
}

/* The new 'copied' state for the button */
#copyAdScriptBtn.copied {
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
    pointer-events: none; /* Prevents clicking again while in "Copied!" state */
}
/* === STYLED SCRIPT CONTENT === */

/* The overall container within the modal body */
#adScriptResultContent {
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

/* Main headings like "1. Suggested Campaign Name" */
.script-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 1.5rem 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--input-border);
}
.script-heading:first-of-type {
    margin-top: 0;
}

/* Subheadings like "Ad Set 1 - Manual Audience" */
.script-subheading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 1.25rem 0 0.75rem 0;
}

/* The divider line --- */
.script-divider {
    border: none;
    height: 1px;
    background-color: var(--input-border);
    margin: 1.5rem 0;
}

/* The list container for bullet points */
.script-list {
    list-style-type: none; /* Remove default bullets */
    padding-left: 1.25rem; /* Indent the list */
    margin: 0;
}

/* Individual list items */
.script-list li {
    position: relative;
    padding-left: 1rem; /* Space for our custom dot */
    margin-bottom: 0.5rem;
}

/* The custom dot for list items */
.script-list li::before {
    content: '•';
    position: absolute;
    left: -5px;
    top: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    line-height: 1;
}

/* Styling for the italicized rationale text */
.script-rationale {
    background-color: var(--input-bg);
    border-left: 3px solid var(--info-color);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    color: var(--light-text);
    font-size: 0.9rem;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.script-rationale em {
    font-style: normal;
}

.script-rationale strong {
    color: var(--info-color);
}
/* styles.css */

/* === AD COPY RESULTS MODAL === */

#adCopyResultModal {
    max-width: 700px;
    width: 90%;
}

#adCopyResultBody {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ad-copy-section {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
}

.ad-copy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.ad-copy-header h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
}

.copy-btn {
    background: none;
    border: 1px solid var(--bs-border-color);
    color: var(--light-text);
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.copy-btn.copied {
    color: var(--success-color);
    border-color: var(--success-color);
    cursor: default;
}

.ad-copy-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    white-space: pre-wrap; /* Preserves line breaks from the AI */
}
/* in styles.css */

/* === CAMPAIGN ANALYSIS RESULTS MODAL === */

#campaignAnalysisResultBody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.analysis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.analysis-kpi-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
}
.analysis-kpi-card .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-text);
}
.analysis-kpi-card .label {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
}

.analysis-accordion-item {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.analysis-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
}
.analysis-accordion-header:hover {
    background-color: var(--menu-hover-bg);
}

.analysis-accordion-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.analysis-accordion-header i {
    transition: transform 0.3s ease;
}
.analysis-accordion-item.active .analysis-accordion-header i {
    transform: rotate(90deg);
}

.analysis-accordion-content {
    display: none; /* Toggled by JS */
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--input-border);
}

.analysis-accordion-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.analysis-accordion-content li {
    padding: 0.5rem;
    border-bottom: 1px solid var(--input-border);
}
.analysis-accordion-content li:last-child {
    border-bottom: none;
}
.analysis-accordion-content .recommendation-item {
    margin-top: 1rem;
}
.analysis-accordion-content .recommendation-item p {
    margin: 0;
}
.analysis-accordion-content .recommendation-item .rationale {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-left: 1rem;
    font-style: italic;
}
/* in styles.css */

/* === CAMPAIGN ANALYSIS RESULTS TABS === */

/* This makes the container for the panes fill the available vertical space */
.analysis-result-panes-container {
    flex-grow: 1;
    position: relative; /* Allows absolute positioning of panes */
    padding: 1.5rem;
    background-color: var(--input-bg); /* Softer background for content area */
}

.analysis-tab-pane {
    display: none; /* Hide panes by default */
    animation: fadeIn 0.4s ease;
    
    /* This is the key for scrolling inside each tab */
    height: 100%;
    overflow-y: auto;
    
    /* Custom scrollbar styling for the panes */
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--input-bg);
}

.analysis-tab-pane::-webkit-scrollbar {
    width: 8px;
}
.analysis-tab-pane::-webkit-scrollbar-track {
    background: var(--input-bg);
}
.analysis-tab-pane::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 2px solid var(--input-bg);
}

.analysis-tab-pane.active {
    display: block; /* Show the active pane */
}
/* in styles.css */

/* === STYLES FOR CAMPAIGN METRICS ANALYSIS === */

.metric-analysis-item {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

.metric-analysis-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

.metric-analysis-item strong {
    color: var(--heading-text);
    font-weight: 600;
}
/* styles.css */

/* === STYLES FOR AI OPTIMIZATION "BEFORE & AFTER" MODAL === */

.comparison-column {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comparison-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.content-preview-box {
    flex-grow: 1;
    background-color: var(--input-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    overflow-y: auto;
    white-space: pre-wrap; /* Preserves formatting */
    font-size: 0.9rem;
    line-height: 1.6;
}
/* styles.css */

/* === DATA HUB DRAG & DROP STYLES === */

.drop-zone.dragover {
    border-color: var(--primary-color);
    background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, transparent 70%);
    transform: scale(1.02);
}

#recent-imports-tbody .action-cell-flex {
    display: flex;
    gap: 0.5rem;
}
/* in styles.css */

/* This rule makes the agent roster kebab menu work correctly */
.agent-card .action-cell .dropdown-menu.is-open {
    display: block;
    position: fixed; /* Takes the menu out of the card's overflow context */
    /* This aligns the menu's right edge with its left position */
    z-index: 1100; /* High z-index to ensure it's on top of everything */
}
/* in styles.css */

/* === AGENT RUN BUTTON LOADING STATE === */

/* This is the spinner element inside the button, hidden by default */
.run-agent-btn .btn-spinner {
  display: none;
}

/* When the button has the .loading class... */
.run-agent-btn.loading {
    cursor: wait; /* Show a waiting cursor */
}

.run-agent-btn.loading .btn-spinner {
  display: block; /* ...show the spinner. */
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spinner-animation 0.75s linear infinite;
}

.run-agent-btn.loading .btn-icon {
  display: none; /* ...and hide the original play icon. */
}

/* Keyframe animation for the spinner rotation */
@keyframes button-spinner-animation {
  to {
    transform: rotate(360deg);
  }
}
/* === LEAD PROFILE MODAL SECTIONS === */

.profile-section {
    margin-bottom: 2rem; /* Adds space between sections */
}
.profile-section:last-child {
    margin-bottom: 0;
}

.profile-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--input-border);

    font-size: 0.85rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-section-header i {
    color: var(--primary-color);
}

/* in styles.css */

/* === AUTOMATION SETTINGS PANE (V2) === */

.settings-pane#settings-tab .settings-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* The main vertical gap between cards */
}

/* New card style for individual agent settings */
.agent-settings-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    transition: all 0.2s ease;
}

.agent-settings-card:hover {
    border-color: var(--border-color-2);
}

.agent-settings-card .agent-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.text-red { color: #e54d4d; }
.text-green { color: #479e53; }
.text-yellow { color: #f2c94c; }
.text-cyan { color: #56ccf2; }
.text-blue { color: var(--primary-color); }


.agent-settings-card .agent-info p {
    font-size: 0.9rem;
    color: var(--light-text);
    margin: 0;
    padding-left: 2.1rem; /* Aligns with text above icon */
}

.agent-settings-card .agent-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}
/* in styles.css */
/* in styles.css */

/* ======================================= */
/* === AUTOMATION DEACTIVATED BUTTONS    === */
/* ======================================= */

/* This class will be added by JS to any run button that is paused by a rule */
.btn-run.is-deactivated,
.run-agent-btn.is-deactivated,
.workflow-run-btn.is-deactivated {
    background-color: var(--menu-hover-bg) !important; /* Use the soft gray background */
    color: var(--light-text) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    border-color: var(--bs-border-color) !important;
    pointer-events: none; /* Prevent clicks */
}

/* NEW: Styles for the deactivated prompt bar itself */
.global-prompt-bar-v2.is-deactivated {
    background: var(--input-bg);
    cursor: not-allowed;
    pointer-events: none; /* This makes the entire bar non-clickable */
}

/* NEW: Styles for the text input inside a deactivated prompt bar */
.global-prompt-bar-v2.is-deactivated input {
    cursor: not-allowed;
    color: var(--light-text);
}

/* NEW: Styles for the action buttons inside a deactivated prompt bar */
.global-prompt-bar-v2.is-deactivated .prompt-actions button {
    background-color: var(--menu-hover-bg) !important;
    color: var(--light-text) !important;
    cursor: not-allowed;
    pointer-events: none; /* Prevents clicks */
}

/* Ensure the icon and text inside also get the muted color */
.btn-run.is-deactivated i,
.run-agent-btn.is-deactivated i,
.btn-run.is-deactivated span {
    color: var(--light-text) !important;
}

/* Remove hover effects from deactivated buttons */
.btn-run.is-deactivated:hover,
.run-agent-btn.is-deactivated:hover {
    transform: none;
    filter: none;
}
/* in styles.css */

/* ======================================= */
/* === AI CHAT BUBBLE CONTENT STYLING    === */
/* ======================================= */

.ai-chat-bubble.ai ul {
    list-style-type: disc;
    padding-left: 20px; /* Indent lists */
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between list items */
}

.ai-chat-bubble.ai li {
    padding-left: 8px;
}

.ai-chat-bubble.ai strong {
    font-weight: 600;
    color: var(--heading-text); /* Make bold text brighter */
}
/* === CUSTOM CHART.JS TOOLTIP (FINAL FIX) === */
#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: var(--card-bg); /* Use the standard card background */
    color: var(--heading-text); /* Use the bright heading text color */
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    pointer-events: none; /* The tooltip should not be interactive */
    transform: translate(-50%, -115%); /* Position it above the cursor */
    transition: all 0.2s ease-in-out;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--bs-border-color);
    font-family: 'Poppins', sans-serif;
    min-width: 150px;
    text-align: center;
}

/* This class makes the tooltip visible */
#chartjs-tooltip.visible {
    opacity: 1;
}

/* Styling for the title (e.g., "Contacted") */
#chartjs-tooltip-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* The small color swatch inside the tooltip */
.chartjs-tooltip-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Styling for the body text (e.g., "Lead Count: 2") */
#chartjs-tooltip-body {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--light-text);
}
/* In styles.css */

/* === ADD THIS ENTIRE NEW BLOCK === */

/* Styling for the list of events on the dashboard mini-calendar */
.dashboard-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between event items */
}

.dashboard-event-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    transition: background-color 0.2s ease;
}

.dashboard-event-item:hover {
    background-color: var(--menu-hover-bg);
}

/* Styles the colored dot next to the event */
.dashboard-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-event-details {
    flex-grow: 1;
    overflow: hidden; /* Important for text ellipsis */
}

/* Styles the event title */
.dashboard-event-title {
    display: block;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds "..." if title is too long */
}

/* Styles the event time */
.dashboard-event-time {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}

.mini-calendar .no-events-message {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-style: italic;
}
/* In styles.css */
/* FIND AND REPLACE THIS ENTIRE CSS BLOCK */

#promptSuggestionsDropdown {
    position: absolute;
    top: calc(100% + 8px); /* Appears 8px below its parent prompt bar */
    left: 0;
    right: 0; /* Stretches to the full width of the parent */
    width: auto; /* Let left/right determine width */
    z-index: 1050; 
    background-color: var(--card-bg);
    max-height: 350px;
    overflow-y: auto;
    padding: 0.5rem;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--bs-border-color);
}
/* In styles.css */

/* Make the container a vertical flex column */
.grid-item.ai-activity {
    display: flex;
    flex-direction: column;
}

/* Allow the mission list to grow and push the prompt bar down */
.ai-activity .mission-list {
    flex-grow: 1;
}
.ai-activity .global-prompt-bar-v2 {
    margin-top: auto; /* This is the key change */
    margin-bottom: 0; /* Ensures it's flush with the bottom */
}
/* In styles.css */
/* === DASHBOARD MISSION LIST ENHANCEMENTS (REPLACE OLD BLOCK) === */

/* Turns each list item into a flex container */
#dashboard-mission-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 2.5rem; /* Ensures consistent height */
}

/* This is the container for the animated text */
.dashboard-mission-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.9rem;
    flex-shrink: 0; /* Prevents text from being squished */
}

/* Re-purposing the spinner for the status icon */
.dashboard-mission-status .spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--primary-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* This is the waving text animation, identical to the main one */
.waving-text span {
    position: relative;
    display: inline-block;
    animation: wave 1.2s infinite;
    animation-delay: calc(0.1s * var(--i));
}
/* In styles.css */

/* === ENHANCED AI CHAT MODAL STYLING === */

/* Main modal panel for the AI chat */
#flowcoreAIModalOverlay .modal-panel {
    background-color: var(--sidebar-bg); /* Use a darker, more contained background */
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Header styling for better visual separation */
#flowcoreAIModalOverlay .ai-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--input-border);
}

/* Chat log now has a subtle gradient for depth */
.ai-chat-log {
    background-image: radial-gradient(circle at top, color-mix(in srgb, var(--primary-color) 3%, transparent) 0%, transparent 50%);
}

/* Footer/Input area styling to match the header */
.ai-chat-input-area {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--input-border);
    padding: 1rem 1.5rem;
}

/* Redesigned Prompt Suggestion Chips */
.ai-prompt-suggestions {
    /* Aligns with the chat bubbles, not the avatar */
    padding: 0.5rem 0 1rem 55px; 
}

/* Replaces the old .prompt-suggestion-btn style */
/* In styles.css */
/* REPLACE the existing .prompt-suggestion-btn and its :hover rule with this block */

.prompt-suggestion-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* New soft blue background and border */
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
    /* New text color for better contrast */
    color: var(--primary-color);
    border-radius: 1rem;
    padding: 0.6rem 1rem;
    font-weight: 600; /* Made text slightly bolder */
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.prompt-suggestion-btn:hover {
    /* A slightly darker soft blue on hover */
    background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    color: var(--primary-color); /* Keep text color consistent */
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.prompt-suggestion-btn i {
    color: var(--primary-color);
}
/* Wrapper to make the entire list item a clickable link */
.activity-link-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit; /* Inherit color from the parent li */
    width: 100%;
}

/* Flexbox container for the message and time */
.activity-details {
    flex-grow: 1;
    overflow: hidden; /* Crucial: This contains the children and allows ellipsis */
}

/* The message container that will truncate */
.activity-message {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--bs-body-color);
}

.activity-message strong {
    font-weight: 600;
    color: var(--heading-text);
}
/* ADD THIS ENTIRE NEW BLOCK TO styles.css */

/* === NETWORKING: REFERRAL OPPORTUNITIES PANEL === */

.referral-opportunities-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.opportunity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.opportunity-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    transition: all 0.2s ease-out;
}

.opportunity-list li:hover {
    border-color: var(--primary-color);
    background-color: var(--menu-hover-bg);
}

.opportunity-info strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading-text);
}

.opportunity-info span {
    font-size: 0.85rem;
    color: var(--light-text);
}

.opportunity-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.opportunity-actions span {
    font-weight: 600;
    color: var(--success-color);
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
}

.opportunity-actions .btn-c-sq {
    height: 36px;
    font-weight: 600;
}

/* in styles.css */
/* === COMM HUB LEAD LIST STYLES === */

/* Ensure the pane content fills the space and allows scrolling */
.comm-hub-list-pane .pane-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0; /* Remove padding to make list items edge-to-edge */
}

/* Base styling for the list container */
.conversation-list {
    list-style: none;
}

/* Individual lead/conversation item */
.conversation-item {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--input-border);
    cursor: pointer;
    display: flex;
    gap: 1rem;
    transition: background-color 0.2s ease;
}

.conversation-item:hover {
    background-color: var(--menu-hover-bg);
}

/* Active state for the selected lead */
.conversation-item.active {
    background-color: var(--primary-color) !important;
    color: white;
}

.conversation-item.active .name-text,
.conversation-item.active .email-text,
.conversation-item.active .convo-preview {
    color: rgba(255, 255, 255, 0.9);
}

/* This is the container for the lead's name and email */
.convo-details {
    flex-grow: 1;
    overflow: hidden;
}

/* This reuses the .lead-name styles for consistency */
.convo-details .lead-name {
    display: block; /* Ensure it takes up the full width */
}

/* Reusing your existing styles for name and email text */
.convo-details .name-text {
    font-weight: 600;
    color: var(--heading-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-details .email-text {
    font-size: 0.85rem;
    color: var(--light-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Placeholder for a message preview */
.convo-preview {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* In styles.css */

.comm-hub-reading-pane .pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#headerConnectGoogleBtn {
    display: none; /* Hidden by default */
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    flex-shrink: 0; /* Prevents it from shrinking */
}

#headerConnectGoogleBtn.visible {
 
    display: inline-flex; /* Show the button */
}
/* =================================== */
/* === 35. COMM HUB COMPOSER (Integrated) === */
/* =================================== */

.composer-area {
    padding: 0;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--sidebar-bg);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.composer-input-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--input-border);
    flex-shrink: 0;
}

.composer-input-group label {
    font-weight: 600;
    color: var(--light-text);
}

.composer-input-group input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--input-text);
    font-size: 0.95rem;
    height: 28px;
}

/* This new wrapper is now the main flexible container */
.composer-body-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Stacks the text area on top of the action bar */
    padding: 0.75rem 1.25rem;
}

.composer-body {
    flex-grow: 1;
    outline: none;
    min-height: 80px;
    max-height: 170px; /* ADD THIS LINE */
    overflow-y: auto;
    padding-bottom: 0.5rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.composer-body:empty:before {
    content: attr(data-placeholder);
    color: var(--input-placeholder);
    pointer-events: none;
}

/* The action bar no longer has a top border or background */
.composer-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    flex-shrink: 0; /* Prevents it from shrinking */
}

.composer-send-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#composerAIAssistBtn {
    padding: 0.6rem 1rem;
}
/* ADD THIS NEW RULE */
.composer-send-actions #sendEmailBtn {
    border-radius: 12px; /* MODIFIED: Creates a rectangular shape with rounded corners */
}
/* =================================== */
/* === 36. RICH CONTACT DETAILS PANE === */
/* =================================== */

.details-contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem; /* Reduced base gap */
}

.details-contact-card .phone-text {
    color: var(--light-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.details-contact-card .details-section {
    width: 100%;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--input-border);
}

.details-contact-card .details-section h4 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    text-align: left;
}

.profile-data-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.profile-data-group .profile-data-label {
    font-weight: 500;
    color: var(--bs-body-color);
}

.profile-data-group .profile-data-value {
    font-weight: 600;
    color: var(--heading-text);
}

.details-contact-card .tags-list {
    justify-content: center;
}
.details-contact-card .tags-list .no-tags {
    font-style: italic;
    color: var(--light-text);
    font-size: 0.9rem;
}

.details-contact-card .quick-action-list.stacked .quick-action-item {
    background-color: var(--menu-hover-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    justify-content: flex-start; /* Align items to the left */
}

.details-contact-card .quick-action-list.stacked .quick-action-item i {
    color: var(--primary-color);
    width: 18px;
    text-align: center;
}
/* ================================================== */
/* === FIX: ADD NEW LISTING MODAL STYLES           === */
/* ================================================== */

/* This is the dark overlay behind the modal */
#addListingModal.modal-overlay {
    /* This will inherit styles from the generic .modal-overlay, which is correct. */
}

/* This is the main white container of the modal */
#addListingModal .modal-content {
    width: 90vw; /* Use 90% of the viewport width */
    max-width: 900px; /* But don't let it get wider than 900px */
    height: 90vh; /* Use 90% of the viewport height */
    background-color: var(--card-bg); /* Ensures a solid background */
    display: flex; /* CRITICAL: Enables flexbox layout for children */
    flex-direction: column; /* Stacks header, body, and footer vertically */
    overflow: hidden; /* Prevents content from spilling outside the rounded corners */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Modal Header styling */
#addListingModal .modal-header {
    flex-shrink: 0; /* Prevents the header from shrinking */
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#addListingModal .modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

#addListingModal .modal-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--light-text);
    cursor: pointer;
}

/* This is the main fix for the scrolling issue */
#addListingModal .modal-body {
    flex-grow: 1; /* Allows the body to fill all available vertical space */
    overflow-y: auto; /* Adds a scrollbar ONLY if the content is too tall */
    padding: 1.5rem 2rem; /* Consistent padding */
}

/* Section headers inside the form */
#addListingModal .modal-section-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--input-border);
}
#addListingModal .modal-section-header:first-of-type {
    margin-top: 0;
}

/* Fix for the multi-column form grids */
.form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.form-grid-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}

/* General form control styling */
#addListingModal .form-control.modern {
    width: 100%;
    height: 44px;
    padding: 0 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text);
    font-size: 0.95rem;
}
#addListingModal textarea.form-control.modern {
    height: auto;
    padding-top: 0.75rem;
}

/* Modal Footer styling */
#addListingModal .modal-footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
    padding: 1rem 2rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--input-bg);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
/* ======================================= */
/* === GOOGLE MAPS AUTOCOMPLETE Z-INDEX FIX === */
/* ======================================= */

/* This rule targets the container that Google Maps creates for the
  autocomplete dropdown (which has the class .pac-container) and gives it a
  very high z-index, ensuring it always appears on top of other content,
  including our modal.
*/
.pac-container {
    z-index: 9999 !important;
}
/* ======================================= */
/* === LISTING MODAL PHOTO PREVIEW       === */
/* ======================================= */

/* This is the container that holds the image preview and remove button */
.photo-preview-container {
    position: relative; /* Allows absolute positioning for the remove button */
    width: 150px;       /* Sets a fixed small width */
    height: 150px;      /* Sets a fixed small height */
    background-color: var(--input-bg);
    border: 2px dashed var(--input-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensures the image stays within the rounded corners */
    display: none; /* Hidden by default, JS will show it */
}

/* This styles the <img> tag itself */
.photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key: it scales the image to fill the box without distortion */
    display: block;
}

/* This styles the 'X' button to remove the photo */
#removePrimaryPhotoBtn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%; /* Makes it a circle */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    z-index: 10; /* Ensures it's on top of the image */
    transition: all 0.2s ease;
}

#removePrimaryPhotoBtn:hover {
    background-color: var(--danger-color);
    transform: scale(1.1);
}

/* Hide the preview image when it has the .hidden class */
.photo-preview.hidden {
    display: none;
}
/* ======================================= */
/* === ADD LISTING MODAL FOOTER BUTTONS  === */
/* ======================================= */

/* This targets the specific footer in the listing modal */
#addListingModal .modal-footer {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -5px 15px -5px rgba(0,0,0,0.1);
}

/* Base style for BOTH buttons in this footer */
#addListingModal .modal-footer .btn {
    border-radius: 12px; /* Creates the "squared circle" shape */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
}

/* "Cancel" button - Soft Gray Style */
#addListingModal .modal-footer .btn.secondary {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

#addListingModal .modal-footer .btn.secondary:hover {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* "Save Listing" button - Soft Blue Style */
#addListingModal .modal-footer .btn.primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

#addListingModal .modal-footer .btn.primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}
/* in styles.css */

/* === TABLE ACTION MENU POSITIONING FIX === */

.action-cell {
    position: relative; /* This is the anchor for the menu */
}

.action-cell .dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute; /* Changed to absolute positioning */
    top: calc(100% + 5px); /* Position it below the cell */
    right: 0; /* Align to the right of the cell */
    z-index: 10; /* Ensure it appears on top */
    min-width: 180px;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0;
    animation: fadeIn 0.1s ease-out;
}

/* This class, toggled by JS, makes the menu visible */
.action-cell .dropdown-menu.is-open {
    display: block; 
}
/* ======================================= */
/* === ASSIGN LEAD MODAL FOOTER BUTTONS  === */
/* ======================================= */

/* Base style for ALL buttons in this modal's footer */
#assignLeadModal .modal-footer .btn {
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-out;
}

/* "Cancel" button - Soft Gray Style */
#assignLeadModal .btn.secondary {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

#assignLeadModal .btn.secondary:hover {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* "Assign" button - Soft Blue Style */
#assignLeadModal .btn.primary {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}

#assignLeadModal .btn.primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Style for the "Assign" button when it is DISABLED */
#assignLeadModal .btn.primary:disabled {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--light-text);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
/* ======================================= */
/* === PROPERTY MANAGER SECTION STYLES   === */
/* ======================================= */

/* Status badges for properties table */
.status-badge.pm-occupied {
    background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
    color: var(--success-color);
}

.status-badge.pm-vacant {
    background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
    color: var(--warning-color);
}

/* Maintenance Kanban Task Cards */
.playbook-capsule.maintenance-task {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    border-left-width: 4px;
}

.playbook-capsule.maintenance-task h4 {
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.playbook-capsule.maintenance-task span {
    font-size: 0.8rem;
    color: var(--light-text);
}

.playbook-capsule.maintenance-task.high-priority {
    border-left-color: var(--danger-color);
}

.playbook-capsule.maintenance-task.medium-priority {
    border-left-color: var(--warning-color);
}

.playbook-capsule.maintenance-task.low-priority {
    border-left-color: var(--info-color);
}
/* ======================================= */
/* === PROPERTY MANAGER SECTION STYLES   === */
/* ======================================= */

#property-manager-section .property-manager-content .automation-pane {
    height: 100%;
}

#property-manager-section .networking-main-layout {
    height: 100%;
}

#property-manager-section .map-container {
    height: 100%;
    min-height: 500px; /* Ensure map has a minimum height */
}

#property-manager-section .agent-feed-panel {
    height: 100%;
}

#property-manager-section .pane-content {
    height: 100%;
    overflow-y: auto;
}

/* Status badges for property manager */
.status-badge.pm-occupied {
    background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
    color: var(--success-color);
}

.status-badge.pm-vacant {
    background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
    color: var(--warning-color);
}
/* ============================================== */
/* === PROPERTY MANAGER MAP VIEW & FILTER STYLES === */
/* ============================================== */

/* Positions the filter card within the right sidebar */
#pm-filter-card {
    position: absolute;
    top: 65px; /* Position below the header */
    right: 15px;
    width: calc(100% - 30px); /* Full width of parent minus padding */
    max-width: 100%;
    z-index: 10;
}

/* ======================================= */
/* === PORTFOLIO MODAL MAP & LAYOUT      === */
/* ======================================= */

#propertyPortfolioModal .form-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#propertyPortfolioModal fieldset {
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.5rem;
}

#propertyPortfolioModal legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-mid);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--input-border);
}
/* ======================================= */
/* === STILE BOTTONE CHIUSURA MODAL (X)  === */
/* ======================================= */

.modal-close-btn {
    /* Reset Stile Base */
    background: none;
    border: none;
    padding: 0;

    /* Dimensioni e Forma */
    width: 36px;
    height: 36px;
    border-radius: 50%; /* Lo rende un cerchio perfetto */
    
    /* Centratura Icona */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Stile Icona */
    color: var(--light-text);
    font-size: 1.1rem;
    
    /* Interazione */
    cursor: pointer;
    transition: all 0.2s ease-out;
}

.modal-close-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
    transform: scale(1.1) rotate(90deg); /* Aggiunge una rotazione fluida */
}
/* in styles.css */
#propertyPortfolioModal input[readonly] {
    background-color: var(--input-bg);
    color: var(--light-text);
    cursor: default;
}
/* ======================================= */
/* === PROPERTY PORTFOLIO LIST & CARDS === */
/* ======================================= */

#pm-property-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.portfolio-card {
    background-color: var(--white-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
    border-left: 4px solid transparent;
}

.portfolio-card:hover, .portfolio-card.highlighted {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--primary-color);
}

.portfolio-card h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-darker);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-card .card-address {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.portfolio-card .card-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
}

.portfolio-card .card-details .price {
    color: var(--success-text);
    font-weight: 600;
}

/* Styling for the InfoWindow on the map */
.gm-style-iw .portfolio-infowindow {
    font-family: 'Poppins', sans-serif;
    padding: 5px;
}
.gm-style-iw .portfolio-infowindow h5 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}
.gm-style-iw .portfolio-infowindow .price {
    font-weight: 600;
    color: var(--success-text);
    margin-bottom: 10px;
}
.gm-style-iw .portfolio-infowindow button {
    margin-top: 10px;
}
/* in styles.css - ADD THIS ENTIRE BLOCK */

/* ======================================= */
/* === PROPERTY PORTFOLIO LIST & CARDS === */
/* ======================================= */

#pm-property-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.portfolio-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-out;
    border-left: 4px solid transparent;
}

.portfolio-card:hover, .portfolio-card.highlighted {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-left-color: var(--primary-color);
    background-color: var(--menu-hover-bg);
}

.portfolio-card h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-card .card-address {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-bottom: 0.75rem;
}

.portfolio-card .card-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 500;
}

.portfolio-card .card-details .price {
    color: var(--success-color);
    font-weight: 600;
}

/* Styling for the InfoWindow on the map */
.gm-style-iw .portfolio-infowindow {
    font-family: 'Poppins', sans-serif;
    padding: 5px;
}
.gm-style-iw .portfolio-infowindow h5 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}
.gm-style-iw .portfolio-infowindow .price {
    font-weight: 600;
    color: var(--success-color);
    margin-bottom: 10px;
}
.gm-style-iw .portfolio-infowindow button {
    margin-top: 10px;
}
/* in styles.css - ADD THIS ENTIRE BLOCK */

/* ======================================= */
/* === PORTFOLIO IMAGE UPLOADER STYLES === */
/* ======================================= */

/* Styled button that replaces the default file input */
.file-upload-label-v2 {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem; /* Space between button and previews */
}

.file-upload-label-v2:hover {
    background-color: var(--bs-border-color);
    color: var(--heading-text);
}

/* Grid container for image previews */
.image-preview-grid {
    display: grid;
    /* Creates a responsive grid that shows as many 120px columns as fit */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    min-height: 120px; /* Ensures the area has a size even when empty */
    background-color: var(--input-bg);
    padding: 1rem;
    border-radius: var(--border-radius);
}

/* Individual preview thumbnail */
.img-preview-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Makes the thumbnail a perfect square */
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.img-preview-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the square without distortion */
}

/* "Remove" button for each thumbnail */
.remove-img-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.remove-img-btn:hover {
    background-color: var(--danger-color);
    transform: scale(1.1);
}

/* "Primary Photo" star indicator */
.primary-photo-indicator {
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: var(--accent-color);
    font-size: 1.2rem;
    text-shadow: 0 0 5px black;
}
/* in styles.css - ADD THIS BLOCK */
.selectable-list-container {
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selectable-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.selectable-item:hover {
    background-color: var(--menu-hover-bg);
}

.selectable-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}

.selectable-item label {
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
}

/* in styles.css - ADD THIS NEW BLOCK */

/* ======================================= */
/* === NETWORKING - MY BADGES STYLES     === */
/* ======================================= */

.badge-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the badges within the panel */
    gap: 2rem; /* Space between badges */
}

.badge-display-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* Space between the circle and the name */
    width: 120px; /* Give each item a fixed width */
}

.badge-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-size: 2.5rem; /* Size of the icon inside */
    border: 3px solid #fff; /* White border as seen in image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.2);
    /* The gradient background */
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
}

.badge-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--heading-text);
    text-align: center;
}
/* in styles.css */

/* === ADD THIS ENTIRE NEW BLOCK AT THE END OF THE FILE === */

/* ======================================= */
/* === TOKEN USAGE PROGRESS KPI CARDS    === */
/* ======================================= */

.kpi-card-progress {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kpi-card-progress h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--input-border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--light-text);
}

.progress-text span:first-child {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--bs-body-color);
}
/* in styles.css */

/* ======================================= */
/* === QUICK ACTIONS STYLING (COMM HUB) === */
/* ======================================= */

/* Rimuove la linea di separazione sopra la sezione */
.details-contact-card .details-section:has(.quick-action-list) {
    border-top: none;
    margin-top: 0;
    padding-top: 1rem;
}

.details-contact-card .quick-action-list.stacked {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Spazio tra i pulsanti */
}

.details-contact-card .quick-action-list.stacked .quick-action-item {
    background-color: var(--menu-hover-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    justify-content: flex-start; /* Allinea il contenuto a sinistra */
    transition: all 0.2s ease-out;
}

.details-contact-card .quick-action-list.stacked .quick-action-item:hover {
    background-color: var(--bs-border-color);
    border-color: var(--border-color-2);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.details-contact-card .quick-action-list.stacked .quick-action-item i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.details-contact-card .quick-action-list.stacked .quick-action-item span {
    font-weight: 600;
    color: var(--heading-text);
}
/* in styles.css */

/* --- AVATAR STYLING FOR COMM HUB --- */
.message .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;

    /* These styles apply to both <img> and <div> avatars */
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    background-color: var(--secondary-color); /* Default background */
}
/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */

/* ======================================= */
/* === DEAL DRAWER TABS & PANES         === */
/* ======================================= */

.document-list, .task-list, .activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Document Item Styling */
.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}
.document-item .fa-file-alt {
    font-size: 1.5rem;
    color: var(--light-text);
}
.document-item-details {
    flex-grow: 1;
}
.document-item-details a {
    font-weight: 600;
    color: var(--bs-link-color);
}
.document-item-details span {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
.document-item .delete-doc-btn {
    background: none;
    border: none;
    color: var(--light-text);
    cursor: pointer;
}
.document-item .delete-doc-btn:hover {
    color: var(--danger-color);
}

/* Task Form & List Styling */
.deal-task-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.deal-task-form input {
    flex-grow: 1;
    height: 44px;
    padding: 0 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    color: var(--input-text);
}
.deal-task-form button {
    height: 44px;
    flex-shrink: 0;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
}
.task-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
    cursor: pointer;
}
.task-item .task-label {
    flex-grow: 1;
    font-weight: 500;
    transition: all 0.2s;
}
.task-item.completed .task-label {
    text-decoration: line-through;
    color: var(--light-text);
}
.task-item .task-due-date {
    font-size: 0.85rem;
    color: var(--light-text);
    font-weight: 500;
}

/* Activity Timeline Styling */
.activity-item {
    display: flex;
    gap: 1rem;
}
.activity-item .activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--menu-hover-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    flex-shrink: 0;
}
.activity-item .activity-content .activity-message {
    font-weight: 500;
}
.activity-item .activity-content .activity-timestamp {
    font-size: 0.8rem;
    color: var(--light-text);
}

/* Linkable Contract List Styling (reuses attachment-list) */
#linkableContractsList li {
    border-bottom: 1px solid var(--input-border);
}
#linkableContractsList li:last-child {
    border-bottom: none;
}
/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */

/* ======================================= */
/* === DEAL DRAWER: TASK DELETE BUTTON   === */
/* ======================================= */

.task-item {
    position: relative; /* Allows absolute positioning for the button */
    padding-right: 40px; /* Make space for the delete button */
}

.task-item .delete-task-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--light-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0; /* Hidden by default */
    transition: all 0.2s ease-out;
}

.task-item:hover .delete-task-btn {
    opacity: 1; /* Show button on hover */
}

.task-item .delete-task-btn:hover {
    background-color: var(--danger-color);
    color: #fff;
}
/* in styles.css - ADD THIS ENTIRE BLOCK */

/* ======================================= */
/* === PROPERTY PORTFOLIO MODAL STYLES === */
/* ======================================= */

#propertyPortfolioModal .form-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#propertyPortfolioModal fieldset {
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1.5rem;
}

#propertyPortfolioModal legend {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-mid);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--input-border);
}
/* in styles.css */

/* === STYLING FOR MODAL FIELDSETS & LEGENDS === */

#newRecurringBillModal fieldset {
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: 2rem; /* Increased space between sections */
}

#newRecurringBillModal fieldset:last-of-type {
    margin-bottom: 0;
}

#newRecurringBillModal legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 0;
    margin-bottom: 1.25rem; /* Space between header and fields */
    width: 100%;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}

#newRecurringBillModal .form-group {
    margin: 0; /* Remove bottom margin from individual groups */
}

/* Specific styling for the weekly button group */
#billDueDayWeekly .btn-group .btn-c-sq.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
/* in styles.css */

/* === STYLING FOR MODAL FIELDSETS & LEGENDS === */

#newRecurringBillModal fieldset {
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: 2rem; /* Increased space between sections */
}

#newRecurringBillModal fieldset:last-of-type {
    margin-bottom: 0;
}

#newRecurringBillModal legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light-text);
    padding: 0;
    margin-bottom: 1.25rem; /* Space between header and fields */
    width: 100%;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}

#newRecurringBillModal .form-group {
    margin: 0; /* Remove bottom margin from individual groups */
}

/* Specific styling for the weekly button group */
#billDueDayWeekly .btn-group .btn-c-sq.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
/* in styles.css */

/* ======================================= */
/* === LEDGER LOADING SPINNER STYLES     === */
/* ======================================= */

@keyframes ledger-spinner-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ledger-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid var(--menu-hover-bg);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: ledger-spinner-rotation 1s linear infinite;
  margin: 2rem auto; /* Centers the spinner in the table row */
}
/* ADD THIS TO THE END OF styles.css */

/* ======================================= */
/* === TAX REPORT MODAL STYLES         === */
/* ======================================= */

.report-section {
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}
.report-section:first-of-type {
    margin-top: 0;
}
.report-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.report-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.25rem;
    font-size: 0.95rem;
}

.report-item span:first-child {
    color: var(--bs-body-color);
}

.report-item span:last-child,
.report-item strong {
    font-weight: 600;
    color: var(--heading-text);
}

.report-item.total {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--input-border);
}

.report-item.net-profit strong {
    font-size: 1.2rem;
    color: var(--success-color);
}
.error-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--danger-color);
    font-weight: 500;
}
/* =================================== */
/* === 32. TAX CENTER STYLES         === */
/* =================================== */

.tax-center-tab-content {
    margin-top: 1.5rem;
}

.tax-tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.tax-tab-pane.active {
    display: block;
}

/* Accordion for Estimates */
.tax-center-tab-content .accordion-item {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
}

.tax-center-tab-content .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tax-center-tab-content .accordion-header:hover {
    background-color: var(--menu-hover-bg);
}

.tax-center-tab-content .accordion-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
}

.tax-center-tab-content .accordion-content {
    display: none; /* JS will toggle this */
    padding: 1.5rem;
    border-top: 1px solid var(--input-border);
}

.tax-center-tab-content .accordion-content p {
    margin-bottom: 1rem;
    color: var(--light-text);
}
.tax-center-tab-content .accordion-content p strong {
    color: var(--bs-body-color);
}

/* Tax Profile Summary Styles */
#taxProfileSummary {
    padding: 1.5rem;
    color: var(--light-text);
}
#taxProfileSummary .summary-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--input-border);
}
#taxProfileSummary .summary-item:last-child {
    border-bottom: none;
}
#taxProfileSummary .summary-item span {
    font-weight: 500;
}
#taxProfileSummary .summary-item strong {
    font-weight: 600;
    color: var(--heading-text);
}
/* ======================================= */
/* === TAX REPORT MODAL STYLES         === */
/* ======================================= */

.report-section {
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--input-border);
}
.report-section:first-of-type {
    margin-top: 0;
}
.report-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.report-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.25rem;
    font-size: 0.95rem;
}

.report-item span:first-child {
    color: var(--bs-body-color);
}

.report-item span:last-child,
.report-item strong {
    font-weight: 600;
    color: var(--heading-text);
}

.report-item.total {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--input-border);
}

.report-item.net-profit strong {
    font-size: 1.2rem;
    color: var(--success-color);
}
.error-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--danger-color);
    font-weight: 500;
}
.activity-icon.soft-orange {
    background-color: color-mix(in srgb, var(--warning-color) 80%, black);
    color: #FFF;
}
/* ADD THIS NEW BLOCK */
.agency-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.agency-pane.active {
    display: block;
}
/* === ONBOARDING MODAL STYLES === */
#onboardingModal .modal-body {
    padding: 2.5rem;
}

.onboarding-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.onboarding-step.active {
    display: block;
}

.onboarding-step .icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.onboarding-step h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading-text);
    margin-bottom: 1rem;
}

.onboarding-step p {
    font-size: 1rem;
    color: var(--light-text);
    line-height: 1.6;
}

.onboarding-dots-container {
    display: flex;
    gap: 0.5rem;
}

.onboarding-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--input-border);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.onboarding-dot.active {
    background-color: var(--primary-color);
    transform: scale(1.2);
}
/* in styles.css */

.source-icon.flownetwork { 
    background-color: #BD10E0; /* A distinct purple color */
}
/* Incolla questo codice alla fine del tuo file styles.css */

/* --- MENU A DISCESA RICERCA GLOBALE --- */
/* styles.css */

/* --- MENU A DISCESA RICERCA GLOBALE (FIXED) --- */

/* Questo contenitore serve a posizionare il menu a discesa rispetto alla barra di ricerca */
.search-bar-container {
    position: relative;
    flex-grow: 1; /* Allows the search bar to take up available space */
    max-width: 650px; /* Increased width for a better look */
}


.top-header .search-bar {
    width: 100%;
}

/* Posiziona il menu sotto la barra di ricerca */
.search-results-dropdown {
    position: absolute; /* Takes the dropdown out of the normal document flow. */
    top: calc(100% + 8px); /* Positions it 8px below the search bar's bottom edge. */
    left: 0;
    right: 0;
    z-index: 1100; /* High z-index to ensure it appears on top of other content. */
    
    /* These styles make the dropdown visible with your theme's colors. */
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    
    /* Other styling for appearance and functionality */
    padding: 0.5rem;
    box-shadow: var(--shadow-lg);
    max-height: 450px; /* Limits height and adds a scrollbar if results overflow. */
    overflow-y: auto;
}

/* Lista dei risultati */
.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Intestazione di sezione (es. "Contatti", "Proprietà") */
.search-result-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--light-text);
    text-transform: uppercase;
    padding: 0.75rem 1rem;
}

/* Singolo elemento nei risultati */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background-color: var(--menu-hover-bg);
}

.search-result-item .item-icon {
    font-size: 1.1rem;
    color: var(--light-text);
    width: 24px;
    text-align: center;
}

.search-result-item .item-details {
    overflow: hidden; /* Nasconde il testo che fuoriesce */
}

.search-result-item .item-name {
    font-weight: 500;
    color: var(--heading-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Aggiunge "..." se il testo è troppo lungo */
}

.search-result-item .item-context {
    font-size: 0.85rem;
    color: var(--light-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Messaggio per quando non ci sono risultati */
.no-search-results {
    padding: 1.5rem;
    text-align: center;
    color: var(--light-text);
    font-style: italic;
}
/* in styles.css */
/* ADD THIS NEW RULE */
#property-manager-section.content-section.active { display:block; }

.pm-pane            { display:none; }
.pm-pane.active     { display:block; }
/* in styles.css - ADD THIS BLOCK */
.pm-pane {
    display: none;
}
.pm-pane.active {
    display: block;
}
/* Add this entire block to the end of styles.css */
/* In styles.css, REPLACE the previous FlowRouter block with this one */

/* === FLOWROUTER MODAL & APP CARD STYLES (V3 - CORRECTED ALIGNMENT) === */

#flowRouterModal.modal-panel {
    width: 90vw;
    max-width: 1200px;
    background-color: var(--card-bg);
}

#flowRouterModal .modal-header {
    border-bottom: 1px solid var(--input-border);
}

#flowRouterModal .modal-body {
    background-color: var(--input-bg);
}

#flowRouterModal .modal-close-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.app-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.amazing-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.amazing-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.media-container {
    height: 160px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-content img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.amazing-card:hover .media-content img {
    transform: scale(1.05);
}

.amazing-card .card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left; /* Ensures all text is left-aligned */
}

.amazing-card .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading-text);
}

.amazing-card .card-subtitle {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.amazing-card .card-text {
    color: var(--light-text);
    flex-grow: 1; /* This is the key: it makes the description fill all available vertical space. */
    margin-bottom: 1.5rem; /* This just adds consistent spacing above the button. */
}
/* Add this new rule to the end of styles.css */

/* In styles.css, find and replace this rule */

.footer-menu-icon {
    height: 1.8em; /* Increased from 1.4em */
    width: auto;
    max-width: 140px; /* Increased from 120px */
    object-fit: contain;
}

.btn-coming-soon {
    background: var(--input-border);
    color: var(--light-text);
    cursor: not-allowed;
}

.btn-coming-soon:hover {
     transform: none;
     box-shadow: none;
     filter: none;
}
.h-100 {
    height: 100%;
}
/* In styles.css, ADD this utility class to the end of the file */

.mt-auto {
    margin-top: auto !important;
}
/* styles.css */
/* Add this new block anywhere in the file */

/* ======================================= */
/* === PROPERTY MANAGER MAP LAYOUT FIX   === */
/* ======================================= */

.pm-map-layout {
    display: grid;
    /* Defines a flexible main column for the map and a fixed-width sidebar for the list */
    grid-template-columns: 1fr 340px; 
    gap: 1.5rem;
    height: 100%;
}

.pm-map-layout .map-container {
    height: 100%;
    min-height: 500px;
}

.pm-map-layout .property-list-panel {
    display: flex; 
    flex-direction: column; 
    background: var(--card-bg); 
    border-radius: var(--border-radius-lg); 
    border: 1px solid var(--bs-border-color); 
    overflow: hidden;
}

#pm-property-list {
    overflow-y: auto; 
    flex-grow: 1;
}

/* Add this new block to the end of styles.css */

/* === STATIC SIDEBAR FOOTER BUTTONS === */

/* Disables hover effects for the "Options" button */
#settingsHelpBtn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--light-text);
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

/* Disables hover effects for the "FlowCore AI" button */
#flowcoreBtn.btn-soft.primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
    transform: none;
    box-shadow: none;
}
/* Add this new rule to styles.css for the icon-only footer button */

/* In styles.css, find and REPLACE the two rules for #flowcoreBtn */

#flowcoreBtn.btn-soft.primary {
    padding: 0.8rem; /* Increased padding */
}

#flowcoreBtn.btn-soft.primary .footer-logo-icon {
    width: 400px; /* Increased from 24px */
    height: 30px; /* Increased from 24px */
    margin-right: 0;
}
/* ======================================= */
/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ======================================= */

/* --- Hero Banner --- */
.motivation-hero {
    display: grid;
    grid-template-columns: 2fr 3fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 2rem;
}
.hero-quote {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--light-text);
    border-left: 3px solid var(--primary-color);
    padding-left: 1.5rem;
}
.hero-quote span {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0.5rem;
}
.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.hero-stat-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.hero-stat-item .label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color);
}
.hero-stat-item .progress-bar-container {
    height: 10px;
    background-color: var(--input-border);
    border-radius: 5px;
    flex-grow: 1;
}
.hero-stat-item .progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 5px;
}
.hero-cta {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
}

/* --- Main Grid Layout --- */
.motivation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    align-items: flex-start;
}
.motivation-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}
.motivation-card .card-header {
    margin-bottom: 1.5rem;
}

/* --- Progress Tracker --- */
.progress-tracker-card {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.progress-tier {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.progress-ring svg {
    transform: rotate(-90deg);
}
.progress-ring-bg, .progress-ring-circle {
    fill: none;
    stroke-width: 4;
}
.progress-ring-bg {
    stroke: var(--input-border);
}
.progress-ring-circle {
    stroke: var(--primary-color);
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}
.progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-text);
}
.progress-info {
    flex-grow: 1;
}
.progress-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}
.progress-info span {
    font-size: 0.9rem;
    color: var(--light-text);
}
.progress-bar-container.horizontal {
    width: 100%;
}

/* --- Badge Shelf --- */
.badge-shelf {
    grid-column: span 2;
}

/* --- Leaderboard --- */
.leaderboard-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.leaderboard-list li {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
}
.leaderboard-list .rank {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--light-text);
    text-align: center;
}
.leaderboard-list .metric-value {
    font-weight: 700;
    color: var(--heading-text);
}

/* --- Momentum Cards --- */
.momentum-cards-container {
    grid-column: span 3;
    background-color: transparent;
    border: none;
    padding: 0;
}
.momentum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.momentum-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}
.momentum-card i {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.momentum-card p {
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Other Cards --- */
.celebration-feed { grid-column: span 2; }
.celebration-list { list-style: none; }
.celebration-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--input-border);
}
.celebration-list li:last-child { border-bottom: none; }

.mood-coach-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.vision-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.vision-item {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.vision-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.vision-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
}

.mood-checkin .mood-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mood-checkin input[type="range"] {
    flex-grow: 1;
}

.mini-coach {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mini-coach > i {
    font-size: 2rem;
    color: var(--light-text);
}
/* --- MOTIVATION TAB RESTRUCTURE STYLES --- */

.motivation-sub-navbar {
    margin: -0.5rem 0 1.5rem 0; /* Adjust margins to sit nicely below the hero */
}

.motivation-panes-container {
    position: relative;
}

.motivation-pane {
    display: none; /* Hide all panes by default */
    animation: fadeIn 0.4s ease;
}

.motivation-pane.active {
    display: block; /* Show only the active pane */
}

/* Specific grid layout for the default dashboard view */
.motivation-grid.dashboard-view {
    grid-template-columns: 1fr 2fr; /* Make the progress tracker narrower */
    align-items: start;
}

.motivation-grid.dashboard-view .progress-tracker-card {
    grid-row: span 2; /* Make the progress tracker span both rows */
}

/* Ensure other cards take up full width in their respective panes */
.motivation-pane .motivation-card {
    grid-column: 1 / -1;
}

/* Adjust card header for better spacing */
.motivation-card .card-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--input-border);
}
/* ======================================= */
/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ======================================= */

/* --- Hero Banner --- */
.motivation-hero {
    display: grid;
    grid-template-columns: 2fr 3fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    margin-bottom: 2rem;
}
.hero-quote {
    font-style: italic;
    font-size: 1.1rem;
    color: var(--light-text);
    border-left: 3px solid var(--primary-color);
    padding-left: 1.5rem;
}
.hero-quote span {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0.5rem;
}
.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.hero-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.hero-stat-item .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.hero-stat-item .label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color);
}
.hero-stat-item .progress-bar-container {
    height: 10px;
    background-color: var(--input-border);
    border-radius: 5px;
    flex-grow: 1;
}
.hero-stat-item .progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 5px;
}
.hero-cta {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
}

/* --- Sub-Navbar and Panes --- */
.motivation-sub-navbar {
    margin: -0.5rem 0 1.5rem 0;
}
.motivation-panes-container {
    position: relative;
}
.motivation-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}
.motivation-pane.active {
    display: block;
}
.motivation-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}
.motivation-card .card-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--input-border);
}

/* --- Dashboard Grid Layout --- */
.motivation-grid.dashboard-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.momentum-cards-container {
    grid-column: span 2;
    background-color: transparent;
    border: none;
    padding: 0;
}
.momentum-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.momentum-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}
.momentum-card i {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.momentum-card p {
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Progress Tracker --- */
.progress-tracker-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.progress-tier {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.progress-ring {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.progress-ring svg {
    transform: rotate(-90deg);
}
.progress-ring-bg, .progress-ring-circle {
    fill: none;
    stroke-width: 4;
}
.progress-ring-bg {
    stroke: var(--input-border);
}
.progress-ring-circle {
    stroke: var(--primary-color);
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}
.progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading-text);
}
.progress-info {
    flex-grow: 1;
}
.progress-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}
.progress-info span {
    font-size: 0.9rem;
    color: var(--light-text);
}
.progress-bar-container.horizontal {
    width: 100%;
}

/* --- Celebration Feed & Vision Board --- */
.celebration-feed { grid-column: span 2; }
.celebration-list { list-style: none; }
.celebration-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--input-border);
}
.celebration-list li:last-child { border-bottom: none; }

.vision-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.vision-item {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--border-radius);
    overflow: hidden;
}
.vision-item img {
    width: 100%; height: 100%; object-fit: cover;
}
.vision-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
}

/* --- To-Do List Card --- */
.todo-list-card .card-header {
    margin-bottom: 1rem;
}
.todo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 250px;
    overflow-y: auto;
}
.todo-list .placeholder-item {
    text-align: center;
    color: var(--light-text);
    padding: 2rem 0;
}
.todo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}
.todo-item .task-label {
    flex-grow: 1;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, text-decoration 0.2s;
}
.todo-item .custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: var(--card-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: 6px;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.todo-item .custom-checkbox::before {
    content: '';
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: 0.15s transform ease-in-out;
    box-shadow: inset 1em 1em #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.todo-item .custom-checkbox:checked {
    background-color: var(--success-color);
    border-color: var(--success-color);
}
.todo-item .custom-checkbox:checked::before {
    transform: scale(1);
}
.todo-item.completed .task-label {
    text-decoration: line-through;
    color: var(--light-text);
}
/* in styles.css */

/* ======================================= */
/* === VISION BOARD INTERACTIVITY        === */
/* ======================================= */

.vision-item {
    position: relative; /* Needed for absolute positioning of actions */
    cursor: pointer;
}

.vision-item-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 0.5rem;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease-in-out;
    z-index: 5;
}

.vision-item:hover .vision-item-actions {
    opacity: 1; /* Show buttons on hover */
}

/* Reusing your existing button style for a consistent look */
.vision-item-actions .btn-icon-only {
    background-color: rgba(0,0,0,0.6);
    color: white;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
}

.vision-item-actions .btn-icon-only:hover {
    background-color: var(--primary-color);
    transform: scale(1.1);
}

.vision-item-actions .delete-goal-btn:hover {
    background-color: var(--danger-color);
}
/* in styles.css */

/* ======================================= */
/* === VISION BOARD IMAGE UPLOAD STYLES === */
/* ======================================= */

#goalImagePreviewContainer {
    position: relative;
    width: 100%;
    max-width: 350px; /* Constrains the preview size */
    aspect-ratio: 16 / 9; /* Gives it a nice rectangular shape */
    margin: 1rem auto 0 auto; /* Centers the preview */
    border: 2px dashed var(--input-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--input-bg);
}

#goalImagePreviewContainer.hidden {
    display: none;
}

#goalImagePreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#goalImagePreviewContainer .remove-img-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    z-index: 2;
}

#goalImagePreviewContainer .remove-img-btn:hover {
    background-color: var(--danger-color);
    transform: scale(1.1);
}
.logo-credit-container {
    display: flex; /* This aligns items horizontally */
    align-items: center; /* This centers them vertically */
    justify-content: center; /* This centers them horizontally */
    gap: 10px; /* This creates space between the text and the logo */

    width: 100%;
    padding: 10px; /* Padding inside the container */
    margin-bottom: 25px; /* Spacing below the container */
    
    background-color: var(--input-bg); /* Use theme's input background */
    border: 1px solid var(--input-border); /* Use theme's border color */
    border-radius: var(--border-radius, 8px); /* Use theme's border radius */
}
.logo-credit-container .credit-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--light-text); /* Use theme's secondary text color */
}
.logo-credit-container img {
    height: 38px; /* Slightly adjusted height for better balance */
    width: auto;
    max-width: 100%;
}
/* ======================================================= */
/* === COMPLETE LAYOUT FIX FOR FLOWINBOX CHAT MANAGER    === */
/* Add this entire block to the end of your styles.css file */
/* ======================================================= */

/* 1. Sets a fixed height for the entire FlowInBox section */
#flowinbox-manager-section.active {
    display: flex;
    flex-direction: column;
    /* Full viewport height minus the top header and main padding */
    height: calc(100vh - 70px - 2rem); 
}

/* 2. Makes the 3-pane container fill the available height */
.comm-hub-main-container {
    flex-grow: 1;
    display: grid;
    /* Prevents the container itself from growing or showing scrollbars */
    overflow: hidden; 
}

/* 3. Forces the middle reading pane to respect its container's height */
.comm-hub-reading-pane {
    display: grid; 
    grid-template-rows: auto 1fr 5px auto; 
    overflow: hidden; 
    /* This is crucial: makes the grid take up 100% of the parent's height */
    height: 100%; 
}

/* 4. Defines the scrollable content area within the reading pane */
.comm-hub-reading-pane .pane-content {
    padding: 1.5rem;
    /* THE DEFINITIVE FIX: Force this container to scroll vertically */
    overflow-y: auto !important; 
    /* THE DEFINITIVE FIX: Allows the grid item to shrink, enabling overflow */
    min-height: 0 !important; 
}
/* ======================================= */
/* === STILI PER DISPOSITIVI MOBILI      === */
/* Aggiungi questo blocco alla fine di styles.css */
/* ======================================= */

/* --- Breakpoint per Tablet e schermi medi (fino a 1024px) --- */
@media (max-width: 1024px) {
    /* Riduci il padding generale per guadagnare spazio */
    .canvas {
        padding: 1.5rem 1rem;
    }

    /* Rendi le griglie più flessibili, passando a 2 colonne dove possibile */
    .aw-grid-layout,
    .motivation-grid.dashboard-view,
    .app-selection-grid,
    .deal-room-section .aw-grid-layout {
        grid-template-columns: 1fr 1fr;
    }

    /* Impila le griglie a 3 colonne in una singola colonna */
    .quick-actions {
        grid-template-columns: 1fr;
    }
    
    /* Gestisci il layout della sezione Networking */
    .networking-main-layout {
        grid-template-columns: 1fr; /* Impila le colonne */
    }
    .badge-ranking-panel, .agent-feed-panel {
        grid-row: auto; /* Resetta l'ordine se necessario */
    }

    /* Adatta la barra laterale del calendario */
    .calendar-layout {
        grid-template-columns: 240px 1fr; /* Riduci la larghezza della sidebar */
    }

    /* Riduci le dimensioni dei modali più grandi */
    .large-campaign-modal .modal-panel,
    #propertyPortfolioModal,
    #dealDrawer {
        max-width: 90vw;
    }
}


/* --- Breakpoint per Smartphone (fino a 768px) --- */
@media (max-width: 768px) {
    
    /* --- 1. Layout Globale e Intestazione --- */
    #appWrapper {
        flex-direction: column; /* Impila sidebar e contenuto (anche se la sidebar è nascosta) */
    }

    .top-header {
        padding: 0.75rem 1rem;
        height: auto;
        min-height: 70px;
    }
    
    .search-bar-container {
        max-width: 100%;
    }

    .canvas {
        padding: 1rem;
        height: calc(100vh - 70px); /* Altezza completa meno l'header */
    }

    /* --- 2. Tutte le Griglie a Colonna Singola --- */
    .grid-container,
    .aw-grid-layout,
    .motivation-grid,
    .playbooks-grid,
    .agent-roster-gallery,
    .app-selection-grid,
    .form-grid-2-col,
    .form-grid-3-col {
        grid-template-columns: 1fr !important; /* Forza una singola colonna */
        grid-column: span 1 / auto !important; /* Resetta lo span delle colonne */
    }
    .kpi-strip {
        grid-template-columns: 1fr 1fr !important; /* Le KPI possono stare a 2 colonne */
    }
    
    /* --- 3. Layout Specifici per Sezioni --- */
    .calendar-layout, .settings-layout, .pm-map-layout {
        grid-template-columns: 1fr; /* Impila la sidebar e il contenuto principale */
        height: auto; /* Permetti al contenuto di determinare l'altezza */
    }
    
    .calendar-sidebar, .settings-nav {
        position: static; /* Rimuovi lo sticky che non serve su mobile */
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
        padding-right: 0;
    }

    #property-manager-section .pm-map-layout .property-list-panel {
        height: 300px; /* Dai un'altezza fissa alla lista delle proprietà sotto la mappa */
    }
    
    /* --- 4. Modali a Schermo Intero --- */
    .modal-panel {
        width: 95vw !important;
        height: 90vh !important;
        max-width: 95vw !important;
    }
    .modal-body, .modal-body-v2 {
        padding: 1rem;
    }

    /* --- 5. Trasformazione delle Tabelle in Card --- */
    /* Nascondi l'intestazione della tabella */
    .table-responsive thead {
        display: none;
    }

    /* Ogni riga diventa un blocco a sé stante */
    .table-responsive tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--border-radius);
        padding: 1rem;
    }
    
    /* Ogni cella diventa una riga dentro la card */
    .table-responsive td {
        display: flex;
        justify-content: space-between; /* Allinea etichetta e valore */
        align-items: center;
        text-align: right; /* Allinea il valore a destra */
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--input-border);
    }
    
    .table-responsive td:last-child {
        border-bottom: none;
    }
    
    /* Aggiungi le etichette usando i pseudo-elementi */
    .table-responsive td::before {
        content: attr(data-label); /* Usa l'attributo data-label che aggiungeremo con JS */
        font-weight: 600;
        color: var(--light-text);
        text-align: left;
        margin-right: 1rem;
    }
    
    /* Stili specifici per tabelle diverse */
    #leadsTable td:nth-of-type(2)::before { content: "Name"; }
    #leadsTable td:nth-of-type(3)::before { content: "Source"; }
    #leadsTable td:nth-of-type(4)::before { content: "Status"; }
    #leadsTable td:nth-of-type(5)::before { content: "Score"; }
    #leadsTable td:nth-of-type(6)::before { content: "Last Activity"; }
    #leadsTable td:nth-of-type(7)::before { content: "Owner"; }
    
    #listingsTable td:nth-of-type(1)::before { content: "Listing"; }
    #listingsTable td:nth-of-type(2)::before { content: "Price"; }
    #listingsTable td:nth-of-type(3)::before { content: "Status"; }
    #listingsTable td:nth-of-type(4)::before { content: "Assigned Lead"; }

    /* Nascondi la checkbox per la selezione multipla su mobile, è troppo piccola */
    .table-responsive td:first-child, .table-responsive th:first-child {
        display: none;
    }

    /* --- 6. Hero Section (Motivation) --- */
    .motivation-hero {
        grid-template-columns: 1fr; /* Impila tutto */
        text-align: center;
    }
    .hero-quote {
        border-left: none;
        border-top: 3px solid var(--primary-color);
        padding-left: 0;
        padding-top: 1rem;
    }
    .hero-cta {
        width: 100%;
    }
}
/* ======================================= */
/* === SIDEBAR MOBILE E TOGGLE (NUOVO) === */
/* ======================================= */

/* --- 1. Pulsante Hamburger (visibile solo su mobile) --- */
#mobileMenuToggle {
    display: none; /* Nascosto di default */
    font-size: 1.5rem;
    color: var(--bs-body-color);
}

/* --- 2. Overlay per lo sfondo scuro --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1190; /* Appare sopra il contenuto ma sotto la sidebar */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* ======================================= */
/* === FLOWINBOX MOBILE RESPONSIVE       === */
/* ======================================= */

/* --- Stile iniziale del pulsante "Indietro" (nascosto su desktop) --- */
#commHubBackBtn {
    display: none;
}

/* --- Breakpoint per Tablet (fino a 1024px) --- */
@media (max-width: 1024px) {
    /* Passa a un layout a 2 colonne, nascondendo i dettagli a destra */
    .comm-hub-main-container {
        grid-template-columns: 300px 1fr;
    }
    
    /* Nascondi il pannello dei dettagli e il suo ridimensionatore */
    .comm-hub-main-container .comm-hub-details-pane,
    .comm-hub-main-container .comm-hub-resizer[data-resizer-for="reading-details"] {
        display: none;
    }
}

/* --- Breakpoint per Smartphone (fino a 768px) --- */
@media (max-width: 768px) {
    /* --- 1. Riorganizza il container principale --- */
    #flowinbox-manager-section.active {
        /* Occupa l'intera altezza disponibile */
        height: calc(100vh - 70px - 2rem);
    }
    .comm-hub-main-container {
        /* Passa da grid a flex per mostrare un pannello alla volta */
        display: flex;
        grid-template-columns: none; /* Rimuovi la definizione della griglia */
    }

    /* --- 2. Imposta i pannelli per la visualizzazione singola --- */
    .comm-hub-list-pane,
    .comm-hub-reading-pane {
        width: 100%;
        flex-shrink: 0;
        transition: transform 0.3s ease-in-out;
    }

    /* Di default, il pannello di lettura è fuori schermo a destra */
    .comm-hub-reading-pane {
        transform: translateX(100%);
    }

    /* Nascondi i ridimensionatori, non servono su mobile */
    .comm-hub-resizer {
        display: none;
    }

    /* Mostra il pulsante "Indietro" */
    #commHubBackBtn {
        display: inline-flex;
    }

    /* --- 3. Stili per lo stato "in lettura" --- */

    /* Quando si visualizza una conversazione, sposta entrambi i pannelli a sinistra */
    .comm-hub-main-container.viewing-thread .comm-hub-list-pane,
    .comm-hub-main-container.viewing-thread .comm-hub-reading-pane {
        transform: translateX(-100%);
    }

    /* Semplifica l'header quando si è in modalità lettura */
    .comm-hub-header {
        display: none; /* Nasconde l'header superiore per dare più spazio */
    }

    /* Adatta l'altezza del container principale di conseguenza */
    #flowinbox-manager-section.active.viewing-thread {
        height: calc(100vh - 70px);
    }
}
/* ======================================= */
/* === SIDEBAR MOBILE E TOGGLE (V2)    === */
/* ======================================= */

/* --- Pulsante Hamburger (visibile solo su mobile) --- */
#mobileMenuToggle {
    display: none; 
    font-size: 1.5rem;
    color: var(--bs-body-color);
}

/* --- Overlay per lo sfondo scuro --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1190; 
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* in styles.css */
/* SOSTITUISCI IL BLOCCO @media PRECEDENTE CON QUESTO */

/* --- Breakpoint per Tablet e Smartphone (fino a 992px) --- */
@media (max-width: 992px) {
    /* Mostra il pulsante hamburger */
    #mobileMenuToggle {
        display: block;
    }

    /* Rimuovi la sidebar dal flusso normale e posizionala fuori schermo */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1200; 
        transform: translateX(-100%); 
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important; 
        
        /* MODIFICA: Rimuovi lo scorrimento da qui... */
        /* overflow-y: auto; (Questa riga è stata rimossa) */
    }

    /* NUOVA REGOLA: ...e applicalo solo alla sezione di navigazione */
    .sidebar .sidebar-nav {
        flex-grow: 1; /* Permette a questa sezione di occupare tutto lo spazio disponibile */
        overflow-y: auto; /* Aggiunge la barra di scorrimento solo qui, se necessario */
        padding-bottom: 1rem; /* Aggiunge un po' di spazio alla fine della lista */
    }

    /* Stili per lo stato "APERTO" (invariati) */
    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 5px 0 25px rgba(0,0,0,0.2);
    }
}

/* --- NUOVO: Breakpoint per schermi molto piccoli (es. iPhone) --- */
@media (max-width: 480px) {
    .sidebar {
        /* Riduci la larghezza della sidebar per lasciare più "margine" visivo */
        width: 260px; 
    }
}/* ======================================= */
/* === FIX KPI E PROMPT BAR COMMAND CENTER === */
/* ======================================= */

/* --- 1. FIX: Permette al testo lungo nelle KPI card di andare a capo --- */
.kpi-card .value {
    word-break: break-all; /* Forza il testo ad andare a capo se troppo lungo */
    line-height: 1.1;      /* Riduce la spaziatura tra le righe se il testo va a capo */
}

/* --- 2. FIX: Corregge il layout della barra di comando nel Command Center --- */

/* Applica questo stile solo alla barra dentro la card "AI Activity" */
.ai-activity .global-prompt-bar-v2 {
    padding: 0.5rem 0.75rem 0.5rem 1.25rem; /* Padding corretto */
}

/* Assicura che l'input di testo abbia lo spazio per crescere */
.ai-activity .global-prompt-bar-v2 input {
    flex-grow: 1;
    min-width: 100px; /* Larghezza minima per evitare che scompaia */
}

/* LA CORREZIONE CHIAVE: Impedisce al contenitore dei pulsanti di restringersi */
.ai-activity .global-prompt-bar-v2 .prompt-actions {
    flex-shrink: 0;
}
/* in styles.css */

/* --- FIX: Centra perfettamente lo spinner nei pulsanti di login/signup --- */
.btn.loading .spinner-border-sm {
    position: absolute; /* Rimuove lo spinner dal flusso normale del layout */
}
/* in styles.css */

/* --- FIX: Layout dell'intestazione per mobile --- */
@media (max-width: 992px) {
    .top-header {
        flex-direction: row; /* Assicura che sia sempre una riga */
        justify-content: space-between; /* Spinge i due gruppi ai lati opposti */
        gap: 1rem;
    }

    .header-right-group {
        display: flex;
        align-items: center;
        gap: 1rem; /* Spazio tra le icone */
    }

    /* Nascondi il selettore del tema su schermi molto piccoli per risparmiare spazio */
    @media (max-width: 480px) {
        .theme-switch-wrapper {
            display: none;
        }
        .header-right-group {
            gap: 0.75rem; /* Riduci lo spazio tra le icone rimanenti */
        }
    }
}
/* === ADD THIS ENTIRE NEW BLOCK === */

/* ======================================= */
/* === PLAN EXPIRED MODAL STYLES         === */
/* ======================================= */

/* The full-screen dark overlay that blocks the app */
.expired-plan-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9998; /* Extremely high z-index */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    animation: fadeIn 0.5s ease forwards; /* Use the existing fadeIn animation */
}

/* The modal panel itself */
.expired-plan-modal {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    max-width: 500px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border-top: 5px solid var(--danger-color);
}

.expired-plan-modal .icon {
    font-size: 3rem;
    color: var(--danger-color);
    margin-bottom: 1.5rem;
}

.expired-plan-modal h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--heading-text);
    margin-bottom: 1rem;
}

.expired-plan-modal p {
    font-size: 1rem;
    color: var(--light-text);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.expired-plan-modal .modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
/* in styles.css */

/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ... (existing styles) */

.note-box {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    min-height: 50px;
    white-space: pre-wrap; /* Preserves line breaks in notes */
}
/* === AGENT CARD SCHEDULE TEXT === */
.agent-schedule-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--light-text);
    padding: 0 0.5rem;
    text-align: right;
    flex-grow: 1; 
}
/* styles.css */

/* Add this to the end of your file */
.btn-soft.secondary {
    background-color: var(--menu-hover-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.btn-soft.secondary:hover:not(:disabled) {
    background-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* ======================================= */
/* === TRIAL EXPIRING BANNER STYLES      === */
/* ======================================= */

.trial-banner {
    background: linear-gradient(90deg, #4361ee, #7209b7); /* Gradient from primary to a purple */
    color: #ffffff;
    padding: 1rem 1.5rem;
    margin: 0 2rem 1.5rem 2rem; /* Sits below the header */
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    animation: fadeIn 0.5s ease-out;
    display: block; 
}

.trial-banner.hidden {
    display: none;
}

.trial-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.trial-banner-text {
    flex-grow: 1;
}

.trial-banner .headline {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.trial-banner .subline {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
}

.trial-banner-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.trial-banner .btn-unlock {
    background-color: #ffffff;
    color: var(--primary-color);
    font-weight: 700;
    padding: 0.6rem 1.25rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.2s ease-out;
    border: none;
}

.trial-banner .btn-unlock:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #f0f0f0;
}

.trial-banner .btn-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.trial-banner .btn-dismiss:hover {
    color: #ffffff;
}

/* Responsive adjustments for the banner */
@media (max-width: 992px) {
    .trial-banner-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .trial-banner-actions {
        width: 100%;
        justify-content: center;
    }
}