/* === CSS Completo Unificato (Base + Auth + Dashboard A + Flow Network) === */
:root {
    --primary-color: #4361ee; /* Blu primario */
    --secondary-color: #6b7280; /* Grigio medio */
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;

    --bs-body-bg: #010409;
    --bs-body-color: #c9d1d9;
    --card-bg: #0d1117;
    --banner-bg: #161b22;
    --banner-text: #e6edf3;
    --menu-bg: rgba(22, 27, 34, 0.9);
    --menu-text: #c9d1d9;
    --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;
    --text-inverted: #111827;
    --card-bg-rgb: 13, 17, 23; /* Added for rgba usage */


    --banner-height: 60px;
    --subnav-height: 50px;
    --border-radius: 0.5rem;
    --border-radius-lg: 12px;
    --border-radius-sm: 4px; /* Added for badges/smaller elements */
    --transition-speed: 0.25s;
    --transition-timing: ease-in-out;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md: 0 3px 5px rgba(0,0,0,0.2);
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.07);
    --dark-mode-indicator-invert: 1;
    --current-subnav-height: var(--subnav-height);
    --subnav-transition-speed: 0.3s;
}

body.light-mode {
    --primary-color: #4361ee;
    --accent-color: #f59e0b;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #3b82f6;

    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
    --card-bg: #ffffff;
    --banner-bg: #ffffff;
    --banner-text: #212529;
    --menu-bg: rgba(255, 255, 255, 0.9);
    --menu-text: #495057;
    --menu-hover-bg: #e9ecef;
    --heading-text: #000000;
    --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;
    --text-inverted: #333;
    --card-bg-rgb: 255, 255, 255; /* Added for rgba usage */

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.04);
    --dark-mode-indicator-invert: 0;
}


* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins", sans-serif; }
html { height: 100%; } /* REMOVED: overflow-y: hidden; */

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    /* REMOVED: overflow: hidden; */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 14px;
    line-height: 1.6;
    transition: background-color var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
}
a { color: var(--bs-link-color); text-decoration: none; transition: color var(--transition-speed); }
a:hover { text-decoration: none; color: var(--bs-link-hover-color); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--card-bg) 50%, transparent); }
::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 10px; border: 2px solid transparent; background-clip: content-box;}
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }

#authContainer.hidden, #appWrapper.hidden { display: none !important; }
body.auth-active { align-items: center; justify-content: center; min-height: 100vh; padding: 15px; }
body:not(.auth-active) { display: flex; flex-direction: column; min-height: 100vh; padding: 0; }
body.auth-active.light-mode { background-color: #f8f9fa; }

#authContainer { width: 100%; }
#authContainer .container.auth {
    width: 100%; max-width: 480px; background: var(--card-bg);
    border: 1px solid var(--bs-border-color); border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-lg); padding: 40px 35px 50px;
    margin: 20px auto; position: relative; overflow: visible; z-index: 10;
}
.container.auth.hidden { display: none; }
.container.auth::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--primary-color); border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0; }
.app-logo { display: block; margin: 0 auto 30px; max-width: 170px; height: auto; } /* Modificato da estateicons-logo */
.container.auth h1.title { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 30px; color: var(--heading-text); }
.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, 8px); 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); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.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; text-transform: uppercase; font-size: 12px; }
.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, 8px); 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); font-size: 1.1em; z-index: 3; }
.password-toggle-icon:hover { color: var(--primary-color); }
.validation-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.1em; display: none; z-index: 2; }
input:not([type="password"]).is-valid + .validation-icon.valid-icon, input:not([type="password"]).is-invalid + .validation-icon.invalid-icon { right: 12px; display: inline-block; }
input[type="password"].is-valid + .validation-icon.valid-icon, input[type="password"].is-invalid + .validation-icon.invalid-icon { right: 40px; display: inline-block; }
.validation-icon.valid-icon { color: var(--success-color); } .validation-icon.invalid-icon { color: var(--danger-color); }
.invalid-feedback { display: none; width: 100%; margin-top: .3rem; font-size: .875em; color: var(--danger-color); }
input.is-invalid ~ .invalid-feedback { display: block; }
input.is-invalid { border-color: var(--danger-color); } input.is-valid { border-color: var(--success-color); }
input.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-color) 25%, transparent); }
input.is-valid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color) 25%, transparent); }
.action-link { text-align: right; margin-bottom: 22px; margin-top: -10px; }
.action-link a { color: var(--bs-link-color); font-weight: 500; font-size: 13px; text-decoration: none; transition: color var(--transition-speed); }
.action-link a:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
.container.auth .btn[type="submit"], .container.auth .btn:not([type]) { 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, 8px); font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color var(--transition-speed), transform 0.15s ease-out, box-shadow var(--transition-speed); margin-bottom: 20px; text-align: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent); overflow: hidden; }
.container.auth .btn .btn-text { transition: opacity var(--transition-speed); }
.container.auth .btn:hover:not(:disabled) { background-color: color-mix(in srgb, var(--primary-color) 85%, black); box-shadow: 0 6px 15px color-mix(in srgb, var(--primary-color) 25%, transparent); transform: translateY(-1px); }
.container.auth .btn:active:not(:disabled) { background-color: color-mix(in srgb, var(--primary-color) 70%, black); transform: scale(0.97); box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.container.auth .btn:disabled { background-color: var(--secondary-color); opacity: 0.65; cursor: not-allowed; box-shadow: none; transform: none; }
.container.auth .btn .spinner-border-sm { display: none; width: 1em; height: 1em; border-width: .2em; }
.container.auth .btn.loading .spinner-border-sm { display: inline-block; vertical-align: text-bottom; }
.container.auth .btn.loading .btn-text { opacity: 0; position: absolute; }
.container.auth .btn.loading { pointer-events: none; }
.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; text-decoration: none; transition: color var(--transition-speed); }
.switch-view a:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
.feedback-message { padding: 10px 15px; margin-top: 15px; border-radius: var(--border-radius, 8px); font-size: 14px; text-align: left; border: 1px solid transparent; opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease, padding 0.3s ease; display: flex; align-items: center; gap: 8px; }
.feedback-message.show { opacity: 1; max-height: 100px; margin-top: 15px; }
.feedback-message i { font-size: 1.1em; }
.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); }
.feedback-message.info { background-color: color-mix(in srgb, var(--info-color) 15%, transparent); color: var(--info-color); border-color: color-mix(in srgb, var(--info-color) 30%, transparent); }
.feedback-message a { color: inherit; font-weight: bold; text-decoration: underline; }
body.light-mode .feedback-message.success { background-color: #d1e7dd; color: #0a3622; border-color: #a3cfbb; }
body.light-mode .feedback-message.error { background-color: #f8d7da; color: #58151c; border-color: #f1aeb5; }
body.light-mode .feedback-message.info { background-color: #cff4fc; color: #055160; border-color: #9eeaf9; }
.spinner-border-sm { display: inline-block; width: 1rem; height: 1rem; vertical-align: -0.125em; border: .2em solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-animation: .75s linear infinite spinner-border; animation: .75s linear infinite spinner-border; }
@-webkit-keyframes spinner-border { to { -webkit-transform: rotate(360deg); } }
@keyframes spinner-border { to { transform: rotate(360deg); } }

#flowNetworkApp { /* Renamed from #appWrapper in your HTML */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    /* REMOVED: overflow: hidden; */
}
/* In flowNetwork-supplemental.css */

/* This makes the main section a flex container */
#statisticsReportsPageContent {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* This is the new wrapper for the main content that will scroll */


/* Updated sticky bar to work with the new structure */
/* UPDATED: Filter bar now behaves as a static card */
.sticky-filter-bar {
    background-color: var(--card-bg);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    border: 1px solid var(--bs-border-color); /* Added a standard border */
    margin-bottom: 1.5rem; /* Added margin to separate it from content below */
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(var(--dark-mode-indicator-invert, 1));
}

#top-header { /* Rinominato da #banner */
    width: 100%; height: var(--banner-height);
    background-color: var(--banner-bg); color: var(--banner-text);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; /* Aggiunto padding orizzontale */
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0; box-shadow: var(--shadow-sm); z-index: 1030;
    transition: background-color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
}
#top-header .header-left { display: flex; align-items: center; gap: 0.8rem; }
/* in flowNetwork-supplemental.css */
#header-logo-img {
    height: 100px; /* increased from 35px */
    width: auto;
    display: block;
}

#app-name-header { font-size: 1.5rem; font-weight: 600; color: var(--heading-text); }
#top-header .header-center { flex-grow: 1; display: flex; justify-content: center; } /* Per date-range picker */
#top-header .header-right { display: flex; align-items: center; gap: 1rem; }

/* Stili per Date Range Picker (base) */
.date-range-picker-container select, .date-range-picker-container input[type="date"] {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.4rem 0.8rem; 
    font-size: 0.85rem;
    margin-left: 0.5rem;
}
.date-range-picker-container input[type="date"] {
    color-scheme: dark; /* Per far sì che il calendario popup sia scuro in dark mode */
}
body.light-mode .date-range-picker-container input[type="date"] {
    color-scheme: light;
}


/* Stili per User Menu (dropdown) */
.user-menu-container { position: relative; }
.user-menu-dropdown.enhanced {
    min-width: 280px; /* Larghezza maggiore come nell'immagine */
    padding: 0; /* Rimuoviamo il padding di default per controllare le sezioni interne */
    background-color: var(--card-bg); /* Sfondo scuro come nell'immagine */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius); /* O un raggio più piccolo se preferisci */
    box-shadow: var(--shadow-lg); /* Ombra più pronunciata */
    display: none; /* Nascosto di default, la classe .active lo mostra */
    position: absolute;
    top: calc(100% + 8px); /* Leggermente più staccato dal bottone icona */
    right: 0;
    z-index: 1050;
    color: var(--bs-body-color); /* Colore testo di default */
}
.user-menu-dropdown.enhanced.active {
    display: block;
}
.user-menu-dropdown a, .user-menu-dropdown button {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    text-align: left;
    color: var(--bs-body-color);
    background: none;
    border: none;
    font-size: 0.9rem;
}
.user-menu-header {
    display: flex;
    justify-content: space-between; /* Mantiene il titolo a sinistra e il bottone a destra */
    align-items: center;           /* Allinea verticalmente al centro */
    flex-wrap: nowrap;             /* AGGIUNGI/ASSICURA questa riga: impedisce agli elementi di andare a capo */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    padding-left: 1.2rem;
    padding-right: 0.6rem;         /* Questo padding funzionerà correttamente una volta risolto il layout */
    font-size: 1rem;
    font-weight: 500;
    color: var(--heading-text);
    border-bottom: 1px solid var(--bs-border-color);
    /* position: relative; /* Rimuovi questo se lo avevi aggiunto per la soluzione di posizionamento assoluto, a meno che tu non voglia usarla */
}
/* Aggiungi questa nuova regola se non esiste, o modifica quella esistente se c'è */
.user-menu-header > span{
    white-space: nowrap;      /* niente a capo */
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}
.user-menu-dropdown .dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    background-color: var(--bs-border-color);
}

.user-menu-close-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 1.1rem;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
    flex-shrink: 0; /* AGGIUNGI/ASSICURA questa riga: impedisce al bottone di restringersi */
    /* Rimuovi position: absolute; top: ...; right: ...; transform: ...; se li avevi aggiunti per la soluzione precedente */
}
.user-menu-close-btn:hover {
    color: var(--bs-body-color);
    background-color: var(--menu-hover-bg); /* Sfondo su hover come gli altri bottoni azione */
}

.user-menu-user-info {
    padding: 1rem 1.2rem;
    line-height: 1.4;
}
.user-menu-user-info #userMenuDisplayName {
    display: block;
    font-weight: 500;
    color: var(--heading-text);
    font-size: 0.95rem;
}
.user-menu-user-info #userMenuEmail {
    display: block;
    font-size: 0.8rem;
    color: var(--light-text);
}
.user-menu-user-info #userMenuEmail a {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.user-menu-divider {
    border: none;
    height: 1px;
    background-color: var(--bs-border-color);
    margin: 0; /* Rimuove margini di default dell'hr */
}
/* Potresti voler margini specifici per i divisori */
.user-menu-divider.top-divider { margin-bottom: 0.5rem; }
.user-menu-divider.bottom-divider { margin-top: 0.5rem; margin-bottom: 0.5rem;}


/* Stili per i link di navigazione nel menu utente */
.user-menu-nav-link,
.user-menu-item-styled {
    display: flex; /* Per allineare icona e testo */
    align-items: center;
    gap: 0.8rem; /* Spazio tra icona e testo */
    padding: 0.75rem 1.2rem; /* Padding generoso */
    font-size: 0.9rem;
    color: var(--menu-text); /* Usa le tue variabili CSS per coerenza */
    text-decoration: none;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    border: none; /* Per i button */
    background: none; /* Per i button */
    width: 100%; /* Per i button */
    text-align: left; /* Per i button */
    cursor: pointer;
}
.user-menu-nav-link:hover,
.user-menu-item-styled:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}




/* Stile specifico per il link di Logout */
.user-menu-item-styled.logout-item {
    color: var(--danger-color); /* Colore rosso per logout */
}
.user-menu-item-styled.logout-item:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color); /* Mantiene il rosso o lo scurisce leggermente */
}
.user-menu-item-styled.logout-item i.fas {
    color: var(--danger-color); /* Icona rossa */
}

/* Stile per le icone fa-fw per allineamento */
.user-menu-nav-link i.fas,
.user-menu-item-styled i.fas {
    width: 1.2em; /* Assicura che le icone occupino lo stesso spazio orizzontale */
    text-align: center;
    color: var(--secondary-color); /* Colore di default per le icone */
    margin-right: 0.2rem; /* Leggero stacco se gap non basta */
}
.user-menu-nav-link:hover i.fas,
.user-menu-item-styled:hover i.fas {
    color: var(--primary-color); /* Icone diventano colore primario su hover, tranne logout */
}
.user-menu-item-styled.logout-item:hover i.fas {
    color: var(--danger-color);
}
#profile-icon-btn, .action-btn { /* Per user-icon e altri bottoni header */
    font-size: 1.2rem; color: var(--light-text); cursor: pointer; padding: 0.5rem;
    background: none; border: none; border-radius: 50%;
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    transition: background-color var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);
}
 #profile-icon-btn:hover, .action-btn:hover { background-color: var(--menu-hover-bg); color: var(--banner-text); }
 #profile-icon-btn { font-size: 1.4rem; }

.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: background-color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing); }
.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: transform var(--transition-speed) var(--transition-timing), background-color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing); 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; }
body.light-mode input:not(:checked) + .slider { background-color: var(--bs-body-bg); border-color: var(--bs-border-color); }
body.light-mode input:not(:checked) + .slider:before { background-color: var(--card-bg); border-color: var(--bs-border-color); }
body.light-mode input:not(:checked) + .slider .sun { opacity: 0; } body.light-mode input:not(:checked) + .slider .moon { opacity: 1; color: var(--primary-color); }

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing), box-shadow 0.3s ease;
}
.btn {
    border-radius: 6px; padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition-speed) ease; border: 1px solid transparent;
    line-height: 1.4; text-align: center; vertical-align: middle; display: inline-flex;
    align-items: center; justify-content: center; white-space: nowrap;
}
.btn i { margin-right: 0.4rem; }
.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.78rem; border-radius: 5px; }
.btn-primary { background-color: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.btn-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    border-color: color-mix(in srgb, var(--primary-color) 85%, black);
    color: #ffffff; /* This new line keeps the text white on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.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; }
.btn-info { background-color: var(--info-color); color: white; border-color: var(--info-color); }
.btn-info:hover:not(:disabled) { background-color: color-mix(in srgb, var(--info-color) 85%, black); border-color: color-mix(in srgb, var(--info-color) 85%, black); }
.btn-info-outline { background-color: transparent; border-color: var(--info-color); color: var(--info-color); }
.btn-info-outline:hover:not(:disabled) { background-color: var(--info-color); color: white; }
/* Replace with this updated block */
#flowNetworkNavbar {
    display: flex;
    gap: 0.5rem;
    padding: 0 1.5rem;
    background-color: var(--banner-bg);
    border-bottom: 1px solid var(--bs-border-color);
    height: var(--subnav-height);
    flex-shrink: 0;
    align-items: center;
    z-index: 1020;
    transition: max-height 0.35s ease-in-out, padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, border-bottom-width 0.35s ease-in-out;
    overflow: hidden;
    max-height: var(--subnav-height, 50px);
    opacity: 1;
    visibility: visible;
}

#flowNetworkNavbar .nav-link {
    padding: 0 1rem;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--menu-text);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-family: inherit; /* Add this line */
}
#flowNetworkNavbar .nav-link:hover {
    color: var(--heading-text);
}
#flowNetworkNavbar .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

#flowNetworkNavbar.navbar-collapsed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important;
}

/* Regola specifica per il modulo Flow Network (che usa l'ID 'flowNetworkNavbar') */
#flowNetworkNavbar.horizontal-navbar {
    flex-shrink: 0;
}

#main-dashboard-content {
    padding: 1.5rem;
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--bs-body-bg);
}

/* Stili specifici per Home Tab */
.home-grid {
    display: grid;
    gap: 1.5rem;
    /* Definisci colonne: es. 4 per KPI cards, 2 per chart e azioni, 1 per tabella, etc. */
    grid-template-columns: repeat(4, 1fr); /* Default per KPI cards */
}

.kpi-card {
    padding: 1.5rem; /* Padding interno per le card */
    text-align: center;
}
.kpi-card h3 {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.kpi-card .value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}
.kpi-card .change {
    font-size: 0.85rem;
}
.kpi-card .change.positive { color: var(--success-color); }
.kpi-card .change.negative { color: var(--danger-color); }

.chart-container, .actions-container, .table-container, .insights-container, .widgets-container {
    padding: 1.5rem; /* Padding per i contenitori più grandi */
    margin-bottom: 1.5rem; /* Spazio sotto ogni sezione */
}

/* Layout per Chart e Quick Actions (2 colonne) */
.performance-actions-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Chart più grande delle azioni */
    gap: 1.5rem;
    grid-column: span 4; /* Occupa tutte e 4 le colonne definite in .home-grid */
    align-items: start;
}

.chart-container h4, .actions-container h4, .table-container h4, .insights-container h4, .widgets-container h4 {
    font-size: 1.1rem;
    color: var(--heading-text);
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}
.chart-placeholder {
    height: 300px;
    background-color: var(--input-bg);
    border: 1px dashed var(--border-color-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    border-radius: var(--border-radius);
}
.metric-selectors select {
    margin-right: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: 4px;
}

.quick-actions-list button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 0.75rem;
    padding: 0.6rem 1rem;
}

/* Layout per Recent Campaigns, Alerts, Widgets (1 colonna o 2) */
.recent-campaigns-alerts-grid {
     display: grid;
    grid-template-columns: 2fr 1fr; /* Tabella più grande di alerts/widgets */
    gap: 1.5rem;
    grid-column: span 4;
    align-items: start;
}
/* Se vuoi che Recent Campaigns sia a tutta larghezza: */
.table-container.full-width {
    grid-column: span 4;
}
/* Se vuoi Alerts e Widgets in una griglia a 2 colonne sotto: */
.alerts-widgets-row {
    grid-column: span 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}


.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.styled-table th {
    padding: 0.8rem 1rem; text-align: left; font-weight: 600;
    color: var(--heading-text); background-color: color-mix(in srgb, var(--card-bg) 80%, transparent); /* Use transparent as background-color if background is already set on the container */
    border-bottom: 2px solid var(--bs-border-color); white-space: nowrap;
}
.styled-table td {
    padding: 0.9rem 1rem; border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle; color: var(--bs-body-color);
}
.styled-table tbody tr:hover { background-color: var(--menu-hover-bg); }
.status-badge { display: inline-block; padding: .35em .65em; font-size: .75em; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: middle; border-radius: var(--border-radius); text-transform: capitalize; }
.status-active { background-color: var(--success-color); color: white; }
.status-paused { background-color: var(--secondary-color); color: white; }
.status-error { background-color: var(--danger-color); color: white; }

.alerts-list .alert-item, .ai-insights-list .insight-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}
.alert-item.critical { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); border-left: 3px solid var(--danger-color); color:var(--danger-color); }
.alert-item.warning { background-color: color-mix(in srgb, var(--warning-color) 15%, transparent); border-left: 3px solid var(--warning-color); color:color-mix(in srgb, var(--warning-color) 90%, black); }
.insight-item { background-color: color-mix(in srgb, var(--primary-color) 15%, transparent); border-left: 3px solid var(--primary-color); color:var(--primary-color); }

.widget-placeholder {
    height: 150px; border: 1px dashed var(--border-color-2); display: flex;
    align-items: center; justify-content: center; color: var(--light-text); border-radius: var(--border-radius);
}

#app-footer {
    padding: 1rem 1.5rem;
    background-color: var(--banner-bg);
    border-top: 1px solid var(--bs-border-color);
    color: var(--light-text);
    font-size: 0.8rem;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#app-footer .footer-links a { margin-left: 1rem; color: var(--light-text); }
#app-footer .footer-links a:hover { color: var(--bs-link-color); }

/* Responsive adjustments per MetaFlow Commander Home */
@media (max-width: 1200px) {
    .home-grid { grid-template-columns: repeat(2, 1fr); } /* KPI cards a 2 colonne */
    .performance-actions-grid { grid-template-columns: 1fr; } /* Chart e Azioni a 1 colonna */
    .recent-campaigns-alerts-grid { grid-template-columns: 1fr; }
    .alerts-widgets-row { grid-template-columns: 1fr; }
    .actions-container { margin-top: 1.5rem; }
}
@media (max-width: 768px) {
    .home-grid { grid-template-columns: 1fr; } /* KPI cards a 1 colonna */
    #top-header { padding: 0 1rem; flex-wrap: wrap; height: auto; }
    #top-header .header-center { order: 3; width:100%; justify-content: flex-start; padding: 0.5rem 0;}
    #horizontal-navbar { padding: 0 0.5rem; overflow-x: auto; }
    #horizontal-navbar .nav-link { padding: 0 0.6rem; font-size: 0.9rem; }
    #main-dashboard-content { padding: 1rem; }
    #app-footer { flex-direction: column; gap: 0.5rem; }
}

/* Stili specifici per la pagina Home di MetaFlow Commander */
#homePageContent {
    /* Eventuali stili specifici per il contenitore della home page */
}

.table-actions button { margin-right: 0.3rem;}
/* === Setup Page Specific Styles === */

#setupPageContent {
    padding: 1.5rem; /* Padding per l'intera pagina di setup */
}

.setup-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.setup-page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}

.setup-subtitle {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.setup-progress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.setup-progress-breadcrumb strong {
    color: var(--primary-color);
}

.setup-progress-bar-container {
    flex-grow: 1;
    background-color: var(--input-bg); /* Sfondo più scuro per contrasto */
    border-radius: var(--border-radius);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.setup-progress-bar-fill {
    background-color: var(--primary-color);
    height: 100%;
    border-radius: var(--border-radius);
    transition: width 0.3s ease-in-out;
}

.setup-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Colonna principale più larga della sidebar */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Per schermi più piccoli, le colonne vanno una sotto l'altra */
@media (max-width: 992px) {
    .setup-main-grid {
        grid-template-columns: 1fr;
    }
}

.setup-main-column, .setup-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.setup-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg); /* Raggio più grande per card principali */
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.setup-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.setup-card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.setup-card-icon {
    font-size: 1.2em;
    color: var(--primary-color);
    width: 24px; /* Per allineamento */
    text-align: center;
}
.setup-card-icon.meta-icon { color: #1877F2; } /* Blu di Facebook/Meta */
body.light-mode .setup-card-icon.meta-icon { color: #0d6efd; }


.setup-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.btn-block {
    display: block;
    width: 100%;
}

.setup-status-badge {
    margin-top: 0.75rem;
    text-align: left; /* O center se preferisci */
}

.setup-status-badge .badge {
    display: inline-block;
    padding: .4em .75em;
    font-size: .8em;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--border-radius);
}

.badge.success-badge { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); color: var(--success-color); border: 1px solid var(--success-color);}
.badge.error-badge { background-color: color-mix(in srgb, var(--danger-color) 20%, transparent); color: var(--danger-color); border: 1px solid var(--danger-color);}
.badge.warning-badge { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: color-mix(in srgb, var(--warning-color) 80%, black); border: 1px solid var(--warning-color);}
body.light-mode .badge.warning-badge { color: var(--bs-body-bg); } /* Testo scuro su sfondo giallo chiaro */
/* === INIZIO STILI PER CAMPAIGN BUDGET INPUT GROUP === */

/*
   Miglioramento per .input-group-text per allinearsi verticalmente 
   con .form-control standard quando usato come "prepend" (all'inizio).
*/
.input-group > .input-group-text {
    padding-top: 0.6rem;    /* Corrisponde a .form-control */
    padding-bottom: 0.6rem; /* Corrisponde a .form-control */
    padding-left: 0.8rem;   /* Corrisponde a .form-control */
    padding-right: 0.8rem;  /* Corrisponde a .form-control */
    font-size: 0.9rem;      /* Corrisponde a .form-control */
    line-height: inherit;   /* Eredita line-height per allineamento verticale del testo */
    
    /* Applica lo stesso sfondo e colore testo dell'input per coerenza visiva */
    background-color: var(--input-bg); 
    color: var(--input-text); /* O var(--light-text) se preferisci per lo span */
    border: 1px solid var(--input-border);
}

/*
   Gestione specifica dei bordi e degli angoli arrotondati 
   quando .input-group-text è il PRIMO elemento del gruppo.
*/
.input-group > .input-group-text:first-child:not(:last-child) {
    border-right: none; /* Rimuove il bordo destro per fondersi con l'input */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    
    /* Assicura che i radius a sinistra siano applicati (dovrebbe essere default da .input-group) */
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

/*
   Gestione specifica dei bordi e degli angoli arrotondati 
   per .form-control quando NON è il primo elemento 
   (cioè, segue un .input-group-text).
*/
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    /* Assicura che i radius a destra siano applicati (dovrebbe essere default da .form-control) */
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/*
   Opzionale: Uniformare le spaziature verticali all'interno 
   della sezione "Campaign Budget" nel modale.
*/
#metaAdsScriptModalBody .form-group > label[for="modalMetaCampaignBudget"] {
    margin-bottom: 0.5rem; /* Spazio standard sotto la label */
}

#metaAdsScriptModalBody .form-group .input-group { /* Più specifico se serve */
    margin-bottom: 0.35rem; /* Spazio sotto l'input group prima dell'helper text */
}

#metaAdsScriptModalBody .form-group > .form-helper-text {
    font-size: 0.8rem; /* Helper text leggermente più piccolo */
    margin-top: 0;     /* Rimuovi il margine superiore se .input-group ha già mb */
}

/* === FINE STILI PER CAMPAIGN BUDGET INPUT GROUP === */

.input-group {
    display: flex;
    gap: 0.5rem;
}
.input-group .form-control {
    flex-grow: 1;
}
.input-group .btn-icon { /* Stile per bottoni solo icona */
    padding: 0.4rem 0.6rem; /* Adatta se necessario */
    min-width: auto;
}
.input-group .btn-icon i {
    margin-right: 0; /* Rimuovi margine se presente dalla classe .btn i */
}


.form-control, select.form-control { /* Stili unificati per input e select */
    width: 100%;
    padding: 0.6rem 0.8rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.form-control-sm, select.form-control-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}


.form-helper-text, .setup-helper-text {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 0.5rem;
    display: block;
}

/* Connection Status Overview Mini-Cards */
.connection-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.connection-status-item {
    padding: 0.75rem;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid transparent;
    color: var(--bs-body-color); /* Colore testo di default */
}
.connection-status-item i {
    font-size: 1.5em;
    margin-bottom: 0.25rem;
}
.status-ok-bg { background-color: color-mix(in srgb, var(--success-color) 20%, transparent); border-color: var(--success-color); color: var(--success-color); }
.status-warning-bg { background-color: color-mix(in srgb, var(--warning-color) 20%, transparent); border-color: var(--warning-color); color: color-mix(in srgb, var(--warning-color) 90%, black); }
body.light-mode .status-warning-bg { color: var(--bs-body-bg); }
.status-error-bg { background-color: color-mix(in srgb, var(--danger-color) 20%, transparent); border-color: var(--danger-color); color: var(--danger-color); }
.status-pending-bg { background-color: var(--input-bg); border-color: var(--input-border); color: var(--light-text); }


/* Accordion Styling */
.setup-full-width-card {
    grid-column: 1 / -1; /* Occupa tutta la larghezza della setup-main-grid */
}
.setup-accordion summary {
    list-style: none; /* Rimuovi freccia di default */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color var(--transition-speed);
}
.setup-accordion summary:hover {
    background-color: var(--menu-hover-bg);
}
.setup-accordion[open] summary {
    border-bottom-color: transparent; /* O var(--primary-color) se vuoi evidenziare */
}
.setup-accordion-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.setup-accordion-title h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}
.setup-accordion-header .accordion-icon {
    transition: transform 0.2s ease-in-out;
    color: var(--secondary-color);
}
.setup-accordion[open] > summary .accordion-icon {
    transform: rotate(180deg);
}
.setup-accordion-content {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Padding solo sotto l'header */
    border-top: 1px solid var(--bs-border-color); /* Linea separatrice se l'accordion è aperto */
}
.setup-accordion[open] summary + .setup-accordion-content {
    /* Stili specifici quando l'accordion è aperto, se necessario */
}

/* Table-like list for Instagram Pages */
.setup-table-like-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
.setup-table-like-header, .setup-table-like-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr; /* Adatta le proporzioni come necessario */
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.setup-table-like-header {
    font-weight: 600;
    color: var(--light-text);
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
}
.setup-table-like-row {
    border-bottom: 1px solid var(--input-border); /* Linea sottile per le righe */
}
.setup-table-like-row:last-child {
    border-bottom: none;
}
.fb-page-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fb-page-name i { color: #1877F2; } /* Blu Facebook */
.small-switch { /* Per rendere il theme-switch più piccolo */
    transform: scale(0.8);
    transform-origin: center right; /* Allinea a destra se necessario */
}


/* Troubleshooting & Logs */
.setup-log-list {
    list-style: none;
    padding: 0.75rem;
    margin: 0 0 1rem 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    font-size: 0.85rem;
}
.setup-log-list li {
    padding: 0.4rem 0.2rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: 0.5rem;
}
.setup-log-list li:last-child { border-bottom: none; }
.log-timestamp { color: var(--secondary-color); flex-shrink: 0; }
.log-message.error { color: var(--danger-color); }
.log-message.warning { color: var(--warning-color); }
.log-message.info { color: var(--info-color); }

.setup-help-links {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}
.setup-help-links li a {
    color: var(--bs-link-color);
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.25rem 0;
    display: inline-block;
}
.setup-help-links li a:hover { text-decoration: underline; color: var(--bs-link-hover-color); }
.btn-danger-outline {
    background-color: transparent;
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.btn-danger-outline:hover:not(:disabled) {
    background-color: var(--danger-color);
    color: white;
}


/* Modal Styling */
.setup-modal-overlay {
    position: fixed; /* Copre l'intera viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Larghezza completa della viewport */
    height: 100vh; /* Altezza completa della viewport */
    background-color: rgba(0, 0, 0, 0.65); /* Sfondo scuro semi-trasparente */
    display: flex; /* Per centrare .setup-modal-card */
    align-items: center;
    justify-content: center;
    z-index: 1061; /* Assicura che sia sopra gli altri contenuti (aggiustalo se necessario) */
    
    /* Inizialmente nascosto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Transizione per fade */
}

.setup-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Rimuove il ritardo per la visibilità quando diventa attivo */
}
.setup-modal-card {
    width: 90%;
    max-width: 500px;
    border-radius: var(--border-radius-lg);
    /* .card già applica background, border, shadow */
    transform: scale(0.95);
    transition: transform 0.25s ease;
}
.setup-modal-overlay.active .setup-modal-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.setup-modal-overlay .setup-modal-card { /* Sii specifico per evitare conflitti */
    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;
    overflow: hidden; /* Per gestire lo scroll interno del body */
    
    width: 90%; /* Esempio: 90% della larghezza viewport */
    max-width: 800px; /* Esempio: limite massimo */
    height: auto; /* Altezza basata sul contenuto */
    max-height: 90vh; /* Esempio: limite massimo altezza */

    /* Animazione di entrata per la card */
    transform: scale(0.95) translateY(-20px);
    opacity: 0; /* Inizia trasparente e leggermente scalato/spostato */
    transition: transform 0.3s ease-out 0.05s, opacity 0.3s ease-out 0.05s; /* Ritardo leggero per un effetto migliore */
}
.setup-modal-overlay .setup-modal-body {
    overflow-y: auto;
    flex-grow: 1; /* Fa sì che il corpo occupi lo spazio disponibile */
    padding: 1.5rem; /* O il padding che preferisci */
}
.setup-modal-overlay .setup-modal-header {
    flex-shrink: 0; /* Non si restringe */
    /* ... altri stili per l'header del modale ... */
}

.setup-modal-overlay .setup-modal-footer {
    flex-shrink: 0; /* Non si restringe */
    /* ... altri stili per il footer del modale ... */
}
.setup-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.setup-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading-text);
}
.setup-modal-close-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 1.2rem;
    padding: 0.25rem; /* Aumenta area cliccabile */
}
.setup-modal-close-btn:hover { color: var(--bs-body-color); }

.setup-modal-body {
    padding: 1.5rem;
    max-height: 60vh; /* Per modal con molto contenuto */
    overflow-y: auto;
}
.form-feedback { /* Per messaggi di errore/successo nel modal */
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 1.2em; /* Spazio anche se vuoto */
}
.form-feedback.success { color: var(--success-color); }
.form-feedback.error { color: var(--danger-color); }

.setup-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--input-bg); /* Sfondo leggermente diverso per il footer del modal */
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

/* Navigation Controls */
.setup-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem; /* Aggiunto padding laterale */
    margin-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--banner-bg); /* Stesso sfondo dell'header/footer per coerenza */
    position: sticky; /* Per fissarlo in basso se la pagina è lunga */
    bottom: 0;
    left:0; right:0; /* Occupa tutta la larghezza */
    z-index: 1000; /* Sopra il contenuto scrollabile ma sotto eventuali modal */
}

.form-checkbox-label { /* Stile per la label del checkbox */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
    cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
    /* Puoi stilizzare il checkbox o usare uno stile custom se necessario */
    accent-color: var(--primary-color); /* Colore del check */
    width: 16px;
    height: 16px;
}

.setup-nav-buttons {
    display: flex;
    gap: 0.75rem;
}
.setup-nav-buttons .btn i {
    margin-right: 0.3rem; /* Spazio per icone nei bottoni */
}
.setup-nav-buttons .btn:disabled {
    background-color: var(--secondary-color);
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--secondary-color);
}

/* Stile per allineare l'icona nel bottone "Connect" di Meta */
#metaConnectBtn .btn-text,
#metaConnectBtn .spinner-border-sm {
    vertical-align: middle;
}
#metaConnectBtn .spinner-border-sm {
    width: 1em; /* Dimensione spinner */
    height: 1em;
}
/* === Creation Hub Specific Styles === */

#creationPageContent {
    padding: 1.5rem;
}

.creation-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.creation-page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}

.creation-subtitle {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.creation-progress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.creation-progress-breadcrumb strong {
    color: var(--primary-color);
}

.creation-progress-bar-container {
    flex-grow: 1;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.creation-progress-bar-fill {
    background-color: var(--primary-color);
    height: 100%;
    border-radius: var(--border-radius);
    transition: width 0.3s ease-in-out;
}

.creation-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr); /* Colonne flessibili, la prima un po' più larga */
    gap: 1.5rem;
}

@media (max-width: 1024px) { /* Tablet e inferiori */
    .creation-main-layout {
        grid-template-columns: 1fr; /* Layout a colonna singola */
    }
}

.creation-generators-column,
.creation-asset-library-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.creation-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;
}

.creation-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.creation-card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.creation-card-icon {
    font-size: 1.2em;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.creation-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

/* Ad Copy Generator Specifics */
.radio-group-horizontal {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.radio-group-horizontal label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.radio-group-horizontal input[type="radio"] {
    accent-color: var(--primary-color);
}

.creation-inline-accordion summary.creation-accordion-header-sm {
    padding: 0.5rem 0; /* Più compatto */
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-link-color);
    border-bottom: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}
.creation-inline-accordion summary.creation-accordion-header-sm:hover {
    color: var(--bs-link-hover-color);
}
.creation-inline-accordion .accordion-icon-sm {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}
.creation-inline-accordion[open] summary.creation-accordion-header-sm .accordion-icon-sm {
     transform: rotate(180deg);
}

.creation-accordion-content-sm {
    padding: 0.75rem 0.25rem;
    border-top: 1px dashed var(--border-color-2);
    margin-top: 0.5rem;
}

.form-control-range {
    width: 100%;
    accent-color: var(--primary-color); /* Stile base per il range slider */
}
.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--light-text);
    margin-top: 0.25rem;
}

.wysiwyg-editor {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    min-height: 150px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.wysiwyg-editor:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.creation-results-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.btn-tertiary { /* Se non esiste già */
    background-color: transparent;
    border-color: transparent;
    color: var(--secondary-color);
}
.btn-tertiary:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}


/* Video Script Generator Specifics */
.storyboard-view {
    margin-top: 1rem;
    border: 1px solid var(--border-color-2);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    background-color: var(--input-bg);
    max-height: 400px;
    overflow-y: auto;
}
.scene-block {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
}
.scene-block:last-child { margin-bottom: 0; }

.scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color-2);
}
.scene-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}
.scene-duration {
    font-size: 0.8rem;
    color: var(--light-text);
}
.scene-content p {
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: var(--bs-body-color);
}
.scene-content p strong { color: var(--heading-text); }
.scene-content i { margin-right: 0.3rem; color: var(--secondary-color); }
.scene-visual-suggestion i { color: var(--info-color); }
.scene-on-screen-text i { color: var(--accent-color); }


/* Asset Library Specifics */
.creation-asset-library-card .creation-card-body {
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Limita altezza per scroll interno */
}
.asset-library-toolbar {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.asset-info h3 {
  white-space: nowrap; /* Keep title on one line */
  overflow: hidden;    /* Hide overflow */
  text-overflow: ellipsis; /* Add "..." at the end of clipped text */
}
.asset-library-container {
  display: flex;
  flex-wrap: wrap; /* Allows cards to wrap to the next line */
  justify-content: flex-start; /* Or center, space-around, etc. */
  padding: 10px; /* Optional spacing around the container */
  gap: 20px; /* Space between flex items (cards) */
}
/* The .asset-card itself has fixed width, so flex items won't grow/shrink by default.
   Set flex-grow: 0; flex-shrink: 0; on the card if you want to be absolutely sure. */
.asset-card {
    width: 300px;
    height: 400px;
    flex-grow: 0;
    flex-shrink: 0;
    /* ... other card styles ... */
}
.asset-card img {
  max-width: 100%; /* Ensures image is not wider than the card's content box */
  height: auto;    /* Maintains aspect ratio if only width is constrained by max-width */
  display: block; /* Removes extra space below inline images */
  /* OR, if you want the image to fill a specific portion and potentially be cropped: */
  /*
  width: 100%;
  height: 200px; /* Fixed height for the image area within the card */
  object-fit: cover; /* Scales image to maintain aspect ratio while filling dimensions, cropping if necessary */
  object-position: center; /* Centers the image within its box if object-fit: cover is used */
  
}
.asset-info p {
  /* For multi-line text, you might need a fixed height and overflow:hidden or auto,
     or use line-clamping (more complex CSS) if you want "..." after N lines. */
  height: 60px; /* Example: fixed height for description */
  overflow: hidden;
  /* text-overflow: ellipsis; Note: text-overflow for multi-line is tricky and often requires JS or more advanced CSS like -webkit-line-clamp */
}
.asset-card {
  width: 300px; /* Or your desired fixed width */
  height: 400px; /* Or your desired fixed height */
  border: 1px solid #ccc; /* Optional: for card appearance */
  margin: 10px; /* Optional: for spacing between cards */
  background-color: #fff; /* Optional: card background */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: card shadow */
  /* Important for content handling: */
  overflow: hidden; /* Prevents content from spilling out */
}
.upload-zone {
    border: 2px dashed var(--input-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
    background-color: var(--input-bg);
    cursor: pointer;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}
.upload-zone i {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}
.upload-zone p {
    margin: 0;
    color: var(--light-text);
    font-size: 0.9rem;
}
.upload-zone p span {
    color: var(--bs-link-color);
    font-weight: 500;
    text-decoration: underline;
}

.asset-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.asset-filters input[type="search"] { flex-grow: 1; min-width: 150px; }
.asset-filters select { min-width: 120px; }


.assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    overflow-y: auto; /* Scroll per la griglia se eccede */
    flex-grow: 1; /* Occupa spazio rimanente */
    padding: 0.25rem; /* Spazio per focus rings */
}
.asset-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow var(--transition-speed);
    background-color: var(--card-bg);
}
.asset-item:hover, .asset-item:focus-within {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}
.asset-thumbnail {
    height: 100px;
    background-size: cover;
    background-position: center;
    background-color: var(--input-bg); /* Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
}
.asset-thumbnail.text-thumbnail i,
.asset-thumbnail.video-thumbnail i {
    font-size: 2.5rem;
    color: var(--secondary-color);
}
.asset-info {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}
.asset-name {
    font-weight: 500;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asset-tag {
    display: inline-block;
    padding: .15em .4em;
    font-size: .7em;
    font-weight: 500;
    border-radius: 4px;
    margin-right: 0.3rem;
    margin-bottom: 0.2rem; /* Spazio se vanno a capo */
}
.image-tag { background-color: var(--info-color); color: white; }
.video-tag { background-color: var(--danger-color); color: white; }
.copy-tag { background-color: var(--accent-color); color: var(--bs-body-bg); }
.script-tag { background-color: var(--success-color); color: white; }

.asset-date {
    display: block;
    color: var(--light-text);
    font-size: 0.7rem;
    margin-top: 0.25rem;
}

/* Asset Detail Drawer */
.creation-asset-detail-drawer {
    position: fixed;
    top: 0;
    right: -400px; /* Nascosto fuori schermo */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background-color: var(--card-bg);
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    z-index: 1055; /* Sopra la FAB, sotto modal a schermo intero */
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
.creation-asset-detail-drawer.active {
    right: 0;
}
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.drawer-header h3 { margin: 0; font-size: 1.2rem; color: var(--heading-text); }
.drawer-close-btn { font-size: 1.1rem; }

.drawer-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1;
}
.drawer-preview-area {
    margin-bottom: 1.5rem;
    text-align: center;
}
.drawer-preview-area img {
    max-width: 100%;
    max-height: 250px;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}
.placeholder-preview.large-text-thumbnail {
    height: 150px; width: 100%;
    background-color: var(--input-bg);
    border: 1px dashed var(--input-border);
    border-radius: var(--border-radius);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--secondary-color);
}
.placeholder-preview.large-text-thumbnail i { margin-bottom: 0.5rem; }


.drawer-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background-color: var(--input-bg);
}

/* Floating Action Button (FAB) */
.creation-fab {
    position: fixed;
    bottom: calc(var(--current-subnav-height, 50px) + 1.5rem + 50px); /* Sopra la barra di navigazione se è sticky */
    /* Se la barra di navigazione non è sticky, usa solo: bottom: 1.5rem; */
    right: 1.5rem;
    width: 56px;
    height: 56px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    border: none;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1040;
    transition: transform 0.2s ease, background-color var(--transition-speed);
}
.creation-fab:hover {
    transform: scale(1.05);
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}


/* Navigation Controls for Creation Hub */
.creation-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem; /* Spazio sopra la barra */
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--banner-bg);
    /* Rimuovi sticky se la barra di setup è sticky e vuoi coerenza, altrimenti aggiungilo:
    position: sticky;
    bottom: 0;
    left:0; right:0;
    z-index: 1000; */
}
.creation-navigation-controls .btn i {
    margin-right: 0.3rem;
}
.creation-navigation-controls .btn:disabled {
    background-color: var(--secondary-color);
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--secondary-color);
}

/* Responsive adjustments for Asset Library and Layout */
@media (max-width: 768px) { /* Smartphone */
    .creation-asset-library-card .creation-card-body {
        max-height: 60vh; /* Più altezza su mobile */
    }
    .assets-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Thumbnail più piccole */
    }
    .creation-fab { /* Sposta FAB un po' più in alto se la barra di navigazione è ingombrante */
        bottom: calc(var(--current-subnav-height, 50px) + 1rem + 65px);
    }
    .creation-asset-detail-drawer {
        max-width: 90%; /* Drawer più largo su mobile */
    }
}
/* === Campaign Management Specific Styles === */

#managementPageContent {
    padding: 1.5rem;
}

.mgmt-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mgmt-page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}

.mgmt-subtitle {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.mgmt-progress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.mgmt-progress-breadcrumb strong {
    color: var(--primary-color);
}

.mgmt-progress-bar-container {
    flex-grow: 1;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.mgmt-progress-bar-fill {
    background-color: var(--primary-color);
    height: 100%;
    border-radius: var(--border-radius);
    transition: width 0.3s ease-in-out;
}

.mgmt-main-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Colonne flessibili */
    gap: 1.5rem;
}

@media (min-width: 1200px) { /* Layout a 2 colonne per schermi grandi */
    .mgmt-main-layout {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* Prima colonna leggermente più larga */
    }
}


.mgmt-column-left, .mgmt-column-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mgmt-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;
}

.mgmt-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mgmt-card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.mgmt-card-icon {
    font-size: 1.2em;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.mgmt-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

/* Audience Manager Tabs */
.mgmt-tabs-nav {
    display: flex;
    gap: 0.25rem; /* Spazio minimo tra i tab */
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1rem;
}
.mgmt-tab-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--menu-text);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.mgmt-tab-link:hover {
    color: var(--heading-text);
    background-color: var(--menu-hover-bg);
}
.mgmt-tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

/* List View (Saved Audiences, Rules) */
.mgmt-list-view {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mgmt-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--input-border);
    gap: 1rem;
}
.mgmt-list-item:last-child { border-bottom: none; }
.mgmt-list-item:hover { background-color: var(--menu-hover-bg); }

.item-main-info .item-name {
    font-weight: 500;
    color: var(--bs-body-color);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}
.item-main-info .item-meta {
    font-size: 0.8rem;
    color: var(--light-text);
}
.item-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }
.btn-xs { /* Bottone extra piccolo */
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}
.btn-xs i { font-size: 0.8em; margin-right:0; }


/* Table Styling */
.mgmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.mgmt-table th, .mgmt-table td {
    padding: 0.6rem 0.8rem; /* Padding ridotto per tabelle più dense */
    text-align: left;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: middle;
}
.mgmt-table th {
    font-weight: 600;
    color: var(--heading-text);
    background-color: var(--input-bg); /* Sfondo leggero per header tabella */
}
.mgmt-table tbody tr:hover { background-color: var(--menu-hover-bg); }


/* Budget & Scheduling */
.budget-schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .budget-schedule-grid { grid-template-columns: 1fr; }
}
.budget-schedule-grid h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--heading-text);
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: 0.5rem;
}
.preset-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Live Monitor */
.live-monitor-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.live-monitor-filters input[type="search"],
.live-monitor-filters select {
    flex-grow: 1;
    min-width: 130px; /* Minima larghezza per i filtri */
}

.live-status-table .status-badge { /* Badge nella tabella */
    font-size: 0.75em; padding: .3em .6em;
}
.status-badge.status-ended { /* Badge specifico per status "ended" */
    background-color: var(--secondary-color);
    color: white;
}


.real-time-feed {
    margin-top: 1rem;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.85rem;
    background-color: var(--input-bg);
}
.feed-item {
    padding: 0.3rem 0;
    color: var(--bs-body-color);
    border-bottom: 1px dashed var(--border-color-2);
}
.feed-item:last-child { border-bottom: none; }
.feed-item .timestamp {
    font-size: 0.9em;
    color: var(--light-text);
    margin-left: 0.5rem;
    float: right;
}
.feed-item.new-lead { color: var(--success-color); }
.feed-item.spend-update { color: var(--info-color); }
.feed-item.ctr-alert { color: var(--warning-color); }


/* Alerts & Integrations - Rule Builder */
.rule-builder-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
}
.rule-builder-form span { font-size: 0.9rem; color: var(--light-text); }
.rule-builder-form .form-control-sm { flex-grow: 1; min-width: 80px; }
.rule-builder-form .btn-sm { flex-shrink: 0; }

.rules-list { margin-top: 0.5rem; } /* Riusa .mgmt-list-view */

/* Navigation Controls for Management Hub */
.mgmt-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--banner-bg);
}
.mgmt-navigation-controls .btn i {
    margin-right: 0.3rem;
}
.btn-success { /* Stile per bottone "Success" se non esiste */
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}
.btn-success:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--success-color) 85%, black);
    border-color: color-mix(in srgb, var(--success-color) 85%, black);
}
/* === Analytics & Reporting Specific Styles === */

#analyticsPageContent {
    padding: 1.5rem;
}

.analytics-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.analytics-page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}

.analytics-subtitle {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.analytics-progress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.analytics-progress-breadcrumb strong {
    color: var(--primary-color);
}

.analytics-progress-bar-container {
    flex-grow: 1;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.analytics-progress-bar-fill {
    background-color: var(--primary-color);
    height: 100%;
    border-radius: var(--border-radius);
    transition: width 0.3s ease-in-out;
}

.analytics-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* Layout principale 2/3 e 1/3 */
    gap: 1.5rem;
}

@media (max-width: 1024px) { /* Tablet e inferiori */
    .analytics-main-layout {
        grid-template-columns: 1fr; /* Layout a colonna singola */
    }
}

.analytics-column-main,
.analytics-column-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analytics-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;
}

.analytics-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.analytics-card-header.with-actions {
    justify-content: space-between;
}
.analytics-card-header .header-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.analytics-card-header .header-actions .form-control-sm {
    min-width: 150px; /* Larghezza per il date range selector */
}


.analytics-card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.analytics-card-icon {
    font-size: 1.2em;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.analytics-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

/* Data Import Card */
.data-import-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.last-import-timestamp {
    font-size: 0.85rem;
    color: var(--light-text);
    margin-left: auto; /* Allinea a destra */
}

/* Performance Dashboard */
.metric-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.metric-tile {
    background-color: var(--input-bg); /* Sfondo leggermente diverso per i tile */
    padding: 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--input-border);
}
.metric-tile .metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color); /* Evidenzia il valore */
    margin-bottom: 0.25rem;
}
.metric-tile .metric-label {
    font-size: 0.8rem;
    color: var(--light-text);
}

.analytics-section-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

.analytics-tabs-nav { /* Simile a mgmt-tabs-nav ma con prefisso analytics */
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--bs-border-color);
    margin-bottom: 1rem;
}
.analytics-tab-link {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--menu-text);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}
.analytics-tab-link:hover {
    color: var(--heading-text);
    background-color: var(--menu-hover-bg);
}
.analytics-tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.chart-container-placeholder {
    min-height: 300px; /* Altezza minima per il grafico */
    /* background-color: var(--input-bg);
    border: 1px dashed var(--input-border);
    border-radius: var(--border-radius); */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.analytics-chart-panel { width: 100%; } /* Assicura che il canvas occupi lo spazio */


.analytics-comparison-table .change {
    font-size: 0.85em;
    font-weight: 500;
}
.analytics-comparison-table .change.positive { color: var(--success-color); }
.analytics-comparison-table .change.negative { color: var(--danger-color); }
.analytics-comparison-table .change.neutral { color: var(--secondary-color); }
.analytics-comparison-table .change i { margin-right: 0.2em; }


/* AI-Powered Recommendations */
.ai-insights-deck {
    display: flex;
    overflow-x: auto; /* Abilita scroll orizzontale */
    gap: 1rem;
    padding-bottom: 1rem; /* Spazio per la scrollbar se visibile */
    scrollbar-width: thin; /* Per Firefox */
    scrollbar-color: var(--secondary-color) var(--input-bg); /* Per Firefox */
}
/* Stili scrollbar per Webkit (Chrome, Safari, Edge) */
.ai-insights-deck::-webkit-scrollbar { height: 8px; }
.ai-insights-deck::-webkit-scrollbar-track { background: var(--input-bg); border-radius: 4px; }
.ai-insights-deck::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 4px; border: 2px solid var(--input-bg); }
.ai-insights-deck::-webkit-scrollbar-thumb:hover { background-color: var(--primary-color); }


.insight-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    min-width: 280px; /* Larghezza minima per ogni card insight */
    flex: 0 0 auto; /* Non si restringe/espande, usa la sua larghezza */
    display: flex;
    gap: 0.75rem;
}
.insight-card-icon i {
    font-size: 1.5rem;
    color: var(--accent-color); /* Colore accento per le icone insight */
    margin-top: 0.25rem;
}
.insight-card-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0;
    margin-bottom: 0.3rem;
}
.insight-card-content p {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}
.insight-action-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-link-color);
    text-decoration: none;
}
.insight-action-link:hover {
    text-decoration: underline;
    color: var(--bs-link-hover-color);
}
.insight-action-link i { font-size: 0.8em; }


/* Export & Scheduling */
.export-controls-toolbar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem; /* Spazio prima del pannello schedule */
}
/* Riuso .creation-inline-accordion per lo scheduling */
#scheduleReportForm .form-control-sm { margin-bottom: 0.5rem; } /* Spazio extra tra i campi del form schedule */
#scheduleReportForm .btn-block { margin-top: 0.5rem; }


/* Navigation Controls for Analytics Hub */
.analytics-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--banner-bg);
}
.analytics-navigation-controls .btn i {
    margin-right: 0.3rem;
}
/* === A/B Testing & Optimization Specific Styles === */

#abtestingPageContent {
    padding: 1.5rem;
}

.abtest-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.abtest-page-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}

.abtest-subtitle {
    font-size: 1rem;
    color: var(--light-text);
    margin-bottom: 1rem;
}

.abtest-progress-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.abtest-progress-breadcrumb strong {
    color: var(--primary-color);
}

.abtest-progress-bar-container {
    flex-grow: 1;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.abtest-progress-bar-fill {
    background-color: var(--primary-color);
    height: 100%;
    border-radius: var(--border-radius);
    transition: width 0.3s ease-in-out;
}

.abtest-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); /* Layout principale, colonna setup più larga */
    gap: 1.5rem;
}

@media (max-width: 1024px) { /* Tablet e inferiori */
    .abtest-main-layout {
        grid-template-columns: 1fr; /* Layout a colonna singola */
    }
}

.abtest-column-left,
.abtest-column-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.abtest-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;
}

.abtest-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.abtest-card-header h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.abtest-card-icon {
    font-size: 1.2em;
    color: var(--primary-color);
    width: 24px;
    text-align: center;
}

.abtest-card-body {
    padding: 1.5rem;
    flex-grow: 1;
}

.abtest-section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}


/* Variant Setup */
.variant-block {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--input-bg);
}
.variant-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.variant-label-input {
    flex-grow: 1;
    margin-right: 0.5rem;
    font-weight: 500;
}
.remove-variant-btn i { margin-right: 0; }

.variant-content-area { margin-top: 0.5rem; }
.asset-picker-btn { width: 100%; text-align: left; }
.asset-picker-btn i { margin-right: 0.5rem; }
.picked-asset-name {
    display: block;
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 0.5rem;
    font-style: italic;
}

.form-row { /* Per date affiancate */
    display: flex;
    gap: 1rem;
}
.form-row .form-group {
    flex: 1;
}


/* Live Test Monitor */
/* Riuso .mgmt-tabs-nav e .mgmt-tab-link da Management CSS per coerenza */
/* Riuso .mgmt-tab-content e .mgmt-tab-panel da Management CSS */

.variant-summary-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.variant-summary-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
}
.variant-summary-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--heading-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.variant-summary-card p {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    margin-bottom: 0.25rem;
}
.variant-summary-card .metric {
    color: var(--light-text);
    min-width: 80px; /* Allineamento */
    display: inline-block;
}
.winner-badge {
    font-size: 0.75em;
    padding: 0.2em 0.5em;
    background-color: var(--success-color);
    color: white;
    border-radius: var(--border-radius);
    margin-left: 0.5rem;
}
.variant-summary-card.winner {
    border-left: 4px solid var(--success-color);
}

.abtest-details-table { /* Riuso .mgmt-table */
    font-size: 0.85rem; /* Tabella più piccola */
}
.abtest-details-table th, .abtest-details-table td {
    padding: 0.5rem;
}


/* Automated Winner Selection */
.alert-box { /* Stile per l'area di notifica del vincitore */
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    border: 1px solid transparent;
}
.alert-box.success {
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border-color: var(--success-color);
}
.alert-box p { margin: 0 0 0.75rem 0; }
.alert-box .btn-success i { margin-right: 0.3rem; }


/* "What Won & Why" Report */
.ai-insight-panel p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem;
}
.data-snapshot-placeholder {
    min-height: 80px;
    background-color: var(--input-bg);
    border: 1px dashed var(--input-border);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Next-Step Recommendations - Riusa stile .ai-insights-deck e .insight-card da Analytics */


/* Navigation Controls for A/B Testing Hub */
.abtest-navigation-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--banner-bg);
}
.abtest-navigation-controls .btn i {
    margin-right: 0.3rem;
}

/* Stile per input-group-text se usato con winner metric threshold */
.input-group-text {
    padding: 0.3rem 0.6rem; /* Da .form-control-sm */
    font-size: 0.8rem; /* Da .form-control-sm */
    background-color: var(--bs-border-color); /* Sfondo diverso per distinguerlo */
    border: 1px solid var(--input-border);
    border-left: none; /* Per unire con l'input */
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    color: var(--light-text);
}
/* Nel tuo blocco <style> in index.html */
.btn.btn-warning { /* O usa una classe Bootstrap esistente se usi Bootstrap */
    background-color: var(--warning-color);
    color: var(--bs-body-bg); /* Testo scuro su sfondo giallo per leggibilità */
    border-color: var(--warning-color);
}
body.light-mode .btn.btn-warning {
    color: var(--bs-body-color); /* Assicura contrasto anche in light mode */
}
.btn.btn-warning:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--warning-color) 85%, black);
    border-color: color-mix(in srgb, var(--warning-color) 85%, black);
}
/* Nel tuo blocco <style> in index.html */
#metaReconnectModal .setup-modal-header h3 {
    color: var(--bs-body-bg); /* O un altro colore scuro che stia bene su sfondo giallo/arancio */
}
/* Assicurati che i bottoni nel footer siano visibili contro il loro sfondo */
#metaReconnectModal .setup-modal-footer .btn-primary {
    /* Se necessario, aggiusta il colore del testo del bottone primario quando è nel modale */
}
/* === Fullscreen Modal Specific Styles === */

/* Stile per l'Overlay del Modale (Contenitore Esterno) */
/* La classe .large-campaign-modal viene applicata all'elemento .setup-modal-overlay */
.setup-modal-overlay.large-campaign-modal {
    position: fixed; /* Copre l'intera viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Larghezza completa della viewport */
    height: 100vh; /* Altezza completa della viewport */
    background-color: rgba(0, 0, 0, 0.75); /* Sfondo scuro semi-trasparente */
    display: flex; /* Per centrare .setup-modal-card (anche se ora è a schermo intero) */
    align-items: center;
    justify-content: center;
    z-index: 1060; /* Assicura che sia sopra gli altri contenuti */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transizione fluida */
}

.setup-modal-overlay.large-campaign-modal.active {
    opacity: 1;
    visibility: visible;
}

.large-campaign-modal .setup-modal-card {
    width: 90%;                       /* Occupa il 90% della larghezza della viewport */
    max-width: 850px;                  /* Ma non più di 850px, per leggibilità su schermi grandi */
    height: auto;                      /* L'altezza sarà determinata dal contenuto */
    max-height: 90vh;                  /* Altezza massima al 90% della viewport. 
                                          Se il contenuto è più lungo, il corpo del modale diventerà scrollabile. */
    display: flex;
    flex-direction: column;
    overflow: hidden;                  /* L'overflow del contenuto è gestito da .setup-modal-body */
    margin: auto;                      /* Centra il modale verticalmente e orizzontalmente nell'overlay */
    border-radius: var(--border-radius-lg); /* Ripristina gli angoli arrotondati */
    box-shadow: var(--shadow-lg);       /* Ripristina un'ombra standard per i modali */
    
    /* Animazione di entrata (mantenuta) */
    transform: scale(0.95); 
    transition: transform 0.3s ease-out 0.05s, opacity 0.3s ease-out 0.05s; /* Modificato per corrispondere a .setup-modal-card */
    opacity: 0; /* Inizia trasparente per l'animazione */

    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
}

/* Stile per quando il modale è attivo (mantenuto per l'animazione) */
.large-campaign-modal .setup-modal-body {
    flex-grow: 1;                /* Fa sì che il corpo occupi lo spazio disponibile */
    overflow-y: auto;            /* Abilita lo scroll verticale interno se necessario */
    padding: 1.5rem;             /* Padding interno per il contenuto del modale */
    background-color: var(--bs-body-bg); /* Sfondo per il corpo del modale */
}
.large-campaign-modal .setup-modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--input-bg);
}

.large-campaign-modal .setup-modal-header h3 {
    margin: 0;
    font-size: 1.25rem; /* Dimensione del titolo */
    font-weight: 600;
    color: var(--heading-text); /* Colore del titolo */
}

.large-campaign-modal .setup-modal-close-btn {
    background: none;
    border: none;
    color: var(--secondary-color); /* Colore icona di chiusura */
    font-size: 1.5rem; /* Dimensione icona di chiusura */
    padding: 0.25rem;
    line-height: 1; /* Per un miglior allineamento */
    cursor: pointer;
}
.large-campaign-modal .setup-modal-close-btn:hover {
    color: var(--bs-body-color); /* Colore al passaggio del mouse */
}

.large-campaign-modal .setup-modal-body {
    flex-grow: 1;                /* Riempie lo spazio tra header e footer */
    overflow-y: auto;            /* Abilita lo scroll interno */
    padding: 1.5rem;
    background-color: var(--bs-body-bg);
}
.large-campaign-modal #metaAdsScriptModalFooter {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 1.25rem; 
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--input-bg);
    min-height: auto; 
}

.large-campaign-modal #metaAdsScriptModalFooter .btn {
    padding: 0.2rem 0.8rem; 
    font-size: 0.78rem;     
    line-height: 1.3;        
    min-height: auto;        
}

/* Stile specifico per il testo e l'icona dentro i bottoni nel footer */
.large-campaign-modal #metaAdsScriptModalFooter .btn .btn-text,
.large-campaign-modal #metaAdsScriptModalFooter .btn i {
    vertical-align: middle; 
}

.large-campaign-modal #metaAdsScriptModalFooter .btn i {
    margin-right: 0.3rem; 
    font-size: 0.9em;     
}
/* Opzionale: se vuoi che il bottone "Reset" sia ancora più piccolo o diverso */
.large-campaign-modal #metaAdsScriptModalFooter .btn-tertiary {
    /* padding: 0.15rem 0.6rem; */ /* Esempio per renderlo ancora più compatto */
    /* font-size: 0.75rem; */
}
/* Stili aggiuntivi per gli elementi DENTRO il .setup-modal-body, se necessario */
/* Ad esempio, per le card del builder (Campaign, Ad Set, Ad Creative) dentro il modale a schermo intero */
.large-campaign-modal .setup-modal-body .mgmt-card {
    /* Potresti voler rimuovere o ridurre l'ombra delle card interne se il modale è già scuro */
    box-shadow: var(--shadow-sm); /* Ombra più leggera per le card interne */
    border: 1px solid var(--border-color-2); /* Bordo per separazione visiva */
    margin-bottom: 1.5rem; /* Spazio tra le card del builder */
}
.large-campaign-modal .setup-modal-body .mgmt-card:last-child {
    margin-bottom: 0; /* Rimuovi margine inferiore per l'ultima card */
}

/* Stile per la barra di progresso DENTRO il modale */
.large-campaign-modal #campaignBuilderProgressInsideModal {
    margin-bottom: 1.5rem; /* Spazio sotto la barra di progresso */
    /* Altri stili specifici se necessario */
}
/* ... regola esistente per #campaignBuilderModalFooter ... */

.large-campaign-modal #campaignBuilderModalFooter .btn {
    padding-top: 0.2rem;    /* Valore originale era 0.4rem */
    padding-bottom: 0.2rem; /* Valore originale era 0.4rem */
    font-size: 0.8rem;      /* Opzionale: valore originale era 0.85rem */
    /* Manteniamo padding laterale originale per non renderli troppo stretti: */
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}
/* Kebab Menu Styles for Campaign Comparison Table */
.actions-cell {
    text-align: center;
    vertical-align: middle; /* Ensures kebab is vertically centered with text */
}

.kebab-menu-container {
    position: relative; /* Allows dropdown to be positioned relative to this */
    display: inline-block;
}

.kebab-btn {
    background: none;
    border: none;
    color: var(--light-text); /* Use your theme's light text color */
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1rem; /* Adjust for desired icon size */
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kebab-btn:hover,
.kebab-btn:focus {
    background-color: var(--menu-hover-bg); /* Your theme's hover background */
    color: var(--heading-text); /* Your theme's heading text color */
    outline: none;
}

.kebab-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0; /* Align to the right of the kebab button */
    top: calc(100% + 2px); /* Position slightly below the kebab button */
    background-color: var(--card-bg); /* Your theme's card background */
    border: 1px solid var(--bs-border-color); /* Your theme's border color */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md); /* Your theme's medium shadow */
    z-index: 100; /* Ensure it's above other table content */
    min-width: 140px; /* Minimum width for the dropdown */
    padding: 0.3rem 0;
}

.kebab-dropdown-menu.active {
    display: block; /* Show when active */
}

.kebab-menu-item {
    display: flex; /* For aligning icon and text */
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.9rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--bs-body-color); /* Your theme's body text color */
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kebab-menu-item:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.kebab-menu-item i.fas { /* Styling for Font Awesome icons within menu items */
    margin-right: 0.6rem;
    width: 1em; /* Helps with alignment if icons have different widths */
    text-align: center;
    color: var(--secondary-color); /* Optional: slightly muted icon color */
}
.kebab-menu-item:hover i.fas {
    color: var(--primary-color); /* Brighter icon color on hover */
}

/* Specifically for delete action for visual cue */
.kebab-menu-item[data-action="delete"]:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); /* Light red background on hover */
    color: var(--danger-color); /* Red text on hover */
}
.kebab-menu-item[data-action="delete"]:hover i.fas {
    color: var(--danger-color);
}
/* Ensure these or similar styles are in your main <style> block */

/* This class is likely already defined for your Analytics Dashboard */
.metric-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Min width 140px for each tile */
    gap: 1rem;
    margin-top: 1rem;      /* Space above the grid */
    margin-bottom: 1.5rem; /* Space below the grid */
}

.metric-tile {
    background-color: var(--input-bg);
    padding: 1.25rem 1rem; /* Increased padding a bit */
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid var(--input-border);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.metric-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.metric-tile .metric-icon { /* New class for icons inside tiles */
    font-size: 1.75rem; /* Larger icon */
    margin-bottom: 0.75rem;
    color: var(--primary-color); /* Use primary color for icons, or var(--secondary-color) */
    display: block; /* Make icon a block to take up space */
}

.metric-tile .metric-value {
    display: block;
    font-size: 1.65rem; /* Slightly larger value text */
    font-weight: 600;
    color: var(--heading-text); /* Use heading text color for better contrast on input-bg */
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.metric-tile .metric-label {
    font-size: 0.85rem; /* Slightly larger label */
    color: var(--light-text);
    text-transform: uppercase; /* Uppercase labels for a more "dashboard" feel */
    font-weight: 500;
}

/* For the "Ready to get AI recommendations" text */
.ai-next-step-prompt {
    text-align: center;
    font-size: 1rem;
    color: var(--bs-link-color); /* Using link color for emphasis */
    margin-top: 1.5rem;
    padding: 0.75rem;
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); /* Light primary bg */
    border-radius: var(--border-radius);
    border: 1px solid var(--primary-color);
}

.ai-next-step-prompt i {
    margin-right: 0.5rem;
    animation: pulseArrow 1.5s infinite ease-in-out; /* Simple animation for the arrow */
}

@keyframes pulseArrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Styling for the "Analysis Complete for [Campaign Name]" title */
.analysis-main-title {
    font-size: 1.2rem; /* Adjust as needed */
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.5rem; /* Space below this title */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}
/* === Stili per il Modale di Analisi Campagna === */
.setup-modal-overlay.large-analysis-modal {
    /* Stessi stili di .large-campaign-modal per l'overlay se vuoi full-screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1070; /* Assicurati sia sopra altri modali se necessario */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.setup-modal-overlay.large-analysis-modal.active {
    opacity: 1;
    visibility: visible;
}

.large-analysis-modal .setup-modal-card {
    width: 90vw; /* Più largo */
    max-width: 1200px; /* Limite massimo per schermi molto grandi */
    height: 90vh; /* Più alto */
    max-height: 950px;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg); /* Usa lo sfondo delle card del tema */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg); /* Raggio più grande */
    box-shadow: var(--shadow-lg); /* Ombra più pronunciata */
    overflow: hidden; /* L'overflow è gestito dal body del modale */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.large-analysis-modal.active .setup-modal-card {
    transform: scale(1);
}

.large-analysis-modal .setup-modal-header {
    flex-shrink: 0; /* L'header non si riduce */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--input-bg); /* Leggermente diverso per l'header */
}

.large-analysis-modal .setup-modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--heading-text);
}

.large-analysis-modal .setup-modal-close-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 1.5rem;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
}
.large-analysis-modal .setup-modal-close-btn:hover {
    color: var(--bs-body-color);
}

.large-analysis-modal .setup-modal-body {
    flex-grow: 1; /* Il corpo si espande per riempire lo spazio */
    overflow-y: auto; /* Scroll verticale per il contenuto */
    padding: 1.5rem; /* Padding interno */
    background-color: var(--bs-body-bg); /* Sfondo principale dell'app per il contenuto */
}

/* Assicurati che gli stili per .card.analytics-card, .metric-tiles-grid, .metric-tile ecc.
   siano disponibili e funzionino bene anche all'interno di questo modale.
   Ad esempio, potresti voler dare un margine inferiore alle card interne: */
.large-analysis-modal .setup-modal-body .card.analytics-card {
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md); /* Ombra per le card interne */
}
.large-analysis-modal .setup-modal-body .card.analytics-card:last-child {
    margin-bottom: 0;
}

.large-analysis-modal .setup-modal-footer {
    flex-shrink: 0; /* Il footer non si riduce */
    /* Gli altri stili per il footer (padding, border-top, justify-content, background-color)
       sono già stati impostati nell'HTML inline o dovrebbero derivare da .setup-modal-footer generico. */
}
/* Aggiungi al tuo <style> se necessario */
.list-group {
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--border-radius);
}
.list-group-flush .list-group-item {
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
}
.list-group-flush .list-group-item:first-child {
    border-top-width: 0;
}
.list-group-flush .list-group-item:last-child {
    border-bottom-width: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem; /* Default Bootstrap, puoi aggiustare */
    color: var(--bs-body-color);
    text-decoration: none;
    background-color: var(--card-bg); /* O transparent se dentro una card */
    border: 1px solid var(--bs-border-color); /* Default Bootstrap */
}
.list-group-item + .list-group-item {
    border-top-width: 0; /* Rimuove doppio bordo */
}

/* Per i bottoni dentro la lista */
.list-group-item .btn-group .btn {
    /* Assicurati che i bottoni siano piccoli e ben allineati */
    padding: 0.2rem 0.4rem; /* btn-xs */
    font-size: 0.75rem;
}
.list-group-item .btn-group .btn i {
    font-size: 0.9em; /* Rendi le icone leggermente più piccole */
}
.kpi-card .change.neutral { color: var(--secondary-color); }
    /* Add these to your main <style> block in index.html */

/* Kebab Menu Styles for Tables */
.actions-cell {
    text-align: center; /* Or 'right' if you prefer */
    vertical-align: middle;
    position: relative; /* Allows dropdown to be positioned relative to this cell if needed */
}

.kebab-menu-container {
    position: relative;
    display: inline-block;
}

.kebab-btn {
    background: none;
    border: 1px solid transparent; /* Make it transparent or match theme */
    color: var(--light-text);
    padding: 0.3rem 0.6rem; /* Adjust padding for better click area */
    cursor: pointer;
    border-radius: var(--border-radius); /* Use your theme's border-radius */
    font-size: 1rem; /* Size of the ellipsis icon */
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kebab-btn:hover,
.kebab-btn:focus {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
    border-color: var(--input-border); /* Show a subtle border on hover/focus */
    outline: none;
}

.kebab-dropdown-menu {
    display: none; /* Hidden by default */
    position: absolute;
    right: 0; /* Align to the right of the kebab button */
    top: calc(100% + 4px); /* Position slightly below the kebab button */
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    z-index: 100; /* Ensure it's above other table content */
    min-width: 200px; /* Adjust as needed */
    padding: 0.5rem 0; /* Padding around menu items */
}

.kebab-dropdown-menu.active {
    display: block; /* Show when active */
}

.kebab-menu-item {
    display: flex; /* For aligning icon and text */
    align-items: center;
    width: 100%;
    padding: 0.6rem 1rem; /* Padding for each menu item */
    text-align: left;
    background: none;
    border: none;
    color: var(--bs-body-color);
    font-size: 0.9rem; /* Font size for menu items */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.kebab-menu-item:hover {
    background-color: var(--menu-hover-bg);
    color: var(--heading-text);
}

.kebab-menu-item i.fas {
    margin-right: 0.75rem; /* Space between icon and text */
    width: 1.1em; /* Helps with alignment */
    text-align: center;
    color: var(--secondary-color); /* Optional: slightly muted icon color */
}

.kebab-menu-item:hover i.fas {
    color: var(--primary-color); /* Brighter icon color on hover */
}
    /* Stili per rendere le scene dello storyboard come card scorrevoli orizzontalmente */
#videoStoryboardOutput {
    display: flex;         /* Allinea le scene-card in riga */
    overflow-x: auto;      /* Abilita scroll orizzontale se le card eccedono la larghezza */
    overflow-y: hidden;    /* Di solito non serve scroll verticale sul contenitore flex */
    padding: 1rem;         /* Mantiene il padding originale */
    padding-bottom: 1.5rem;/* Aggiunge spazio sotto per la scrollbar orizzontale */
    min-height: 280px;     /* Altezza minima per accomodare le card */
    max-height: 400px;     /* Puoi mantenere o aggiustare la max-height del contenitore */
    background-color: var(--input-bg); /* Sfondo ereditato */
    border: 1px solid var(--input-border); /* Bordo ereditato */
    border-radius: var(--border-radius); /* Raggio ereditato */
}

/* Stile per ogni card di scena */
#videoStoryboardOutput .scene-block {
    flex: 0 0 auto;        /* Le card non si restringono/espandono, mantengono la loro larghezza */
    width: 300px;          /* Larghezza fissa per ogni card (aggiustala come preferisci) */
    min-height: 240px;     /* Altezza minima per dare spazio al contenuto */
    max-height: 360px;     /* Altezza massima se il contenitore esterno ha una sua altezza fissa */
                           /* Se vuoi che le card si adattino all'altezza del contenitore, rimuovi max-height */
    overflow-y: auto;      /* Scroll verticale INTERNO alla card se il suo contenuto è troppo lungo */
    margin-right: 1rem;    /* Spazio tra le card */
    background-color: var(--card-bg); /* Sfondo per la card, diverso da quello del contenitore scrollabile */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 0.75rem;      /* Padding interno alla card */
    display: flex;         /* Per organizzare meglio il contenuto interno alla card */
    flex-direction: column;
}

#videoStoryboardOutput .scene-block:last-child {
    margin-right: 0; /* Nessun margine a destra per l'ultima card */
}

/* Stili per il contenuto dentro .scene-block (già esistenti, ma assicurati siano coerenti) */
#videoStoryboardOutput .scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-color-2);
    flex-shrink: 0; /* Impedisce che l'header si restringa */
}
#videoStoryboardOutput .scene-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}
#videoStoryboardOutput .scene-duration {
    font-size: 0.8rem;
    color: var(--light-text);
}
#videoStoryboardOutput .scene-content {
    font-size: 0.85rem;
    flex-grow: 1; /* Fa sì che il contenuto occupi lo spazio disponibile */
    overflow-y: auto; /* Scroll se il contenuto specifico di una scena è troppo lungo */
}
#videoStoryboardOutput .scene-content p {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
#videoStoryboardOutput .scene-content p strong {
    color: var(--heading-text);
    display: block; /* Rende il "Visual:", "On-Screen:" etc. su una riga separata */
    margin-bottom: 0.1rem;
}
#videoStoryboardOutput .scene-content i {
    margin-right: 0.4rem;
    color: var(--secondary-color);
    width: 1.1em; /* Allinea le icone */
    text-align: center;
}
    /* ... (i tuoi stili esistenti) ... */

/* Stile per #horizontal-navbar per la transizione */
#horizontal-navbar {
    /* Assicurati che questi siano i tuoi valori di default per l'altezza */
    /* height: var(--subnav-height); */ /* Commentato se usi max-height per la transizione */

    /* Stili per la transizione */
    transition: max-height 0.35s ease-in-out, padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, border-bottom-width 0.35s ease-in-out;
    overflow: hidden; /* Cruciale per la transizione di max-height */
    max-height: var(--subnav-height, 50px); /* Altezza iniziale quando espansa (usa la tua variabile) */
    opacity: 1;
    visibility: visible;
    /* padding-top, padding-bottom, border-bottom sono già nel tuo stile, la transizione li gestirà */
}

#horizontal-navbar.navbar-collapsed {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding-top: 0 !important; /* Sovrascrivi per assicurare la rimozione del padding */
    padding-bottom: 0 !important;
    border-bottom-width: 0 !important; /* Nascondi il bordo quando collassata */
    /* Se la navbar ha margini che vuoi rimuovere quando collassata, aggiungili qui */
    /* margin-top: 0; margin-bottom: 0; */
}

/* Stili per il pulsante di toggle (puoi personalizzare ulteriormente) */
/* #navbarToggleBtn è già parzialmente stilizzato da .action-btn */

/* Logica per cambiare icona (opzionale, gestita da JS ma puoi definire le classi qui) */
/* #navbarToggleBtn i.fa-bars { display: inline-block; } */
/* #navbarToggleBtn i.fa-times { display: none; } */
/* #navbarToggleBtn.collapsed-state i.fa-bars { display: none; } */ /* Non necessario se cambiamo la classe dell'icona */
/* #navbarToggleBtn.collapsed-state i.fa-times { display: inline-block; } */
/* =================================== */
/* === Nuovi Stili per User Menu Header === */
/* =================================== */

.mfc-um-header {
    display: flex;                 /* Abilita Flexbox */
    justify-content: space-between;/* Spinge il titolo a sinistra e il bottone a destra */
    align-items: center;           /* Allinea verticalmente gli elementi al centro */
    flex-wrap: nowrap;             /* Impedisce agli elementi di andare a capo su più righe */

    /* Padding: top right bottom left. Modifica padding-right per la distanza dal bordo */
    /* Esempio: 0.6rem è vicino, 1.2rem è più standard */
    padding: 0.8rem 0.6rem 0.8rem 1.2rem;

    font-size: 1rem;               /* Stile del testo per l'header */
    font-weight: 500;
    color: var(--heading-text);    /* Colore del testo dell'header */
    border-bottom: 1px solid var(--bs-border-color); /* Linea separatrice inferiore */
}

.mfc-um-header__title {
    white-space: nowrap;       /* Impedisce al testo "User Menu" di andare a capo */
    overflow: hidden;          /* Nasconde il testo se è troppo lungo (improbabile per "User Menu") */
    text-overflow: ellipsis;   /* Mostra "..." se il testo è troppo lungo e nascosto */
    flex-grow: 1;              /* Permette al titolo di occupare lo spazio disponibile,
                                  aiutando 'space-between' a spingere il bottone all'estrema destra. */
}

/* === User Menu Close Button Override === */
/* Using the ID selector for highest specificity to ensure these styles apply. */
#closeUserMenuBtn {
    /* 1. Reset the default appearance to be invisible */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* 2. Define the circular shape and size */
    width: 32px;
    height: 32px;
    border-radius: 50%; /* This makes the hover background a circle */

    /* 3. Center the 'x' icon perfectly */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* 4. Style the 'x' icon's color and size */
    color: var(--secondary-color);
    font-size: 1.2rem;

    /* 5. Create a smooth transition for the hover effect */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* This rule creates the circular background/shadow on hover */
#closeUserMenuBtn:hover {
    background-color: var(--menu-hover-bg) !important; /* This is the circular shadow */
    color: var(--bs-body-color) !important; /* Makes the 'x' icon brighter on hover */
}
/* ======================================== */
/* === STILI PER LA PAGINA IMPOSTAZIONI === */
/* ======================================== */

/* Contenitore principale della pagina impostazioni (dentro #main-dashboard-content) */
/* #settingsPageContent ha già style="display: none; height: 100%; overflow-y: auto;" inline,
   ma potresti voler aggiungere --bs-body-bg qui se non ereditato correttamente. */
#settingsPageContent {
    background-color: var(--bs-body-bg); /* Assicura lo sfondo corretto */
}

.settings-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.settings-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

#settingsBackToHomeBtn { /* Stile per il bottone "Back to Home" */
    padding: 0.5rem 0.8rem;
    font-size: 0.9rem;
    /* La classe btn-secondary-outline dovrebbe già essere definita nei tuoi stili globali.
       Se non lo è, dovrai definirla o usare una classe esistente. */
}

.settings-main-title {
    color: var(--heading-text);
    font-weight: 600;
    font-size: 1.7rem;
    margin: 0;
    flex-grow: 1;
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
}

.settings-card.modern {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
    transition: background-color var(--transition-speed) var(--transition-timing),
                border-color var(--transition-speed) var(--transition-timing),
                box-shadow 0.3s ease;
}

.settings-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 1.8rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-color-2);
}
.settings-card-title i { /* Icona nel titolo della card */
    color: var(--primary-color);
    font-size: 1.1em;
    margin-right: 0.75rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.8rem 2rem;
}

.settings-item {
    margin-bottom: 0; /* Il gap della griglia gestisce la spaziatura */
}

.settings-item label {
    display: block;
    font-weight: 500;
    color: var(--light-text);
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Input Groups (per username, email, ecc.) */
.settings-item .input-group.modern {
    display: flex;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.settings-item .input-group.modern:focus-within {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.settings-item .input-group.modern .form-control {
    border: none;
    background: transparent;
    flex-grow: 1;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--input-text);
    border-radius: 8px 0 0 8px; /* Raggio solo a sinistra */
    min-height: 42px;
    box-shadow: none !important;
    outline: none;
}
.settings-item .input-group.modern .form-control.readonly-input {
    color: var(--light-text);
    cursor: default;
}

.settings-item .input-group.modern .btn { /* Stile per i bottoni dentro gli input-group */
    border: none;
    background: transparent;
    border-left: 1px solid var(--input-border);
    border-radius: 0 8px 8px 0; /* Raggio solo a destra */
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    transition: background-color var(--transition-speed), color var(--transition-speed);
    min-height: 42px;
    font-size: 0.9rem;
}
.settings-item .input-group.modern .btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--primary-color);
}
.settings-item .input-group.modern .btn.btn-primary { /* Se usi un bottone primario nel gruppo */
    background-color: var(--primary-color);
    color: white;
    border-left: none;
}
.settings-item .input-group.modern .btn.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}

/* Subscription Info Box */
.subscription-info-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: center;
    gap: 1.5rem 2rem;
    padding: 1.5rem;
    background-color: color-mix(in srgb, var(--bs-body-bg) 50%, var(--card-bg));
    border-radius: 10px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color-2);
}
.plan-details, .plan-validity {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.label-text { /* Usato in subscription box */
     font-weight: 500;
     color: var(--light-text);
     font-size: 0.8rem;
     margin-bottom: 0.3rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
.plan-name-display {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.plan-validity p {
    font-size: 1.05rem;
    color: var(--bs-body-color);
    margin: 0;
    font-weight: 500;
}
.plan-action {
    justify-self: end; /* Allinea bottone a destra nella griglia */
}
@media (max-width: 600px) {
    .subscription-info-box { grid-template-columns: 1fr; }
    .plan-action { justify-self: start; margin-top: 1rem; }
}

/* Token Usage Grid */
.token-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}
.token-usage-card {
    border: 1px solid var(--border-color-2);
    border-radius: 10px;
    padding: 1.3rem;
    background-color: color-mix(in srgb, var(--bs-body-bg) 50%, var(--card-bg));
}
.token-usage-card h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.8rem;
}
.token-count {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.6rem;
}
.progress.modern {
    height: 8px;
    background-color: var(--input-bg);
    border-radius: 8px;
    margin-bottom: 0.6rem;
    overflow: hidden;
}
.progress.modern .progress-bar {
    /* background-color: var(--primary-color); */ /* JavaScript will now primarily handle this for dynamic coloring */
    /* The JavaScript function updateTokenProgressBar will set the appropriate success, warning, or danger color. */
    /* If JS fails, or for the initial 0% state, you might want a default, but it's safer to let JS manage it. */
    /* You can add a fallback here if desired: */
    background-color: var(--bs-body-bg); /* Fallback to almost invisible if JS doesn't set color, to show something is wrong */

    height: 100%; /* CRITICAL: Ensures the bar takes the full height of its parent track */
    display: flex;  /* Often used with progress bars for alignment if content were inside */
    align-items: center;
    justify-content: center;
    border-radius: inherit; /* Makes the inner bar's corners match the parent's radius smoothly */
    transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease-in-out; /* Added transition for color */
}
.token-usage-card small {
    font-size: 0.75rem;
    color: var(--light-text);
}

/* Stile generale per i bottoni nella pagina settings (se non già coperto) */
/* La tua classe .btn esistente in index.html potrebbe già coprire questo.
   Assicurati che .btn-primary, .btn-secondary-outline, .btn-danger
   siano definiti o adatta questi se necessario. */

.settings-card.modern .btn { /* Stile per bottoni direttamente dentro settings-card */
    /* ... eventuali aggiustamenti specifici ... */
}
.settings-card.logout-card { /* Card specifica per il logout */
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 2rem;
}

/* Stili Badge (per piano sottoscrizione) */
/* La tua classe .badge esistente potrebbe già coprire la forma base.
   Aggiungi qui i colori specifici se non li hai globalmente. */
.badge.bg-plan-free { background-color: var(--secondary-color) !important; color: white; }
.badge.bg-plan-plus { background-color: var(--success-color) !important; color: white; }
.badge.bg-plan-pro { background-color: var(--primary-color) !important; color: white; }
.badge.bg-plan-expired { background-color: var(--danger-color) !important; color: white; }
.badge.bg-plan-trial { background-color: var(--info-color) !important; color: white; } /* Added for Flow Network */
.badge.bg-plan-iconic { background-color: var(--accent-color) !important; color: var(--text-inverted); } /* Added for Flow Network */


/* Utility classes (dovresti averle già, ma per sicurezza) */
.settings-item .text-muted.mt-1 { margin-top: 0.25rem !important; color: var(--light-text) !important; }
.badge.ms-2 { margin-left: 0.5rem !important; }
.btn.w-100 { width: 100% !important; }
.btn i.me-2 { margin-right: 0.5rem !important; }
    #ageRangeSlider {
        height: 8px; /* Altezza della barra principale dello slider */
        margin-top: 15px; /* Aggiunge un po' di spazio sopra lo slider */
        margin-bottom: 20px; /* Aggiunge un po' di spazio sotto lo slider */
    }

    #ageRangeSlider .noUi-target {
        background: var(--input-bg, #e9ecef); /* Colore di sfondo della barra (track) */
        border-radius: 4px; /* Bordi arrotondati per la barra */
        border: 1px solid var(--input-border, #ced4da); /* Bordo per la barra */
        box-shadow: none; /* Rimuove eventuali ombre predefinite */
    }

    #ageRangeSlider .noUi-connect {
        background: var(--primary-color, #007bff); /* Colore della barra di connessione (tra i due handle) */
        border-radius: 4px; 
    }
    
    /* Stile degli handle (i selettori circolari) */
    #ageRangeSlider .noUi-handle {
        background: var(--primary-color, #007bff); /* Colore di sfondo dell'handle */
        border: 2px solid #fff; /* Bordo bianco per l'handle, per farlo risaltare */
        border-radius: 50%;     /* Rende l'handle perfettamente circolare */
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2); /* Un'ombra leggera per dare profondità */
        width: 20px;            /* Larghezza dell'handle */
        height: 20px;           /* Altezza dell'handle */
        right: -10px;           /* Regolazione fine della posizione orizzontale dell'handle */
        top: -7px;              /* Regolazione fine della posizione verticale dell'handle */
        cursor: grab;           /* Cambia il cursore quando si passa sopra l'handle */
    }

    #ageRangeSlider .noUi-handle:focus {
        outline: none; /* Rimuove il contorno di focus predefinito */
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 30%, transparent); /* Stile di focus personalizzato */
    }
    
    /* Rimuove i pseudo-elementi ::before e ::after degli handle se non necessari o se interferiscono */
    #ageRangeSlider .noUi-handle::before,
    #ageRangeSlider .noUi-handle::after {
        display: none;
    }

    /* Opzionale: Stili per i tooltip se decidi di usarli (noUiSlider li supporta) */
    /* #ageRangeSlider .noUi-tooltip {
        border: 1px solid var(--input-border, #ced4da);
        background: #fff;
        color: var(--text-color, #333);
        font-size: 0.8rem;
        padding: 2px 6px;
        border-radius: 3px;
    } */

    /* Stile per il testo che mostra i valori min/max sopra lo slider */
    label[for="ageRangeSlider"] { /* Se hai un label specifico per lo slider div */
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-color);
    }
    /* Oppure, se usi gli span come nel tuo HTML: */
    #ageRangeValueMinDisplay, 
    #ageRangeValueMaxDisplay,
    #ageRangePlusDisplay {
        font-weight: 600; /* Rende i numeri in grassetto */
        color: var(--primary-color); /* Colora i numeri con il colore primario */
    }
    /* === CSS for Enhanced Campaign Script Output Textarea === */
#modalMetaGeneratedScriptOutput {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Monospaced font for script-like text */
    font-size: 0.9rem;                          /* Slightly larger for readability */
    line-height: 1.6;                           /* Improved line spacing */
    padding: 1rem;                              /* More generous padding */
    background-color: var(--input-bg);          /* Consistent background */
    color: var(--input-text);                   /* Consistent text color */
    border: 1px solid var(--bs-border-color);   /* Consistent border */
    border-radius: var(--border-radius);        /* Consistent border radius */
    min-height: 200px;                          /* Ensure a good minimum height */
    max-height: 400px;                          /* Prevent it from becoming too tall */
    overflow-y: auto;                           /* Add scroll if content exceeds max-height */
    white-space: pre-wrap;                      /* Preserve formatting like line breaks and spaces */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* Subtle inner shadow for depth */
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed); /* Smooth transitions */
}

#modalMetaGeneratedScriptOutput:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent), /* Existing focus glow */
                inset 0 1px 3px rgba(0,0,0,0.05); /* Adjust inner shadow on focus */
}

/* Custom Scrollbar for the textarea to match the app's theme */
#modalMetaGeneratedScriptOutput::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#modalMetaGeneratedScriptOutput::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--input-bg) 80%, transparent); /* Slightly darker track */
}

#modalMetaGeneratedScriptOutput::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
    border: 2px solid var(--input-bg); /* Create a border effect around the thumb */
}

#modalMetaGeneratedScriptOutput::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}
/* === CSS for Displaying Richly Styled Generated Script in a DIV === */
.generated-script-display {
    font-family: "Poppins", sans-serif; /* Or your preferred body font */
    font-size: 0.9rem;
    line-height: 1.65;
    padding: 1rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    min-height: 250px;
    max-height: 500px; /* Adjust as needed */
    overflow-y: auto;
    word-wrap: break-word; /* Ensure long words don't break layout */
}

.generated-script-display h1,
.generated-script-display h2,
.generated-script-display h3,
.generated-script-display h4,
.generated-script-display h5,
.generated-script-display h6 {
    color: var(--heading-text);
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-weight: 600;
}

.generated-script-display h1 { font-size: 1.5em; }
.generated-script-display h2 { font-size: 1.35em; }
.generated-script-display h3 { font-size: 1.2em; border-bottom: 1px solid var(--border-color-2); padding-bottom: 0.3em;}
.generated-script-display h4 { font-size: 1.1em; color: var(--primary-color); }
.generated-script-display h5 { font-size: 1em; font-weight: 700; }

.generated-script-display p {
    margin-bottom: 0.8em;
}

.generated-script-display strong {
    font-weight: 600; /* Poppins 600 is quite bold */
    color: var(--heading-text); /* Make important keywords stand out */
}

.generated-script-display ul {
    list-style-type: disc; /* Or 'circle', 'square' */
    padding-left: 25px; /* Indent list items */
    margin-bottom: 1em;
}

.generated-script-display li {
    margin-bottom: 0.4em;
}

.generated-script-display hr.script-divider { /* For <hr class="script-divider"> */
    border: none;
    height: 1px;
    background-color: var(--border-color-2);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Custom Scrollbar for the display div */
.generated-script-display::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.generated-script-display::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--input-bg) 80%, transparent);
}

.generated-script-display::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 10px;
    border: 2px solid var(--input-bg);
}

.generated-script-display::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}
/* === CSS for Generated Script Section Cards === */

#modalMetaGeneratedScriptOutputDisplay.generated-script-display {
    min-height: 250px;
    max-height: 500px; 
    overflow-y: auto;
    word-wrap: break-word;
    padding: 0.75rem; 
    background-color: var(--bs-body-bg); /* Sfondo per il contenitore delle card */
}

.script-section-card {
    background-color: var(--card-bg); /* Sfondo per la card stessa */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem; 
    margin-bottom: 1rem; 
    box-shadow: var(--shadow-sm); 
}
.script-section-card:last-child {
    margin-bottom: 0; 
}


.script-section-card h1,
.script-section-card h2,
.script-section-card h3,
.script-section-card h4,
.script-section-card h5,
.script-section-card h6 {
    color: var(--heading-text);
    margin-top: 0.8em; 
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}
/* First heading in a card often looks better without top margin */
.script-section-card > *:first-child,
.script-section-card > h1:first-child,
.script-section-card > h2:first-child,
.script-section-card > h3:first-child,
.script-section-card > h4:first-child,
.script-section-card > h5:first-child,
.script-section-card > h6:first-child {
    margin-top: 0;
}
.script-section-card h2 { 
    font-size: 1.25em; 
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--border-color-2);
}
.script-section-card h3 { font-size: 1.15em; }
.script-section-card h4 { font-size: 1.05em; color: var(--primary-color); }

.script-section-card p {
    margin-bottom: 0.8em;
    color: var(--input-text); 
    line-height: 1.65; /* Consistent line height from original display */
}
.script-section-card strong {
    font-weight: 600; /* Or Poppins 700 if you prefer more emphasis */
    color: var(--heading-text);
}
.script-section-card ul,
.script-section-card ol {
    list-style-position: outside;
    padding-left: 25px; 
    margin-bottom: 1em;
    color: var(--input-text);
}
.script-section-card li {
    margin-bottom: 0.4em;
    line-height: 1.6;
}
.script-section-card hr { 
    border: none;
    height: 1px;
    background-color: var(--border-color-2);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
/* ... existing styles ... */

.campaign-script-tag {
    background-color: var(--bs-link-color); /* Or another distinct color like var(--info-color) */
    color: white;
}

/* You might also want a default .other-tag style if not already present */
.other-tag {
    background-color: var(--secondary-color);
    color: white;
}
/* Inside your <style> block in index.html */

.drawer-close-btn {
    background: none;
    border: none;
    color: var(--secondary-color); /* Standard icon color from your theme */
    font-size: 1.2rem;             /* A good size for the 'x' icon */
    padding: 0;                    /* Remove default padding if any, direct size control */
    line-height: 1;                /* Ensures icon is vertically centered */
    cursor: pointer;
    border-radius: 50%;            /* Makes the button circular */
    width: 36px;                   /* Explicit width for a circular button */
    height: 36px;                  /* Explicit height for a circular button */
    display: inline-flex;          /* Use flex to center the icon inside */
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed) var(--transition-timing), 
                color var(--transition-speed) var(--transition-timing);
}

.drawer-close-btn:hover {
    color: var(--bs-body-color);         /* Or var(--heading-text) for more emphasis on hover */
    background-color: var(--menu-hover-bg); /* Subtle background color on hover */
}

/* Optional: If your icon inside has specific margins you want to remove */
.drawer-close-btn i.fas {
    margin: 0; /* Removes any default Font Awesome icon margins */
    /* font-size: 1em; /* Icon will inherit size from button, or set explicitly */
}

/* --- Flow Network Module Specific Styles (Integrated from flowNetwork-supplemental.css) --- */
/* Your flowNetwork-supplemental.css content will be appended here */
/* --- General Layout Overrides / Additions for Flow Network --- */
#flowNetworkApp {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-body-bg); /* Use your existing background variable */
    color: var(--bs-body-color); /* Use your existing text color variable */
}

#flowNetworkNavbar.horizontal-navbar {
    /* Reuse existing .horizontal-navbar styles from main CSS */
    flex-shrink: 0;
}

#flowNetworkContent.main-dashboard-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem; /* This padding creates the margin you want */
    background-color: var(--bs-body-bg);
       display: block; /* <-- CHANGED from flex to block */

}

section[id$="PageContent"] { /* Target all sections ending with PageContent */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-grow: 1; /* <-- ADD THIS LINE */
}
section[id$="PageContent"].hidden {
    display: none !important;
}
/* --- MORE Compact Page Header Style --- */
/* In flowNetwork-supplemental.css, find and replace the existing .page-header rule with this one */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.0rem; /* <-- CHANGED THIS VALUE FROM 1.25rem to 0.5rem TO REDUCE THE SPACE */
    padding-bottom: 0.0rem; 
    border-bottom: 1px solid var(--bs-border-color);
}

.page-header h1 {
    font-size: 1.5rem; /* Slightly smaller for a tighter feel */
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}

.page-header .subtitle {
    font-size: 0.9rem;
    color: var(--light-text);
    margin: 0.1rem 0 0 0; /* Reduced top margin to bring it closer to the title */
}

/* --- Agent Map View --- */
/* In flowNetwork-supplemental.css, find and replace the existing .map-layout-grid rule with this one */

/* In flowNetwork-supplemental.css, find and replace the existing .map-layout-grid rule with this one */

/* ADD THIS NEW, CORRECTED RULE */
.map-layout-grid {
    display: grid;
        grid-template-columns: 400px 1fr; /* Wider sidebar for filters */

    gap: 1rem;
    flex-grow: 1; /* This is the key: it makes the grid fill available vertical space */
    min-height: 75vh; /* Give the grid a taller footprint */
}
@media (max-width: 992px) {
    .map-layout-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}

.map-sidebar {
    /* Inherits .card styles */
    padding: 1.5rem;
}

.map-container {
    /* Inherits .card styles */
    display: flex;
    flex-direction: column; /* For potential map overlays */
    position: relative;
    overflow: hidden; /* Ensure map doesn't overflow borders */
    height: 100%; /* Fill remaining height in grid */
 min-height: 600px; /* Minimum height for map */
}

#flowNetworkMap {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius); /* Match card border radius */
}

.map-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--card-bg-rgb, 13, 17, 23), 0.9); /* Semi-transparent overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 500;
    z-index: 10; /* Above map */
    transition: opacity 0.3s ease;
}

.map-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Allow clicks through when hidden */
}

.map-loading-overlay i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* Google Maps InfoWindow Styling */
.info-window-content {
    color: var(--bs-body-color); /* Text color inside InfoWindow */
    background-color: var(--card-bg); /* Background of InfoWindow content */
    padding: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    max-width: 250px;
}
.info-window-content h5 {
    color: var(--heading-text);
    font-size: 1.1rem;
}
.info-window-content .badge {
    padding: .3em .6em; /* Adjust badge padding for consistency */
    font-size: .75em;
    font-weight: 600;
    border-radius: var(--border-radius-sm, 4px);
}
.info-window-content .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
}
.info-window-content .light-text { /* Use your existing light-text class */
    color: var(--light-text);
}

/* Map drawing specific classes (Google Maps often adds these dynamically) */
.gmnoprint {
    border-radius: var(--border-radius); /* Apply custom border-radius to map controls */
}


/* --- My Referrals List --- */
.referral-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.referral-filters .form-control-sm {
    flex-grow: 1;
    min-width: 150px;
}

.referrals-table .status-badge {
    padding: .3em .6em;
    font-size: .75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: var(--border-radius);
    text-transform: capitalize;
}
.referrals-table .status-pending { background-color: var(--warning-color); color: var(--text-inverted); }
.referrals-table .status-accepted { background-color: var(--primary-color); color: white; }
.referrals-table .status-in-progress { background-color: var(--info-color); color: var(--text-inverted); }
.referrals-table .status-closed { background-color: var(--success-color); color: white; }
.referrals-table .status-rejected { background-color: var(--danger-color); color: white; }

/* Pagination controls */
.pagination-controls {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
    border-top: 1px solid var(--bs-border-color);
    margin-top: 1rem;
}


/* --- Send Referral Wizard --- */
.wizard-card {
    /* Inherits .card styles */
    padding: 2rem;
}

.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--bs-border-color);
    z-index: 0;
    transform: translateY(-50%);
}

.progress-step {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0;
    color: var(--light-text);
    font-weight: 500;
    position: relative;
    z-index: 1; /* Above the line */
    background-color: var(--card-bg); /* Cover the line */
    transition: color 0.3s, background-color 0.3s;
}

.progress-step.active {
    color: var(--primary-color);
}

.progress-step.completed {
    color: var(--success-color);
}

.progress-step::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--bs-border-color);
    border: 2px solid var(--bs-border-color);
    margin: 0 auto 0.5rem;
    transition: background-color 0.3s, border-color 0.3s;
}

.progress-step.active::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.progress-step.completed::before {
    content: '\f00c'; /* FontAwesome checkmark */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
}

.wizard-step-content {
    min-height: 300px; /* Ensure content area has space */
    padding: 1rem 0;
}

.wizard-step-content h2 {
    font-size: 1.5rem;
    color: var(--heading-text);
    margin-bottom: 1.5rem;
}

.search-results-dropdown {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--input-bg);
    margin-top: 0.5rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: var(--menu-hover-bg);
}

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

.search-result-item .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}

.selected-recipient-info {
    /* Inherits .card styles */
    padding: 1rem;
    margin-top: 1.5rem;
    background-color: var(--input-bg);
    border-left: 3px solid var(--primary-color);
}

.selected-recipient-info .avatar {
    width: 60px;
    height: 60px;
}

.property-lookup-result {
    padding: 1rem;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
}

.property-lookup-result h6 {
    font-size: 1rem;
    color: var(--heading-text);
}

.wizard-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* NDA Signing Modal specific styles */
#ndaSigningModal .large-campaign-modal {
    max-width: 900px; /* Wider for NDA preview */
    max-height: 90vh;
}
#ndaSigningModal .setup-modal-body {
    padding: 1rem; /* Adjust padding for iframe */
}


/* --- Statistics & Reports --- */
.content-locked {
    pointer-events: none;
    opacity: 0.6;
    filter: blur(2px);
    transition: opacity 0.3s, filter 0.3s;
}

.kpi-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.kpi-card {
    /* Inherit from existing kpi-card in main CSS */
    padding: 1.5rem;
    text-align: center;
}
.kpi-card h3 {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.kpi-card .value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
}
.kpi-card .change {
    font-size: 0.85rem;
}
.kpi-card .change.positive { color: var(--success-color); }
.kpi-card .change.negative { color: var(--danger-color); }
.kpi-card .change.neutral { color: var(--secondary-color); } /* Added for zero/no change */


.chart-container-placeholder {
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart-container-placeholder canvas {
    max-width: 100%; /* Ensure canvas fits in its container */
    height: 250px; /* Fixed height for charts */
}

/* --- Settings Page --- */
/* Reuse .settings-card.modern, .settings-card-title, .settings-grid, .settings-item from main CSS */
/* === CSS for Slide-in Listing Panel === */

#listing-panel {
    position: absolute;
    top: 0;
    right: -420px; /* Start off-screen. Width (400px) + Padding (20px) */
    width: 400px;
    height: 100%;
    background-color: var(--card-bg);
    border-left: 1px solid var(--bs-border-color);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.15);
    z-index: 20; /* Ensure it's above the map but below modals */
    display: flex;
    flex-direction: column;
    transition: right 0.35s ease-in-out;
}

#listing-panel.active {
    right: 0; /* Slide in */
}

#listing-panel-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;
}

#listing-panel-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--heading-text);
}

#listing-panel-close-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--secondary-color);
    cursor: pointer;
}
#listing-panel-close-btn:hover {
    color: var(--bs-body-color);
}


#listing-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Individual Card for the Panel */
.panel-listing-card {
    display: flex;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.panel-listing-card .card-image {
    position: relative; /* <-- THIS IS THE FIX */
    width: 120px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

.panel-listing-card .card-details {
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
}

.panel-listing-card .card-details .title {
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-listing-card .card-details .price {
    font-size: 1rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.panel-listing-card .card-details .specs {
    font-size: 0.8rem;
    color: var(--light-text);
    display: flex;
    gap: 0.8rem;
    margin-top: auto; /* Pushes specs to the bottom */
}

#listing-panel-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--input-bg);
    color: var(--light-text);
    font-size: 0.85rem;
    text-align: center;
    flex-shrink: 0;
}
body.light-mode .btn-secondary-outline:hover:not(:disabled) {
    color: var(--bs-body-color);
}
/* === Styles for Input with Icon (Icon on the Right) === */
.input-with-icon {
    position: relative; /* This is the positioning container for the icon */
}

.input-with-icon .fas.fa-search {
    position: absolute; /* Position the icon absolutely within the container */
    right: 12px; /* <-- CHANGED: Position from the right edge */
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text);
    font-size: 0.9rem;
    cursor: pointer; /* <-- ADDED: Changes cursor to a pointer on hover */
    transition: color 0.2s ease; /* Adds a nice transition effect */
}

.input-with-icon .fas.fa-search:hover {
    color: var(--primary-color); /* Makes the icon change color when you hover over it */
}

/* Adjust input padding to prevent text from overlapping the icon on the right */
.input-with-icon .form-control {
    padding-left: 0.8rem !important; /* Reset left padding to default */
    padding-right: 35px !important; /* <-- CHANGED: Increase right padding for the icon */
}
/* === Styles for Search Suggestions Dropdown === */
#searchSuggestionsDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--input-border);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--shadow-md);
    display: none; /* Hidden by default */
}

#searchSuggestionsDropdown.active {
    display: block; /* Shown via JS */
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--bs-border-color);
}
.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: var(--menu-hover-bg);
}

.suggestion-item .icon {
    margin-right: 0.8rem;
    color: var(--secondary-color);
}

.suggestion-item .text .main-text {
    font-weight: 500;
    color: var(--bs-body-color);
}
.suggestion-item .text .secondary-text {
    font-size: 0.8rem;
    color: var(--light-text);
}
/* === Enhanced Draw Area Filter Widget === */

.draw-filter-container {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow var(--transition-speed), border-color var(--transition-speed);
}

.draw-filter-container .filter-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0;
    margin-bottom: 1rem;
}

.draw-filter-container .form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--light-text);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}

/* Grid layout for the action buttons */
.draw-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 0.75rem; /* Space between the buttons */
    margin-top: 1rem;
}

.draw-actions-grid .btn {
    width: 100%;
}

/* Specific styling for the 'Draw' button when it's active (drawing mode) */
#drawGeoFilterBtn.drawing-active {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
}
#drawGeoFilterBtn.drawing-active:hover {
    background-color: color-mix(in srgb, var(--danger-color) 85%, black);
    border-color: color-mix(in srgb, var(--danger-color) 85%, black);
}
/* === Sidebar Layout Improvements === */

/* 1. Turns the body of the sidebar into a flexible column */
/* === Polished Filters & Search Sidebar Styling === */

/* 1. Refine the main header of the sidebar */
.map-sidebar .card-header h2 {
    font-size: 1.25rem; /* A bit smaller for a sleeker look */
    font-weight: 600;
    padding-bottom: 0.5rem;
    color: var(--heading-text);
}

/* 2. Create a consistent, modern style for all filter labels */
.map-sidebar .card-body .form-group > label {
    font-size: 0.75rem; /* Smaller, more professional label size */
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* === Sidebar Layout Improvements === */

/* 1. Turns the body of the sidebar into a flexible column */
/* ...and replace them with this code. */

.map-sidebar.card {
    display: flex;
    flex-direction: column;
}

/* 2. Make the card-body a flex container that grows to fill the available space */
.map-sidebar .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;  /* This is the key: it makes the body fill the space left by the header */
    min-height: 0; /* A flexbox fix to prevent overflow issues */
}

/* 3. Use margin-top: auto to push the buttons to the bottom of the card-body */
/* In flowNetwork-supplemental.css */

.sidebar-main-actions {
    margin-top: auto; /* This keeps the buttons at the bottom */
    padding-top: 0.75rem; /* REDUCED: This brings the buttons closer to the border above them */
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}
/* 3. Add consistent vertical spacing between each filter group */
.map-sidebar .card-body .form-group,
.map-sidebar .card-body .draw-filter-container {
    margin-bottom: 1.75rem; /* Creates a clean vertical rhythm */
}

/* 4. Make the "Draw Area Filter" widget blend in with other filters for consistency */
.draw-filter-container {
    background-color: transparent; /* Remove the card-in-card effect */
    border: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 1.75rem; /* Use the same consistent spacing */
}

/* 5. Restyle the title of the Draw Area filter to act as a standard label */
.draw-filter-container .filter-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0;
    border-bottom: none;
}

/* 6. Hide the redundant "SHAPE" label, as the title now serves this purpose */
.draw-filter-container .form-group label {
    display: none;
}

/* 7. Ensure input fields and dropdowns have a unified, clean look */
.map-sidebar .form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.map-sidebar .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-range-inputs .price-range-separator {
    color: var(--light-text);
}
/* === Authentication Modal Styles === */

/* Overlay for the entire modal, handles fading in/out */
.setup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}
.setup-modal-overlay.hidden {
    display: none !important;
}
.setup-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* The modal "card" itself */
.setup-modal-card.card.auth {
    width: 100%;
    max-width: 450px;
    margin: 20px;
    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;
    transform: scale(0.95);
    transition: transform 0.3s ease-out;
}
.setup-modal-overlay.active .setup-modal-card {
    transform: scale(1);
}

/* Modal Header */
.setup-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color-2);
    flex-shrink: 0;
}
.setup-modal-header .title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0;
}
.setup-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--light-text);
    cursor: pointer;
    padding: 0.25rem;
}
.setup-modal-close-btn:hover {
    color: var(--bs-body-color);
}

/* Modal Body */
.setup-modal-body {
    padding: 1.5rem 2rem 2rem;
    overflow-y: auto;
}

/* Form Styling within Modals */
.input-wrapper {
    position: relative;
}
.password-toggle-icon {
    position: absolute;
    right: 15px;
    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: -0.8rem 0 1.2rem 0;
    font-size: 0.85rem;
}

.switch-view {
    text-align: center;
    font-size: 0.9rem;
    color: var(--light-text);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--input-border);
}
.switch-view a {
    font-weight: 600;
}

/* Button & Feedback styles (should mostly be covered by your global styles.css) */
.card.auth .btn {
    width: 100%;
    padding: 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.feedback-message {
    padding: 10px 15px;
    margin-top: 1rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    text-align: left;
    border: 1px solid transparent;
    display: none; /* Hidden by default, JS adds .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: var(--success-color);
}
.feedback-message.error {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    border-color: var(--danger-color);
}
.feedback-message.info {
    background-color: color-mix(in srgb, var(--info-color) 15%, transparent);
    color: var(--info-color);
    border-color: var(--info-color);
}
/* This rule shows the spinner */
.setup-modal-card.auth .btn.loading .spinner-border-sm {
    display: inline-block; 
}

/* This rule hides the "Sign in" text */
.setup-modal-card.auth .btn.loading .btn-text {
    opacity: 0;
}
/* === Authentication Modal Button Loading States === */

/* Default State: The spinner is hidden by default. */
.setup-modal-card.auth .btn .spinner-border-sm {
    display: none;
}

/* Default State: The button text is visible by default. */
.setup-modal-card.auth .btn .btn-text {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* Loading State: When the '.loading' class is added to the button... */
.setup-modal-card.auth .btn.loading {
    pointer-events: none; /* Prevent multiple clicks while loading */
}

/* Loading State: The spinner inside the loading button becomes visible. */
.setup-modal-card.auth .btn.loading .spinner-border-sm {
    display: inline-block;
}

/* Loading State: The text inside the loading button fades out. */
.setup-modal-card.auth .btn.loading .btn-text {
    opacity: 0;
}
/* === Stable Primary Button (No Hover Effect) === */
/* flowNetwork-supplemental.css */

/* === Stable Primary Button (with Subtle Hover Effect) === */
.btn.btn-stable-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.btn.btn-stable-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black); /* Makes it slightly darker */
    border-color: color-mix(in srgb, var(--primary-color) 90%, black);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Enhances the shadow */
    color: white;
}

/* === User Menu Avatar === */
.user-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0; /* Prevents the avatar from shrinking */
    background-color: var(--secondary-color); /* Default background */
}

.user-menu-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-menu-user-info {
    display: flex;
    align-items: center;
    gap: 12px; /* Adds space between the avatar and the text */
}
/* === CSS For Centered Guest User Menu (Revised) === */

/* The main container for the centered guest view */
.user-menu-guest-info {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;   /* Center items horizontally */
    gap: 12px;             /* Space between items */
    padding: 1.25rem 1.5rem; /* Give it some nice padding */
}

/* Styling the avatar in the guest view */
.user-menu-guest-info .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: white;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling for the "Guest" heading */
.user-menu-guest-info h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--heading-text);
}

/* --- REVISED BUTTON STYLE --- */
/* Specific styling for the login button to ensure it's always blue */
.user-menu-guest-info .login-trigger-button {
    /* Core styles for the button's appearance */
    background-color: var(--primary-color); /* Ensures the button is always blue */
    color: white;                           /* White text */
    border: 1px solid var(--primary-color); /* Matching blue border */
    border-radius: 8px;                     /* Rounded corners */
    padding: 12px 20px;                     /* Generous padding */
    font-size: 1rem;
    font-weight: 500;
    width: 100%;
    text-align: center;
    cursor: pointer;

    /* Setup for the hover transition */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0); /* Start with no shadow */
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Smooth transition */
}

/* Hover effect: darken the button slightly and add a subtle shadow */
.user-menu-guest-info .login-trigger-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 90%, black); /* Slightly darken on hover */
    border-color: color-mix(in srgb, var(--primary-color) 90%, black);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* A "little shadow" effect */
}
.hidden {
    display: none !important;
}
/* flowNetwork-supplemental.css */

/* === ONBOARDING MODAL STYLES === */
.onboarding-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    position: relative;
}

.onboarding-progress::before {
    content: '';
    position: absolute;
    top: 15px; /* Aligns with the center of the step-circle */
    left: 15%;
    right: 15%;
    height: 2px;
    background-color: var(--input-border);
    z-index: 0;
}

.onboarding-progress .progress-step {
    text-align: center;
    width: 100px;
    position: relative;
    z-index: 1;
}

.onboarding-progress .step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.onboarding-progress .step-label {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.onboarding-progress .progress-step.active .step-circle {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.onboarding-progress .progress-step.active .step-label {
    color: var(--primary-color);
}

.onboarding-progress .progress-step.completed .step-circle {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
    /* This hides the original number ("1", "2", etc.) inside the circle */
    font-size: 0; 
}

/* This rule adds the checkmark icon as content */
.onboarding-progress .progress-step.completed .step-circle::before {
    content: '\f00c'; /* FontAwesome checkmark icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    /* This sets the size of the checkmark itself, making it visible again */
    font-size: 14px; 
}
/* In flowNetwork-supplemental.css */

/* === Generic Button Loading State === */

/* By default, the spinner within any button is hidden */
.btn .spinner-border-sm {
    display: none;
}

/* When a button gets the .loading class via JavaScript... */
.btn.loading {
    position: relative; /* Required to correctly position the hidden text */
    pointer-events: none; /* Prevents multiple clicks while processing */
}

/* Show the spinner */
.btn.loading .spinner-border-sm {
    display: inline-block;
}

/* Hide the button's text content */
.btn.loading .btn-text {
    opacity: 0;
    /* This keeps the button from collapsing to the size of the spinner */
    visibility: hidden;
}

.onboarding-step-content {
    min-height: 250px;
}

.avatar-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--input-bg);
    border: 3px dashed var(--input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-preview i {
    font-size: 4rem;
    color: var(--secondary-color);
}

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

.text-success {
    color: var(--success-color) !important;
}

.fa-3x {
    font-size: 3em;
}
/* In flowNetwork-supplemental.css */

/* === ONBOARDING - STEP 3 STYLES === */
.banner-preview {
    width: 100%;
    height: 120px;
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    border: 3px dashed var(--input-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--secondary-color);
}

.banner-preview i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.banner-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.other-pics-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    min-height: 110px; /* Reserve space for at least one row */
    margin-bottom: 1rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.other-pics-preview-grid .img-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--bs-border-color);
}
/* In flowNetwork-supplemental.css */

/* === USER PROFILE PAGE STYLES === */
.profile-page-container {
    padding: 0;
    overflow: hidden; /* To contain the banner's rounded corners */
}

.profile-header {
    position: relative;
    color: white;
}

.profile-banner {
    width: 100%;
    height: 220px;
    background-color: var(--secondary-color);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--bs-border-color);
}

.profile-header-content {
    position: relative;
    padding: 0 2rem;
    display: flex;
    align-items: flex-end;
    margin-top: -60px; /* Pulls content up over the banner */
    gap: 1.5rem;
}
.profile-avatar,
.user-menu-avatar {
  position: relative; /* Needed for the ::before pseudo-element */
  padding: 0; /* Reset any default padding */
  border-radius: 50%;
  flex-shrink: 0;
  background-color: transparent; /* Container should be see-through */
}
/* Set specific sizes */
.profile-avatar { width: 120px; height: 120px; }
.user-menu-avatar { width: 40px; height: 40px; }


/* --- Step 2: The Gradient Border Class --- */
/* This class is added via JavaScript to enable the effect for premium users */
.has-gradient-border {
  /* This padding value is the thickness of your border */
  padding: 8px;
}

/* The ::before pseudo-element IS the gradient. It sits behind the avatar content. */
.has-gradient-border::before {
  content: '';
  position: absolute;
  z-index: 0; /* Sits behind the content (img/span) */
  inset: 0; /* Fills the entire padded container */
  border-radius: inherit; /* Makes the gradient ring circular */
  /* The actual gradient is set via the --avatar-gradient CSS variable in JavaScript */
  background: var(--avatar-gradient);
}


/* --- Step 3: The Avatar Content (The Core Fix!) --- */
/* This rule styles the actual image or the text initial. */
.profile-avatar img, .profile-avatar span,
.user-menu-avatar img, .user-menu-avatar span {
  position: relative; /* Ensures it sits on top of the ::before pseudo-element */
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border-radius: 50%;
  /* THIS IS THE KEY: This background covers the center of the gradient, creating the ring effect. */
  background-color: var(--card-bg);
}

/* --- Step 4: Fallback and Specific Text Styling --- */
/* Fallback for the small menu avatar when it doesn't have a pic or gradient */
.user-menu-avatar {
    background-color: var(--secondary-color); /* Fallback BG if no image */
    color: white; /* Fallback text color for initial */
    font-weight: 600;
    font-size: 1.1rem;
}

/* When the menu avatar has an image, its background should match the card */
.user-menu-avatar img {
  background-color: var(--card-bg);
}

/* For the large profile avatar initial */
.profile-avatar span {
    font-size: 3rem;
    font-weight: 600;
    color: var(--bs-body-color);
}
.profile-info {
    flex-grow: 1;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Makes text readable over banner */
}

.profile-info h1 {
    margin: 0 0 0.25rem 0;
    font-size: 2rem;
    font-weight: 700;
}
.profile-info p {
    margin: 0;
    font-size: 0.95rem;
}

.profile-actions {
    padding-bottom: 1rem;
}

.profile-body {
    padding: 2rem;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    background-color: var(--input-bg);
    padding: 1.5rem 1rem;
    border-radius: var(--border-radius);
    text-align: center;
    margin-bottom: 2rem;
}

.stat-item .stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary-color);
}
.stat-item .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--light-text);
}

.photo-gallery-container h3 {
    font-size: 1.25rem;
    color: var(--heading-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.photo-gallery img,
.edit-photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.photo-gallery img:hover {
    transform: scale(1.05);
}

/* Edit Mode Styles */
#profileEditMode .form-group {
    margin-bottom: 1.5rem;
}
.edit-mode-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color-2);
    padding-top: 1.5rem;
}

.edit-photo-item {
    position: relative;
}
.delete-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(220, 53, 69, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}
.delete-photo-btn:hover {
    background-color: var(--danger-color);
}
/* In flowNetwork-supplemental.css */

/* === PHOTO GALLERY & KEBAB MENU STYLES === */

/* Replaces the old .photo-gallery style */
.photo-gallery {
    display: grid;
    /* Creates a responsive grid of squares */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem; /* Reduced gap for a tighter grid */
}

.photo-grid-item {
    position: relative;
    aspect-ratio: 1 / 1; /* Creates a perfect square */
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--input-bg);
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.photo-grid-item:hover img {
    transform: scale(1.05);
}

/* Kebab Menu Styling */
.kebab-menu-container {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.kebab-btn {
    background-color: rgba(15, 20, 25, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-grid-item:hover .kebab-btn {
    opacity: 1; /* Show kebab button on hover */
}

.kebab-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: 0.25rem 0;
    min-width: 120px;
}
.kebab-dropdown.active {
    display: block;
}

.kebab-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--danger-color); /* Red for delete */
    padding: 0.5rem 0.75rem;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
}
.kebab-dropdown button:hover {
    background-color: var(--menu-hover-bg);
}

/* Edit Mode Photo Item Styles */
.edit-photo-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.edit-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(220, 53, 69, 0.8);
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.delete-photo-btn:hover {
    background-color: var(--danger-color);
}
/* In flowNetwork-supplemental.css */

/* === PROFILE EDIT MODE UI IMPROVEMENTS === */

.edit-previews-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
@media (min-width: 768px) {
    .edit-previews-grid {
        grid-template-columns: auto 1fr; /* Avatar column takes space it needs, banner takes the rest */
    }
}

.edit-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.profile-avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--input-bg);
    border: 2px dashed var(--input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    overflow: hidden;
}

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

.banner-preview-edit {
    width: 100%;
    height: 120px;
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    border: 2px dashed var(--input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    overflow: hidden;
}
.banner-preview-edit img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* In flowNetwork-supplemental.css */

/* === PROFILE EDIT MODE SCROLLING === */

/* Make the main card container a flex column that can grow */
.profile-page-container.card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* A flexbox fix to prevent overflow issues */
}

/* Make the edit mode container fill the available space in the card */
#profileEditMode {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* This is the key rule:
  Make the body of the edit form grow to take up space,
  and add a vertical scrollbar ONLY if the content is too tall.
*/
#profileEditMode .profile-body {
    flex-grow: 1;
    overflow-y: auto;
}

/* In flowNetwork-supplemental.css */

/* Fixes profile name and location color in light mode */
body.light-mode .profile-info h1,
body.light-mode .profile-info p {
    color: var(--heading-text); /* This is a dark color in light mode */
    text-shadow: none; /* Removes the shadow designed for dark backgrounds */
}
/* In flowNetwork-supplemental.css */

.profile-map-container {
    margin-bottom: 2rem;
}

.profile-map-container h3 {
    font-size: 1.25rem;
    color: var(--heading-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

/* In flowNetwork-supplemental.css */

/* === PROFILE PAGE LAYOUT & SCROLLING REFINEMENTS === */

/* This new rule creates the two-column layout */
.profile-main-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left column (photos) is twice as wide as the right (map) */
    gap: 2rem; /* Space between the columns */
    align-items: flex-start;
}

/* On smaller screens, stack the columns vertically */
@media (max-width: 992px) {
    .profile-main-content-grid {
        grid-template-columns: 1fr;
    }
}

/* This rule ensures the profile page itself can grow,
   which allows the main window scrollbar to appear when content is long. */




/* Adjusting the map height to be a bit smaller for the sidebar */
.profile-map {
    height: 350px;
}
/* In flowNetwork-supplemental.css */

/* --- User Menu Clickable Header --- */
#userMenuLoggedInInfo {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border-radius: 6px; /* Optional: gives a slightly rounded hover area */
    margin: 0.5rem; /* Optional: adds a little space around the element */
    padding: 0.75rem;
}

#userMenuLoggedInInfo:hover {
    background-color: var(--menu-hover-bg);
}
/* In flowNetwork-supplemental.css */

.profile-username {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--primary-color);
    margin: -0.25rem 0 0.5rem 0; /* Adjusts spacing to be closer to the name */
    text-shadow: none; /* Makes the username text crisp */
}

/* Ensure it also looks good in light mode */
body.light-mode .profile-username {
    color: var(--primary-color);
}
/* === Enhanced Profile Location Styling === */
/* This rule transforms the location text into a modern, pill-shaped tag. */
#profileLocation {
    display: inline-flex; /* Aligns the icon and text horizontally */
    align-items: center; /* Aligns them vertically in the middle */
    margin-top: 0.5rem; /* Adds some space above the location tag */
    padding: 0.4rem 0.9rem; /* Inner spacing for the pill */

    /* Pill appearance */
    background-color: var(--input-bg); /* A subtle background that matches input fields */
    border: 1px solid var(--input-border); /* A clean border */
    border-radius: 20px; /* Creates the rounded "pill" shape */

    /* Font and text styling */
    font-size: 0.9rem;
    font-weight: 500; /* Makes the font slightly bolder and clearer */
    color: var(--bs-body-color); /* Uses the main body text color for better readability */
    text-shadow: none; /* Removes the text shadow that was making it blurry */

    /* Effects */
    transition: all 0.2s ease-in-out;
}

/* Style for the map marker icon inside the location tag */
#profileLocation i.fas.fa-map-marker-alt {
    color: var(--primary-color); /* Makes the icon stand out with the theme color */
    margin-right: 0.5rem; /* Adds space between the icon and the text */
    font-size: 0.9em; /* Adjusts icon size to fit nicely */
}

/* Optional: A subtle hover effect for the location tag */
#profileLocation:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* flowNetwork-supplemental.css */

/* === Enhanced Profile Info & Premium Avatar Styling === */

/* New container for the Agency and Location tags */
.profile-meta-tags {
    display: flex;
    flex-wrap: wrap; /* Allows tags to wrap to the next line on small screens */
    gap: 0.6rem; /* Space between the tags */
    margin-top: 0.25rem; /* Space below the username */
}

/* --- Username Styling --- */
#profileUsernameDisplay {
    font-size: 1.1rem;
    color: var(--heading-text);
    font-weight: 500;
    margin: 0 0 0.5rem 0;
    padding: 0;
    text-shadow: none;
    border: none;
    background: none;
}

/* Styles the '@' symbol added by the JavaScript */
.username-at-symbol {
    color: var(--primary-color);
    font-weight: 600;
    margin-right: 2px;
}

/* --- Agency Tag Styling --- */
/* This rule makes the Agency into a "pill" tag */
#profileAgency {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-body-color);
    text-shadow: none;
    transition: all 0.2s ease-in-out;
}

#profileAgency:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

#profileAgency i {
    color: var(--secondary-color); /* A neutral color for the agency icon */
}

/* === Gradient Preset Selection Styles === */

/* === Gradient Preset Selection Styles (UNCHANGED) === */
.gradient-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
}
.gradient-swatch {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background-clip: padding-box;
}
.gradient-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.gradient-swatch.active {
    border-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--primary-color), 0 4px 10px rgba(0,0,0,0.2);
}
.gradient-swatch.active::after {
    content: '\f00c';
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
}




/* === Color Picker Styles in Edit Profile === */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.form-control-color {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.form-control-color::-webkit-color-swatch {
    border-radius: 8px;
    border: 1px solid var(--input-border);
}
.form-control-color::-moz-color-swatch {
    border-radius: 8px;
    border: 1px solid var(--input-border);
}

#colorPickerValueDisplay {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: var(--input-bg);
    padding: 0.5rem 0.8rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}
/* flowNetwork-supplemental.css */

/* === PREMIUM UPSELL SECTION STYLES === */

/* The initial prompt box with the "View Plans" button */
.upsell-prompt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--input-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.upsell-prompt-text h4 {
    margin-top: 0;
    margin-bottom: 0.25rem;
    color: var(--heading-text);
    font-weight: 600;
}

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

/* Grid container for the plan cards */
#plansDisplayContainer {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--bs-border-color);
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Individual plan card styling */
.plan-card {
    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;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}



.plan-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    text-align: center;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--heading-text);
    text-align: center;
    margin: 1rem 0;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--light-text);
}

.plan-description {
    font-size: 0.9rem;
    color: var(--light-text);
    text-align: center;
    min-height: 40px;
    margin-bottom: 1.5rem;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Pushes the "Select Plan" button down */
}

.plan-features li {
    font-size: 0.9rem;
    color: var(--bs-body-color);
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Final Note section */
.plan-note {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

.plan-note h4 {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--heading-text);
}

.plan-note p {
    color: var(--light-text);
    font-size: 0.9rem;
}

.plan-note ul {
    list-style: disc;
    padding-left: 20px;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}
/* In flowNetwork-supplemental.css */

/* === PROFILE BIO & LISTINGS STYLES === */

.profile-bio-display {
    font-size: 0.95rem;
    color: var(--light-text);
    margin-top: 1rem;
    line-height: 1.6;
    max-width: 70ch; /* Limits the width for better readability */
}

.profile-section-container {
    margin-top: 2rem;
}

.profile-section-container h3 {
    font-size: 1.25rem;
    color: var(--heading-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

.profile-listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Reusing the panel-listing-card style for consistency */
.profile-listings-grid .panel-listing-card {
    background-color: var(--card-bg);
    flex-direction: column; /* Stack image and details vertically */
}



.profile-listings-grid .panel-listing-card .card-details {
    padding: 1rem;
}
/* === CHAT INTERFACE CSS (DEFINITIVE STICKY INPUT FIX) === */

/* --- 0. Full-Screen Page Container --- */
#flowNetworkContent.no-padding {
    padding: 0 !important;
    height: calc(100vh - var(--banner-height) - var(--subnav-height));
    overflow: hidden;
}

#chatPageContent {
    height: 100%;
    display: flex;
}


/* --- 1. Main Chat Layout (Sidebar + Chat Area) --- */
.chat-page-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: 100%;
    width: 100%;
    background-color: var(--card-bg);
}


/* --- 2. Left Sidebar & Conversations List --- */
.chat-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);
}

.sidebar-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.conversations-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.75rem;
}
.conversation-item {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 0.8rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}
.conversation-item:hover, .conversation-item.active { background-color: var(--menu-hover-bg); }
.conversation-item .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.conversation-details { flex-grow: 1; min-width: 0; }
.conversation-details .name { font-weight: 600; font-size: 0.95rem; }
.conversation-details .preview { font-size: 0.85rem; color: var(--light-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-timestamp { font-size: 0.7rem; color: var(--secondary-color); }


/* --- 3. Right Panel (Main Chat Window) --- */
.chat-main {
    display: flex !important; /* Use Flexbox to manage the child container */
    flex-direction: column !important;
    height: 100%;
    min-height: 0; /* Flexbox fix */
}

/* This is our main chat window container */
#activeChatContainer {
    flex-grow: 1 !important; /* Make it grow to fill the parent (.chat-main) */
    position: relative !important; /* THIS IS THE KEY: It becomes the boundary for its children */
    min-height: 0; /* Flexbox fix */
    overflow: hidden !important;
}

/* Header is locked to the top of the container */
/* ADD THIS NEW, CORRECTED CODE */

/* --- Unified Chat Headers for Alignment --- */
.sidebar-header, .chat-header {
    display: flex;
    align-items: center;               /* Vertically centers the content (text, icons) */
    height: 73px;                      /* CRITICAL: A fixed height for both headers */
    border-bottom: 1px solid var(--bs-border-color); /* The connecting line */
    flex-shrink: 0;
}

/* --- Header Specifics --- */
.sidebar-header {
    padding: 0 1.5rem; /* Horizontal padding for "Conversations" */
}

.chat-header {
    padding: 0 1.75rem; /* Horizontal padding for the active chat user */

    /* These lines are from the previous fix to keep the chat layout working correctly */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background-color: var(--card-bg);
}
.chat-header .recipient-info { display: flex; align-items: center; gap: 1rem; }
.chat-header .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.chat-header h4 { font-size: 1.1rem; font-weight: 600; margin: 0; }



/* Message area scrolls in the space left over */
#chatMessages {
    height: 100% !important;        /* Fill the entire container */
    overflow-y: auto !important;    /* This is what scrolls */
    
    /* CRITICAL: Padding creates space for the locked header and input */
    padding-top: 75px !important;
    padding-bottom: 85px !important;
    
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: var(--card-bg);
}
.message-wrapper { display: flex; flex-direction: column; max-width: 70%; margin-top: 0.75rem; }
.message-wrapper.sent { align-self: flex-end; align-items: flex-end; }
.message-wrapper.received { align-self: flex-start; align-items: flex-start; }
.message-bubble { padding: 0.7rem 1.1rem; border-radius: 1.2rem; line-height: 1.5; word-wrap: break-word; }
.message-bubble.sent { background: var(--primary-color); color: white; }
.message-bubble.received { background: var(--input-bg); color: var(--bs-body-color); }
.message-wrapper.sent:not(:has(+ .message-wrapper.sent)) .message-bubble { border-bottom-right-radius: 0.4rem; }
.message-wrapper.received:not(:has(+ .message-wrapper.received)) .message-bubble { border-bottom-left-radius: 0.4rem; }
.message-timestamp { font-size: 0.7rem; color: var(--light-text); padding: 0.2rem 0.6rem; }


/* Input area is locked to the bottom of the container */
.chat-input-area {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
    background-color: var(--bs-body-bg);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}
#chatMessageInput {
    flex-grow: 1;
    background-color: var(--card-bg);
    border-radius: 2rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    font-size: 0.95rem;
}
.chat-input-area .btn { width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; flex-shrink: 0; }


/* --- 4. Placeholder Styles --- */
.chat-main-placeholder {
    margin: auto;
    text-align: center;
    color: var(--light-text);
}
.chat-main-placeholder i { font-size: 3.5rem; color: var(--border-color-2); margin-bottom: 1.5rem; }
.chat-main-placeholder h3 { font-size: 1.25rem; color: var(--heading-text); }



/* Add this entire block to flowNetwork-supplemental.css */

/* === CHAT ATTACHMENT PREVIEW STYLES === */
#chatAttachmentPreviewContainer {
    padding: 0.75rem;
    margin: 0 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--card-bg);
}

.attachment-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    max-width: 400px;
}

.attachment-thumbnail {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.5rem;
    color: white;
}

.attachment-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-info {
    flex-grow: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.attachment-info .file-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-info .file-size {
    font-size: 0.75rem;
    color: var(--light-text);
}

.remove-attachment-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.remove-attachment-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--danger-color);
}


/* === CHAT VOICE RECORDING ANIMATION === */
.chat-input-wrapper {
    flex-grow: 1;
    position: relative; /* Container for the animation overlay */
}

/* The text input should fill the wrapper */
#chatMessageInput {
    width: 100%;
    transition: opacity 0.2s ease;
}





/* === FLUID & ORGANIC AUDIO ANIMATION === */

/* The base style for all bars */
.wave-bar {
    width: 4px;
    height: 100%; /* Height will be controlled by transform: scaleY */
    background-color: var(--primary-color);
    border-radius: 2px;
    transform-origin: bottom; /* Makes the bar grow from the bottom up */
}

/* Define multiple, different animation patterns */
@keyframes fluid-wave-1 {
    0%, 100% { transform: scaleY(0.1); }
    50% { transform: scaleY(0.9); }
}
@keyframes fluid-wave-2 {
    0%, 100% { transform: scaleY(0.2); }
    25% { transform: scaleY(1.0); }
    75% { transform: scaleY(0.5); }
}
@keyframes fluid-wave-3 {
    0%, 100% { transform: scaleY(0.3); }
    33% { transform: scaleY(0.7); }
    66% { transform: scaleY(0.2); }
}
/* === FIX: Caption text color on received media in Light Mode === */

/*
  This rule targets the caption of a received message that has media (image/file),
  ONLY when the body has the .light-mode class. It forces the text to be the
  correct dark color for the theme, overriding the incorrect inherited style.
*/
/* Recommended Fix: Forces caption text dark on received media for readability. */

/* Apply the different animations to alternating bars */
.recordingAnimationContainer .wave-bar:nth-child(3n + 1) {
    animation: fluid-wave-1 1s ease-in-out infinite;
    animation-delay: -0.5s;
}
.recordingAnimationContainer .wave-bar:nth-child(3n + 2) {
    animation: fluid-wave-2 1.2s ease-in-out infinite;
    animation-delay: -0.2s;
}
.recordingAnimationContainer .wave-bar:nth-child(3n + 3) {
    animation: fluid-wave-3 0.9s ease-in-out infinite;
}
/* flowNetwork-supplemental.css */

/* === CHAT INPUT AREA & ATTACHMENT PREVIEW STYLES === */

/* Modify the main input area to be a flex column */
.chat-input-area {
    flex-direction: column;
    align-items: stretch; 
    gap: 0;
    padding: 0;
    background-color: var(--bs-body-bg);
}

/* The new row for the input and buttons */
.chat-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

/* The attachment preview container */
#chatAttachmentPreviewContainer {
    padding: 0.75rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}
#chatAttachmentPreviewContainer.hidden {
    display: none;
}

/* A single previewed item */
.attachment-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    max-width: 400px;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.attachment-thumbnail {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: var(--border-radius-sm);
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.5rem;
    color: white;
}
.attachment-thumbnail img {
    width: 100%; height: 100%; object-fit: cover;
}
.attachment-info {
    flex-grow: 1; min-width: 0; font-size: 0.9rem;
}
.attachment-info .file-name {
    font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attachment-info .file-size {
    font-size: 0.75rem; color: var(--light-text);
}
.remove-attachment-btn {
    background: none; border: none; color: var(--secondary-color);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s ease;
}
.remove-attachment-btn:hover {
    background-color: var(--menu-hover-bg); color: var(--danger-color);
}


/* === CHAT VOICE RECORDING ANIMATION === */

.chat-input-wrapper {
    flex-grow: 1;
    position: relative; /* Container for the animation overlay */
}
#chatMessageInput {
    width: 100%;
    transition: opacity 0.2s ease;
}

.voice-message-player.listened {
    opacity: 0.7; /* Dims the entire player */
}
.voice-message-player.listened .waveform-progress {
    background-color: var(--secondary-color); /* Changes the bar to a muted gray */
}


#recordingAnimationContainer.hidden {
    display: none;
}



/* === CHAT MESSAGE BUBBLE WITH CAPTION === */

.message-bubble.media-bubble {
    padding: 0.5rem; /* Reduce padding for bubbles with media */
    background-color: var(--input-bg); /* Use a consistent background for media */
}
.message-bubble.media-bubble.sent {
    background-color: var(--primary-color);
}
.chat-image, .chat-video {
    max-width: 100%; /* Ensures they don't overflow horizontally */
    border-radius: var(--border-radius);
    display: block;
}

/* NEW/MODIFIED styles to restrict height and control fit */
.chat-image {
    max-height: 200px; /* Adjust this value as needed. e.g., 150px, 250px */
    width: auto; /* Allow width to adjust naturally based on max-height and aspect ratio */
    object-fit: cover; /* This makes the image cover the area, cropping if necessary */
    /* object-position: center; /* Optional: Centers the image within its box if cropped */
}
.message-bubble img {
    border: 1px solid var(--bs-border-color); /* Adds a subtle border around images in bubbles */
}
/* For video, you might want a similar restriction */
.chat-video {
    max-height: 250px; /* Adjust as needed */
    width: 100%; /* Ensure videos stretch to 100% width while respecting max-height */
    object-fit: cover; /* or 'contain' if you prefer letterboxing for videos */
}
.message-caption {
    padding: 0.5rem 0.7rem 0.2rem;
    line-height: 1.4;
    font-size: 0.9rem;
    /* This is the key change: it ensures the caption's color matches
       the automatically calculated contrasting color of the bubble. */
    color: inherit;
}
/* === UNREAD MESSAGE BADGE STYLES === */

.conversation-item {
    position: relative; /* This is crucial for positioning the badge inside */
}
/* === FIX: File Attachment Text Color === */
.chat-file-attachment {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    /* This is the fix: It ensures the text color contrasts with the bubble background. */
    color: inherit;
}

.chat-file-attachment .file-name {
    font-weight: 500;
}
.unread-badge-container {
    position: absolute;
    right: 12px;  /* Position on the right side */
    top: 50%;
    transform: translateY(-50%); /* Center it vertically */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px; /* Space between timestamp and badge */
}

/* Move the existing timestamp into the new container */
.conversation-timestamp {
    font-size: 0.7rem;
    color: var(--secondary-color);
}

.unread-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    animation: scaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* === NOTIFICATION CENTER STYLES === */
.notification-center {
    position: relative;
    display: inline-block;
}

#notificationBellBtn {
    position: relative;
    
}

#notificationBellBtn i {
    font-size: 1.2rem;
    margin: 0;
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--danger-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--card-bg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.notification-badge:not(.hidden) {
    transform: scale(1);
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 450px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.notification-dropdown-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.notification-dropdown-header .btn-link {
    font-size: 0.8rem;
    padding: 0;
    text-decoration: none;
}

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

.notification-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--input-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:hover {
    background-color: var(--menu-hover-bg);
}

.notification-item .icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}
.icon-wrapper.new-message { background-color: var(--primary-color); }
.icon-wrapper.new-referral { background-color: var(--success-color); }
.icon-wrapper.referral-update { background-color: var(--info-color); }

.notification-item .content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--bs-body-color);
}
.notification-item .content .timestamp {
    font-size: 0.75rem;
    color: var(--light-text);
    margin-top: 0.25rem;
}

.notification-item-placeholder {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--light-text);
}
.notification-item-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}
/* flowNetwork-supplemental.css */

/* ... (existing chat-related styles) ... */

/* NEW: Tools Button Container and Dropdown */
.chat-tools-container {
    position: relative; /* Essential for positioning the dropdown */
    flex-shrink: 0; /* Prevent it from shrinking */
}

/* Style for the Tools Button itself (it's a standard .btn .btn-icon) */
#chatToolsBtn {
    /* Inherits general .btn .btn-icon styles */
    /* You can override specific properties if needed, e.g., to make it stand out */
    color: var(--primary-color); /* Make the tools icon primary color */
    border: 1px solid var(--bs-border-color); /* Add a subtle border */
    background-color: var(--card-bg); /* Match card background */
    box-shadow: var(--shadow-sm);
}

#chatToolsBtn:hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* The Dropdown Panel for AI Tools */
.chat-ai-tools-dropdown {
    position: absolute;
    bottom: calc(100% + 10px); /* Position above the input row, 10px spacing */
    right: 0; /* Align to the right of the Tools button */
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between the AI buttons */
    min-width: 220px; /* Adjust as needed */
    z-index: 100; /* Ensure it's above other chat elements */

    opacity: 0; /* Start hidden for transition */
    visibility: hidden; /* Start hidden for transition */
    transform: translateY(10px); /* Start slightly below for animation */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
}

.chat-ai-tools-dropdown.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Make it unclickable when hidden */
    transform: translateY(10px); /* Reset for next animation */
    transition-delay: 0s; /* No delay when hiding */
}

.chat-ai-tools-dropdown:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* No delay when showing */
}


/* Styles for the individual AI buttons within the dropdown */
.chat-ai-tools-dropdown .btn {
    width: 100%; /* Make them fill the dropdown width */
    text-align: left; /* Align text to the left */
    justify-content: flex-start; /* Align icon and text to start */
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    
    background-color: transparent; /* Transparent background */
    border: none; /* No border for these buttons */
    color: var(--bs-body-color); /* Standard text color */
    box-shadow: none; /* No shadow */
    border-radius: var(--border-radius-sm); /* Slightly smaller radius for menu items */
}

.chat-ai-tools-dropdown .btn:hover {
    background-color: var(--menu-hover-bg); /* Subtle hover effect */
    color: var(--heading-text); /* Highlight text on hover */
    transform: none; /* No transform on hover for menu items */
    box-shadow: none; /* No shadow on hover */
}

.chat-ai-tools-dropdown .btn i {
    color: var(--primary-color); /* Keep icons primary color */
    margin-right: 0.75rem; /* Space between icon and text */
}

.chat-ai-tools-dropdown .btn:hover i {
    color: var(--primary-color); /* Keep icon color on hover */
}
/* flowNetwork-supplemental.css */

/* ... (existing styles) ... */

/* Styles for the new action buttons on listing cards */
.panel-listing-card .card-actions {
    display: flex; /* Makes buttons lay out horizontally */
    gap: 0.5rem; /* Space between the buttons */
    margin-top: 0.75rem; /* Space above buttons */
    /* Ensure buttons within this container behave responsively */
    flex-wrap: wrap; /* Allow buttons to wrap if space is limited */
}

.panel-listing-card .card-actions .btn {
    flex-grow: 1; /* Allow buttons to grow to fill space */
    font-size: 0.78rem; /* Slightly smaller font for compactness */
    padding: 0.3rem 0.6rem; /* Adjusted padding */
}

/* Specific styling for the 'View Details' button if needed to align with new buttons */
.panel-listing-card .view-details-btn {
    /* If you want it to be a block button: */
    display: block;
    width: 100%;
    text-align: center;
}

/* For profile listings grid, ensure button styling is consistent */
.profile-listings-grid .panel-listing-card .card-actions .btn {
    /* If different sizing is needed for profile listings, adjust here */
}

/* Disable styles for buttons that are disabled */
.panel-listing-card .card-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}
/* In flowNetwork-supplemental.css */

/* === CSS FOR LISTING CARD IN CHAT BUBBLE === */

.message-bubble.listing-card-bubble {
    padding: 0.5rem;
    max-width: 300px; /* Set a max-width for the card */
}

.chat-listing-card {
    background-color: var(--card-bg); /* Use card background for the card itself */
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.message-wrapper.sent .chat-listing-card {
    border-color: rgba(255, 255, 255, 0.2);
}

.chat-listing-image {
    height: 140px;
    background-size: cover;
    background-position: center;
}

.chat-listing-details {
    padding: 0.75rem;
}

.chat-listing-details .title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading-text);
    margin-bottom: 0.2rem;
}

.message-wrapper.sent .chat-listing-details .title {
    color: white;
}


.chat-listing-details .price {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.6rem;
}

.message-wrapper.sent .chat-listing-details .price {
    color: rgba(255, 255, 255, 0.85);
}

.chat-listing-details .details-link {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.3rem;
    background-color: var(--input-bg);
    color: var(--bs-link-color);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    transition: background-color 0.2s;
}

.message-wrapper.sent .chat-listing-details .details-link {
     background-color: rgba(0,0,0,0.2);
     color: white;
}

.chat-listing-details .details-link:hover {
    background-color: var(--menu-hover-bg);
}

.message-bubble.listing-card-bubble .message-caption {
    padding: 0.6rem 0.2rem 0.1rem; /* Adjust padding for caption below the card */
}
/* flowNetwork-supplemental.css */
/* In flowNetwork-supplemental.css */

/* === LISTING DETAIL PAGE STYLES === */
#listingDetailPageContent {
    flex-grow: 1;
}

.listing-detail-container {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.loading-placeholder, .error-placeholder {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--light-text);
}
.loading-placeholder .fa-spinner {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.listing-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}
.listing-detail-header h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.listing-address {
    font-size: 1rem;
    color: var(--light-text);
    margin-top: 0.5rem;
}
.listing-address i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}
.listing-price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);
    flex-shrink: 0;
}

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

@media (max-width: 992px) {
    .listing-detail-body {
        grid-template-columns: 1fr;
    }
}

.main-image-wrapper {
    width: 100%;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--input-bg);
}
.main-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnails-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.thumbnail-item {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: all 0.2s ease;
}
.thumbnail-item:hover, .thumbnail-item.active {
    border-color: var(--primary-color);
    opacity: 1;
}

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

.listing-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
}
.spec-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
}
.spec-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
    width: 25px;
    text-align: center;
}

.listing-description h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}
.listing-description p {
    line-height: 1.6;
    color: var(--light-text);
}

.agent-contact-card {
    padding: 1.5rem;
}
.agent-contact-card h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.agent-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.agent-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.agent-name {
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--heading-text);
}
.agent-name:hover {
    color: var(--primary-color);
}
.agent-agency {
    color: var(--light-text);
    font-size: 0.9rem;
}
/* =================================== */
/* === MOBILE RESPONSIVE STYLES      === */
/* =================================== */
/* Add this entire block to the end of your CSS file. */

/* --- Tablet & Medium Screens (max-width: 1024px) --- */
@media (max-width: 1024px) {
    /* Stack the main profile content columns */
    .profile-main-content-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Smaller Tablets (max-width: 992px) --- */
@media (max-width: 992px) {
    /* --- Main Layout Grids --- */
    /* Stack the primary multi-column layouts into a single column */
    .map-layout-grid,
    .listing-detail-body,
    .chat-page-layout {
        grid-template-columns: 1fr;
    }

    /* --- Header & Navigation --- */
    #top-header {
        padding: 0 1rem; /* Reduce horizontal padding */
    }
    #flowNetworkNavbar {
        padding: 0 1rem;
        justify-content: flex-start; /* Align nav items to the left */
        overflow-x: auto; /* Allow horizontal scrolling if nav items overflow */
    }
    #app-name-header {
        font-size: 1.2rem; /* Make app name text smaller */
    }

    /* --- Modals --- */
    /* Make modals wider on smaller screens */
    .setup-modal-card.card.auth,
    .setup-modal-card.card {
        max-width: 95vw;
        margin: 1rem;
    }

    /* --- Chat --- */
    /* This stacks the conversation list on top of the chat window.
       For a true mobile app feel (hiding one view to show the other),
       you would need some JavaScript to toggle CSS classes. */
    .chat-main {
        border-top: 1px solid var(--bs-border-color);
        margin-top: 1rem;
    }
    .chat-header {
       /* The headers are already aligned, this ensures they stay that way */
       height: auto;
       padding: 1rem 1.25rem;
    }
}


/* --- Mobile Phones (max-width: 768px) --- */
@media (max-width: 768px) {
    /* --- General Reductions --- */
    #flowNetworkContent {
        padding: 1rem; /* Reduce main content padding */
    }
    .page-header h1 {
        font-size: 1.3rem;
    }
    .page-header .subtitle {
        font-size: 0.85rem;
    }

    /* --- Header --- */
    #app-name-header {
        display: none; /* Hide app name text on small phones to save space */
    }
    .user-menu-dropdown.enhanced {
        min-width: 250px; /* Make user menu a bit smaller */
    }

    /* --- Profile Page --- */
    .profile-header-content {
        flex-direction: column; /* Stack avatar, info, and buttons */
        align-items: center;    /* Center-align the stacked items */
        text-align: center;
        margin-top: -80px;      /* Adjust the overlap for the new layout */
    }
    .profile-info {
        padding-bottom: 0;
    }
    .profile-actions {
        margin-top: 1rem;
        justify-content: center; /* Center the buttons */
    }
    .profile-body {
        padding: 1rem;
        margin-top: 1rem; /* Add space below the re-flowed header */
    }
    .profile-stats {
        flex-direction: column; /* Stack the stat items vertically */
        gap: 1.5rem;
    }

    /* --- Listing Panel (Map) --- */
    #listing-panel {
        width: 100%;  /* Make the slide-in panel full-width */
        right: -100%; /* Adjust off-screen position for full-width */
        box-shadow: none;
        border-left: none;
    }
    #listing-panel.active {
        right: 0;
    }

    /* --- Send Referral Wizard --- */
    .wizard-progress .step-label {
        display: none; /* On mobile, hide the text labels to save space */
    }
    .wizard-card {
        padding: 1rem; /* Reduce padding inside the wizard */
    }

    /* --- Responsive Tables --- */
    /* To make tables responsive, you MUST wrap your <table> element
       in a <div> with the class "table-responsive-wrapper".
       Example: <div class="table-responsive-wrapper"><table class="styled-table">...</table></div> */
    .table-responsive-wrapper {
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        border: 1px solid var(--bs-border-color);
        border-radius: var(--border-radius);
    }
    .styled-table {
        width: 100%;
        min-width: 600px; /* Forces horizontal scroll if content is wider */
    }
}


/* --- Small Mobile Phones (max-width: 480px) --- */
@media (max-width: 480px) {
    /* --- Dashboards & Grids --- */
    .kpi-cards-grid {
        grid-template-columns: 1fr; /* Force KPI cards into a single column */
    }

    /* --- Forms & Filters --- */
    .referral-filters {
        flex-direction: column;
        align-items: stretch; /* Make filter inputs full-width */
    }

    /* --- Wizard Navigation --- */
    .wizard-navigation {
        flex-direction: column; /* Stack Prev/Next buttons */
        gap: 0.75rem;
    }
    .wizard-navigation .btn {
        width: 100%; /* Make buttons full-width */
    }

    /* --- Header & Chat --- */
    #top-header .header-right {
        gap: 0.5rem; /* Reduce space between header icons */
    }
    #chatMessageInput {
        padding: 0.6rem 1rem; /* Smaller padding for chat input */
    }
    .chat-input-area .btn {
        width: 38px;  /* Make chat buttons smaller */
        height: 38px;
        font-size: 1rem;
    }
}
/* In flowNetwork-supplemental.css */

/* === ADD NEW LISTING MODAL STYLES === */

.listing-map-container {
    height: 350px;
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    margin-top: 0.5rem;
    overflow: hidden;
}

.listing-photo-preview {
    width: 100%;
    height: 200px;
    margin-top: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    border: 2px dashed var(--input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--secondary-color);
    overflow: hidden;
}

.listing-photo-preview i {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.listing-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Helper to make rows of form-groups look better */
.row .form-group {
    margin-bottom: 1rem;
}
/* In flowNetwork-supplemental.css */

/* === LISTING WIZARD STYLES === */
.listing-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0.5rem 0 2.5rem 0;
    position: relative;
}

.listing-progress::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 25%;
    right: 25%;
    height: 2px;
    background-color: var(--input-border);
    z-index: 0;
}

.listing-progress .progress-step {
    text-align: center;
    width: 120px;
    position: relative;
    z-index: 1;
    background-color: var(--card-bg); /* Match modal body to cover the line */
    padding: 0 10px;
}

.listing-progress .step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.listing-progress .step-label {
    font-size: 0.8rem;
    color: var(--light-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.listing-progress .progress-step.active .step-circle {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.listing-progress .progress-step.active .step-label {
    color: var(--primary-color);
}

.listing-progress .progress-step.completed .step-circle {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
    font-size: 0; 
}

.listing-progress .progress-step.completed .step-circle::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px; 
}

.listing-step-content {
    animation: fadeIn 0.5s ease;
}

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

/* Description Editor Styles */
.description-editor-wrapper {
    position: relative;
}

.description-editor-wrapper .optimize-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* Multi-photo Preview Grid */
.listing-multi-photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.5rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    min-height: 112px;
}

.listing-multi-photo-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}
/* In flowNetwork-supplemental.css */

/* === ACCORDION STYLES FOR LISTING DETAILS === */
.details-accordion {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.details-accordion details {
    border-bottom: 1px solid var(--input-border);
}
.details-accordion details:last-child {
    border-bottom: none;
}

.details-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background-color: var(--input-bg);
    font-weight: 600;
    color: var(--heading-text);
    list-style: none; /* Remove default marker */
    transition: background-color 0.2s ease;
}

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

.details-accordion summary::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
    font-size: 0.9em;
}

.details-accordion details[open] > summary::after {
    transform: rotate(180deg);
}

.details-accordion .accordion-content {
    padding: 1.25rem;
    background-color: var(--card-bg);
}

/* Use the existing definition list style but add icons */
.accordion-content .row dt {
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Space between icon and text */
    font-weight: 500;
    color: var(--light-text);
}
.accordion-content .row dt i.fas {
    color: var(--primary-color);
    width: 18px; /* Align icons */
    text-align: center;
}
/* In flowNetwork-supplemental.css */

/* === UPGRADED ACCORDION STYLES === */
.details-accordion {
    border: none; /* Remove outer border for a cleaner look */
}

.details-accordion details {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    margin-bottom: 0.75rem;
    background-color: var(--input-bg);
}
.details-accordion details[open] {
    border-color: var(--primary-color);
}

.details-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--heading-text);
    list-style: none;
    transition: background-color 0.2s ease;
}

.details-accordion summary:hover {
    color: var(--primary-color);
}

.details-accordion summary::after {
    content: '\f054'; /* Font Awesome chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
    font-size: 0.9em;
    color: var(--secondary-color);
}

.details-accordion details[open] > summary::after {
    transform: rotate(90deg);
}

.details-accordion .accordion-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    background-color: transparent;
    border-top: 1px solid var(--input-border);
}

.accordion-content .row {
    padding-top: 1rem;
}

.accordion-content .row dt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--light-text);
    padding-bottom: 0.5rem; /* Space between rows */
}

.accordion-content .row dt i.fas {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}

.accordion-content .row dd {
    font-weight: 500;
    color: var(--bs-body-color);
    padding-bottom: 0.5rem;
}
/* In flowNetwork-supplemental.css */

/* === UPGRADED ACCORDION STYLES FOR LISTING DETAILS === */
.details-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.details-accordion details {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    transition: all 0.2s ease-in-out;
}

.details-accordion details[open] {
    border-color: var(--primary-color);
    background-color: var(--card-bg);
}

.details-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--heading-text);
    list-style: none; /* Removes the default triangle marker */
}

.details-accordion summary:hover {
    color: var(--primary-color);
}

.details-accordion summary::after {
    content: '\f054'; /* Font Awesome icon: chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
    font-size: 0.9em;
    color: var(--secondary-color);
}

.details-accordion details[open] > summary::after {
    transform: rotate(90deg); /* Rotates the chevron when open */
}

.details-accordion .accordion-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--input-border);
}

.accordion-content .row {
    padding-top: 1rem;
    font-size: 0.9rem;
}

.accordion-content .row dt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--light-text);
    padding-bottom: 0.75rem;
}

.accordion-content .row dt i.fas {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}

.accordion-content .row dd {
    font-weight: 500;
    color: var(--bs-body-color);
    padding-bottom: 0.75rem;
}
/* In flowNetwork-supplemental.css */

/* === HIGH-CONVERTING UPGRADE MODAL STYLES === */

.upgrade-modal-body {
    padding: 1.5rem 2rem 2rem;
}

.upgrade-benefits-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}

.upgrade-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

.upgrade-benefits-list i {
    font-size: 1.2rem;
}

.upgrade-main-offer {
    background: linear-gradient(45deg, color-mix(in srgb, var(--primary-color) 10%, transparent), color-mix(in srgb, var(--primary-color) 2%, transparent));
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.upgrade-main-offer .offer-content {
    text-align: left;
    flex-grow: 1;
}

.upgrade-main-offer h5 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
}

.upgrade-main-offer p {
    margin: 0;
    color: var(--light-text);
    font-size: 0.9rem;
}

.upgrade-main-offer .btn-lg {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.best-value-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    background-color: var(--warning-color);
    color: var(--bs-body-bg);
    padding: 0.5rem 1.5rem 0.5rem 2rem;
    font-weight: 600;
    font-size: 0.8rem;
    clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
    box-shadow: -2px 2px 5px rgba(0,0,0,0.1);
}

.upgrade-secondary-option {
    text-align: center;
    margin-top: 1.5rem;
}
.upgrade-secondary-option p {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: var(--light-text);
}
.upgrade-secondary-option .btn-link {
    font-weight: 500;
}

.social-proof-text {
    text-align: center;
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-2);
}
/* In flowNetwork-supplemental.css */

/* === UPGRADE MODAL - ECOSYSTEM OFFER CARD === */
.upgrade-ecosystem-card {
    text-align: center;
    margin-top: 2rem;
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    position: relative;
    border: 1px solid var(--info-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--info-color) 15%, var(--card-bg)), color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)));
    box-shadow: 0 4px 20px color-mix(in srgb, var(--info-color) 20%, transparent);
}

.special-offer-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning-color);
    color: var(--bs-body-bg);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-md);
}

.upgrade-ecosystem-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.upgrade-ecosystem-card p {
    font-size: 0.95rem;
    color: var(--light-text);
    max-width: 500px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Countdown Timer Styles */
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: color-mix(in srgb, var(--bs-body-bg) 20%, transparent);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    min-width: 60px;
}

.time-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading-text);
    line-height: 1.1;
}

.time-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--light-text);
}

.time-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light-text);
    padding-bottom: 1rem; /* Aligns with labels */
}

.upgrade-ecosystem-card .btn-info {
    font-weight: 600;
    background-color: var(--info-color);
    border-color: var(--info-color);
}
.upgrade-ecosystem-card .btn-info:hover {
    background-color: color-mix(in srgb, var(--info-color) 85%, black);
    border-color: color-mix(in srgb, var(--info-color) 85%, black);
}
/* In flowNetwork-supplemental.css */

/* === UPGRADE MODAL - ECOSYSTEM OFFER CARD === */
.upgrade-ecosystem-card {
    text-align: center;
    margin-top: 2rem;
    padding: 2rem 1.5rem;
    border-radius: var(--border-radius-lg);
    position: relative;
    border: 1px solid var(--info-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--info-color) 15%, var(--card-bg)), color-mix(in srgb, var(--primary-color) 10%, var(--card-bg)));
    box-shadow: 0 4px 20px color-mix(in srgb, var(--info-color) 20%, transparent);
}

.special-offer-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning-color);
    color: var(--bs-body-bg);
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-md);
}

.upgrade-ecosystem-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.upgrade-ecosystem-card p {
    font-size: 0.95rem;
    color: var(--light-text);
    max-width: 500px;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
}

/* Countdown Timer Styles */
.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.time-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: color-mix(in srgb, var(--bs-body-bg) 20%, transparent);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    min-width: 60px;
}

.time-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--heading-text);
    line-height: 1.1;
}

.time-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--light-text);
}

.time-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--light-text);
    padding-bottom: 1rem; /* Aligns with labels */
}

.upgrade-ecosystem-card .btn-info {
    font-weight: 600;
    background-color: var(--info-color);
    border-color: var(--info-color);
}
.upgrade-ecosystem-card .btn-info:hover {
    background-color: color-mix(in srgb, var(--info-color) 85%, black);
    border-color: color-mix(in srgb, var(--info-color) 85%, black);
}
/* In flowNetwork-supplemental.css */

/* === EXIT-INTENT MODAL STYLES === */
#exitIntentModal .setup-modal-card {
    /* The z-index in the HTML ensures it's on top. This is for styling. */
    border: 2px solid var(--success-color);
}

.exit-intent-offer-text {
    font-size: 1.1rem;
    color: var(--bs-body-color);
    line-height: 1.6;
}

#claimDiscountBtn i {
    margin-right: 0.5rem;
}

#leaveOfferBtn {
    font-size: 0.85rem;
    text-decoration: none;
}

/* Style for the confirmation message in the main upgrade modal */
.discount-applied-text {
    font-weight: 600;
    color: var(--success-color);
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    padding: 0.5rem 0.8rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    text-align: left;
}
/* === EXIT-INTENT MODAL CENTERING FIX === */

/*
  This rule targets the modal's gray, full-screen overlay.
  It turns the overlay into a flex container, which allows for easy centering.
*/
/* === EXIT-INTENT MODAL CENTERING FIX === */

/*
  This rule targets the modal's gray, full-screen overlay when it's active.
  It turns the overlay into a flex container, which allows for easy centering.
*/


/* === HIGH-CONVERTING ECOSYSTEM UPSELL CARD === */

.ecosystem-upsell-card {
    background: linear-gradient(135deg, #16223e, var(--primary-color));
    border-radius: var(--border-radius-lg);
    padding: 2.5rem 2rem;
    margin-top: 2rem;
    text-align: center;
    border: 1px solid var(--primary-color);
    box-shadow: 0 8px 30px rgba(67, 97, 238, 0.2);
    position: relative;
    overflow: hidden;
}

.ecosystem-upsell-card::before {
    content: '\f0d0'; /* Font Awesome rocket icon */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -50px;
    left: -50px;
    font-size: 200px;
    color: rgba(255, 255, 255, 0.05);
    transform: rotate(-25deg);
    pointer-events: none;
}

.ecosystem-upsell-card .card-icon {
    font-size: 3rem;
    color: #ffd700; /* Gold color for the icon */
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.ecosystem-upsell-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
}

.ecosystem-upsell-card .subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

.ecosystem-features-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 2.5rem auto;
    display: inline-block;
    text-align: left;
    font-size: 0.95rem;
}

.ecosystem-features-list li {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #ffffff;
}

.ecosystem-features-list li i {
    color: #32cd32; /* Lime green for checkmarks */
    font-size: 1.2rem;
}

.ecosystem-features-list li strong {
    color: #ffd700; /* Gold for tool names */
    font-weight: 600;
}

.ecosystem-upsell-card .btn-cta-ecosystem {
    background-color: #ffd700;
    color: #000;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.ecosystem-upsell-card .btn-cta-ecosystem:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.ecosystem-upsell-card .btn-cta-ecosystem i {
    margin-left: 0.5rem;
    transition: transform 0.2s ease-out;
}

.ecosystem-upsell-card .btn-cta-ecosystem:hover i {
    transform: translateX(4px);
}
/* === HIGH-CONVERTING ECOSYSTEM - TOOLS GRID === */

.ecosystem-tools-grid {
    display: grid;
    /* Creates a responsive grid that shows 2-3 columns depending on screen width */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1100px; /* Limits the width on very large screens */
    margin: 2rem auto 2.5rem auto; /* Centers the grid and adds vertical spacing */
    text-align: left;
}

.tool-card {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.tool-card:hover {
    transform: translateY(-5px);
    background-color: rgba(0, 0, 0, 0.3);
}

.tool-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffd700; /* Gold color for titles */
    margin: 0 0 0.5rem 0;
}

.tool-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}
/* === EXIT-INTENT MODAL CENTERING FIX (FORCED) === */

/*
  This rule targets the modal's overlay when active. We are using !important
  to override any conflicting styles that may be preventing it from centering.
*/
#exitIntentModal.setup-modal-overlay.active {
  display: flex !important;           /* Force the overlay to be a flex container. */
  align-items: center !important;     /* Force vertical centering. */
  justify-content: center !important; /* Force horizontal centering. */
}

/*
  This rule ensures the modal card itself doesn't have conflicting
  margins that could interfere with the centering.
*/
#exitIntentModal .setup-modal-card {
  margin: 0; /* Resets any margins on the card itself. */
}
/* === SELF-CONTAINED EXIT INTENT MODAL REMAKE === */

.ei-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 17, 23, 0.8); /* Darker, more focused background */
  z-index: 2000; /* High z-index to ensure it's on top */

  /* Flexbox for perfect centering */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Animation for fade-in effect */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.ei-modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.ei-modal-content {
  position: relative; /* For positioning the close button */
  background-color: var(--card-bg);
  border: 1px solid var(--success-color); /* Highlight with success color */
  border-radius: var(--border-radius-lg);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  text-align: center;

  /* Animation for a subtle "pop" effect */
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ei-modal-overlay.active .ei-modal-content {
  transform: scale(1);
}

.ei-modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2.5rem; /* Larger, easier to click 'x' */
  color: var(--light-text);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ei-modal-close-btn:hover {
  color: var(--bs-body-color);
  transform: scale(1.1);
}

/* Styles for the content inside the modal */
.ei-modal-body h3 {
    color: var(--heading-text);
}

.ei-modal-body .exit-intent-offer-text {
    font-size: 1.1rem;
    color: var(--bs-body-color);
    line-height: 1.6;
}
/* === PRICING PLAN TOGGLE STYLES === */

.plan-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem; /* Add more space below the toggle */
    font-weight: 600;
    color: var(--light-text);
}

.plan-toggle-container .badge {
    vertical-align: middle;
    font-size: 0.8em;
    padding: .3em .5em;
}

.plan-price .saved-amount {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--success-color);
    margin-top: 0.5rem;
    animation: fadeIn 0.5s ease;
}

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

/* === DISCOUNTED PRICING DISPLAY STYLES === */

.plan-price .price-container {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
}

.plan-price .original-price {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--light-text);
    text-decoration: line-through;
}

.plan-price .final-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--success-color); /* Highlight the discounted price in green */
}

.plan-price .price-period {
    font-size: 1rem;
    font-weight: 500;
    color: var(--light-text);
    display: block;
    margin-top: -0.5rem; /* Pull it slightly closer to the price */
}

.plan-price .saved-amount {
    color: var(--success-color); /* Also make the "saved" text green */
}
/* === Header Upgrade Button === */
#headerUpgradeBtn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    height: 38px; /* Match height of other header action buttons */
    flex-shrink: 0; /* Prevents the button from shrinking on smaller screens */
    box-shadow: var(--shadow-sm);
}

#headerUpgradeBtn i {
    margin-right: 0.5rem;
    font-size: 0.9em;
}

/* On smaller screens, hide the text to save space and turn it into an icon-only button */
@media (max-width: 768px) {
    #headerUpgradeBtn .btn-text {
        display: none;
    }
    #headerUpgradeBtn i {
        margin-right: 0;
    }
    #headerUpgradeBtn {
        width: 38px; /* Become a square icon-only button */
        padding: 0; /* Remove padding for icon-only style */
    }
}
/* --- New style for "Included in Plan" button --- */
.btn-included {
    background-color: var(--secondary-color); /* A neutral, less urgent color */
    color: white;
    border-color: var(--secondary-color);
    cursor: default; /* Change cursor to indicate it's not clickable */
    opacity: 0.8; /* Slightly muted */
    box-shadow: none; /* No shadow */
    transition: none; /* No hover effect */
}

.btn-included:hover {
    background-color: var(--secondary-color); /* Keep same background on hover */
    color: white;
    border-color: var(--secondary-color);
    transform: none; /* No transform on hover */
    box-shadow: none; /* No shadow on hover */
}
/* --- New style for "Included in Plan" button --- */
.btn-included {
    background-color: var(--secondary-color); /* A neutral, less urgent color */
    color: white;
    border-color: var(--secondary-color);
    cursor: default; /* Change cursor to indicate it's not clickable */
    opacity: 0.8; /* Slightly muted */
    box-shadow: none; /* No shadow */
    transition: none; /* No hover effect */
}

.btn-included:hover {
    background-color: var(--secondary-color); /* Keep same background on hover */
    color: white;
    border-color: var(--secondary-color);
    transform: none; /* No transform on hover */
    box-shadow: none; /* No shadow on hover */
}
/* Add this if not already present or adjust existing */
.login-prompt-overlay {
    position: absolute; /* Position it relative to its parent (#myReferralsPageContent) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--card-bg-rgb, 13, 17, 23), 0.9); /* Semi-transparent overlay matching your theme */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 10; /* Ensure it's above the actual content but below modals */
    padding: 20px;
}

.login-prompt-overlay.hidden {
    display: none;
}

.login-prompt-content {
    background-color: var(--card-bg); /* Or transparent if you want the main overlay to be the only background */
    padding: 30px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 100%;
    border: 1px solid var(--bs-border-color);
}

.login-prompt-content h3 {
    font-size: 1.5rem;
    color: var(--heading-text);
    margin-bottom: 1rem;
}

.login-prompt-content .light-text {
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

/* Ensure buttons within the overlay are styled correctly */
.login-prompt-content .btn {
    width: auto; /* Allow button to size naturally */
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
}
/* Existing (or new) styles for the login-prompt-overlay */
#sendReferralPageContent .login-prompt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--card-bg-rgb), 0.9); /* Semi-transparent background */
    z-index: 10; /* Above the content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    transition: opacity 0.3s ease;
}

#sendReferralPageContent .login-prompt-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Allows clicks to pass through when hidden */
}

#sendReferralPageContent .login-prompt-content {
    background-color: var(--card-bg); /* Use card background for the prompt box */
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 30px;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

#sendReferralPageContent .login-prompt-content h3 {
    margin-top: 15px;
    font-size: 1.5rem;
    color: var(--heading-text);
}

#sendReferralPageContent .login-prompt-content .light-text {
    margin-bottom: 25px;
}
/* flowNetwork-supplemental.css */

/* === MY REFERRALS PAGE REDESIGN === */
.referrals-container-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--card-bg);
}

.referrals-container-card .card-body {
    padding: 1.5rem;
    background-color: var(--input-bg);
}

/* Tab styling */
.mgmt-tabs-nav .mgmt-tab-link {
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-bottom: 3px solid transparent;
}

/* Filter controls styling */
.referral-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.referral-filters .input-with-icon {
    min-width: 250px;
}

.referral-filters .form-control-sm {
    min-width: 180px;
}

.referral-filters .btn-icon {
    background-color: transparent;
    border: 1px solid var(--input-border);
    color: var(--light-text);
}

.referral-filters .btn-icon:hover {
    background-color: var(--menu-hover-bg);
    color: var(--primary-color);
}

/* Grid for the referral cards */
.referral-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Individual referral card */
.referral-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.referral-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

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

.referral-agent-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    color: var(--heading-text);
}

.referral-agent-info i {
    color: var(--secondary-color);
}

.referral-card-header .status-badge {
    text-transform: capitalize;
    font-size: 0.8rem;
    padding: .4em .8em;
}

.referral-card-body {
    padding: 1.25rem;
    flex-grow: 1;
}

.referral-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.detail-item {
    font-size: 0.9rem;
     min-width: 0; 
}

.detail-item .label {
    display: block;
    color: var(--light-text);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.detail-item .value {
    font-weight: 500;
    color: var(--bs-body-color);
       overflow-wrap: break-word; /* Breaks long words or strings of numbers */
    word-wrap: break-word;     /* Legacy fallback for the property above */
    word-break: break-word;    /* Helps ensure the line breaks correctly */
    white-space: normal;       /* Ensures text wraps as expected */
   
}

.referral-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--input-border);
    background-color: var(--input-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: var(--border-radius-lg);
    border-bottom-right-radius: var(--border-radius-lg);
}

.referral-card-footer .date-info {
    font-size: 0.8rem;
    color: var(--light-text);
}

.referral-card-footer .update-status-btn {
    font-size: 0.85rem;
}

/* Styles for loading/empty state */
.grid-placeholder {
    grid-column: 1 / -1; /* Make it span the full grid width */
    text-align: center;
    padding: 3rem;
    color: var(--light-text);
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    border: 1px dashed var(--input-border);
}

/* Status Badge Colors */
.status-badge.status-pending { background-color: var(--warning-color); color: var(--text-inverted); }
.status-badge.status-accepted { background-color: var(--primary-color); color: white; }
.status-badge.status-inprogress { background-color: var(--info-color); color: white; }
.status-badge.status-closed { background-color: var(--success-color); color: white; }
.status-badge.status-rejected { background-color: var(--danger-color); color: white; }
/* flowNetwork-supplemental.css */

/* === MY REFERRALS PAGE - HEIGHT & LAYOUT EXPANSION === */
/* flowNetwork-supplemental.css */

/* === MY REFERRALS PAGE - FULL HEIGHT LAYOUT & STYLING === */

/* Ensure the page section and its wrapper can grow vertically */
#myReferralsPageContent,
.my-referrals-actual-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0; /* Flexbox safeguard for overflow */
}

/* Make the main card expand to fill the available space */
.referrals-container-card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* Make the card body a flex container that can grow */
.referrals-container-card .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    padding: 1.5rem;
    background-color: var(--input-bg);
}

/* Make the tab content area grow */
.mgmt-tab-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* Make the active tab panel (which contains the grid) grow */
.mgmt-tab-panel.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
}

/* NEW: Make the empty state placeholder fill the empty space */
.grid-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* This is the key change to expand the empty state */
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--light-text);
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    border: 2px dashed var(--input-border);
}


/* === TABS & FILTERS STYLING (Refined) === */

.referrals-container-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Tab button container */
.mgmt-tabs-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: none;
    background-color: var(--input-bg);
    padding: 0.5rem;
    border-radius: var(--border-radius);
}

/* Individual tab button styling */
.mgmt-tabs-nav .mgmt-tab-link {
    flex-grow: 1;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    background: none;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Hover effect for inactive tabs */
.mgmt-tabs-nav .mgmt-tab-link:not(.active):hover {
    color: var(--heading-text);
    background-color: var(--menu-hover-bg);
}

/* Active tab styling */
.mgmt-tabs-nav .mgmt-tab-link.active {
    background-color: var(--card-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--bs-border-color);
}

/* Filter controls styling */
.referral-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.referral-filters .input-with-icon {
    min-width: 250px;
}
.recipient-info-link {
    text-decoration: none;
    color: inherit; /* Inherits the color from the parent, so it doesn't look like a standard blue link */
    padding: 0.5rem;
    margin: -0.5rem; /* Negative margin to make the clickable area larger without affecting layout */
    border-radius: var(--border-radius);
    transition: background-color 0.2s ease;
}

.recipient-info-link:hover {
    background-color: var(--menu-hover-bg); /* Adds a subtle hover effect */
}
#userProfilePageContent {
    overflow-y: auto !important;
}
/* In flowNetwork-supplemental.css */

/* === PROFILE EDIT FOOTER === */
.profile-edit-footer {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 0.75rem; /* Space between buttons */
    padding: 1rem 1.5rem; /* Padding for the footer area */
    border-top: 1px solid var(--bs-border-color); /* Separator line */
    background-color: var(--card-bg); /* Match the card background */
    flex-shrink: 0; /* Prevents the footer from shrinking */
}
/* === REFERRAL FROM PROFILE MODAL STYLES === */
.profile-referral-listings-grid {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.5rem;
    margin: 1rem -0.5rem;
    border-top: 1px solid var(--input-border);
    border-bottom: 1px solid var(--input-border);
}

.referral-listing-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.referral-listing-item:hover {
    background-color: var(--menu-hover-bg);
}

.referral-listing-item.selected {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.referral-listing-item img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.referral-listing-item-info .title {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.referral-listing-item-info .price {
    font-size: 0.9rem;
    color: var(--light-text);
}
/* In flowNetwork-supplemental.css */

/* ... (existing styles) ... */

/* Styles for the new action buttons on listing cards */
.panel-listing-card .card-actions {
    display: flex; /* Makes buttons lay out horizontally */
    gap: 0.5rem; /* Space between the buttons */
    margin-top: 0.75rem; /* Space above buttons */
    /* Ensure buttons within this container behave responsively */
    flex-wrap: wrap; /* Allow buttons to wrap if space is limited */
}

.panel-listing-card .card-actions .btn {
    flex-grow: 1; /* Allow buttons to grow to fill space */
    font-size: 0.78rem; /* Slightly smaller font for compactness */
    padding: 0.3rem 0.6rem; /* Adjusted padding */
}

/* Specific styling for the 'View Details' button if needed to align with new buttons */
.panel-listing-card .view-details-btn {
    /* If you want it to be a block button: */
    display: block;
    width: 100%;
    text-align: center;
}

/* For profile listings grid, ensure button styling is consistent */
.profile-listings-grid .panel-listing-card .card-actions .btn {
    /* If different sizing is needed for profile listings, adjust here */
}

/* Disable styles for buttons that are disabled */
.panel-listing-card .card-actions .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}
.info-window-actions {
    display: flex;
    gap: 0.5rem; /* Creates space between the two buttons */
    margin-top: 0.75rem; /* Creates space above the buttons, below "View Details" */
}

.info-window-actions .btn {
    flex-grow: 1; /* Makes both buttons share the space equally */
}
/* === ADD NEW LISTING: STEP 2 STYLING === */

/* Main container for the step for consistent padding */
#listingStep2 {
    padding: 0.5rem 0.25rem;
    animation: fadeIn 0.5s ease;
}

/* Column titles for clear sectioning */
#listingStep2 h4 {
    font-size: 1.2rem; /* Make titles slightly more prominent */
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 1.75rem; /* More space below title */
    padding-bottom: 0.75rem; /* Padding for the border */
    border-bottom: 1px solid var(--border-color-2); /* A nice separator line */
}

#listingStep2 h4 i {
    font-size: 0.9em; /* Adjust icon size to match text */
    opacity: 0.9; /* Slightly mute the icon color for elegance */
    margin-right: 0.75rem;
}

/* Spacing for all form groups */
#listingStep2 .form-group {
    margin-bottom: 1.25rem;
}

/* Add a subtle visual divider between key field groups */
#listingStep2 .col-md-6 > .form-group:nth-of-type(2), /* After Property Type */
#listingStep2 .col-md-6 > .form-group:nth-of-type(5)  /* After SqFt/Lot Size */
{
    position: relative;
    padding-bottom: 1.25rem;
}

#listingStep2 .col-md-6 > .form-group:nth-of-type(2)::after,
#listingStep2 .col-md-6 > .form-group:nth-of-type(5)::after
{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--input-border);
    opacity: 0.6;
}


/* Style for input fields to ensure consistency */
#listingStep2 .form-control {
    font-size: 0.95rem; /* Slightly larger font for readability */
    padding: 0.7rem 1rem; /* More comfortable padding */
    background-color: var(--input-bg);
}

#listingStep2 .form-control:focus {
    background-color: var(--card-bg); /* Change background on focus for clarity */
}


/* Remove the top margin from the first element in each column for better alignment with the title */
#listingStep2 > .row > .col-md-6 > h4:first-of-type + .form-group {
    margin-top: 0;
}
/* In flowNetwork-supplemental.css */

/* === SEND REFERRAL WIZARD ENHANCEMENTS === */

.wizard-card {
    padding: 2rem 2.5rem;
}

.wizard-step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 2rem;
    text-align: center;
}

/* Enhanced Progress Bar */
.wizard-progress.enhanced {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
}

.wizard-progress.enhanced::before {
    content: '';
    position: absolute;
    top: 20px; /* Center of the circle */
    left: 15%;
    right: 15%;
    height: 3px;
    background-color: var(--input-border);
    z-index: 0;
}

.wizard-progress.enhanced .progress-step {
    text-align: center;
    width: 120px;
    position: relative;
    z-index: 1;
}

.wizard-progress.enhanced .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 3px solid var(--input-border);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.wizard-progress.enhanced .step-label {
    font-size: 0.9rem;
    color: var(--light-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.wizard-progress.enhanced .progress-step.active .step-circle {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

.wizard-progress.enhanced .progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.wizard-progress.enhanced .progress-step.completed .step-circle {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.wizard-progress.enhanced .progress-step.completed .step-label {
    color: var(--success-color);
}


/* Agent Search Results */
.search-results-dropdown .loading-spinner {
    padding: 1rem;
    text-align: center;
    color: var(--light-text);
}

.search-result-item .avatar {
    width: 45px;
    height: 45px;
}
.search-result-item div strong {
    font-size: 0.95rem;
}
.search-result-item div .light-text {
    font-size: 0.85rem;
}

/* Selected Recipient Card */
.selected-recipient-info {
    padding: 1rem;
    margin-top: 1.5rem;
    background-color: var(--input-bg);
    border-left: 4px solid var(--primary-color);
    animation: fadeIn 0.3s ease;
}
.selected-recipient-info .btn-link {
    font-size: 0.8rem;
    padding: 0;
}
.selected-recipient-info h4 {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
}
.selected-recipient-info .badge {
    margin-top: 0.25rem;
}

/* Property Lookup Result */
.property-lookup-result {
    padding: 1rem;
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    font-size: 0.9rem;
}

/* Step 3: Final Summary & NDA */
.final-summary-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}
.final-summary-card h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: 0.75rem;
}
.summary-list {
    font-size: 1rem;
}
.summary-list div {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
}
.summary-list dt {
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.summary-list dd {
    font-weight: 600;
    color: var(--heading-text);
}

.nda-container {
    margin-top: 2rem;
}
.nda-status-display {
    display: flex; /* This allows us to use .show later */
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

/* In flowNetwork-supplemental.css */

/* === SEND REFERRAL WIZARD ENHANCEMENTS === */

.wizard-card {
    padding: 2rem 2.5rem;
}

.wizard-step-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 2rem;
    text-align: center;
}

/* Enhanced Progress Bar */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 20px; /* Center of the circle */
    left: 15%;
    right: 15%;
    height: 3px;
    background-color: var(--input-border);
    z-index: 0;
}

.wizard-progress .progress-step {
    text-align: center;
    width: 120px;
    position: relative;
    z-index: 1;
    background-color: var(--card-bg); /* Match wizard background */
    padding: 0 5px; /* Create space around the text */
}

.wizard-progress .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--card-bg);
    border: 3px solid var(--input-border);
    color: var(--light-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.wizard-progress .step-label {
    font-size: 0.9rem;
    color: var(--light-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.wizard-progress .progress-step.active .step-circle {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

.wizard-progress .progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.wizard-progress .progress-step.completed .step-circle {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.wizard-progress .progress-step.completed .step-label {
    color: var(--success-color);
}


/* Agent Search Results */
.search-results-dropdown .loading-spinner {
    padding: 1rem;
    text-align: center;
    color: var(--light-text);
}

.search-result-item .avatar {
    width: 45px;
    height: 45px;
}
.search-result-item div strong {
    font-size: 0.95rem;
}
.search-result-item div .light-text {
    font-size: 0.85rem;
}

/* Selected Recipient Card */
.selected-recipient-info {
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    background-color: var(--input-bg);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    animation: fadeIn 0.3s ease;
}
.selected-recipient-info .btn-link {
    font-size: 0.8rem;
    padding: 0;
}
.selected-recipient-info h4 {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
}
.selected-recipient-info .badge {
    margin-top: 0.25rem;
}

/* Step 3: Final Summary & NDA */
.final-summary-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}
.final-summary-card h4 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: 0.75rem;
}
.summary-list {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.summary-list div {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color-2);
}
.summary-list div:last-child {
    border-bottom: none;
}
.summary-list dt {
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.summary-list dd {
    font-weight: 600;
    color: var(--heading-text);
}

.nda-container {
    margin-top: 2rem;
}
.nda-status-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.avatar {
    object-fit: cover; /* This is the key property! */
    background-color: var(--input-bg); /* Shows a clean background before image loads or if it's transparent */
}
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    color: white;
    background-color: var(--secondary-color); /* A neutral, theme-consistent color */
    text-transform: uppercase;
}
/* This ensures the larger avatar on the profile page also behaves correctly. */
.profile-avatar img {
    object-fit: cover;
    background-color: var(--card-bg);
}

/* Styles the placeholder generated by ui-avatars.com to look clean */
img[src*="ui-avatars.com"] {
    background-color: #343a40; /* Matches the background color set in the URL */
}
/* In flowNetwork-supplemental.css */

/* === WIZARD STEP 2 - PROPERTY SELECTION TABS === */
.wizard-tabs-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--input-border);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.wizard-tab-link {
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--light-text);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wizard-tab-link:hover {
    color: var(--heading-text);
}

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

.wizard-tab-panel.hidden {
    display: none;
}

.recipient-listings-container {
    max-height: 40vh;
    overflow-y: auto;
    padding: 0.5rem;
    margin: 1rem -0.5rem;
    background-color: var(--bs-body-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.recipient-listing-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.recipient-listing-item:hover {
    background-color: var(--menu-hover-bg);
}

.recipient-listing-item.selected {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.recipient-listing-item img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

.recipient-listing-item-info .title {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.recipient-listing-item-info .price {
    font-size: 0.9rem;
    color: var(--light-text);
}
/* In flowNetwork-supplemental.css */

/* === DYNAMIC COMMISSION CONTROLS STYLES === */

.commission-ui-variant.hidden {
    display: none !important;
}

/* Button Group Styling */
.commission-button-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.commission-button-group .btn {
    flex-grow: 1;
}

/* Style for the active/selected button */
.commission-button-group .btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Slider Styling */
#commissionSliderContainer {
    padding: 1rem 0.5rem;
}

.slider-value-display {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--light-text);
}

.slider-value-display strong {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 600;
}

/* noUiSlider Custom Theme */
#commissionSlider .noUi-target {
    background: var(--input-bg);
    border-radius: 6px;
    border: 1px solid var(--input-border);
    box-shadow: none;
    height: 8px;
}

#commissionSlider .noUi-connect {
    background: var(--primary-color);
}

#commissionSlider .noUi-handle {
    border: 3px solid var(--card-bg);
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: var(--shadow-md);
    height: 22px;
    width: 22px;
    top: -8px;
    right: -11px;
    cursor: grab;
}
#commissionSlider .noUi-handle:focus {
    outline: none;
}
#commissionSlider .noUi-handle::before,
#commissionSlider .noUi-handle::after {
    display: none;
}

/* Static text for Free plan */
.static-commission-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    border: 1px dashed var(--input-border);
    text-align: center;
}
/* In flowNetwork-supplemental.css */

/* === COMMISSION INFO ICON STYLING === */
.commission-info-icon {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.commission-info-icon:hover {
    transform: scale(1.2);
    color: var(--bs-link-hover-color);
}
/* In flowNetwork-supplemental.css */

/* === COMMISSION EXPLANATION MODAL STYLING === */
/* In flowNetwork-supplemental.css */

/* === UPGRADED COMMISSION EXPLANATION STYLING === */

.commission-explanation {
    text-align: left;
    padding: 0.5rem;
}

.commission-explanation h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.5rem;
    text-align: center;
}

.commission-explanation > p {
    font-size: 0.95rem;
    color: var(--light-text);
    text-align: center;
    margin-bottom: 1.5rem;
    max-width: 50ch; /* Improves readability */
    margin-left: auto;
    margin-right: auto;
}

.plan-breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* This is the new "mini-card" style for each list item */
.plan-breakdown-list li {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background-color: var(--input-bg);
    padding: 1rem 1.25rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
    border-left-width: 5px; /* Create a colored accent border */
    transition: all 0.2s ease-out;
}

.plan-breakdown-list li:hover {
    transform: scale(1.02);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

/* Color-code the left border based on the plan */
.plan-breakdown-list li.is-elite { border-left-color: #ffd700; }
.plan-breakdown-list li.is-plus { border-left-color: var(--primary-color); }
.plan-breakdown-list li.is-pro { border-left-color: var(--info-color); }
.plan-breakdown-list li.is-free { border-left-color: var(--secondary-color); }

/* Container for the icon */
.plan-icon-container {
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* Match the icon color to the border color */
.plan-breakdown-list li.is-elite .plan-icon-container { color: #ffd700; }
.plan-breakdown-list li.is-plus .plan-icon-container { color: var(--primary-color); }
.plan-breakdown-list li.is-pro .plan-icon-container { color: var(--info-color); }
.plan-breakdown-list li.is-free .plan-icon-container { color: var(--secondary-color); }

/* Container for the text content */
.plan-text-container {
    display: flex;
    flex-direction: column;
}

.plan-text-container .plan-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--heading-text);
    margin-bottom: 0.2rem;
}

.plan-text-container .plan-feature {
    font-size: 0.9rem;
    color: var(--light-text);
    line-height: 1.5;
}

/* Call to action buttons container */
.commission-cta-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-2);
}

.commission-cta-container .btn {
    width: 100%;
    padding: 0.8rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
}
/* In flowNetwork-supplemental.css */

/* === PLAN CARD "SEE OTHER FEATURES" LINK === */

.plan-details-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.plan-details-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

.plan-details-link i {
    margin-left: 0.25rem;
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.plan-details-link:hover i {
    transform: translateX(4px);
}
/* In flowNetwork-supplemental.css */

/* === COMMISSION AMOUNT DISPLAY BOX === */

.commission-display-box {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    text-align: right;
    min-height: 55px; /* Ensures consistent height */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.commission-display-box span {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--success-color);
    line-height: 1.2;
}

/* In flowNetwork-supplemental.css */

/* === WIZARD STEP 3: FINAL REVIEW & AGREEMENT === */

.final-step-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Right column is slightly wider */
    gap: 2rem;
    align-items: flex-start;
}

@media (max-width: 992px) {
    .final-step-grid {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
}

.final-summary-card, .final-agreement-card {
    height: 100%; /* Make cards in the grid equal height */
}

/* Summary Card Styling */
.final-summary-card .card-header h4,
.final-agreement-card .card-header h4 {
    font-size: 1.1rem;
    color: var(--heading-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.final-summary-card .card-header i,
.final-agreement-card .card-header i {
    color: var(--primary-color);
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
}
.summary-list div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--input-border);
}
.summary-list div:last-child {
    border-bottom: none;
}
.summary-list dt {
    color: var(--light-text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.summary-list dt i {
    width: 20px;
    text-align: center;
}
.summary-list dd {
    font-weight: 600;
    color: var(--heading-text);
    text-align: right;
}

/* Agreement Card & Terms Container Styling */
#finalAgreementCard .card-body {
    display: flex;
    flex-direction: column;
}

.terms-container {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    max-height: 300px; /* Crucial for making it scrollable */
    overflow-y: auto;
    flex-grow: 1; /* Allows it to take up space in the flex container */
}

/* T&C Typography */
.terms-container h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-text);
    margin-bottom: 1rem;
}
.terms-container h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.terms-container p,
.terms-container li {
    font-size: 0.85rem;
    color: var(--bs-body-color);
    line-height: 1.6;
}
.terms-container ol, .terms-container ul {
    padding-left: 20px;
}
.terms-container strong {
    color: var(--heading-text);
}

/* Agreement Checkbox Styling */
#finalAgreementCard .form-check {
    padding-left: 0;
}
#finalAgreementCard .form-check-label {
    cursor: pointer;
    color: var(--light-text);
    transition: color 0.2s ease;
}
#finalAgreementCard .form-check-input:disabled + .form-check-label {
    cursor: not-allowed;
    opacity: 0.6;
}
#finalAgreementCard .form-check-input:checked + .form-check-label {
    color: var(--bs-body-color);
    font-weight: 500;
}
/* In flowNetwork-supplemental.css */

/* === WIZARD STEP 3: RESTRUCTURED LAYOUT & AGREEMENT STYLES === */

.final-step-container {
    display: flex;
    flex-direction: column; /* Stack the summary and agreement cards */
    gap: 1.5rem;
}

/* Agreement Card Styling */
.agreement-card .card-body {
    display: flex;
    flex-direction: column;
}

.agreement-instructions {
    font-size: 0.9rem;
    color: var(--light-text);
    margin-bottom: 1rem;
    padding: 0.75rem;
    text-align: center;
    background-color: var(--input-bg);
    border-radius: var(--border-radius);
}

.terms-container {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    max-height: 350px;
    overflow-y: auto;
    flex-grow: 1;
    margin-bottom: 1.5rem;
}

.terms-container::-webkit-scrollbar {
    width: 8px;
}
.terms-container::-webkit-scrollbar-track {
    background: transparent;
}
.terms-container::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px;
}

/* Typography inside the terms container */
.terms-container h3 { font-size: 1.1rem; font-weight: 700; color: var(--heading-text); margin-bottom: 1rem; }
.terms-container h4 { font-size: 1rem; font-weight: 600; color: var(--primary-color); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.terms-container p, .terms-container li { font-size: 0.9rem; color: var(--bs-body-color); line-height: 1.7; }
.terms-container ol, .terms-container ul { padding-left: 20px; }
.terms-container strong { color: var(--heading-text); }

/* Agreement Button & Confirmation Message */
.agreement-action-container {
    padding-top: 1rem;
    border-top: 1px solid var(--input-border);
}

#acknowledgeTermsBtn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.9rem;
}

#acknowledgeTermsBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.agreement-acknowledged-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--border-radius);
    background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}
/* In flowNetwork-supplemental.css */

/* === WIZARD STEP 3: POLISHED AGREEMENT UI === */

/* This turns the step into a single, spaced-out column */
.final-step-container {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Increased space between summary and agreement cards */
}

/* Base style for both cards in this step */
.final-step-container .card {
    border: 1px solid var(--bs-border-color);
    background-color: var(--card-bg);
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-lg);
}

/* Specific styling for the new Agreement Card */
.agreement-card {
    border-left: 4px solid var(--primary-color); /* Adds a primary color accent */
    background-color: transparent; /* Makes it blend with the page background */
    border-top: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
}

.agreement-card .card-header {
    background-color: transparent;
    border-bottom: none;
    padding-left: 0;
    padding-top: 0;
}

.agreement-card .card-header h4 {
    font-size: 1.3rem; /* Larger title */
    color: var(--heading-text);
}

.agreement-card .card-body {
    padding: 0.5rem 0 0 0; /* Adjust padding */
}

/* Instructions text above the terms */
.agreement-instructions {
    font-size: 0.95rem;
    color: var(--light-text);
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    text-align: left;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
}

/* Polished Terms & Conditions Container */
.terms-container {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    max-height: 320px;
    overflow-y: auto;
    /* Inset shadow for depth */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.terms-container p, .terms-container li {
    font-size: 0.9rem; /* Slightly larger for readability */
    color: var(--bs-body-color);
    line-height: 1.7;
}

/* Polished Acknowledgment Button */
#acknowledgeTermsBtn {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    transition: all 0.2s ease-in-out;
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 15px -5px var(--primary-color);
}

#acknowledgeTermsBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--primary-color);
}

#acknowledgeTermsBtn:disabled {
    background-color: var(--secondary-color);
    box-shadow: none;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Polished Confirmation Message */
.agreement-acknowledged-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--border-radius);
    background-color: transparent;
    color: var(--success-color);
    border: 2px solid var(--success-color);
    animation: pulse-border 1.5s infinite;
}

/* Pulsing animation for the success message border */
@keyframes pulse-border {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-color) 30%, transparent); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--success-color) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-color) 0%, transparent); }
}
/* In flowNetwork-supplemental.css */

/* === REFERRAL DETAILS MODAL STYLES === */

.referral-details-modal-body {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Left column for sender, right for details */
    gap: 1.5rem;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .referral-details-modal-body {
        grid-template-columns: 1fr; /* Stack columns on mobile */
    }
}

.sender-profile-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    text-align: center;
}

.sender-profile-card .avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    border: 3px solid var(--bs-border-color);
}

.sender-profile-card h5 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-text);
}

.sender-profile-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--light-text);
}
.sender-profile-card p i {
    margin-right: 0.4rem;
}

.referral-content-details .detail-group {
    margin-bottom: 1.5rem;
}

.referral-content-details h6 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--light-text);
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

.referral-content-details p {
    font-size: 1rem;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.referral-content-details p strong {
    font-weight: 600;
    color: var(--heading-text);
    margin-right: 0.5rem;
}

.referral-notes-box {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-style: italic;
    color: var(--light-text);
    line-height: 1.6;
}
.sender-profile-link {
    text-decoration: none; /* Removes the default blue underline from the link */
    display: block;
}

.sender-profile-link .sender-profile-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

.sender-profile-link:hover .sender-profile-card {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}
/* In flowNetwork-supplemental.css */

/* === REFERRAL DETAILS MODAL - MESSAGING COMPONENTS === */

.sender-profile-card {
    position: relative; /* Allows positioning the popover inside */
}

/* "Send Message" button style */
#modalSendMessageBtn {
    margin-top: 1rem;
    width: 100%;
    font-weight: 600;
}

/* The popover menu for message presets */
.message-presets-popover {
    position: absolute;
    bottom: calc(100% + 10px); /* Position above the sender card */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    z-index: 10; /* Ensure it's above other card content */
    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;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.message-presets-popover.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-5px); /* Animate upwards */
}

/* Individual preset button styling */
.message-presets-popover .preset-message-btn {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    background: none;
    border: none;
    color: var(--bs-body-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.message-presets-popover .preset-message-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--primary-color);
}
/* === STATISTICS & REPORTS PAGE STYLES === */

/* Tiered Feature Banners */
.premium-upsell-banner, .iconic-upsell-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.8rem 1.25rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}
.premium-upsell-banner {
    background-color: color-mix(in srgb, var(--info-color) 10%, transparent);
    border: 1px solid var(--info-color);
    color: var(--info-color);
}
.iconic-upsell-banner {
    background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

/* In flowNetwork-supplemental.css */

/* In flowNetwork-supplemental.css */


.date-range-controls, .high-tier-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.date-range-controls label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--light-text);
}

/* Main Content Area */
.stats-main-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* High-Tier Bonus Tiles */
.high-tier-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    border: 2px dashed var(--primary-color);
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
}
.kpi-card.bonus-kpi {
    background-color: var(--card-bg); /* Ensure they look like cards inside the container */
}
.kpi-card.bonus-kpi .value {
    color: var(--primary-color); /* Highlight bonus KPI values */
}

/* Charts Grid Layout */
.stats-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.chart-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
}
.chart-card.premium-feature {
    border-color: var(--primary-color); /* Highlight premium charts */
}
.chart-card .card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--input-border);
}
.chart-card .card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
}
.chart-card .card-header h4 i {
    color: var(--primary-color);
    margin-right: 0.5rem;
}
.chart-card .card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart-card canvas {
    max-height: 300px;
    width: 100%;
}

/* Footer Notes */
.stats-footer-notes {
    text-align: center;
    font-size: 0.85rem;
    color: var(--light-text);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .stats-charts-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 992px) {
    .sticky-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
}
/* In flowNetwork-supplemental.css */

.listing-specs-grid .spec-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--card-bg);
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.listing-specs-grid .spec-item i {
    font-size: 1.6rem;
    color: var(--primary-color);
    width: 35px;
    text-align: center;
    flex-shrink: 0;
}

.listing-specs-grid .spec-item div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.listing-specs-grid .spec-item div strong {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
}

.listing-specs-grid .spec-item div span {
    font-size: 0.8rem;
    color: var(--light-text);
}
/* === D3.JS CHART STYLES === */

.d3-chart-container {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.d3-chart-container svg {
    display: block;
    width: 100%;
    height: 100%;
}

.axis path,
.axis line {
    fill: none;
    stroke: var(--border-color-2);
    shape-rendering: crispEdges;
}

.axis text {
    font-size: 0.8rem;
    fill: var(--light-text);
}

.grid-line {
    stroke: var(--input-border);
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}

.bar {
    fill: rgba(67, 97, 238, 0.7); /* Same as Chart.js blue, but slightly less opaque */
    transition: fill 0.2s ease-in-out;
}

.bar:hover {
    fill: var(--primary-color);
}

.line {
  fill: none;
  stroke: var(--success-color);
  stroke-width: 2.5px;
}

.line-area {
    fill: url(#commission-gradient);
}

.dot {
    fill: var(--success-color);
    stroke: var(--card-bg);
    stroke-width: 2px;
}

.d3-tooltip {
    position: absolute;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.85rem;
    background: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.d3-tooltip strong {
    color: var(--primary-color);
}
/* In flowNetwork-supplemental.css */

/* === UPGRADED LISTING SPECS GRID === */
.listing-specs-grid .spec-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--card-bg);
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--input-border);
}

.listing-specs-grid .spec-item i {
    font-size: 1.6rem;
    color: var(--primary-color);
    width: 35px;
    text-align: center;
    flex-shrink: 0;
}

.listing-specs-grid .spec-item div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.listing-specs-grid .spec-item div strong {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--heading-text);
}

.listing-specs-grid .spec-item div span {
    font-size: 0.8rem;
    color: var(--light-text);
}


/* === UPGRADED ACCORDION STYLES FOR LISTING DETAILS === */
.details-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.details-accordion details {
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    background-color: var(--input-bg);
    transition: all 0.2s ease-in-out;
}

.details-accordion details[open] {
    border-color: var(--primary-color);
    background-color: var(--card-bg);
}

.details-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--heading-text);
    list-style: none; /* Removes the default triangle marker */
}

.details-accordion summary:hover {
    color: var(--primary-color);
}

.details-accordion summary::after {
    content: '\f054'; /* Font Awesome icon: chevron-right */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform 0.3s ease;
    font-size: 0.9em;
    color: var(--secondary-color);
}

.details-accordion details[open] > summary::after {
    transform: rotate(90deg); /* Rotates the chevron when open */
}

.details-accordion .accordion-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--input-border);
}

.accordion-content .row {
    padding-top: 1rem;
    font-size: 0.9rem;
}

.accordion-content .row dt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--light-text);
    padding-bottom: 0.75rem;
}

.accordion-content .row dt i.fas {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
    font-size: 1.1em;
}

.accordion-content .row dd {
    font-weight: 500;
    color: var(--bs-body-color);
    padding-bottom: 0.75rem;
}
/* In flowNetwork-supplemental.css */

/* In flowNetwork-supplemental.css */

/* === LISTING DETAIL PAGE - ACTION BUTTONS === */
#listingActionButtons {
  margin-top: 1rem;
  display: grid; 
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem; /* <-- INCREASED FROM 0.75rem */
}

/* (The rest of the rules for .btn and .btn:hover remain the same) */
#listingActionButtons .btn {
  font-weight: 600; 
  padding: 0.6rem 0.5rem; 
  font-size: 0.9rem;
  border-radius: var(--border-radius);
  transition: all 0.2s ease-in-out; 
}

#listingActionButtons .btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#listingActionButtons .btn-primary:hover:not(:disabled) {
    color: white;
}

#listingActionButtons .btn-info-outline:hover:not(:disabled) {
    color: white;
}

/* === LOCKED PREMIUM FEATURE STYLES === */

.premium-feature-wrapper {
    position: relative; /* This is the container for the overlay */
    border-radius: var(--border-radius-lg);
    overflow: hidden; /* Keeps the overlay's corners rounded */
}

.locked-feature-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Sits on top of the feature content */
    
    /* The blur effect */
    background-color: rgba(var(--card-bg-rgb), 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Flexbox for centering the unlock button */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

/* This class, toggled by JS, makes the overlay visible */
.premium-feature-wrapper.is-locked .locked-feature-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.locked-feature-content i {
    font-size: 2.5rem;
    color: var(--heading-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.unlock-feature-btn {
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 15px -5px var(--primary-color);
    transition: all 0.2s ease-in-out;
}

.unlock-feature-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--primary-color);
}
/* In flowNetwork-supplemental.css */

.report-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.report-card {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

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

.report-card-info h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-text);
    margin: 0 0 0.25rem 0;
}

.report-card-info p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--light-text);
}
/* In flowNetwork-supplemental.css */

/* --- Verified Badge Styles --- */
/* In flowNetwork-supplemental.css */

/* --- UPDATED META-STYLE VERIFIED BADGE --- */

/* Style for the badge when it's inline (next to a name in InfoWindows) */
.verified-badge {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em; /* Made slightly larger to match Meta's prominence */
    color: #2575fc; /* Uses the blue from the gradient for consistency */
    margin-left: 5px;
    line-height: 1;
}

/* Style for the badge as an overlay on listing cards */
.card-image .verified-badge-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    /* This creates the blue-to-purple gradient */
    background: linear-gradient(45deg, #2575fc, #6a11cb);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    z-index: 5;
}
/* === Chat Sidebar Enhancements === */

.sidebar-header {
    display: flex;
    justify-content: flex-start; /* Align title to the left */
    align-items: center;
    padding: 0 1.5rem; /* Adjust padding */
    height: 73px;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Container for the search input and new chat button */
.sidebar-search-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
}

.sidebar-search-container .input-with-icon {
    flex-grow: 1; /* Make the search bar fill available space */
}

/* Updated styles for the new chat button */
#newChatBtn {
    flex-shrink: 0;
    background-color: var(--primary-color);
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius);
    padding: 0;
    font-size: 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

#newChatBtn i {
    margin: 0;
}

#newChatBtn:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Ensure the list container scrolls correctly */
.conversations-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.75rem;
}
/* In flowNetwork-supplemental.css */

/* User Profile Search Results Dropdown */
#userProfileSearchResults {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 1010;
    
    /* --- MODIFIED --- */
    width: 450px; /* Make the dropdown significantly wider */
    max-height: 520px; /* Allow more vertical space for taller cards */
    padding: 0.5rem; /* Add some internal padding */
    border-radius: var(--border-radius-lg); /* Use a larger radius */
    /* --- END MODIFIED --- */

    overflow-y: auto;
    background-color: var(--card-bg);
    border: 1px solid var(--input-border);
    box-shadow: var(--shadow-md);
    display: none;
}

#userProfileSearchResults.active {
    display: block;
}

/* === NEW STYLES FOR THE PROFILE PREVIEW CARD === */
.profile-preview-card {
    display: block;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.profile-preview-card:last-child {
     margin-bottom: 0;
}

.profile-preview-card:hover {
    border-color: var(--primary-color);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-2);
    padding-bottom: 1rem;
}

.preview-header .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.preview-name-group .name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--heading-text);
}
.preview-name-group .username {
    font-size: 0.9rem;
    color: var(--light-text);
}

.preview-meta {
    font-size: 0.9rem;
    color: var(--light-text);
    padding-left: 0.5rem;
}

.preview-meta p {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
}
.preview-meta p i {
    margin-right: 0.75rem;
    width: 18px;
    text-align: center;
    color: var(--secondary-color);
}
/* In flowNetwork-supplemental.css */

.page-header .header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap; /* This is the key property to prevent stacking */
}

/* Ensure the search bar has a defined width */
#userProfileSearchContainer {
    min-width: 250px;
}
/* In flowNetwork-supplemental.css */

/* --- TEXT TRUNCATION WITH ELLIPSIS STYLES --- */

/* 1. For Listing Card Titles (in the map's side panel and on user profiles) */
.panel-listing-card .card-details .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. For User Names in the Chat Conversation List (Sidebar) */
.conversation-details .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. For the Rich Profile Preview Cards in the Header Search Dropdown */
.profile-preview-card .preview-name-group .name,
.profile-preview-card .preview-meta p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. For Agent Names on the "My Referrals" Cards */
.referral-agent-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px; /* A max-width is needed to know when to truncate */
}

/* 5. For the Property Address on the "My Referrals" Cards */
.referral-card .detail-item .value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* In flowNetwork-supplemental.css */

/* === PROFILE PREVIEW CARD STYLES (CORRECTED FOR TRUNCATION) === */

.profile-preview-card .preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color-2);
}

/* This is the key fix: Constrain the width of the text container */
.preview-name-group {
    flex-grow: 1; /* Allows the container to fill available space */
    min-width: 0; /* CRITICAL: Allows the container to shrink and enables child truncation */
}

/* Apply truncation to all text elements that might overflow */
.profile-preview-card .preview-name-group .name,
.profile-preview-card .preview-name-group .username,
.profile-preview-card .preview-meta p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* Ensures the element respects width constraints */
}

/* === Header Search Bar Styles === */

/* Defines the container for the new search inputs in the header */
.page-header .header-actions .input-with-icon {
    flex-grow: 1; /* Allows search bars to expand and fill available space */
    min-width: 240px; /* Ensures they don't get too small */
}

/* Positions the icon on the LEFT side of the input */
.page-header .header-actions .input-with-icon > i.fas {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-text);
    font-size: 0.9rem;
    z-index: 2; /* Ensures icon is clickable over the input field */
}

/* Adds padding to the LEFT of the input field so text doesn't overlap the icon */
.page-header .header-actions .input-with-icon > .form-control {
    padding-left: 38px !important;
    padding-right: 1rem !important; /* Resets right padding to default */
}

/* Ensures the dropdown suggestions still appear correctly below the input */
.page-header .header-actions .search-results-dropdown {
    top: calc(100% + 2px);
    width: 100%; /* Make dropdown match the width of the input */
}
/* === Side-by-Side Filter Layout === */
.filter-row {
    display: flex;          /* Creates the horizontal layout. */
    flex-direction: row;    /* Explicitly sets the direction. */
    gap: 1rem;              /* Creates a nice space between the two filter inputs. */
    align-items: flex-start;  /* Aligns the items to the top. */
}

.filter-col {
    flex: 1;                /* This makes each column take up exactly half of the available space. */
    min-width: 0;           /* A necessary flexbox fix for input fields. */
}
.form-control-compact {
    padding-top: 0.1rem;      /* Further reduced vertical padding */
    padding-bottom: 0.1rem;   /* Further reduced vertical padding */
    padding-left: 0.5rem;     /* Adjusted horizontal padding */
    padding-right: 0.5rem;    /* Adjusted horizontal padding */
    font-size: 0.75rem;       /* Made the font slightly smaller */
    height: auto;             /* Let padding and font-size dictate the height */
}
/* === Header Avatar Icon Styles === */

/* Modify the parent button to be a proper container */
#profile-icon-btn {
    padding: 0;           /* Remove padding to let the avatar fill the space */
    overflow: hidden;       /* Ensures the circular shape clips the image correctly */
    border: 1px solid var(--input-border); /* Adds a subtle border */
}

/* Style the new avatar container div */
.header-avatar {
    width: 100%;
    height: 100%;
    background-color: var(--secondary-color); /* Fallback background for initials */
    color: white;                             /* Fallback text color for initials */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem; /* Font size for the initial letter */
    text-transform: uppercase;
}

/* Style for the image when it's loaded into the avatar container */
.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is key to make the image fill the circle without stretching */
}

/* Style for the default logged-out icon to make it fill the space */
.header-avatar > .fa-user-circle {
    font-size: 1.8rem;
    line-height: 1;
    color: var(--light-text);
}
/* In flowNetwork-supplemental.css - Add this at the end */

/* === COMPACT SIDEBAR FILTERS === */

/* 1. Reduce vertical space BETWEEN each filter group */
/* In flowNetwork-supplemental.css */

/* === FINAL SQUEEZE V2: Maximum Compactness === */

/* 1. Squeeze the card's main header and body padding */
.map-sidebar .card-header {
    padding: 0.75rem 1rem;
}
.map-sidebar .card-header h2 {
    font-size: 1.05rem; /* Smaller title */
}
.map-sidebar .card-body {
    padding: 0.75rem 1rem;
}

/* 2. Make space BETWEEN each filter group extremely tight */
.map-sidebar .form-group,
.map-sidebar .draw-filter-container {
    margin-bottom: 0.5rem; /* Drastically reduced */
}

/* 3. Make labels and inputs nearly touch */
.map-sidebar .card-body .form-group > label {
    margin-bottom: 0.2rem; /* Reduced again */
}

/* 4. Final, most compact size for input boxes and buttons */
.map-sidebar .form-control,
.draw-actions-grid .btn {
    height: 30px;       /* FINAL REDUCTION */
    font-size: 0.75rem; /* Very small font */
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

/* 5. Bring the bottom action buttons up as much as possible */
.sidebar-main-actions {
    padding-top: 0.5rem;
    margin-top: 0.75rem;
}
.sidebar-main-actions .btn {
    height: 32px; /* Match the new compact height */
}
/* In flowNetwork-supplemental.css */
/* In flowNetwork-supplemental.css */
/* In flowNetwork-supplemental.css */

/* === DYNAMIC VOICE MESSAGE PLAYER STYLES === */

.message-bubble.audio-bubble {
    padding: 8px !important;
    background-color: var(--bubble-bg-color) !important; /* Ensure background color is applied */
}

.voice-message-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 260px;
}

.play-pause-btn {
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
    /* --- Dynamic Colors --- */
    background-color: var(--bubble-text-color);
    color: var(--bubble-bg-color);
}

.play-pause-btn:hover {
    transform: scale(1.08);
}

.waveform-container {
    flex-grow: 1;
    height: 40px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.waveform-bg, .waveform-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
}

.waveform-progress {
    width: 0%; /* JS updates this to show progress */
    overflow: hidden;
    transition: width 0.1s linear;
}

.waveform-bar {
    flex-grow: 1;
    border-radius: 2px;
    width: 3px;
     height: 100%; /* <-- ADD THIS LINE */
}

.duration-text {
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
    /* --- Dynamic Color --- */
    color: var(--bubble-text-color);
    opacity: 0.85;
}

/* --- DYNAMIC WAVEFORM BAR STYLING --- */
/* The background bars are a faint version of the text color */
.waveform-bg .waveform-bar {
    background-color: var(--bubble-text-color);
    opacity: 0.4;
}

/* The progress bars are the solid text color */
.waveform-progress .waveform-bar {
    background-color: var(--bubble-text-color);
    opacity: 1;
}

/* This special rule ensures that in light mode, the received bubble's
   button is more visible against the light gray background */
body.light-mode .message-wrapper.received .play-pause-btn {
    background-color: var(--bs-border-color);
    color: var(--primary-color);
}
body.light-mode .message-wrapper.received .waveform-container {
    background-color: var(--bs-border-color); /* Light gray bars for the background */
}
/* No other overrides needed, as progress and text color adapt correctly */
/* In flowNetwork-supplemental.css */

/* === CHAT MESSAGE ACTIONS & EDITING STYLES === */

/* Container for action buttons, appears on hover over our own messages */
.message-wrapper.sent:hover .message-actions {
    opacity: 1;
}

.message-actions {
    position: absolute;
    top: 50%;
    left: -50px; /* Position to the left of the bubble */
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 5;
}

/* The "kebab" menu button (...) */
.kebab-btn {
    background: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--light-text);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

/* The dropdown menu for Edit/Delete */
.kebab-dropdown {
    position: absolute;
    bottom: 100%; /* Position above the kebab button */
    right: 0;
    margin-bottom: 5px;
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.25rem;
    min-width: 120px;
    z-index: 10;
    display: none; /* Toggled by JS */
}

.kebab-dropdown.active {
    display: block;
}

.kebab-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    color: var(--bs-body-color);
    padding: 0.5rem 0.75rem;
    width: 100%;
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
}

.kebab-dropdown button:hover {
    background-color: var(--menu-hover-bg);
}

.kebab-dropdown button.delete-btn {
    color: var(--danger-color);
}
.kebab-dropdown button.delete-btn:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
}


/* --- Styles for the Message Editing UI --- */
.message-edit-form {
    display: none; /* Hidden by default */
    padding: 0.5rem;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    margin-top: 5px;
}

.message-edit-form textarea {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--primary-color); /* Highlight that it's in edit mode */
    color: var(--input-text);
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 50px;
}

.message-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* In flowNetwork-supplemental.css */

/* === RIGHT-CLICK CHAT CONTEXT MENU === */
.chat-context-menu {
    position: fixed; /* Use fixed positioning to place relative to the viewport */
    z-index: 1060;   /* Ensure it's above other content */
    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;
    display: none; /* Hidden by default */
    width: 200px;
}

.chat-context-menu button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: none;
    color: var(--bs-body-color);
    padding: 0.6rem 0.8rem;
    width: 100%;
    text-align: left;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
}

.chat-context-menu button:hover {
    background-color: var(--menu-hover-bg);
    color: var(--primary-color);
}

.chat-context-menu button.delete-btn {
    color: var(--danger-color);
}
.chat-context-menu button.delete-btn:hover {
    background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}

/* === "LISTENED" STATE FOR VOICE MESSAGES === */
/* This style applies after an audio message has been fully played */
.voice-message-player.listened .play-pause-btn,
.voice-message-player.listened .duration-text {
    opacity: 0.65; /* Dim the button and text */
}

/* Make the listened progress bar a muted gray */
.voice-message-player.listened .waveform-progress .waveform-bar {
    background-color: var(--secondary-color) !important;
}
/* In flowNetwork-supplemental.css */

/* === WHATSAPP-LIKE EXPANDING TEXTAREA === */
#chatMessageInput {
    /* Basic styling to match the theme */
    width: 100%;
    background-color: var(--card-bg);
    border-radius: 2rem; /* The rounded "pill" shape */
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    font-size: 0.95rem;
    font-family: inherit; /* Ensures it uses the Poppins font */
    line-height: 1.5;     /* Provides good spacing between lines of text */

    /* Core functionality for dynamic height */
    resize: none;          /* Disable manual resizing by the user */
    overflow-y: hidden;    /* Hide the scrollbar initially */
    min-height: 44px;      /* Set a minimum height matching the single-line appearance */
    max-height: 120px;     /* Set a limit for expansion (e.g., ~5 lines of text) */
                           /* Once this height is reached, the scrollbar will appear */
    transition: height 0.1s ease-out; /* Optional: adds a subtle animation to the height change */
}

/* When the textarea reaches its max-height, the JS will add this class to show the scrollbar */
#chatMessageInput.is-scrollable {
    overflow-y: auto;
}

/* === MIC BUTTON ICON CENTERING === */
#recordAudioBtn {
    display: inline-flex;  /* Use flexbox for alignment */
    align-items: center;   /* Vertically center the icon */
    justify-content: center; /* Horizontally center the icon */
}

#recordAudioBtn i.fa-microphone {
    margin: 0; /* Remove any default margins to ensure perfect centering */
}
/* In flowNetwork-supplemental.css */
/* REPLACE the old .chat-start-placeholder rule with this one */

.chat-start-placeholder {
    margin: auto;
    padding: 1.5rem 2rem;
    max-width: 450px; /* A bit wider for the new text */
    text-align: center;
    background-color: var(--input-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--bs-border-color);
}

.chat-start-placeholder i.fa-lock { /* Target the new lock icon */
    font-size: 1.8rem; /* Slightly smaller icon */
    color: var(--secondary-color); /* More subtle color */
    margin-bottom: 1rem;
    display: block;
}

.chat-start-placeholder p {
    font-size: 0.9rem; /* Smaller font for better fit */
    color: var(--light-text);
    line-height: 1.6;
    margin: 0;
}

.chat-start-placeholder p strong {
    color: var(--bs-body-color); /* Make the main point stand out a bit */
    display: block; /* Puts it on its own line */
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}
/* flowNetwork-supplemental.css */

/* === NEW DEVICE E2EE SETUP BANNER === */
.new-device-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--card-bg-rgb), 0.95);
    z-index: 50; /* Sits on top of the chat UI */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.new-device-banner.hidden {
    display: none !important;
}

.new-device-content {
    max-width: 550px;
    text-align: center;
    padding: 2.5rem;
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--shadow-lg);
}

.new-device-content i.fa-key {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.new-device-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 1rem;
}

.new-device-content p {
    color: var(--light-text);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.new-device-content p strong {
    color: var(--warning-color);
}

.new-device-content .btn {
    font-weight: 600;
    padding: 0.8rem 1.5rem;
}
/* flowNetwork-supplemental.css */

/* === UNDECRYPTABLE MESSAGE PLACEHOLDER === */
.undecryptable-message {
    align-self: center; /* Center the placeholder in the chat flow */
    margin: 1rem 0;
    padding: 0.75rem 1.25rem;
    max-width: 80%;
    background-color: var(--input-bg);
    border: 1px dashed var(--border-color-2);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--light-text);
}

.undecryptable-message i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}
/* In flowNetwork-supplemental.css */

/* === CUSTOM CHECKBOX STYLES === */

/* 1. The container for our custom checkbox */
.custom-checkbox {
  display: flex;
  align-items: center; /* Vertically aligns the box and the label text */
  gap: 0.75rem;       /* Space between the box and the label text */
  cursor: pointer;
  padding-left: 0; /* Override Bootstrap's default padding */
}

/* 2. Hide the default browser checkbox */
/* It's still functional for accessibility but invisible */
.custom-checkbox .form-check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 3. Create the new, larger checkbox box using the label's ::before pseudo-element */
.custom-checkbox .form-check-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0; /* Prevents the box from shrinking */
  
  /* --- THIS IS WHERE YOU CONTROL THE SIZE --- */
  width: 22px;
  height: 22px;
  
  margin-right: 0.5rem; /* Consistent spacing with the label */
  
  /* Styling the box's appearance */
  background-color: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease-in-out;
}

/* 4. Style the hover state of our custom box */
.custom-checkbox:hover .form-check-label::before {
  border-color: var(--primary-color);
}

/* 5. Style the custom box when the (hidden) input is checked */
.custom-checkbox .form-check-input:checked + .form-check-label::before {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* 6. Create the checkmark using the label's ::after pseudo-element */
.custom-checkbox .form-check-label::after {
  content: '';
  position: absolute;
  display: block;
  
  /* Position the checkmark inside the box */
  left: 8px;
  top: 5px;

  /* Create the checkmark shape using borders */
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  
  /* Rotate the shape to look like a checkmark */
  transform: rotate(45deg);
  
  /* Hide the checkmark by default */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* 7. Show the checkmark when the (hidden) input is checked */
.custom-checkbox .form-check-input:checked + .form-check-label::after {
  opacity: 1;
}

/* 8. Style for the disabled state */
.custom-checkbox .form-check-input:disabled + .form-check-label {
  cursor: not-allowed;
  opacity: 0.6;
}
.custom-checkbox .form-check-input:disabled + .form-check-label:hover::before {
    border-color: var(--input-border); /* Prevent hover effect on disabled */
}
/* === ENHANCED CHAT LOGIN PROMPT === */

/* Overrides the default placeholder alignment to be a flex container */
#chatLoginPrompt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* The main card container for the prompt */
.chat-login-prompt-card {
    background-color: var(--card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius-lg);
    padding: 2.5rem;
    max-width: 450px; /* Controls the width of the card */
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    
    /* Animation for a subtle fade-in effect */
    animation: fadeIn 0.5s ease-in-out;
}

/* Styling for the main icon (shield) */
.chat-login-prompt-card .fa-shield-alt {
    color: var(--primary-color);
    margin-bottom: 1.5rem; /* More space below the icon */
}

/* Styling for the main heading */
.chat-login-prompt-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--heading-text);
    margin-bottom: 0.75rem;
}

/* Styling for the descriptive paragraph */
.chat-login-prompt-card p.light-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--light-text);
    margin-bottom: 2rem; /* More space before the button */
}

/* Styling for the login button */
.chat-login-prompt-card .btn {
    font-weight: 600;
    padding: 0.8rem 2rem; /* Make the button larger and more clickable */
    font-size: 1rem;
}
/* In flowNetwork-supplemental.css */
/* REPLACE any existing styles for #plansPageContent and its child elements with this block */


/* --- ENHANCED TOGGLE SWITCH --- */
.plan-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 4rem;
    background-color: var(--input-bg);
    padding: 6px;
    border-radius: 50px;
    border: 1px solid var(--input-border);
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.plan-toggle-container span {
    font-weight: 600;
    padding: 0 0.5rem;
    color: var(--light-text);
}

/* Hides the default checkbox but keeps it functional */
#planPeriodToggle {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}

/* The visual part of the toggle switch */
.plan-toggle-container .theme-switch {
    cursor: pointer;
    width: 50px;
    height: 28px;
    background: var(--secondary-color);
    display: block;
    border-radius: 50px;
    position: relative;
    transition: background-color .2s;
}

.plan-toggle-container .theme-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.plan-toggle-container .theme-switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

#planPeriodToggle:checked + .theme-switch {
    background: var(--success-color);
}

#planPeriodToggle:checked + .theme-switch .slider:before {
    transform: translateX(22px);
}

/* --- ENHANCED PLAN CARD STYLING --- */
#plansDisplayContainer .plans-grid {
    align-items: stretch; /* Makes cards in a row the same height */
}

#plansDisplayContainer .plan-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden; /* Important for the banner placement */
    border: 1px solid var(--bs-border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#plansDisplayContainer .plan-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
/* === CORRECTED POPULAR CARD & BANNER === */

/* === CORRECTED POPULAR CARD & BANNER (FINAL) === */

#plansPageContent .plans-grid .plan-card.recommended {
    position: relative; /* CRUCIAL: This allows the absolute-positioned banner to be placed correctly. */
    overflow: hidden;  /* CRUCIAL: This allows the banner to display outside the card's boundaries. */

    /* The gradient border styles (these are correct from the last step) */
    border: 2px solid transparent !important;
    background-image: 
        linear-gradient(var(--card-bg), var(--card-bg)), 
        linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    
    /* Visual "pop" effects */
    transform: scale(1.03); 
    box-shadow: 0 0 35px -8px rgba(66, 133, 244, 0.4);
}

#plansPageContent .plans-grid .plan-card.recommended:hover {
    transform: scale(1.05) translateY(-8px);
    box-shadow: 0 0 45px -10px rgba(234, 67, 53, 0.45);
}


/* REFINED BANNER STYLE to perfectly match the image */
.plan-card .plan-badge {
    position: absolute;
    top: 15px;       
    right: -30px;      
    
    background-color: var(--primary-color);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    padding: 7px 30px;
    
    transform: rotate(45deg);
    
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.plan-header h4 {
    font-size: 1.8rem;
    font-weight: 700;
}

.plan-price {
    font-size: 3.5rem;
    font-weight: 700;
}

.plan-features {
    flex-grow: 1; /* Pushes the button to the bottom */
}
/* === HIGH-CONVERTING ECOSYSTEM - TOOL CARD LOGOS === */
.tool-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Creates space between the logo and the title */
    margin-bottom: 0.75rem; /* Space below the header */
    min-height: 36px; /* Ensures all headers have the same height, even those without logos */
}

.tool-logo {
    height: 32px; /* A consistent height for all logos */
    max-width: 150px; /* Prevents very wide logos from taking up too much space */
    object-fit: contain; /* Scales the image to fit without stretching or cropping */
    object-position: left; /* Aligns non-square logos to the left */
}

.tool-card-header h4 {
    margin: 0; /* Removes default margins from the title for better alignment */
    line-height: 1.2;
}
/* === HIGH-CONVERTING ECOSYSTEM - GRADIENT BORDERS & FEATURES === */

/* The class we added in the HTML to create the gradient border effect */
.tool-card.google-gradient-border {
  /* The border itself is transparent; the gradient is a background image */
  border: 2px solid transparent;
  
  /* This is the magic: a double background.
     1. The first is the card's solid background color.
     2. The second is the gradient, which will show through the transparent border. */
  background-image: 
    linear-gradient(var(--card-bg), var(--card-bg)), 
    linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853); /* Google Gradient */

  /* This tells the browser where to draw each background */
  background-origin: border-box;

  /* This clips the backgrounds. The solid color is clipped to the padding area,
     while the gradient is clipped to the border area, revealing it. */
  background-clip: padding-box, border-box;
}

/* Styling for the new feature list within each tool card */
.tool-features-list {
  list-style: none; /* Removes default black bullet points */
  padding: 0;
  margin: 1rem 0 0 0; /* Adds space above the list */
  flex-grow: 1; /* Helps push the card footer down if you add one */
}

.tool-features-list li {
  display: flex;
  align-items: flex-start; /* Aligns icon with the start of the text */
  gap: 0.6rem; /* Space between icon and text */
  font-size: 0.9rem;
  color: var(--bs-body-color);
  line-height: 1.5;
  margin-bottom: 0.75rem; /* Space between list items */
}

.tool-features-list li:last-child {
  margin-bottom: 0;
}

/* Styling for the checkmark icon */
.tool-features-list li i.fa-check-circle {
  color: var(--success-color); /* Use your theme's success color */
  font-size: 1rem;
  margin-top: 3px; /* Fine-tunes vertical alignment with text */
}

/* Remove the plain-text paragraph now that we have a list */
.tool-card p {
    display: none;
}
/* === HIGH-CONVERTING ECOSYSTEM - GRADIENT BORDERS & FEATURES (V2) === */

/* The class we added in the HTML to create the gradient border effect */
.tool-card.google-gradient-border {
  /* The border itself is transparent; the gradient is a background image */
  border: 2px solid transparent;
  
  /* This is the magic: a double background.
     1. The first is the card's solid background color.
     2. The second is the gradient, which will show through the transparent border. */
  background-image: 
    linear-gradient(var(--card-bg), var(--card-bg)), 
    linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853); /* Google Gradient */

  /* This tells the browser where to draw each background */
  background-origin: border-box;

  /* This clips the backgrounds. The solid color is clipped to the padding area,
     while the gradient is clipped to the border area, revealing it. */
  background-clip: padding-box, border-box;
}

.tool-card .tool-logo {
  height: 86px; /* << INCREASED LOGO SIZE from 48px */
  max-width: 200px;
  margin-bottom: 0.75rem; 
}
.tool-card h4 {
  display: none; /* << HIDES THE TEXT TITLES */
}

.tool-card .tool-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-text);
  margin: 0.5rem 0 1rem 0;
  line-height: 1.4;
}

/* --- FEATURE LIST STYLES --- */
.tool-features-list {
  list-style: none; /* Removes default black bullet points */
  padding: 0;
  margin: 0; 
  flex-grow: 1; 
}

.tool-features-list li {
  display: flex;
  align-items: flex-start; 
  gap: 0.6rem; 
  font-size: 0.9rem;
  color: var(--bs-body-color);
  line-height: 1.5;
  margin-bottom: 0.75rem; 
}

.tool-features-list li:last-child {
  margin-bottom: 0;
}

.tool-features-list li i.fa-check-circle {
  color: var(--success-color); 
  font-size: 1rem;
  margin-top: 3px; 
}

/* Remove the old paragraph style, as it's no longer used */
.tool-card p:not(.tool-subtitle) {
    display: none;
}
.ecosystem-cta-container {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color-2);
}

/* This is the final, high-converting button style */
.btn-cta-ecosystem {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    padding: 0.9rem 2.5rem;
    border-radius: 50px;
    border: none;
    
    /* The Google Gradient Background */
    background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853);
    background-size: 300% 100%;
    
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.3);
}

.btn-cta-ecosystem:hover {
    background-position: 100% 0; /* Move the gradient on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 25px -5px rgba(0, 0, 0, 0.4);
    color: white; /* Ensure text remains white */
}

.btn-cta-ecosystem i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.btn-cta-ecosystem:hover i {
    transform: translateX(5px);
}
/* 2. Style the "View Details" button with a Google Gradient */
.panel-listing-card .view-details-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: white; /* Text color is now white */
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius);
    border: none; /* Remove the default border */
    
    /* The Google Gradient Background */
    background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853);
    background-size: 300% 100%; /* Make the gradient wider than the button to allow for animation */
    
    /* Transitions for a smooth hover effect */
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.2);
}

.panel-listing-card .view-details-btn:hover {
    background-position: 100% 0; /* Move the gradient on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.3);
    color: white; /* Ensure text remains white on hover */
}

.panel-listing-card .view-details-btn i {
    margin-left: 0.4rem;
    transition: transform 0.3s ease;
}

.panel-listing-card .view-details-btn:hover i {
    transform: translateX(4px); /* Make the arrow move on hover */
}
.ecosystem-header {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 4rem; /* <-- This new line adds the space above the title */
}
/* Add this new CSS rule anywhere in the file */

.ecosystem-logo {
    max-width: 750px; /* Sets a maximum width for the logo */
    width: 100%;      /* Ensures the logo is responsive on smaller screens */
    height: auto;     /* Maintains the aspect ratio of the image */
}
.btn-ecosystem-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-text);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 0.6rem 1.2rem;
    border-radius: 50px; /* Pill shape */
    cursor: default; /* Not a clickable button */
}

.btn-ecosystem-title i {
    color: var(--primary-color);
    margin-right: 0.6rem;
}
/* In flowNetwork-supplemental.css, add this new block */

/* === PLANS PAGE HEADER ENHANCEMENTS === */
#plansPageContent .page-header {
        display: block; /* <-- This is a key change to override the default alignment */

    text-align: center;
    margin-bottom: 3rem;  /* Increased space below the header */
    border-bottom: none;  /* Removed the separator line for a cleaner look */
}

#plansPageContent .page-header h1 {
    font-size: 2.8rem;    /* Significantly larger font for impact */
    font-weight: 700;     /* Bolder font weight */
}

#plansPageContent .page-header .subtitle {
    font-size: 1.1rem;      /* Larger, more readable subtitle */
    max-width: 600px;       /* Constrains width for better readability */
    margin: 0.5rem auto 0;  /* Centers the subtitle block */
}
/* In flowNetwork-supplemental.css */


/* In flowNetwork-supplemental.css */

/* This rule targets the direct container of the overflowing text. */
.referral-card .referral-details-grid .detail-item {
    /* This is the key. It allows a grid column to shrink smaller
       than its content's natural width, forcing the text inside to wrap. */
    min-width: 0;
}

/* This rule targets the text itself. */
.referral-card .referral-details-grid .detail-item .value {
    /* These properties control how the text behaves when it overflows. */
    white-space: normal;      /* Allows text to wrap to the next line. */
    overflow-wrap: break-word;/* Breaks long words or strings of numbers. */
    word-break: break-word;   /* An alternative for the property above. */
}
/* In flowNetwork-supplemental.css */

/* In flowNetwork-supplemental.css */
/* In flowNetwork-supplemental.css */

/* === FULL SCREEN LOADER (with Custom Spinner) === */
.full-screen-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--bs-body-bg-rgb, 1, 4, 9), 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

.full-screen-loader.hidden {
    display: none !important;
}

.full-screen-loader .spinner {
    text-align: center;
    color: var(--primary-color);
}

.full-screen-loader .spinner p {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--light-text);
}
/* Find the .custom-spinner rule and update the animation property */
.custom-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    
    border: 5px solid var(--secondary-color);
    border-top-color: var(--primary-color);
    
    margin: 0 auto;
    
    /* --- UPDATED ANIMATION --- */
    animation: hitch-and-go-spin 1.8s linear infinite;
}

/* REPLACE your old keyframes rule with this new one */
@keyframes hitch-and-go-spin {
    0% {
        transform: rotate(0deg);
    }
    /* The spinner moves very fast for the first 80% of the animation */
    80% {
        transform: rotate(330deg);
    }
    /* It then slows down significantly for the last 30 degrees (the "hitch") */
    100% {
        transform: rotate(360deg);
    }
}
/* In flowNetwork-supplemental.css */
/* In flowNetwork-supplemental.css */

/* === SHEPHERD.JS "SOFT" THEME === */
.shepherd-element {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--input-border);
    max-width: 420px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

.shepherd-header {
    background-color: transparent;
    padding: 1.5rem 1.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color-2);
}

.shepherd-title {
    color: var(--heading-text);
    font-size: 1.25rem;
    font-weight: 600;
}

.shepherd-cancel-icon {
    color: var(--secondary-color);
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}
.shepherd-cancel-icon:hover {
    color: var(--bs-body-color);
    transform: scale(1.1);
}

.shepherd-text {
    color: var(--light-text);
    padding: 1.25rem 1.75rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

.shepherd-arrow::before {
    background-color: var(--card-bg);
}

.shepherd-footer {
    padding: 0 1.75rem 1.5rem;
    border-top: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Button Styles */
.shepherd-button {
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: 50px; /* Pill shape */
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.shepherd-button.shepherd-button-secondary {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--light-text);
}
.shepherd-button.shepherd-button-secondary:not(:disabled):hover {
    background-color: var(--menu-hover-bg);
    border-color: var(--secondary-color);
    color: var(--heading-text);
}

.shepherd-button.shepherd-button-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 15px -5px var(--primary-color);
}
.shepherd-button.shepherd-button-primary:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--primary-color);
}

/* Progress Indicator as a bar instead of dots */
.shepherd-progress-bar {
    height: 4px;
    background-color: var(--primary-color);
    transition: width .3s ease-in-out;
    border-radius: 4px;
    margin: 0 1.75rem 1rem;
}
.shepherd-footer .shepherd-progress-bar {
    display: none; /* Hide if you prefer no progress indicator in footer */
}
/* In flowNetwork-supplemental.css */

/* === ABILITA SCROLLING PER LA PAGINA DETTAGLIO INSERZIONE === */
#listingDetailPageContent {
    overflow-y: auto !important;
}
.btn-danger-outline {
    background-color: transparent;
    border-color: var(--danger-color);
    color: var(--danger-color);
}
.btn-danger-outline:hover:not(:disabled) {
    background-color: var(--danger-color);
    color: white;
}