avatars */
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.1rem;
color: #fff;
background-color: var(--secondary-color); /* Default background */
}
/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* ======================================= */
/* === DEAL DRAWER TABS & PANES === */
/* ======================================= */
.document-list, .task-list, .activity-timeline {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Document Item Styling */
.document-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
}
.document-item .fa-file-alt {
font-size: 1.5rem;
color: var(--light-text);
}
.document-item-details {
flex-grow: 1;
}
.document-item-details a {
font-weight: 600;
color: var(--bs-link-color);
}
.document-item-details span {
display: block;
font-size: 0.8rem;
color: var(--light-text);
}
.document-item .delete-doc-btn {
background: none;
border: none;
color: var(--light-text);
cursor: pointer;
}
.document-item .delete-doc-btn:hover {
color: var(--danger-color);
}
/* Task Form & List Styling */
.deal-task-form {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.deal-task-form input {
flex-grow: 1;
height: 44px;
padding: 0 1rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
color: var(--input-text);
}
.deal-task-form button {
height: 44px;
flex-shrink: 0;
}
.task-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background-color: var(--input-bg);
border-radius: var(--border-radius);
}
.task-item input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--primary-color);
cursor: pointer;
}
.task-item .task-label {
flex-grow: 1;
font-weight: 500;
transition: all 0.2s;
}
.task-item.completed .task-label {
text-decoration: line-through;
color: var(--light-text);
}
.task-item .task-due-date {
font-size: 0.85rem;
color: var(--light-text);
font-weight: 500;
}
/* Activity Timeline Styling */
.activity-item {
display: flex;
gap: 1rem;
}
.activity-item .activity-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--menu-hover-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--light-text);
flex-shrink: 0;
}
.activity-item .activity-content .activity-message {
font-weight: 500;
}
.activity-item .activity-content .activity-timestamp {
font-size: 0.8rem;
color: var(--light-text);
}
/* Linkable Contract List Styling (reuses attachment-list) */
#linkableContractsList li {
border-bottom: 1px solid var(--input-border);
}
#linkableContractsList li:last-child {
border-bottom: none;
}
/* ADD THIS ENTIRE BLOCK TO THE END OF styles.css */
/* ======================================= */
/* === DEAL DRAWER: TASK DELETE BUTTON === */
/* ======================================= */
.task-item {
position: relative; /* Allows absolute positioning for the button */
padding-right: 40px; /* Make space for the delete button */
}
.task-item .delete-task-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: none;
border: none;
border-radius: 50%;
color: var(--light-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
opacity: 0; /* Hidden by default */
transition: all 0.2s ease-out;
}
.task-item:hover .delete-task-btn {
opacity: 1; /* Show button on hover */
}
.task-item .delete-task-btn:hover {
background-color: var(--danger-color);
color: #fff;
}
/* in styles.css - ADD THIS ENTIRE BLOCK */
/* ======================================= */
/* === PROPERTY PORTFOLIO MODAL STYLES === */
/* ======================================= */
#propertyPortfolioModal .form-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
#propertyPortfolioModal fieldset {
border: none;
padding: 0;
margin: 0;
margin-bottom: 1.5rem;
}
#propertyPortfolioModal legend {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-mid);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--input-border);
}
/* in styles.css */
/* === STYLING FOR MODAL FIELDSETS & LEGENDS === */
#newRecurringBillModal fieldset {
border: none;
padding: 0;
margin: 0;
margin-bottom: 2rem; /* Increased space between sections */
}
#newRecurringBillModal fieldset:last-of-type {
margin-bottom: 0;
}
#newRecurringBillModal legend {
font-size: 1rem;
font-weight: 600;
color: var(--light-text);
padding: 0;
margin-bottom: 1.25rem; /* Space between header and fields */
width: 100%;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--input-border);
}
#newRecurringBillModal .form-group {
margin: 0; /* Remove bottom margin from individual groups */
}
/* Specific styling for the weekly button group */
#billDueDayWeekly .btn-group .btn-c-sq.active {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
/* in styles.css */
/* === STYLING FOR MODAL FIELDSETS & LEGENDS === */
#newRecurringBillModal fieldset {
border: none;
padding: 0;
margin: 0;
margin-bottom: 2rem; /* Increased space between sections */
}
#newRecurringBillModal fieldset:last-of-type {
margin-bottom: 0;
}
#newRecurringBillModal legend {
font-size: 1rem;
font-weight: 600;
color: var(--light-text);
padding: 0;
margin-bottom: 1.25rem; /* Space between header and fields */
width: 100%;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--input-border);
}
#newRecurringBillModal .form-group {
margin: 0; /* Remove bottom margin from individual groups */
}
/* Specific styling for the weekly button group */
#billDueDayWeekly .btn-group .btn-c-sq.active {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
/* in styles.css */
/* ======================================= */
/* === LEDGER LOADING SPINNER STYLES === */
/* ======================================= */
@keyframes ledger-spinner-rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.ledger-spinner {
width: 48px;
height: 48px;
border: 5px solid var(--menu-hover-bg);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: ledger-spinner-rotation 1s linear infinite;
margin: 2rem auto; /* Centers the spinner in the table row */
}
/* ADD THIS TO THE END OF styles.css */
/* ======================================= */
/* === TAX REPORT MODAL STYLES === */
/* ======================================= */
.report-section {
margin: 1.5rem 0 1rem 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--input-border);
}
.report-section:first-of-type {
margin-top: 0;
}
.report-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
}
.report-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0.25rem;
font-size: 0.95rem;
}
.report-item span:first-child {
color: var(--bs-body-color);
}
.report-item span:last-child,
.report-item strong {
font-weight: 600;
color: var(--heading-text);
}
.report-item.total {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--input-border);
}
.report-item.net-profit strong {
font-size: 1.2rem;
color: var(--success-color);
}
.error-placeholder {
padding: 2rem;
text-align: center;
color: var(--danger-color);
font-weight: 500;
}
/* =================================== */
/* === 32. TAX CENTER STYLES === */
/* =================================== */
.tax-center-tab-content {
margin-top: 1.5rem;
}
.tax-tab-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.tax-tab-pane.active {
display: block;
}
/* Accordion for Estimates */
.tax-center-tab-content .accordion-item {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
margin-bottom: 1rem;
overflow: hidden;
}
.tax-center-tab-content .accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.tax-center-tab-content .accordion-header:hover {
background-color: var(--menu-hover-bg);
}
.tax-center-tab-content .accordion-header h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
}
.tax-center-tab-content .accordion-content {
display: none; /* JS will toggle this */
padding: 1.5rem;
border-top: 1px solid var(--input-border);
}
.tax-center-tab-content .accordion-content p {
margin-bottom: 1rem;
color: var(--light-text);
}
.tax-center-tab-content .accordion-content p strong {
color: var(--bs-body-color);
}
/* Tax Profile Summary Styles */
#taxProfileSummary {
padding: 1.5rem;
color: var(--light-text);
}
#taxProfileSummary .summary-item {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--input-border);
}
#taxProfileSummary .summary-item:last-child {
border-bottom: none;
}
#taxProfileSummary .summary-item span {
font-weight: 500;
}
#taxProfileSummary .summary-item strong {
font-weight: 600;
color: var(--heading-text);
}
/* ======================================= */
/* === TAX REPORT MODAL STYLES === */
/* ======================================= */
.report-section {
margin: 1.5rem 0 1rem 0;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--input-border);
}
.report-section:first-of-type {
margin-top: 0;
}
.report-section h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
}
.report-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0.25rem;
font-size: 0.95rem;
}
.report-item span:first-child {
color: var(--bs-body-color);
}
.report-item span:last-child,
.report-item strong {
font-weight: 600;
color: var(--heading-text);
}
.report-item.total {
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--input-border);
}
.report-item.net-profit strong {
font-size: 1.2rem;
color: var(--success-color);
}
.error-placeholder {
padding: 2rem;
text-align: center;
color: var(--danger-color);
font-weight: 500;
}
.activity-icon.soft-orange {
background-color: color-mix(in srgb, var(--warning-color) 80%, black);
color: #FFF;
}
/* ADD THIS NEW BLOCK */
.agency-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.agency-pane.active {
display: block;
}
/* === ONBOARDING MODAL STYLES === */
#onboardingModal .modal-body {
padding: 2.5rem;
}
.onboarding-step {
display: none;
animation: fadeIn 0.5s ease-in-out;
}
.onboarding-step.active {
display: block;
}
.onboarding-step .icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.onboarding-step h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--heading-text);
margin-bottom: 1rem;
}
.onboarding-step p {
font-size: 1rem;
color: var(--light-text);
line-height: 1.6;
}
.onboarding-dots-container {
display: flex;
gap: 0.5rem;
}
.onboarding-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--input-border);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.onboarding-dot.active {
background-color: var(--primary-color);
transform: scale(1.2);
}
/* in styles.css */
.source-icon.flownetwork {
background-color: #BD10E0; /* A distinct purple color */
}
/* Incolla questo codice alla fine del tuo file styles.css */
/* --- MENU A DISCESA RICERCA GLOBALE --- */
/* styles.css */
/* --- MENU A DISCESA RICERCA GLOBALE (FIXED) --- */
/* Questo contenitore serve a posizionare il menu a discesa rispetto alla barra di ricerca */
.search-bar-container {
position: relative;
flex-grow: 1; /* Allows the search bar to take up available space */
max-width: 650px; /* Increased width for a better look */
}
.top-header .search-bar {
width: 100%;
}
/* Posiziona il menu sotto la barra di ricerca */
.search-results-dropdown {
position: absolute; /* Takes the dropdown out of the normal document flow. */
top: calc(100% + 8px); /* Positions it 8px below the search bar's bottom edge. */
left: 0;
right: 0;
z-index: 1100; /* High z-index to ensure it appears on top of other content. */
/* These styles make the dropdown visible with your theme's colors. */
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
/* Other styling for appearance and functionality */
padding: 0.5rem;
box-shadow: var(--shadow-lg);
max-height: 450px; /* Limits height and adds a scrollbar if results overflow. */
overflow-y: auto;
}
/* Lista dei risultati */
.search-results-list {
list-style: none;
padding: 0;
margin: 0;
}
/* Intestazione di sezione (es. "Contatti", "Proprietà") */
.search-result-header {
font-size: 0.8rem;
font-weight: 600;
color: var(--light-text);
text-transform: uppercase;
padding: 0.75rem 1rem;
}
/* Singolo elemento nei risultati */
.search-result-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-result-item:hover {
background-color: var(--menu-hover-bg);
}
.search-result-item .item-icon {
font-size: 1.1rem;
color: var(--light-text);
width: 24px;
text-align: center;
}
.search-result-item .item-details {
overflow: hidden; /* Nasconde il testo che fuoriesce */
}
.search-result-item .item-name {
font-weight: 500;
color: var(--heading-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Aggiunge "..." se il testo è troppo lungo */
}
.search-result-item .item-context {
font-size: 0.85rem;
color: var(--light-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Messaggio per quando non ci sono risultati */
.no-search-results {
padding: 1.5rem;
text-align: center;
color: var(--light-text);
font-style: italic;
}
.content-section.active {
display: flex; /* CAMBIATO: da 'block' a 'flex' */
flex-direction: column; /* AGGIUNTO: per un layout interno corretto */
/* AGGIUNTO: Questa è la correzione chiave */
/* Altezza totale - header (70px) - padding canvas (1rem * 2) */
height: calc(100vh - 70px - 2rem);
/* AGGIUNTO: Permette lo scroll *interno* alla sezione se il contenuto è lungo */
overflow-y: auto;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.pm-pane { display:none; }
.pm-pane.active { display:block; }
/* in styles.css - ADD THIS BLOCK */
.pm-pane {
display: none;
}
.pm-pane.active {
display: block;
}
/* Add this entire block to the end of styles.css */
/* In styles.css, REPLACE the previous FlowRouter block with this one */
/* === FLOWROUTER MODAL & APP CARD STYLES (V3 - CORRECTED ALIGNMENT) === */
#flowRouterModal.modal-panel {
width: 90vw;
max-width: 1200px;
background-color: var(--card-bg);
}
#flowRouterModal .modal-header {
border-bottom: 1px solid var(--input-border);
}
#flowRouterModal .modal-body {
background-color: var(--input-bg);
}
#flowRouterModal .modal-close-btn:hover {
background-color: var(--menu-hover-bg);
color: var(--heading-text);
}
.app-selection-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.amazing-card {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.amazing-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.media-container {
height: 160px;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.media-content img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.amazing-card:hover .media-content img {
transform: scale(1.05);
}
.amazing-card .card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left; /* Ensures all text is left-aligned */
}
.amazing-card .card-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-text);
}
.amazing-card .card-subtitle {
font-size: 0.9rem;
color: var(--primary-color);
font-weight: 500;
margin-bottom: 0.75rem;
}
.amazing-card .card-text {
color: var(--light-text);
flex-grow: 1; /* This is the key: it makes the description fill all available vertical space. */
margin-bottom: 1.5rem; /* This just adds consistent spacing above the button. */
}
/* Add this new rule to the end of styles.css */
/* In styles.css, find and replace this rule */
.footer-menu-icon {
height: 1.8em; /* Increased from 1.4em */
width: auto;
max-width: 140px; /* Increased from 120px */
object-fit: contain;
}
.btn-coming-soon {
background: var(--input-border);
color: var(--light-text);
cursor: not-allowed;
}
.btn-coming-soon:hover {
transform: none;
box-shadow: none;
filter: none;
}
.h-100 {
height: 100%;
}
/* In styles.css, ADD this utility class to the end of the file */
.mt-auto {
margin-top: auto !important;
}
/* styles.css */
/* Add this new block anywhere in the file */
/* ======================================= */
/* === PROPERTY MANAGER MAP LAYOUT FIX === */
/* ======================================= */
.pm-map-layout {
display: grid;
/* Defines a flexible main column for the map and a fixed-width sidebar for the list */
grid-template-columns: 1fr 340px;
gap: 1.5rem;
height: 100%;
}
.pm-map-layout .map-container {
height: 100%;
min-height: 500px;
}
.pm-map-layout .property-list-panel {
display: flex;
flex-direction: column;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
border: 1px solid var(--bs-border-color);
overflow: hidden;
}
#pm-property-list {
overflow-y: auto;
flex-grow: 1;
}
/* Add this new block to the end of styles.css */
/* === STATIC SIDEBAR FOOTER BUTTONS === */
/* Disables hover effects for the "Options" button */
#settingsHelpBtn:hover {
background-color: var(--menu-hover-bg);
color: var(--light-text);
transform: none;
box-shadow: none;
border-color: transparent;
}
/* Disables hover effects for the "FlowCore AI" button */
#flowcoreBtn.btn-soft.primary:hover {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
transform: none;
box-shadow: none;
}
/* Add this new rule to styles.css for the icon-only footer button */
/* In styles.css, find and REPLACE the two rules for #flowcoreBtn */
#flowcoreBtn.btn-soft.primary {
padding: 0.8rem; /* Increased padding */
}
#flowcoreBtn.btn-soft.primary .footer-logo-icon {
width: 400px; /* Increased from 24px */
height: 30px; /* Increased from 24px */
margin-right: 0;
}
/* ======================================= */
/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ======================================= */
/* --- Hero Banner --- */
.motivation-hero {
display: grid;
grid-template-columns: 2fr 3fr auto;
align-items: center;
gap: 2rem;
padding: 2rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
margin-bottom: 2rem;
}
.hero-quote {
font-style: italic;
font-size: 1.1rem;
color: var(--light-text);
border-left: 3px solid var(--primary-color);
padding-left: 1.5rem;
}
.hero-quote span {
display: block;
font-style: normal;
font-weight: 600;
color: var(--heading-text);
margin-top: 0.5rem;
}
.hero-stats {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hero-stat-item {
display: flex;
align-items: center;
gap: 1rem;
}
.hero-stat-item .value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.hero-stat-item .label {
font-size: 0.9rem;
font-weight: 500;
color: var(--bs-body-color);
}
.hero-stat-item .progress-bar-container {
height: 10px;
background-color: var(--input-border);
border-radius: 5px;
flex-grow: 1;
}
.hero-stat-item .progress-bar-fill {
height: 100%;
background-color: var(--primary-color);
border-radius: 5px;
}
.hero-cta {
font-size: 1rem;
font-weight: 600;
padding: 0.8rem 1.5rem;
}
/* --- Main Grid Layout --- */
.motivation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
gap: 1.5rem;
align-items: flex-start;
}
.motivation-card {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.motivation-card .card-header {
margin-bottom: 1.5rem;
}
/* --- Progress Tracker --- */
.progress-tracker-card {
grid-row: span 2;
display: flex;
flex-direction: column;
gap: 2rem;
}
.progress-tier {
display: flex;
align-items: center;
gap: 1rem;
}
.progress-ring {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.progress-ring svg {
transform: rotate(-90deg);
}
.progress-ring-bg, .progress-ring-circle {
fill: none;
stroke-width: 4;
}
.progress-ring-bg {
stroke: var(--input-border);
}
.progress-ring-circle {
stroke: var(--primary-color);
stroke-linecap: round;
transition: stroke-dasharray 0.5s ease;
}
.progress-ring .progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
font-weight: 700;
color: var(--heading-text);
}
.progress-info {
flex-grow: 1;
}
.progress-info h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin-bottom: 0.25rem;
}
.progress-info span {
font-size: 0.9rem;
color: var(--light-text);
}
.progress-bar-container.horizontal {
width: 100%;
}
/* --- Badge Shelf --- */
.badge-shelf {
grid-column: span 2;
}
/* --- Leaderboard --- */
.leaderboard-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.leaderboard-list li {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 1rem;
font-weight: 500;
}
.leaderboard-list .rank {
font-size: 1.1rem;
font-weight: 700;
color: var(--light-text);
text-align: center;
}
.leaderboard-list .metric-value {
font-weight: 700;
color: var(--heading-text);
}
/* --- Momentum Cards --- */
.momentum-cards-container {
grid-column: span 3;
background-color: transparent;
border: none;
padding: 0;
}
.momentum-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.momentum-card {
display: flex;
align-items: center;
gap: 1rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.momentum-card i {
font-size: 1.8rem;
color: var(--primary-color);
}
.momentum-card p {
flex-grow: 1;
font-size: 1rem;
line-height: 1.5;
}
/* --- Other Cards --- */
.celebration-feed { grid-column: span 2; }
.celebration-list { list-style: none; }
.celebration-list li {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--input-border);
}
.celebration-list li:last-child { border-bottom: none; }
.mood-coach-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.vision-board-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.vision-item {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--border-radius);
overflow: hidden;
}
.vision-item img {
width: 100%; height: 100%; object-fit: cover;
}
.vision-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: #fff;
}
.mood-checkin .mood-slider {
display: flex;
align-items: center;
gap: 1rem;
}
.mood-checkin input[type="range"] {
flex-grow: 1;
}
.mini-coach {
display: flex;
align-items: center;
gap: 1rem;
}
.mini-coach > i {
font-size: 2rem;
color: var(--light-text);
}
/* --- MOTIVATION TAB RESTRUCTURE STYLES --- */
.motivation-sub-navbar {
margin: -0.5rem 0 1.5rem 0; /* Adjust margins to sit nicely below the hero */
}
.motivation-panes-container {
position: relative;
}
.motivation-pane {
display: none; /* Hide all panes by default */
animation: fadeIn 0.4s ease;
}
.motivation-pane.active {
display: block; /* Show only the active pane */
}
/* Specific grid layout for the default dashboard view */
.motivation-grid.dashboard-view {
grid-template-columns: 1fr 2fr; /* Make the progress tracker narrower */
align-items: start;
}
.motivation-grid.dashboard-view .progress-tracker-card {
grid-row: span 2; /* Make the progress tracker span both rows */
}
/* Ensure other cards take up full width in their respective panes */
.motivation-pane .motivation-card {
grid-column: 1 / -1;
}
/* Adjust card header for better spacing */
.motivation-card .card-header {
padding-bottom: 1rem;
border-bottom: 1px solid var(--input-border);
}
/* ======================================= */
/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ======================================= */
/* --- Hero Banner --- */
.motivation-hero {
display: grid;
grid-template-columns: 2fr 3fr auto;
align-items: center;
gap: 2rem;
padding: 2rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
margin-bottom: 2rem;
}
.hero-quote {
font-style: italic;
font-size: 1.1rem;
color: var(--light-text);
border-left: 3px solid var(--primary-color);
padding-left: 1.5rem;
}
.hero-quote span {
display: block;
font-style: normal;
font-weight: 600;
color: var(--heading-text);
margin-top: 0.5rem;
}
.hero-stats {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hero-stat-item {
display: flex;
align-items: center;
gap: 1rem;
}
.hero-stat-item .value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.hero-stat-item .label {
font-size: 0.9rem;
font-weight: 500;
color: var(--bs-body-color);
}
.hero-stat-item .progress-bar-container {
height: 10px;
background-color: var(--input-border);
border-radius: 5px;
flex-grow: 1;
}
.hero-stat-item .progress-bar-fill {
height: 100%;
background-color: var(--primary-color);
border-radius: 5px;
}
.hero-cta {
font-size: 1rem;
font-weight: 600;
padding: 0.8rem 1.5rem;
}
/* --- Sub-Navbar and Panes --- */
.motivation-sub-navbar {
margin: -0.5rem 0 1.5rem 0;
}
.motivation-panes-container {
position: relative;
}
.motivation-pane {
display: none;
animation: fadeIn 0.4s ease;
}
.motivation-pane.active {
display: block;
}
.motivation-card {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.motivation-card .card-header {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--input-border);
}
/* --- Dashboard Grid Layout --- */
.motivation-grid.dashboard-view {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.momentum-cards-container {
grid-column: span 2;
background-color: transparent;
border: none;
padding: 0;
}
.momentum-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.momentum-card {
display: flex;
align-items: center;
gap: 1rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.momentum-card i {
font-size: 1.8rem;
color: var(--primary-color);
}
.momentum-card p {
flex-grow: 1;
font-size: 1rem;
line-height: 1.5;
}
/* --- Progress Tracker --- */
.progress-tracker-card {
display: flex;
flex-direction: column;
gap: 2rem;
}
.progress-tier {
display: flex;
align-items: center;
gap: 1rem;
}
.progress-ring {
position: relative;
width: 80px;
height: 80px;
flex-shrink: 0;
}
.progress-ring svg {
transform: rotate(-90deg);
}
.progress-ring-bg, .progress-ring-circle {
fill: none;
stroke-width: 4;
}
.progress-ring-bg {
stroke: var(--input-border);
}
.progress-ring-circle {
stroke: var(--primary-color);
stroke-linecap: round;
transition: stroke-dasharray 0.5s ease;
}
.progress-ring .progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.25rem;
font-weight: 700;
color: var(--heading-text);
}
.progress-info {
flex-grow: 1;
}
.progress-info h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin-bottom: 0.25rem;
}
.progress-info span {
font-size: 0.9rem;
color: var(--light-text);
}
.progress-bar-container.horizontal {
width: 100%;
}
/* --- Celebration Feed & Vision Board --- */
.celebration-feed { grid-column: span 2; }
.celebration-list { list-style: none; }
.celebration-list li {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid var(--input-border);
}
.celebration-list li:last-child { border-bottom: none; }
.vision-board-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.vision-item {
position: relative;
aspect-ratio: 16 / 10;
border-radius: var(--border-radius);
overflow: hidden;
}
.vision-item img {
width: 100%; height: 100%; object-fit: cover;
}
.vision-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: #fff;
}
/* --- To-Do List Card --- */
.todo-list-card .card-header {
margin-bottom: 1rem;
}
.todo-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 250px;
overflow-y: auto;
}
.todo-list .placeholder-item {
text-align: center;
color: var(--light-text);
padding: 2rem 0;
}
.todo-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
transition: all 0.2s ease;
}
.todo-item .task-label {
flex-grow: 1;
font-weight: 500;
cursor: pointer;
transition: color 0.2s, text-decoration 0.2s;
}
.todo-item .custom-checkbox {
appearance: none;
-webkit-appearance: none;
margin: 0;
flex-shrink: 0;
width: 22px;
height: 22px;
background-color: var(--card-bg);
border: 2px solid var(--bs-border-color);
border-radius: 6px;
display: grid;
place-content: center;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.todo-item .custom-checkbox::before {
content: '';
width: 12px;
height: 12px;
transform: scale(0);
transition: 0.15s transform ease-in-out;
box-shadow: inset 1em 1em #fff;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.todo-item .custom-checkbox:checked {
background-color: var(--success-color);
border-color: var(--success-color);
}
.todo-item .custom-checkbox:checked::before {
transform: scale(1);
}
.todo-item.completed .task-label {
text-decoration: line-through;
color: var(--light-text);
}
/* in styles.css */
/* ======================================= */
/* === VISION BOARD INTERACTIVITY === */
/* ======================================= */
.vision-item {
position: relative; /* Needed for absolute positioning of actions */
cursor: pointer;
}
.vision-item-actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 0.5rem;
opacity: 0; /* Hidden by default */
transition: opacity 0.2s ease-in-out;
z-index: 5;
}
.vision-item:hover .vision-item-actions {
opacity: 1; /* Show buttons on hover */
}
/* Reusing your existing button style for a consistent look */
.vision-item-actions .btn-icon-only {
background-color: rgba(0,0,0,0.6);
color: white;
width: 32px;
height: 32px;
font-size: 0.9rem;
border: 1px solid rgba(255,255,255,0.3);
}
.vision-item-actions .btn-icon-only:hover {
background-color: var(--primary-color);
transform: scale(1.1);
}
.vision-item-actions .delete-goal-btn:hover {
background-color: var(--danger-color);
}
/* in styles.css */
/* ======================================= */
/* === VISION BOARD IMAGE UPLOAD STYLES === */
/* ======================================= */
#goalImagePreviewContainer {
position: relative;
width: 100%;
max-width: 350px; /* Constrains the preview size */
aspect-ratio: 16 / 9; /* Gives it a nice rectangular shape */
margin: 1rem auto 0 auto; /* Centers the preview */
border: 2px dashed var(--input-border);
border-radius: var(--border-radius);
overflow: hidden;
background-color: var(--input-bg);
}
#goalImagePreviewContainer.hidden {
display: none;
}
#goalImagePreview {
width: 100%;
height: 100%;
object-fit: cover;
}
#goalImagePreviewContainer .remove-img-btn {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
background-color: rgba(0,0,0,0.6);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.2s ease;
z-index: 2;
}
#goalImagePreviewContainer .remove-img-btn:hover {
background-color: var(--danger-color);
transform: scale(1.1);
}
.logo-credit-container {
display: flex; /* This aligns items horizontally */
align-items: center; /* This centers them vertically */
justify-content: center; /* This centers them horizontally */
gap: 10px; /* This creates space between the text and the logo */
width: 100%;
padding: 10px; /* Padding inside the container */
margin-bottom: 25px; /* Spacing below the container */
background-color: var(--input-bg); /* Use theme's input background */
border: 1px solid var(--input-border); /* Use theme's border color */
border-radius: var(--border-radius, 8px); /* Use theme's border radius */
}
.logo-credit-container .credit-text {
font-size: 14px;
font-weight: 500;
color: var(--light-text); /* Use theme's secondary text color */
}
.logo-credit-container img {
height: 38px; /* Slightly adjusted height for better balance */
width: auto;
max-width: 100%;
}
/* ======================================================= */
/* === COMPLETE LAYOUT FIX FOR FLOWINBOX CHAT MANAGER === */
/* Add this entire block to the end of your styles.css file */
/* ======================================================= */
/* 1. Sets a fixed height for the entire FlowInBox section */
#flowinbox-manager-section.active {
display: flex;
flex-direction: column;
/* Full viewport height minus the top header and main padding */
height: calc(100vh - 70px - 2rem);
}
/* 2. Makes the 3-pane container fill the available height */
.comm-hub-main-container {
flex-grow: 1;
display: grid;
/* Prevents the container itself from growing or showing scrollbars */
overflow: hidden;
}
/* 3. Forces the middle reading pane to respect its container's height */
.comm-hub-reading-pane {
display: grid;
grid-template-rows: auto 1fr 5px auto;
overflow: hidden;
/* This is crucial: makes the grid take up 100% of the parent's height */
height: 100%;
}
/* 4. Defines the scrollable content area within the reading pane */
.comm-hub-reading-pane .pane-content {
padding: 1.5rem;
/* THE DEFINITIVE FIX: Force this container to scroll vertically */
overflow-y: auto !important;
/* THE DEFINITIVE FIX: Allows the grid item to shrink, enabling overflow */
min-height: 0 !important;
}
/* ======================================= */
/* === STILI PER DISPOSITIVI MOBILI === */
/* Aggiungi questo blocco alla fine di styles.css */
/* ======================================= */
/* --- Breakpoint per Tablet e schermi medi (fino a 1024px) --- */
@media (max-width: 1024px) {
/* Riduci il padding generale per guadagnare spazio */
.canvas {
padding: 1.5rem 1rem;
}
/* Rendi le griglie più flessibili, passando a 2 colonne dove possibile */
.aw-grid-layout,
.motivation-grid.dashboard-view,
.app-selection-grid,
.deal-room-section .aw-grid-layout {
grid-template-columns: 1fr 1fr;
}
/* Impila le griglie a 3 colonne in una singola colonna */
.quick-actions {
grid-template-columns: 1fr;
}
/* Gestisci il layout della sezione Networking */
.networking-main-layout {
grid-template-columns: 1fr; /* Impila le colonne */
}
.badge-ranking-panel, .agent-feed-panel {
grid-row: auto; /* Resetta l'ordine se necessario */
}
/* Adatta la barra laterale del calendario */
.calendar-layout {
grid-template-columns: 240px 1fr; /* Riduci la larghezza della sidebar */
}
/* Riduci le dimensioni dei modali più grandi */
.large-campaign-modal .modal-panel,
#propertyPortfolioModal,
#dealDrawer {
max-width: 90vw;
}
}
/* --- Breakpoint per Smartphone (fino a 768px) --- */
@media (max-width: 768px) {
/* --- 1. Layout Globale e Intestazione --- */
#appWrapper {
flex-direction: column; /* Impila sidebar e contenuto (anche se la sidebar è nascosta) */
}
.top-header {
padding: 0.75rem 1rem;
height: auto;
min-height: 70px;
}
.search-bar-container {
max-width: 100%;
}
.canvas {
padding: 1rem;
height: calc(100vh - 70px); /* Altezza completa meno l'header */
}
/* --- 2. Tutte le Griglie a Colonna Singola --- */
.grid-container,
.aw-grid-layout,
.motivation-grid,
.playbooks-grid,
.agent-roster-gallery,
.app-selection-grid,
.form-grid-2-col,
.form-grid-3-col {
grid-template-columns: 1fr !important; /* Forza una singola colonna */
grid-column: span 1 / auto !important; /* Resetta lo span delle colonne */
}
.kpi-strip {
grid-template-columns: 1fr 1fr !important; /* Le KPI possono stare a 2 colonne */
}
/* --- 3. Layout Specifici per Sezioni --- */
.calendar-layout, .settings-layout, .pm-map-layout {
grid-template-columns: 1fr; /* Impila la sidebar e il contenuto principale */
height: auto; /* Permetti al contenuto di determinare l'altezza */
}
.calendar-sidebar, .settings-nav {
position: static; /* Rimuovi lo sticky che non serve su mobile */
border-right: none;
border-bottom: 1px solid var(--bs-border-color);
padding-right: 0;
}
#property-manager-section .pm-map-layout .property-list-panel {
height: 300px; /* Dai un'altezza fissa alla lista delle proprietà sotto la mappa */
}
/* --- 4. Modali a Schermo Intero --- */
.modal-panel {
width: 95vw !important;
height: 90vh !important;
max-width: 95vw !important;
}
.modal-body, .modal-body-v2 {
padding: 1rem;
}
/* --- 5. Trasformazione delle Tabelle in Card --- */
/* Nascondi l'intestazione della tabella */
.table-responsive thead {
display: none;
}
/* Ogni riga diventa un blocco a sé stante */
.table-responsive tr {
display: block;
margin-bottom: 1rem;
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius);
padding: 1rem;
}
/* Ogni cella diventa una riga dentro la card */
.table-responsive td {
display: flex;
justify-content: space-between; /* Allinea etichetta e valore */
align-items: center;
text-align: right; /* Allinea il valore a destra */
padding: 0.5rem 0;
border-bottom: 1px solid var(--input-border);
}
.table-responsive td:last-child {
border-bottom: none;
}
/* Aggiungi le etichette usando i pseudo-elementi */
.table-responsive td::before {
content: attr(data-label); /* Usa l'attributo data-label che aggiungeremo con JS */
font-weight: 600;
color: var(--light-text);
text-align: left;
margin-right: 1rem;
}
/* Stili specifici per tabelle diverse */
#leadsTable td:nth-of-type(2)::before { content: "Name"; }
#leadsTable td:nth-of-type(3)::before { content: "Source"; }
#leadsTable td:nth-of-type(4)::before { content: "Status"; }
#leadsTable td:nth-of-type(5)::before { content: "Score"; }
#leadsTable td:nth-of-type(6)::before { content: "Last Activity"; }
#leadsTable td:nth-of-type(7)::before { content: "Owner"; }
#listingsTable td:nth-of-type(1)::before { content: "Listing"; }
#listingsTable td:nth-of-type(2)::before { content: "Price"; }
#listingsTable td:nth-of-type(3)::before { content: "Status"; }
#listingsTable td:nth-of-type(4)::before { content: "Assigned Lead"; }
/* Nascondi la checkbox per la selezione multipla su mobile, è troppo piccola */
.table-responsive td:first-child, .table-responsive th:first-child {
display: none;
}
/* --- 6. Hero Section (Motivation) --- */
.motivation-hero {
grid-template-columns: 1fr; /* Impila tutto */
text-align: center;
}
.hero-quote {
border-left: none;
border-top: 3px solid var(--primary-color);
padding-left: 0;
padding-top: 1rem;
}
.hero-cta {
width: 100%;
}
}
/* ======================================= */
/* === SIDEBAR MOBILE E TOGGLE (NUOVO) === */
/* ======================================= */
/* --- 1. Pulsante Hamburger (visibile solo su mobile) --- */
#mobileMenuToggle {
display: none; /* Nascosto di default */
font-size: 1.5rem;
color: var(--bs-body-color);
}
/* --- 2. Overlay per lo sfondo scuro --- */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1190; /* Appare sopra il contenuto ma sotto la sidebar */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
/* ======================================= */
/* === FLOWINBOX MOBILE RESPONSIVE === */
/* ======================================= */
/* --- Stile iniziale del pulsante "Indietro" (nascosto su desktop) --- */
#commHubBackBtn {
display: none;
}
/* --- Breakpoint per Tablet (fino a 1024px) --- */
@media (max-width: 1024px) {
/* Passa a un layout a 2 colonne, nascondendo i dettagli a destra */
.comm-hub-main-container {
grid-template-columns: 300px 1fr;
}
/* Nascondi il pannello dei dettagli e il suo ridimensionatore */
.comm-hub-main-container .comm-hub-details-pane,
.comm-hub-main-container .comm-hub-resizer[data-resizer-for="reading-details"] {
display: none;
}
}
/* --- Breakpoint per Smartphone (fino a 768px) --- */
@media (max-width: 768px) {
/* --- 1. Riorganizza il container principale --- */
#flowinbox-manager-section.active {
/* Occupa l'intera altezza disponibile */
height: calc(100vh - 70px - 2rem);
}
.comm-hub-main-container {
/* Passa da grid a flex per mostrare un pannello alla volta */
display: flex;
grid-template-columns: none; /* Rimuovi la definizione della griglia */
}
/* --- 2. Imposta i pannelli per la visualizzazione singola --- */
.comm-hub-list-pane,
.comm-hub-reading-pane {
width: 100%;
flex-shrink: 0;
transition: transform 0.3s ease-in-out;
}
/* Di default, il pannello di lettura è fuori schermo a destra */
.comm-hub-reading-pane {
transform: translateX(100%);
}
/* Nascondi i ridimensionatori, non servono su mobile */
.comm-hub-resizer {
display: none;
}
/* Mostra il pulsante "Indietro" */
#commHubBackBtn {
display: inline-flex;
}
/* --- 3. Stili per lo stato "in lettura" --- */
/* Quando si visualizza una conversazione, sposta entrambi i pannelli a sinistra */
.comm-hub-main-container.viewing-thread .comm-hub-list-pane,
.comm-hub-main-container.viewing-thread .comm-hub-reading-pane {
transform: translateX(-100%);
}
/* Semplifica l'header quando si è in modalità lettura */
.comm-hub-header {
display: none; /* Nasconde l'header superiore per dare più spazio */
}
/* Adatta l'altezza del container principale di conseguenza */
#flowinbox-manager-section.active.viewing-thread {
height: calc(100vh - 70px);
}
}
/* ======================================= */
/* === SIDEBAR MOBILE E TOGGLE (V2) === */
/* ======================================= */
/* --- Pulsante Hamburger (visibile solo su mobile) --- */
#mobileMenuToggle {
display: none;
font-size: 1.5rem;
color: var(--bs-body-color);
}
/* --- Overlay per lo sfondo scuro --- */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1190;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
/* in styles.css */
/* SOSTITUISCI IL BLOCCO @media PRECEDENTE CON QUESTO */
/* --- Breakpoint per Tablet e Smartphone (fino a 992px) --- */
@media (max-width: 992px) {
/* Mostra il pulsante hamburger */
#mobileMenuToggle {
display: block;
}
/* Rimuovi la sidebar dal flusso normale e posizionala fuori schermo */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1200;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important;
/* MODIFICA: Rimuovi lo scorrimento da qui... */
/* overflow-y: auto; (Questa riga è stata rimossa) */
}
/* NUOVA REGOLA: ...e applicalo solo alla sezione di navigazione */
.sidebar .sidebar-nav {
flex-grow: 1; /* Permette a questa sezione di occupare tutto lo spazio disponibile */
overflow-y: auto; /* Aggiunge la barra di scorrimento solo qui, se necessario */
padding-bottom: 1rem; /* Aggiunge un po' di spazio alla fine della lista */
}
/* Stili per lo stato "APERTO" (invariati) */
body.sidebar-open .sidebar-overlay {
opacity: 1;
pointer-events: auto;
}
body.sidebar-open .sidebar {
transform: translateX(0);
box-shadow: 5px 0 25px rgba(0,0,0,0.2);
}
}
/* --- NUOVO: Breakpoint per schermi molto piccoli (es. iPhone) --- */
@media (max-width: 480px) {
.sidebar {
/* Riduci la larghezza della sidebar per lasciare più "margine" visivo */
width: 260px;
}
}/* ======================================= */
/* === FIX KPI E PROMPT BAR COMMAND CENTER === */
/* ======================================= */
/* --- 1. FIX: Permette al testo lungo nelle KPI card di andare a capo --- */
.kpi-card .value {
word-break: break-all; /* Forza il testo ad andare a capo se troppo lungo */
line-height: 1.1; /* Riduce la spaziatura tra le righe se il testo va a capo */
}
/* --- 2. FIX: Corregge il layout della barra di comando nel Command Center --- */
/* Applica questo stile solo alla barra dentro la card "AI Activity" */
.ai-activity .global-prompt-bar-v2 {
padding: 0.5rem 0.75rem 0.5rem 1.25rem; /* Padding corretto */
}
/* Assicura che l'input di testo abbia lo spazio per crescere */
.ai-activity .global-prompt-bar-v2 input {
flex-grow: 1;
min-width: 100px; /* Larghezza minima per evitare che scompaia */
}
/* LA CORREZIONE CHIAVE: Impedisce al contenitore dei pulsanti di restringersi */
.ai-activity .global-prompt-bar-v2 .prompt-actions {
flex-shrink: 0;
}
/* in styles.css */
/* --- FIX: Centra perfettamente lo spinner nei pulsanti di login/signup --- */
.btn.loading .spinner-border-sm {
position: absolute; /* Rimuove lo spinner dal flusso normale del layout */
}
/* in styles.css */
/* --- FIX: Layout dell'intestazione per mobile --- */
@media (max-width: 992px) {
.top-header {
flex-direction: row; /* Assicura che sia sempre una riga */
justify-content: space-between; /* Spinge i due gruppi ai lati opposti */
gap: 1rem;
}
.header-right-group {
display: flex;
align-items: center;
gap: 1rem; /* Spazio tra le icone */
}
/* Nascondi il selettore del tema su schermi molto piccoli per risparmiare spazio */
@media (max-width: 480px) {
.theme-switch-wrapper {
display: none;
}
.header-right-group {
gap: 0.75rem; /* Riduci lo spazio tra le icone rimanenti */
}
}
}
/* === ADD THIS ENTIRE NEW BLOCK === */
/* ======================================= */
/* === PLAN EXPIRED MODAL STYLES === */
/* ======================================= */
/* The full-screen dark overlay that blocks the app */
.expired-plan-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9998; /* Extremely high z-index */
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
opacity: 0;
animation: fadeIn 0.5s ease forwards; /* Use the existing fadeIn animation */
}
/* The modal panel itself */
.expired-plan-modal {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
max-width: 500px;
text-align: center;
box-shadow: var(--shadow-lg);
border-top: 5px solid var(--danger-color);
}
.expired-plan-modal .icon {
font-size: 3rem;
color: var(--danger-color);
margin-bottom: 1.5rem;
}
.expired-plan-modal h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--heading-text);
margin-bottom: 1rem;
}
.expired-plan-modal p {
font-size: 1rem;
color: var(--light-text);
line-height: 1.6;
margin-bottom: 2rem;
}
.expired-plan-modal .modal-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* in styles.css */
/* === MOTIVATION TAB (ICONBOARD) STYLES === */
/* ... (existing styles) */
.note-box {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
min-height: 50px;
white-space: pre-wrap; /* Preserves line breaks in notes */
}
/* === AGENT CARD SCHEDULE TEXT === */
.agent-schedule-text {
font-size: 0.85rem;
font-weight: 500;
color: var(--light-text);
padding: 0 0.5rem;
text-align: right;
flex-grow: 1;
}
/* styles.css */
/* Add this to the end of your file */
.btn-soft.secondary {
background-color: var(--menu-hover-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
.btn-soft.secondary:hover:not(:disabled) {
background-color: var(--bs-border-color);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* ======================================= */
/* === TRIAL EXPIRING BANNER STYLES === */
/* ======================================= */
.trial-banner {
background: linear-gradient(90deg, #4361ee, #7209b7); /* Gradient from primary to a purple */
color: #ffffff;
padding: 1rem 1.5rem;
margin: 0 2rem 1.5rem 2rem; /* Sits below the header */
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
animation: fadeIn 0.5s ease-out;
display: block;
}
.trial-banner.hidden {
display: none;
}
.trial-banner-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap; /* Allows wrapping on smaller screens */
}
.trial-banner-text {
flex-grow: 1;
}
.trial-banner .headline {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.trial-banner .subline {
font-size: 0.9rem;
opacity: 0.9;
margin: 0;
line-height: 1.5;
}
.trial-banner-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.trial-banner .btn-unlock {
background-color: #ffffff;
color: var(--primary-color);
font-weight: 700;
padding: 0.6rem 1.25rem;
border-radius: var(--border-radius);
text-decoration: none;
transition: all 0.2s ease-out;
border: none;
}
.trial-banner .btn-unlock:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
background-color: #f0f0f0;
}
.trial-banner .btn-dismiss {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: color 0.2s ease;
}
.trial-banner .btn-dismiss:hover {
color: #ffffff;
}
/* Responsive adjustments for the banner */
@media (max-width: 992px) {
.trial-banner-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.trial-banner-actions {
width: 100%;
justify-content: center;
}
}
/* In styles.css, add this at the end */
/* ======================================= */
/* === SMART CALL AI SECTION STYLES === */
/* ======================================= */
#smart-call-ai-section .smart-call-tab-content {
margin-top: 1.5rem;
}
#smart-call-ai-section .kpi-card .value {
font-size: 1.2rem;
margin-bottom: 0.25rem;
/* === TotalFlow CRM Stylesheet v5.4 === */
/* ... (TUTTO il CSS di TotalFlow CRM che hai fornito va qui, dall'inizio alla fine) ... */
/* ======================================================= */
/* === OPTLYX CONTROL TOWER - CUSTOM STYLES (NUOVO) === */
/* ======================================================= */
/* --- Banner per Incidenti Attivi --- */
.incident-banner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
border-radius: var(--border-radius-lg);
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
color: var(--warning-color);
border: 1px solid color-mix(in srgb, var(--warning-color) 30%, transparent);
font-weight: 500;
}
.incident-banner-text {
flex-grow: 1;
}
.incident-banner .btn-soft.danger {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
/* --- Badge di Conformità (Sezione Overview) --- */
.compliance-badge-group {
display: flex;
gap: 0.75rem;
}
.compliance-badge {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
padding: 0.3rem 0.8rem;
border-radius: 1rem; /* Forma a pillola */
}
.compliance-badge.status-ok {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
}
.compliance-badge.status-warning {
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
color: var(--warning-color);
}
.compliance-badge.status-error {
background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
color: var(--danger-color);
}
.compliance-badge.status-na {
background-color: var(--menu-hover-bg);
color: var(--light-text);
}
/* --- Timeline del Progetto --- */
.timeline-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.timeline-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius);
border-left-width: 4px;
}
.timeline-item-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #fff;
}
.timeline-item-content {
flex-grow: 1;
}
.timeline-item-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin-bottom: 0.25rem;
}
.timeline-item-content .status-text {
font-size: 0.85rem;
font-weight: 500;
color: var(--light-text);
}
.timeline-item-content .date-range {
font-size: 0.8rem;
color: var(--light-text);
margin-top: 0.5rem;
}
/* Stati della Timeline */
.timeline-item.status-completed {
border-left-color: var(--success-color);
}
.timeline-item.status-completed .timeline-item-icon {
background-color: var(--success-color);
}
.timeline-item.status-in-progress {
border-left-color: var(--primary-color);
box-shadow: 0 0 15px color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.timeline-item.status-in-progress .timeline-item-icon {
background-color: var(--primary-color);
}
.timeline-item.status-pending {
border-left-color: var(--bs-border-color);
}
.timeline-item.status-pending .timeline-item-icon {
background-color: var(--bs-border-color);
color: var(--light-text);
}
/* --- Document List (Privacy Center) --- */
.document-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.document-item {
display: flex;
align-items: center;
gap: 1rem;
background-color: var(--input-bg);
padding: 1rem;
border-radius: var(--border-radius);
}
.document-item-icon {
font-size: 1.5rem;
color: var(--light-text);
}
.document-item-details {
flex-grow: 1;
}
.document-item-details strong {
color: var(--heading-text);
}
.document-item-details span {
font-size: 0.8rem;
color: var(--light-text);
display: block;
}
.document-item .btn-soft {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
}
/* === AGGIUNTE PER ANIMAZIONI E PROGRESS BAR === */
/* --- Barra di Progresso Principale --- */
.progress-bar-container-main {
width: 100%;
height: 12px;
background-color: var(--input-border);
border-radius: 6px;
overflow: hidden;
margin: 1rem 0;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.progress-bar-fill-main {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--info-color));
border-radius: 6px;
transition: width 1s cubic-bezier(0.25, 1, 0.5, 1); /* Animazione fluida */
}
/* --- Animazione per le Card --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animated-card {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0; /* Inizia invisibile */
}
/* Applica un ritardo diverso a ogni card per un effetto "a cascata" */
.animated-card:nth-child(1) { animation-delay: 0.1s; }
.animated-card:nth-child(2) { animation-delay: 0.2s; }
.animated-card:nth-child(3) { animation-delay: 0.3s; }
.animated-card:nth-child(4) { animation-delay: 0.4s; }
/* --- Miglioramento Hover Card --- */
.kpi-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
/* === AGGIUNTE PER NOTIFICHE E COMUNICAZIONI === */
/* --- Sfondo Canvas con Gradiente --- */
.canvas {
background: radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.03), transparent 30%);
}
body.light-mode .canvas {
background: radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05), transparent 40%);
}
/* --- Pulsante Notifiche Stile GitHub --- */
.notification-btn {
position: relative;
background: none;
border: 1px solid var(--bs-border-color);
color: var(--bs-body-color);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.notification-btn:hover {
background-color: var(--menu-hover-bg);
color: var(--heading-text);
}
.notification-btn i {
font-size: 1.2rem;
}
.notification-dot {
position: absolute;
top: 6px;
right: 7px;
width: 10px;
height: 10px;
background-color: #3b82f6; /* Blu notifica */
border-radius: 50%;
border: 2px solid var(--header-bg);
box-shadow: 0 0 5px rgba(59, 130, 246, 0.8);
}
/* --- Lista Comunicazioni dal Team --- */
.communication-list {
list-style: none;
padding: 0;
margin: 0;
}
.communication-list li {
display: flex;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--input-border);
transition: background-color 0.2s ease;
}
.communication-list li:first-child {
border-top: none;
}
.communication-list li:hover {
background-color: var(--menu-hover-bg);
}
.communication-avatar {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-color);
color: #fff;
font-weight: 600;
font-size: 1.2rem;
}
.communication-content {
flex-grow: 1;
}
.communication-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.25rem;
}
.communication-author {
font-weight: 600;
color: var(--heading-text);
}
.communication-timestamp {
font-size: 0.8rem;
color: var(--light-text);
}
.communication-message {
color: var(--bs-body-color);
line-height: 1.6;
}
/* === AGGIUNTE PER OCTICONS E ANIMAZIONI (V2) === */
/* --- Stile Base per le Octicons --- */
.octicon {
width: 16px;
height: 16px;
vertical-align: middle;
/* Inverte i colori dell'SVG per adattarsi al tema scuro */
filter: invert(var(--octicon-invert, 1));
}
/* Nel tema chiaro, le icone non devono essere invertite (diventerebbero bianche) */
body.light-mode .octicon {
filter: invert(var(--octicon-invert-light, 0));
}
.sidebar-nav .nav-link .octicon {
margin-right: 1rem;
width: 20px;
height: 20px;
opacity: 0.7;
transition: opacity 0.2s, filter 0.2s;
}
.sidebar-nav .nav-link:hover .octicon,
.sidebar-nav .nav-link.active .octicon {
opacity: 1;
}
/* L'icona attiva diventa del colore primario */
.sidebar-nav .nav-link.active .octicon {
/* Questo trucco con i filtri CSS simula il cambio colore a --primary-color */
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
body.light-mode .sidebar-nav .nav-link.active .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
.search-bar .octicon {
margin-right: 0.75rem;
}
.user-menu-nav-link .octicon {
margin-right: 0.8rem;
}
.notification-btn .octicon {
filter: none; /* La campana non deve essere invertita */
}
/* === AGGIUNTE PER ANIMAZIONI E PROGRESS BAR === */
/* --- Barra di Progresso Principale --- */
.progress-bar-container-main {
width: 100%;
height: 12px;
background-color: var(--input-border);
border-radius: 6px;
overflow: hidden;
margin: 1rem 0;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.progress-bar-fill-main {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--info-color));
border-radius: 6px;
transition: width 1s cubic-bezier(0.25, 1, 0.5, 1); /* Animazione fluida */
}
/* --- Animazione per le Card --- */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animated-card {
animation: fadeInUp 0.5s ease-out forwards;
opacity: 0; /* Inizia invisibile */
}
/* Applica un ritardo diverso a ogni card per un effetto "a cascata" */
.animated-card:nth-child(1) { animation-delay: 0.1s; }
.animated-card:nth-child(2) { animation-delay: 0.2s; }
.animated-card:nth-child(3) { animation-delay: 0.3s; }
.animated-card:nth-child(4) { animation-delay: 0.4s; }
/* --- Miglioramento Hover Card --- */
.kpi-card {
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.kpi-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
/* === AGGIUNTE PER NOTIFICHE E COMUNICAZIONI === */
/* --- Sfondo Canvas con Gradiente --- */
.canvas {
background: radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.03), transparent 30%);
}
body.light-mode .canvas {
background: radial-gradient(circle at 10% 20%, rgba(67, 97, 238, 0.05), transparent 40%);
}
/* --- Pulsante Notifiche Stile GitHub --- */
.notification-btn {
position: relative;
background: none;
border: 1px solid var(--bs-border-color);
color: var(--bs-body-color);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.notification-btn:hover {
background-color: var(--menu-hover-bg);
color: var(--heading-text);
}
.notification-btn i {
font-size: 1.2rem;
}
.notification-dot {
position: absolute;
top: 6px;
right: 7px;
width: 10px;
height: 10px;
background-color: #3b82f6; /* Blu notifica */
border-radius: 50%;
border: 2px solid var(--header-bg);
box-shadow: 0 0 5px rgba(59, 130, 246, 0.8);
}
/* --- Lista Comunicazioni dal Team --- */
.communication-list {
list-style: none;
padding: 0;
margin: 0;
}
.communication-list li {
display: flex;
gap: 1.25rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--input-border);
transition: background-color 0.2s ease;
}
.communication-list li:first-child {
border-top: none;
}
.communication-list li:hover {
background-color: var(--menu-hover-bg);
}
.communication-avatar {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-color);
color: #fff;
font-weight: 600;
font-size: 1.2rem;
}
.communication-content {
flex-grow: 1;
}
.communication-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.25rem;
}
.communication-author {
font-weight: 600;
color: var(--heading-text);
}
.communication-timestamp {
font-size: 0.8rem;
color: var(--light-text);
}
.communication-message {
color: var(--bs-body-color);
line-height: 1.6;
}
/* === AGGIUNTE PER OCTICONS E ANIMAZIONI (V2) === */
/* --- Stile Base per le Octicons --- */
.octicon {
width: 16px;
height: 16px;
vertical-align: middle;
/* Inverte i colori dell'SVG per adattarsi al tema scuro */
filter: invert(var(--octicon-invert, 1));
}
/* Nel tema chiaro, le icone non devono essere invertite (diventerebbero bianche) */
body.light-mode .octicon {
filter: invert(var(--octicon-invert-light, 0));
}
.sidebar-nav .nav-link .octicon {
margin-right: 1rem;
width: 20px;
height: 20px;
opacity: 0.7;
transition: opacity 0.2s, filter 0.2s;
}
.sidebar-nav .nav-link:hover .octicon,
.sidebar-nav .nav-link.active .octicon {
opacity: 1;
}
/* L'icona attiva diventa del colore primario */
.sidebar-nav .nav-link.active .octicon {
/* Questo trucco con i filtri CSS simula il cambio colore a --primary-color */
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
body.light-mode .sidebar-nav .nav-link.active .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
.search-bar .octicon {
margin-right: 0.75rem;
}
.user-menu-nav-link .octicon {
margin-right: 0.8rem;
}
.notification-btn .octicon {
filter: none; /* La campana non deve essere invertita */
}
/* ======================================= */
/* === STILI PER LE NUOVE KPI CARDS (V2) === */
/* ======================================= */
.kpi-card-v2 {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--card-bg);
padding: 1.5rem;
border-radius: var(--border-radius-lg);
border: 1px solid var(--bs-border-color);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.kpi-card-v2:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.kpi-card-icon {
width: 60px;
height: 60px;
flex-shrink: 0;
border-radius: 16px; /* Raggio più grande per un look più morbido */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem; /* Icona più grande */
}
.kpi-card-content h3 {
font-size: 0.9rem;
color: var(--light-text);
margin-bottom: 0.75rem;
text-transform: uppercase;
font-weight: 600;
}
.kpi-card-content p {
margin: 0.4rem 0;
font-size: 0.95rem;
color: var(--bs-body-color);
}
.kpi-card-content p strong {
color: var(--light-text);
font-weight: 500;
}
.kpi-card-content .kpi-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-text);
margin-right: 0.5rem;
}
.kpi-card-content .text-red {
color: var(--danger-color) !important;
}
/* Sfondi "soft" per le icone */
.bg-soft-blue {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
color: var(--primary-color);
}
.bg-soft-orange {
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
color: var(--warning-color);
}
.bg-soft-green {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
}
.bg-soft-purple {
background-color: color-mix(in srgb, #9b59b6 15%, transparent);
color: #9b59b6;
}
/* ======================================= */
/* === STILI PER IL CAROSELLO COMUNICAZIONI === */
/* ======================================= */
/* Stile per i pulsanti di navigazione nell'header della card */
.card-header .carousel-nav {
display: flex;
gap: 0.5rem;
}
/* Contenitore principale che nasconde la scrollbar */
.comms-carousel-container {
overflow-x: auto;
scrollbar-width: none; /* Per Firefox */
padding: 1.5rem;
}
.comms-carousel-container::-webkit-scrollbar {
display: none; /* Per Chrome, Safari, Edge */
}
/* Traccia che contiene le card e abilita lo scroll "a scatto" */
.comms-carousel-track {
display: flex;
gap: 1.5rem;
scroll-snap-type: x mandatory; /* Effetto calamita */
}
/* Stile base per ogni card nel carosello */
.comms-card {
flex: 0 0 350px; /* Larghezza fissa per ogni card */
scroll-snap-align: start; /* Allinea l'inizio della card con l'inizio del contenitore */
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Stile per la card di tipo Annuncio */
.comms-card-announcement {
padding: 1.5rem;
}
.comms-card-announcement .card-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin-bottom: 0.75rem;
}
.comms-card-announcement .card-message {
font-size: 0.95rem;
line-height: 1.6;
color: var(--bs-body-color);
flex-grow: 1;
}
.comms-card-announcement .card-footer {
font-size: 0.8rem;
color: var(--light-text);
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--bs-border-color);
}
/* Stile per la card con Immagine */
.comms-card-image .card-image {
height: 180px;
background-size: cover;
background-position: center;
}
.comms-card-image .card-content {
padding: 1.5rem;
}
/* Stile per la card con Video */
.comms-card-video .card-video-container {
position: relative;
padding-top: 56.25%; /* Proporzioni 16:9 */
height: 0;
overflow: hidden;
}
.comms-card-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.comms-card-video .card-content {
padding: 1.5rem;
}
/* ======================================= */
/* === STILI AGGIUNTIVI PER CARD 'PICS' === */
/* ======================================= */
.comms-card-pics {
position: relative; /* Necessario per posizionare il footer in sovrapposizione */
height: 280px; /* Altezza fissa per un look uniforme */
width: 350px;
}
.comms-card-pics .card-image {
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
.comms-card-pics .card-footer-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem 1rem 1rem; /* Più spazio per l'effetto gradiente */
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
color: #fff;
font-size: 0.85rem;
font-weight: 500;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
/* ======================================= */
/* === NUOVI STILI: TIMELINE PROGETTO V2 === */
/* ======================================= */
/* --- Layout Principale e Header --- */
.timeline-layout {
display: grid;
grid-template-columns: 1fr 320px; /* Colonna principale flessibile, colonna destra fissa */
gap: 2rem;
align-items: flex-start;
}
#timelineHeaderContext {
align-items: flex-start;
}
.header-next-step {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
padding: 0.75rem 1.25rem;
max-width: 450px;
font-size: 0.9rem;
}
.header-next-step strong {
color: var(--primary-color);
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
/* --- Card delle Fasi --- */
.timeline-main-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.phase-card {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
transition: all 0.2s ease-out;
border-left: 4px solid var(--bs-border-color);
}
.phase-card-header {
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.phase-card:hover {
border-color: var(--border-color-2);
}
.phase-card-header h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--heading-text);
margin: 0;
}
.phase-card-progress-bar {
height: 6px;
background-color: var(--input-bg);
border-radius: 3px;
overflow: hidden;
margin-top: 0.5rem;
}
.phase-card-progress-bar div {
height: 100%;
background-color: var(--primary-color);
border-radius: 3px;
transition: width 0.5s ease;
}
.phase-card-body {
padding: 1rem 1.5rem;
border-top: 1px solid var(--input-border);
}
.phase-card-details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
font-size: 0.9rem;
}
.detail-item strong {
display: block;
color: var(--light-text);
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.detail-item .status-chip { font-size: 0.85rem; }
.phase-card-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--input-border);
display: flex;
justify-content: space-between;
align-items: center;
}
.phase-actions .btn-soft {
padding: 0.4rem 1rem;
font-size: 0.85rem;
}
.phase-compliance-badges {
display: flex;
gap: 0.5rem;
}
.phase-compliance-badges .compliance-badge {
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
}
/* --- Stati Visuali delle Card --- */
.phase-card.status-completed { border-left-color: var(--success-color); }
.phase-card.status-completed .phase-card-header h3::before { content: '✅'; margin-right: 0.75rem; }
.phase-card.status-in-progress { border-left-color: var(--primary-color); }
.phase-card.status-in-progress .phase-card-header {
background-color: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.phase-card.status-on-hold { border-left-color: var(--warning-color); }
.phase-card.status-on-hold .status-chip { background-color: color-mix(in srgb, var(--warning-color) 25%, transparent); color: var(--warning-color); }
.phase-card.status-blocked { border-left-color: var(--danger-color); }
.phase-card.status-blocked .status-chip { background-color: color-mix(in srgb, var(--danger-color) 15%, transparent); color: var(--danger-color); }
.phase-card.status-pending { opacity: 0.7; }
.phase-card.status-pending:hover { opacity: 1; }
/* --- Pannello Compliance (destra) --- */
.compliance-panel {
position: sticky;
top: 2rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.compliance-panel h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--input-border);
}
.compliance-panel ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.compliance-list-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.compliance-list-item strong {
font-weight: 500;
}
/* --- Drawer Dettaglio Fase --- */
.details-drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1090;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
.details-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.details-drawer {
position: fixed;
top: 0;
right: 0;
height: 100%;
background-color: var(--sidebar-bg);
z-index: 1100;
box-shadow: var(--shadow-lg);
border-left: 1px solid var(--bs-border-color);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.details-drawer.is-open {
transform: translateX(0);
}
.drawer-header {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--bs-border-color);
}
.drawer-content {
padding: 1.5rem;
overflow-y: auto;
flex-grow: 1;
}
/* ======================================= */
/* === STILI TIMELINE VERTICALE (V4 - ALIGNMENT FIX) === */
/* ======================================= */
/* --- Keyframes for the animation "loading" --- */
@keyframes shimmer-vertical {
0% { background-position: 0 -200px; }
100% { background-position: 0 200px; }
}
/* --- Layout Generale --- */
.timeline-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 2rem;
align-items: flex-start;
}
.timeline-main-column {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 2.5rem 2rem;
}
/* --- Contenitore Timeline con Linee Sovrapposte --- */
.timeline-container {
position: relative;
width: 100%;
padding-left: 30px;
}
/* 1. La linea di sfondo (grigia, con animazione) */
.timeline-container::before {
content: '';
position: absolute;
left: 8px;
top: 10px;
bottom: 10px;
width: 4px;
border-radius: 2px;
background: linear-gradient(
180deg,
var(--input-border),
var(--input-border),
color-mix(in srgb, var(--primary-color) 40%, var(--input-border)),
var(--input-border),
var(--input-border)
);
background-size: 100% 200px;
animation: shimmer-vertical 2s linear infinite;
}
/* 2. La linea di progresso (colorata, in primo piano) */
.timeline-container::after {
content: '';
position: absolute;
left: 8px;
top: 10px;
width: 4px;
background-color: var(--success-color);
border-radius: 2px;
height: var(--timeline-progress-height, 0px);
z-index: 1;
transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Elemento Singolo della Timeline --- */
.timeline-item {
position: relative;
margin-bottom: 2rem;
}
.timeline-item:last-child {
margin-bottom: 0;
}
/* Il punto sulla linea (con la posizione corretta) */
.timeline-item-icon {
position: absolute;
left: -2px;
top: 0; /* MODIFICA: Spostato da 5px a 0 per allinearlo in alto */
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--card-bg);
border: 4px solid var(--bs-border-color);
z-index: 2;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
/* La card con i dettagli (senza effetto hover) */
.timeline-item-content {
padding: 1.25rem 1.5rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s;
}
.timeline-item-content h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin: 0 0 0.5rem 0;
}
.timeline-item-content .status-text,
.timeline-item-content .date-range {
font-size: 0.85rem;
color: var(--light-text);
font-weight: 500;
}
.timeline-item-content .status-text { margin-bottom: 0.75rem; }
/* --- Variazioni di Stato --- */
/* Stato: Completato */
.timeline-item.status-completed .timeline-item-icon {
border-color: var(--success-color);
background-color: var(--success-color);
}
.timeline-item.status-completed .timeline-item-icon::after {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #fff;
font-size: 0.7rem;
}
.timeline-item.status-completed .timeline-item-content {
background-color: color-mix(in srgb, var(--success-color) 10%, transparent);
border-color: color-mix(in srgb, var(--success-color) 25%, transparent);
}
/* Stato: In Corso (con animazione) */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 40%, transparent); }
70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary-color) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent); }
}
.timeline-item.status-in-progress .timeline-item-icon {
border-color: var(--primary-color);
background-color: var(--primary-color);
animation: pulse 2s infinite;
}
.timeline-item.status-in-progress .timeline-item-content {
border-color: var(--primary-color);
}
/* Stato: Bloccato o In Pausa */
.timeline-item.status-on-hold .timeline-item-icon { border-color: var(--warning-color); }
.timeline-item.status-blocked .timeline-item-icon { border-color: var(--danger-color); }
/* --- Pannello Compliance (invariato) --- */
.compliance-panel {
position: sticky;
top: 2rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.compliance-panel h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--input-border);
}
.compliance-panel ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* ======================================= */
/* === NUOVI STILI PER LA SIDEBAR TIMELINE === */
/* ======================================= */
.timeline-sidebar {
position: sticky;
top: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem; /* Spazio tra i widget */
}
.widget-card {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
.widget-card h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 1rem 0;
padding-bottom: 1rem;
border-bottom: 1px solid var(--input-border);
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--heading-text);
}
/* Stili per il widget "Team di Progetto" */
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item .user-avatar-btn {
width: 40px;
height: 40px;
}
.contact-item .user-avatar-initial {
font-size: 1.2rem;
}
.contact-item-info strong {
display: block;
font-weight: 600;
color: var(--bs-body-color);
}
.contact-item-info span {
font-size: 0.85rem;
color: var(--light-text);
}
/* AGGIUNGI QUESTO BLOCCO ALLA FINE DI styles.css */
#projectTeamContainer .contact-item-link {
display: block;
text-decoration: none;
color: inherit;
border-radius: var(--border-radius);
margin: -1rem; /* Trucco per estendere l'area cliccabile */
padding: 1rem;
transition: background-color 0.2s ease-out;
}
#projectTeamContainer .contact-item-link:hover {
background-color: var(--menu-hover-bg);
}
/* ======================================= */
/* === STILI PER IL WIDGET PROJECT PULSE === */
/* ======================================= */
.project-pulse-container {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
/* Stile per il grafico a ciambella */
.pulse-chart-wrapper {
position: relative;
width: 100px;
height: 100px;
flex-shrink: 0;
}
.pulse-score {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-text);
}
/* Stile per le metriche (giorni, task) */
.pulse-metrics {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.pulse-metrics .metric-item {
text-align: left;
}
.pulse-metrics .metric-item strong {
font-size: 1.75rem;
font-weight: 700;
color: var(--primary-color);
display: block;
}
.pulse-metrics .metric-item span {
font-size: 0.85rem;
color: var(--light-text);
font-weight: 500;
}
/* Stile per la lista delle prossime scadenze */
.upcoming-deadlines h5 {
font-size: 0.8rem;
font-weight: 600;
color: var(--light-text);
text-transform: uppercase;
margin: 0 0 0.75rem 0;
padding-top: 1rem;
border-top: 1px solid var(--input-border);
}
.upcoming-deadlines ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.deadline-item {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
background-color: var(--input-bg);
padding: 0.6rem 0.8rem;
border-radius: var(--border-radius);
}
.deadline-item .task-name {
font-weight: 500;
color: var(--bs-body-color);
}
.deadline-item .due-date {
font-weight: 600;
color: var(--light-text);
background-color: var(--menu-hover-bg);
padding: 3px 8px;
border-radius: 6px;
font-size: 0.8rem;
}
.deadline-item.is-overdue .due-date {
color: var(--danger-color);
background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
}
/* ======================================= */
/* === STILI PER LE ICONE NELLE KPI CARDS === */
/* ======================================= */
.kpi-card-icon .octicon {
width: 28px; /* Dimensione adatta per il contenitore 60x60px */
height: 28px;
filter: none; /* Rimuove l'inversione di colore per farle risaltare sullo sfondo colorato */
}
/* Colora le icone per abbinarle allo sfondo "soft" */
.bg-soft-blue .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
.bg-soft-orange .octicon {
filter: invert(80%) sepia(58%) saturate(1353%) hue-rotate(349deg) brightness(101%) contrast(102%);
}
.bg-soft-green .octicon {
filter: invert(39%) sepia(21%) saturate(2203%) hue-rotate(107deg) brightness(94%) contrast(89%);
}
.bg-soft-purple .octicon {
filter: invert(44%) sepia(31%) saturate(1455%) hue-rotate(238deg) brightness(90%) contrast(86%);
}
/* ======================================= */
/* === STILI PER ICONE NELLE CARD TIMELINE === */
/* ======================================= */
.timeline-item-content .card-title-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.timeline-item-content .card-title-wrapper .octicon {
width: 20px;
height: 20px;
filter: none; /* Rimuove l'inversione di default */
transition: filter 0.3s ease;
}
/* Colora l'icona in base allo stato della fase */
.timeline-item.status-completed .octicon {
filter: invert(39%) sepia(21%) saturate(2203%) hue-rotate(107deg) brightness(94%) contrast(89%); /* Verde */
}
.timeline-item.status-in-progress .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%); /* Blu */
}
.timeline-item.status-pending .octicon,
.timeline-item.status-on-hold .octicon,
.timeline-item.status-blocked .octicon {
filter: invert(65%) sepia(6%) saturate(379%) hue-rotate(175deg) brightness(89%) contrast(86%); /* Grigio */
}
/* ADD these new styles to the end of your styles.css file */
/* --- Task & CR Section Enhancements --- */
/* Impact Labels for Task Table */
.impact-label {
font-weight: 600;
padding: 4px 10px;
border-radius: 1rem;
font-size: 0.8rem;
text-align: center;
display: inline-block;
}
.impact-label.impact-high {
background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
color: var(--danger-color);
}
.impact-label.impact-medium {
background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
color: var(--warning-color);
}
.impact-label.impact-low {
background-color: color-mix(in srgb, var(--info-color) 20%, transparent);
color: var(--info-color);
}
/* Impact Icons for CR Table */
.impact-icons {
display: flex;
gap: 0.5rem;
}
.impact-icons span {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
color: var(--light-text);
background-color: var(--input-bg);
border: 1px solid var(--input-border);
}
.impact-icons span.active {
background-color: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
/* Item Detail Drawer Content */
#itemDetailDrawerContent h4 {
font-size: 1rem;
font-weight: 600;
color: var(--primary-color);
margin: 1.5rem 0 0.75rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
#itemDetailDrawerContent h4:first-of-type {
margin-top: 0;
}
#itemDetailDrawerContent .drawer-divider {
height: 1px;
background-color: var(--input-border);
margin: 2rem 0;
}
.q-a-placeholder {
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
padding: 1rem;
}
.q-a-placeholder p {
font-style: italic;
color: var(--light-text);
margin-bottom: 0.75rem;
}
.q-a-placeholder textarea {
width: 100%;
min-height: 80px;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius);
padding: 0.75rem;
color: var(--input-text);
margin-bottom: 0.75rem;
}
.q-a-placeholder textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.drawer-footer-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--input-border);
}
/* ADD these new styles to the end of your styles.css file */
/* --- New CR Modal Specifics --- */
.checkbox-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem 1.5rem;
padding: 0.5rem 0;
}
.form-checkbox-label {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 500;
cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary-color);
}
/* In styles.css, find the .modal-overlay.hidden rule and REPLACE it with this: */
.modal-overlay.hidden {
display: none !important;
}
/* Find the .modal-overlay rule and ensure it has 'display: flex' */
/* Assicurati che il blocco base sia così */
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.6);
z-index: 1050;
/* --- Animation State (Start Hidden) --- */
opacity: 0;
pointer-events: none; /* <--- FONDAMENTALE: impedisce di bloccare i click quando è invisibile */
transition: opacity 0.3s ease-out;
}
/* E che lo stato visibile lo riattivi */
.modal-overlay.is-visible {
opacity: 1;
pointer-events: auto; /* <--- FONDAMENTALE: riattiva i click quando è visibile */
}
/* In styles.css, ADD this entire new block at the end of the file */
/* ======================================= */
/* === LOG TOAST NOTIFICATION STYLES === */
/* ======================================= */
.log-toast-container {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* This ensures it's on top of all other content */
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.log-toast {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 320px;
background-color: var(--card-bg);
color: var(--bs-body-color);
padding: 1rem;
border-radius: var(--border-radius);
border: 1px solid var(--bs-border-color);
box-shadow: var(--shadow-lg);
font-weight: 500;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.21, 1.02, 0.73, 1);
}
.log-toast.show {
opacity: 1;
transform: translateY(0);
}
.log-toast .toast-icon {
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.log-toast.loading .toast-icon {
color: var(--primary-color);
}
.log-toast.success .toast-icon {
color: var(--success-color);
}
.log-toast.error .toast-icon {
color: var(--danger-color);
}
.fa-spin {
animation: fa-spin 1.5s linear infinite;
}
@keyframes fa-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ADD these new styles at the end of your styles.css file */
/* --- KPI & ROI Section --- */
#kpi-roi-section .kpi-card .value {
font-size: 2.2rem; /* Adjust font size for the 5-column layout */
}
#kpi-roi-section .kpi-card.text-green .value {
color: var(--success-color);
}
#kpi-roi-section .kpi-card .status-chip {
font-size: 1.2rem;
padding: 0.5rem 1rem;
text-transform: capitalize;
}
/* Confidence Badge Colors */
.confidence-high {
background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
color: var(--success-color);
}
.confidence-medium {
background-color: color-mix(in srgb, var(--warning-color) 25%, transparent);
color: var(--warning-color);
}
.confidence-low {
background-color: var(--menu-hover-bg);
color: var(--light-text);
}
/* Chart Containers */
.chart-container {
height: 300px;
position: relative;
}
.chart-container h4 {
font-size: 1rem;
font-weight: 600;
color: var(--light-text);
margin-bottom: 1rem;
text-align: center;
}
/* ADD these new styles at the end of your styles.css file */
/* --- Privacy Center Specifics --- */
.compliance-badge-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.document-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1rem;
}
.document-item {
background-color: var(--input-bg);
border-radius: var(--border-radius);
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border: 1px solid var(--input-border);
}
.document-item-icon {
font-size: 1.5rem;
color: var(--light-text);
}
.document-item-details {
flex-grow: 1;
}
.document-item-details strong {
font-weight: 600;
color: var(--heading-text);
}
.document-item-details span {
display: block;
font-size: 0.8rem;
color: var(--light-text);
}
.settings-pane-footer {
padding: 1rem 1.5rem;
border-top: 1px solid var(--input-border);
display: flex;
justify-content: flex-end;
background-color: var(--input-bg);
}
/* ADD these new styles at the end of your styles.css file */
/* --- Privacy Center Badge Icons --- */
.compliance-badge .octicon {
width: 16px;
height: 16px;
filter: none; /* Rimuove l'inversione di default per un controllo preciso del colore */
}
/* Colora le icone Octicon con i colori del tema */
.compliance-badge .octicon.text-green {
filter: invert(49%) sepia(50%) saturate(1001%) hue-rotate(90deg) brightness(91%) contrast(88%);
}
.compliance-badge .octicon.text-red {
filter: invert(34%) sepia(41%) saturate(2337%) hue-rotate(330deg) brightness(92%) contrast(90%);
}
.compliance-badge .octicon.text-yellow {
filter: invert(81%) sepia(33%) saturate(3015%) hue-rotate(345deg) brightness(101%) contrast(101%);
}
/* Stili per il contenuto della policy di retention */
#privacyRetentionRules ul {
list-style-type: disc;
padding-left: 20px;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
#privacyRetentionRules li {
padding-left: 0.5rem;
line-height: 1.6;
}
/* AGGIUNGI QUESTO BLOCCO ALLA FINE DI styles.css */
/* --- Sezione Sicurezza --- */
.security-overview-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.security-badge {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-radius: var(--border-radius);
background-color: var(--input-bg);
border: 1px solid var(--input-border);
font-weight: 500;
transition: all 0.2s ease-out;
cursor: help; /* Indica che si può avere più info */
}
.security-badge .status-icon {
font-size: 1.2rem;
}
.security-badge.status-ok {
border-left: 4px solid var(--success-color);
}
.security-badge.status-ok .status-icon {
color: var(--success-color);
}
.security-badge.status-warning {
border-left: 4px solid var(--warning-color);
}
.security-badge.status-warning .status-icon {
color: var(--warning-color);
}
.security-badge.status-error {
border-left: 4px solid var(--danger-color);
}
.security-badge.status-error .status-icon {
color: var(--danger-color);
}
.security-badge:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
background-color: var(--menu-hover-bg);
}
.call-out {
margin-top: 1rem;
padding: 0.75rem 1rem;
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
border-left: 3px solid var(--primary-color);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-size: 0.9rem;
font-weight: 500;
color: var(--bs-body-color);
}
#security-section ul {
list-style-type: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1rem 0;
}
#security-section .styled-table.compact td,
#security-section .styled-table.compact th {
padding: 0.6rem;
}
/* AGGIUNGI QUESTO BLOCCO ALLA FINE DI styles.css */
/* --- Sezione Documenti --- */
.document-filters {
flex-wrap: wrap;
gap: 1rem;
}
.table-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* Stili per il Drawer dei Dettagli */
#documentDrawerContent h4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--light-text);
text-transform: uppercase;
margin: 1.5rem 0 1rem 0;
border-bottom: 1px solid var(--input-border);
padding-bottom: 0.5rem;
}
#documentDrawerContent h4:first-of-type {
margin-top: 0;
}
.meta-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
font-size: 0.9rem;
}
.meta-item strong {
display: block;
color: var(--light-text);
font-size: 0.8rem;
font-weight: 500;
}
.meta-item span {
font-weight: 500;
}
.hash-container {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var(--input-bg);
padding: 0.75rem;
border-radius: var(--border-radius);
font-family: monospace;
font-size: 0.85rem;
}
.hash-container .hash-text {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hash-container i {
cursor: pointer;
color: var(--light-text);
}
.hash-container i:hover {
color: var(--primary-color);
}
.drawer-actions {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--input-border);
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* ======================================= */
/* === OBIETTIVO #1: BOTTONI APPROVAZIONE === */
/* ======================================= */
.table-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.table-actions .btn-sm {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
font-weight: 600;
}
/* ======================================= */
/* === OBIETTIVO #2: AI CHATBOT === */
/* ======================================= */
/* --- Pulsante Fluttuante --- */
.flowcoach-ai-tutor {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background-color: var(--primary-color);
color: #FFF;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
cursor: pointer;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
z-index: 1000;
transition: all 0.3s ease;
border: none;
}
.flowcoach-ai-tutor:hover {
transform: translateY(-3px) scale(1.05);
background-color: color-mix(in srgb, var(--primary-color) 90%, black);
box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
/* --- Finestra Modale Chat --- */
.modal-panel.ai-chat-modal {
display: flex;
flex-direction: column;
}
.ai-modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--input-border);
flex-shrink: 0;
}
.ai-modal-header img {
width: 28px;
height: 28px;
}
.ai-modal-header .modal-close-btn {
margin-left: auto;
}
.ai-chat-log {
flex-grow: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
background-color: var(--input-bg);
}
.chat-message-row {
display: flex;
gap: 0.75rem;
max-width: 90%;
}
.chat-message-row.ai {
align-self: flex-start;
}
.chat-message-row.user {
align-self: flex-end;
flex-direction: row-reverse;
}
.chat-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background-color: var(--card-bg);
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.chat-avatar img {
width: 24px;
height: 24px;
}
.ai-chat-bubble {
padding: 0.75rem 1.25rem;
border-radius: 12px;
max-width: 100%;
line-height: 1.6;
font-size: 0.95rem;
word-wrap: break-word;
}
.ai-chat-bubble.ai {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-bottom-left-radius: 4px;
}
.ai-chat-bubble.user {
background-color: var(--primary-color);
color: #fff;
border-bottom-right-radius: 4px;
}
/* Stile per l'indicatore "reasoning..." */
.reasoning-indicator {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
color: var(--light-text);
font-weight: 500;
}
.reasoning-indicator .reasoning-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--primary-color), var(--info-color));
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Stile per i prompt suggeriti */
.ai-prompt-suggestions {
padding: 0.5rem 0 0 50px; /* Allineato con le bolle di chat */
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.prompt-suggestion-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
color: var(--primary-color);
border-radius: 1rem;
padding: 0.6rem 1rem;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease-out;
}
.prompt-suggestion-btn:hover {
background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.prompt-suggestion-btn i {
color: var(--primary-color);
}
.ai-chat-input-area {
display: flex;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--input-border);
background-color: var(--sidebar-bg);
flex-shrink: 0;
}
#aiChatInput {
flex-grow: 1;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
height: 44px;
padding: 0 1rem;
color: var(--input-text);
outline: none;
}
#aiChatInput:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
}
#aiChatSendBtn {
flex-shrink: 0;
width: 44px;
height: 44px;
padding: 0;
font-size: 1.1rem;
}
/* ======================================= */
/* === OBIETTIVO #3: CARD UPSELL === */
/* ======================================= */
.locked-card {
background-color: var(--input-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
position: relative;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease-out;
}
.locked-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.locked-card .locked-icon {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 1.25rem;
color: var(--light-text);
opacity: 0.7;
}
.locked-card .locked-content {
filter: grayscale(80%);
opacity: 0.6;
transition: all 0.3s ease-out;
}
.locked-card:hover .locked-content {
filter: grayscale(0%);
opacity: 1;
}
.locked-card .locked-bg-icon {
font-size: 3.5rem;
color: var(--bs-border-color);
position: absolute;
bottom: -10px;
right: 10px;
opacity: 0.5;
transform: rotate(-15deg);
}
.locked-card h3 {
font-size: 1.2rem;
font-weight: 600;
color: var(--heading-text);
margin-bottom: 0.5rem;
}
.locked-card p {
color: var(--light-text);
font-size: 0.9rem;
line-height: 1.5;
}
/* ======================================= */
/* === EFFETTO WAVE "STO RAGIONANDO..." === */
/* ======================================= */
/* Stile per il testo "Sto ragionando..." */
.reasoning-text {
font-weight: 500;
font-size: 1rem;
align-self: center; /* Allinea verticalmente il testo con l'avatar */
margin-left: 0.75rem; /* Aggiunge spazio dall'avatar */
/* 1. Crea un sfondo a gradiente */
background: linear-gradient(
90deg,
var(--light-text),
#fff,
var(--light-text)
);
/* 2. Rendi lo sfondo molto più largo del testo */
background-size: 200% auto;
/* 3. Ritaglia lo sfondo sulla forma del testo */
-webkit-background-clip: text;
background-clip: text;
/* 4. Rendi il colore del testo trasparente per rivelare il gradiente */
-webkit-text-fill-color: transparent;
color: transparent;
/* 5. Applica l'animazione "wave" */
animation: text-shimmer 2s linear infinite;
}
/* Keyframe per l'animazione "wave" */
@keyframes text-shimmer {
to {
background-position: -200% center;
}
}
/* Rimuovi il vecchio stile dell'icona rotante se non serve più */
.reasoning-indicator {
display: none;
}
/* ======================================= */
/* === STILI PANNELLO NOTIFICHE === */
/* ======================================= */
.notification-container {
position: relative;
}
.notification-btn .notification-dot.hidden {
display: none;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1050;
width: 360px;
max-width: 90vw;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
animation: fadeIn 0.2s ease-out;
max-height: 450px;
display: flex;
flex-direction: column;
}
.notification-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--input-border);
flex-shrink: 0;
}
.notification-header h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
margin: 0;
}
.notification-list {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
flex-grow: 1;
}
.notification-item {
display: flex;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--input-border);
transition: background-color 0.2s ease;
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item:hover {
background-color: var(--menu-hover-bg);
}
.notification-item-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
/* Colori icone notifiche */
.notification-item-icon.icon-success {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
}
.notification-item-icon.icon-warning {
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
color: var(--warning-color);
}
.notification-item-icon.icon-info {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
color: var(--primary-color);
}
.notification-item-content .message {
font-weight: 500;
color: var(--bs-body-color);
line-height: 1.5;
margin-bottom: 0.25rem;
}
.notification-item-content .timestamp {
font-size: 0.8rem;
color: var(--light-text);
}
.notification-item.unread .notification-item-content .message {
font-weight: 600;
color: var(--heading-text);
}
.notification-empty {
padding: 2rem;
text-align: center;
color: var(--light-text);
font-style: italic;
}
@media (max-width: 768px) {
.kpi-strip { grid-template-columns: 1fr; }
/* FIX: Rimuovendo flex-direction e align-items si impedisce all'header di impilarsi e nascondere le icone */
.top-header { gap: 0.75rem; padding: 1rem; }
.canvas { padding: 1.5rem 1rem; }
}
/* ======================================= */
/* === STILI MODALE UPLOAD DOCUMENTO === */
/* ======================================= */
/* Stile per il pulsante di upload personalizzato */
.file-upload-label {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.5rem;
cursor: pointer;
}
.file-upload-label:hover {
background-color: var(--bs-border-color);
}
/* Stile per l'anteprima del nome del file */
#fileNamePreview {
color: var(--light-text);
margin-left: 1rem;
font-weight: 500;
}
/* Stile per il pulsante di submit nel modale */
#submitUploadBtn .spinner-border-sm {
display: none;
}
#submitUploadBtn.loading .spinner-border-sm {
display: inline-block;
}
#submitUploadBtn.loading .btn-text {
display: none;
}
/* ======================================= */
/* === RESPONSIVITÀ SEZIONE RIEPILOGO === */
/* ======================================= */
/* --- Breakpoint per Tablet e Smartphone (fino a 768px) --- */
@media (max-width: 768px) {
/* 1. Intestazione Pagina Riepilogo (Nome Progetto e Contatto)
Impila verticalmente il blocco del titolo e il blocco del contatto
e li allinea a sinistra.
*/
#overview-section .ai-page-header {
flex-direction: column; /* Impila gli elementi */
align-items: flex-start; /* Allinea tutto a sinistra */
gap: 1rem; /* Aggiunge spazio tra i blocchi impilati */
}
#overview-section .ai-page-header #overviewOptlyxContact {
text-align: left !important; /* Forza l'allineamento a sinistra per il contatto */
width: 100%; /* Fa sì che occupi tutta la larghezza */
}
}
/* --- Breakpoint per Smartphone (fino a 480px) --- */
@media (max-width: 480px) {
/* 2. Intestazione Card Comunicazioni
Impila il titolo e i pulsanti di navigazione del carosello.
*/
#overview-section .card-header {
flex-direction: column;
align-items: flex-start; /* Allinea il titolo a sinistra */
gap: 1rem; /* Spazio tra titolo e pulsanti */
}
#overview-section .card-header .carousel-nav {
width: 100%; /* Fa occupare ai pulsanti l'intera larghezza... */
justify-content: flex-end; /* ...ma li mantiene allineati a destra. */
}
/* 3. Card del Carosello Comunicazioni
Rende la larghezza delle card flessibile (90% dello schermo)
per evitare l'overflow su schermi molto piccoli (es. 320px).
*/
.comms-card {
flex-basis: 90vw; /* Imposta la larghezza al 90% dello schermo */
max-width: 350px; /* Ma non più grande della loro dimensione originale */
}
}
/* ======================================= */
/* === STILI FOOTER MODALE UPSELL === */
/* ======================================= */
.modal-footer .footer-action-group {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* ======================================= */
/* === STILI MODALE CRONOLOGIA DOCUMENTO === */
/* ======================================= */
.history-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.history-item {
display: flex;
gap: 1rem;
padding: 1.25rem 0.5rem;
border-bottom: 1px solid var(--input-border);
}
.history-item:last-child {
border-bottom: none;
}
.history-item-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.history-item-icon.version {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
color: var(--primary-color);
}
.history-item-icon.upload {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
}
.history-item-details {
flex-grow: 1;
}
.history-item-details strong {
display: block;
font-weight: 600;
color: var(--heading-text);
}
.history-item-details .note {
font-size: 0.9rem;
color: var(--bs-body-color);
margin: 0.25rem 0;
}
.history-item-details .timestamp {
font-size: 0.8rem;
color: var(--light-text);
font-weight: 500;
}
/* ======================================= */
/* === STILI TABELLA AUDIT LOG === */
/* ======================================= */
#auditLogTableBody .audit-actor {
font-weight: 600;
color: var(--heading-text);
}
#auditLogTableBody .audit-event-type {
font-weight: 500;
color: var(--bs-body-color);
}
#auditLogTableBody .audit-resource-id {
font-family: monospace;
font-size: 0.85rem;
color: var(--light-text);
cursor: pointer;
}
#auditLogTableBody .audit-resource-id:hover {
color: var(--primary-color);
}
/* ======================================= */
/* === SIDEBAR MOBILE E TOGGLE (V2) === */
/* ======================================= */
/* --- Pulsante Hamburger (visibile solo su mobile) --- */
#mobileMenuToggle {
display: none;
font-size: 1.5rem;
color: var(--bs-body-color);
}
/* --- Overlay per lo sfondo scuro --- */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1190; /* Appare sopra il contenuto ma sotto la sidebar */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-in-out;
}
/* --- Breakpoint per Tablet e Smartphone (fino a 992px) --- */
@media (max-width: 992px) {
/* Mostra il pulsante hamburger */
#mobileMenuToggle {
display: block;
}
/* Rimuovi la sidebar dal flusso normale e posizionala fuori schermo */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1200; /* Sopra l'overlay */
transform: translateX(-100%); /* Nascosto a sinistra */
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex !important; /* Forza la visualizzazione (per l'animazione) */
box-shadow: 5px 0 25px rgba(0,0,0,0.2);
}
/* Rende la navigazione scrollabile se lo schermo è piccolo */
.sidebar .sidebar-nav {
flex-grow: 1; /* Permette a questa sezione di occupare tutto lo spazio disponibile */
overflow-y: auto; /* Aggiunge la barra di scorrimento solo qui */
padding-bottom: 1rem;
}
/* --- Classi per lo stato "Aperto" --- */
body.sidebar-open .sidebar-overlay {
opacity: 1;
pointer-events: auto;
}
body.sidebar-open .sidebar {
transform: translateX(0); /* Fai scorrere la sidebar in vista */
}
/* FIX per l'header (assicura che i pulsanti rimangano in riga) */
.top-header {
flex-direction: row;
justify-content: space-between;
gap: 1rem;
}
.header-right-group {
display: flex;
align-items: center;
gap: 1rem;
}
}
/* --- Breakpoint per schermi molto piccoli (es. iPhone) --- */
@media (max-width: 480px) {
.sidebar {
width: 260px; /* Riduci la larghezza della sidebar per lasciare più spazio */
}
.theme-switch-wrapper {
display: none; /* Nascondi il toggle del tema per risparmiare spazio */
}
.header-right-group {
gap: 0.75rem;
}
}
/* ======================================= */
/* === STILI PER TEMI COLORE (V2) === */
/* ======================================= */
/* --- 1. Definizioni Base (Default Blu) --- */
:root {
--primary-color: #4361ee;
--primary-gradient: linear-gradient(90deg, #4361ee 0%, #3a86ff 100%);
--shadow-color-primary: rgba(67, 97, 238, 0.2);
--shadow-color-primary-soft: rgba(67, 97, 238, 0.1);
--success-color: #34d399; /* Smeraldo soft */
--warning-color: #fbbf24; /* Giallo ambrato soft */
--info-color: #60a5fa; /* Blu cielo soft */
--danger-color: #ef4444; /* Rosso leggero */
}
/* --- 2. Nuovi Temi Colore --- */
/* Tema: Crimson (Rosso) */
body.theme-crimson {
--primary-color: #dc2626;
--primary-gradient: linear-gradient(90deg, #e11d48 0%, #f87171 100%);
--bs-link-color: #f87171;
--bs-link-hover-color: #fbbfb0;
--shadow-color-primary: rgba(220, 38, 38, 0.2);
--shadow-color-primary-soft: rgba(220, 38, 38, 0.1);
}
body.theme-crimson.light-mode {
--primary-color: #dc2626;
--primary-gradient: linear-gradient(90deg, #dc2626 0%, #ef4444 100%);
--bs-link-color: #b91c1c;
--bs-link-hover-color: #991b1b;
}
/* Tema: Emerald (Verde) */
body.theme-emerald {
--primary-color: #10b981;
--primary-gradient: linear-gradient(90deg, #10b981 0%, #34d399 100%);
--success-color: #10b981;
--bs-link-color: #34d399;
--bs-link-hover-color: #6ee7b7;
--shadow-color-primary: rgba(16, 185, 129, 0.2);
--shadow-color-primary-soft: rgba(16, 185, 129, 0.1);
}
body.theme-emerald.light-mode {
--primary-color: #10b981;
--primary-gradient: linear-gradient(90deg, #10b981 0%, #34d399 100%);
--success-color: #10b981;
--bs-link-color: #059669;
--bs-link-hover-color: #047857;
}
/* Tema: Violet (Viola) */
body.theme-violet {
--primary-color: #8b5cf6;
--primary-gradient: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
--bs-link-color: #a78bfa;
--bs-link-hover-color: #c4b5fd;
--shadow-color-primary: rgba(139, 92, 246, 0.2);
--shadow-color-primary-soft: rgba(139, 92, 246, 0.1);
}
body.theme-violet.light-mode {
--primary-color: #8b5cf6;
--primary-gradient: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
--bs-link-color: #7c3aed;
--bs-link-hover-color: #6d28d9;
}
/* --- 3. Applicazione dei Gradienti --- */
/* Applica il gradiente a tutti i pulsanti primari solidi */
.btn-primary, .btn-primary-filled,
.container.auth .btn,
.btn-run,
.btn.icon-only-send,
.flowcoach-ai-tutor,
.btn-footer-v2.save {
background: var(--primary-gradient);
color: #fff;
border: none;
box-shadow: 0 4px 15px -5px var(--shadow-color-primary);
}
/* Gestisce l'hover scurendo il gradiente */
.btn-primary:hover:not(:disabled), .btn-primary-filled:hover,
.container.auth .btn:hover:not(:disabled),
.btn-run:hover,
.btn.icon-only-send:hover,
.flowcoach-ai-tutor:hover,
.btn-footer-v2.save:hover {
filter: brightness(0.9);
box-shadow: 0 6px 20px -5px var(--shadow-color-primary);
transform: translateY(-2px);
}
/* --- 4. Applicazione delle Ombre Colorate --- */
/* Applica le ombre colorate all'hover delle card */
.kpi-card:hover, .grid-item:hover, .agent-card:hover,
.playbook-card-v2:hover, .suggestion-card:hover,
.source-selection-card:hover {
border-color: var(--primary-color);
box-shadow: 0 8px 30px var(--shadow-color-primary);
}
/* Rende anche i focus degli input colorati */
.form-group input:focus,
.search-bar:focus-within,
.prompt-bar:focus-within,
.global-prompt-bar-v2:focus-within,
.form-control-sm:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--shadow-color-primary-soft);
}
/* ======================================= */
/* === EFFETTO VETRO (GLASSMORPHISM) === */
/* ======================================= */
/* Applica l'effetto quando il body ha la classe */
body.glassmorphism-effect .sidebar,
body.glassmorphism-effect .top-header {
/* Rende lo sfondo semi-trasparente */
background-color: color-mix(in srgb, var(--sidebar-bg) 80%, transparent);
/* Applica la sfocatura (blur) */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Rende anche il bordo semi-trasparente */
border-color: color-mix(in srgb, var(--bs-border-color) 50%, transparent);
}
/* Migliora la leggibilità su mobile quando la sidebar è aperta */
@media (max-width: 992px) {
body.glassmorphism-effect .sidebar {
background-color: color-mix(in srgb, var(--sidebar-bg) 90%, transparent);
}
}
/* ======================================= */
/* === STILI CHAT PROJECT MANAGER === */
/* ======================================= */
/* styles.css - NUOVO (CORRETTO) */
#chat-pm-section.active {
/* Le proprietà display, flex-direction e height
sono già definite dalle regole generiche qui sopra. */
}
/* styles.css - NUOVO (CORRETTO) */
#chat-pm-section.active {
/* Sovrascrive il padding del canvas per andare da bordo a bordo */
width: calc(100% + 4rem); /* 100% + padding 2rem dx + padding 2rem sx */
margin-left: -2rem;
margin-right: -2rem;
padding-left: 2rem;
padding-right: 2rem;
box-sizing: border-box;
}
.pm-chat-container {
flex-grow: 1; /* Occupa tutto lo spazio verticale */
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden; /* Nasconde l'overflow */
}
.pm-chat-log {
flex-grow: 1;
overflow-y: auto; /* Abilita lo scroll solo per i messaggi */
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
background-color: var(--input-bg);
}
/* Stile per una riga di messaggio (avatar + bolla) */
.pm-message-row {
display: flex;
gap: 0.75rem;
max-width: 80%;
}
.pm-chat-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 1.5rem; /* Allinea l'avatar con la bolla */
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #fff;
font-size: 1.1rem;
}
.pm-chat-bubble-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* Nome del mittente */
.pm-chat-sender {
font-size: 0.8rem;
font-weight: 600;
color: var(--light-text);
margin-bottom: 0.25rem;
margin-left: 0.75rem;
}
.pm-chat-bubble {
padding: 0.75rem 1.25rem;
border-radius: 12px;
line-height: 1.6;
font-size: 0.95rem;
word-wrap: break-word;
}
/* Messaggi "altri" (PM) */
.pm-message-row.other {
align-self: flex-start;
}
.pm-message-row.other .pm-chat-bubble {
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-bottom-left-radius: 4px;
}
.pm-message-row.other .pm-chat-sender {
color: var(--primary-color);
}
/* Messaggi "utente" (Cliente) */
.pm-message-row.user {
align-self: flex-end;
flex-direction: row-reverse; /* Inverte avatar e bolla */
}
.pm-message-row.user .pm-chat-bubble-wrapper {
align-items: flex-end;
}
.pm-message-row.user .pm-chat-bubble {
background-color: var(--primary-color);
color: #fff;
border-bottom-right-radius: 4px;
}
.pm-message-row.user .pm-chat-sender {
margin-left: 0;
margin-right: 0.75rem;
}
/* Form di input */
.pm-chat-form {
display: flex;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--bs-border-color);
background-color: var(--card-bg);
flex-shrink: 0;
}
.pm-chat-form input {
flex-grow: 1;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 8px;
height: 44px;
padding: 0 1rem;
color: var(--input-text);
outline: none;
}
.pm-chat-form input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--shadow-color-primary-soft);
}
.pm-chat-form .btn {
width: 44px;
height: 44px;
padding: 0;
font-size: 1.1rem;
flex-shrink: 0;
}
/* ======================================= */
/* === STILI CHAT PM (AGGIORNAMENTO) === */
/* ======================================= */
/* Adatta il form per includere il nuovo pulsante */
.pm-chat-form {
align-items: center; /* Allinea verticalmente i pulsanti e l'input */
}
.pm-chat-form .btn-icon-only {
width: 44px;
height: 44px;
border-radius: 8px;
color: var(--light-text);
}
.pm-chat-form .btn-icon-only:hover {
background-color: var(--menu-hover-bg);
}
/* Bolla di chat per le immagini */
.pm-chat-bubble.bubble-image {
padding: 0;
background-color: transparent;
border: none;
max-width: 300px;
overflow: hidden;
}
.pm-chat-bubble.bubble-image img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
border: 1px solid var(--input-border);
}
/* Bolla di chat per i file */
.pm-chat-bubble.bubble-file {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 500;
}
.pm-chat-bubble.bubble-file .octicon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.pm-chat-bubble.bubble-file a {
color: inherit;
text-decoration: underline;
}
.pm-message-row.user .pm-chat-bubble.bubble-file a {
color: #fff;
}
/* Testo per il timestamp e la conferma di lettura */
.pm-chat-meta {
font-size: 0.75rem;
color: var(--light-text);
margin: 0.25rem 0.5rem 0;
}
.pm-message-row.user .pm-chat-bubble-wrapper {
align-items: flex-end; /* Assicura che la meta sia allineata a destra */
}
.pm-message-row.user .pm-chat-meta {
text-align: right;
}
/* Stile per la conferma "Visto" */
.pm-chat-meta .read-receipt {
font-weight: 600;
color: var(--primary-color);
margin-left: 0.5rem;
}
/* ======================================= */
/* === STILI CHAT PM (OCTICONS V2) === */
/* ======================================= */
/* Stila le Octicon nei pulsanti del form */
.pm-chat-form .btn .octicon {
width: 20px; /* Dimensione icona più grande */
height: 20px;
filter: invert(var(--octicon-invert, 1)); /* Applica il filtro di inversione di default */
transition: filter 0.2s ease;
}
/* Pulsante "Allega" (Plus) con sfondo soft */
.pm-chat-form #pmChatAttachBtn {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
border-radius: 12px; /* Arrotonda i bordi */
transition: all 0.2s ease-out;
}
/* Colora l'icona "Plus" di blu */
.pm-chat-form #pmChatAttachBtn .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
/* Su tema chiaro, l'icona è già blu, non serve filtro */
body.light-mode .pm-chat-form #pmChatAttachBtn .octicon {
filter: none;
}
/* Stile Hover per il pulsante "Allega" (Plus) */
.pm-chat-form #pmChatAttachBtn:hover {
background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
transform: translateY(-1px);
box-shadow: 0 4px 10px var(--shadow-color-primary-soft);
}
/* L'icona non cambia colore su hover */
.pm-chat-form #pmChatAttachBtn:hover .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
body.light-mode .pm-chat-form #pmChatAttachBtn:hover .octicon {
filter: none;
}
/* Pulsante "Invia" (Aereo) */
.pm-chat-form #pmChatSendBtn .octicon {
/* Il pulsante è .btn-soft.primary. L'icona deve essere BLU */
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%);
}
/* Su tema chiaro, l'icona è già blu, non serve filtro */
body.light-mode .pm-chat-form #pmChatSendBtn .octicon {
filter: none;
}
/* Su hover, il pulsante diventa solido, l'icona deve essere bianca */
.pm-chat-form #pmChatSendBtn:hover .octicon {
filter: invert(1); /* Inverti per diventare bianco */
}
/* Aggiorna la bolla dei file per un'icona più grande e visibile */
.pm-chat-bubble.bubble-file .octicon {
width: 24px;
height: 24px;
filter: invert(var(--octicon-invert, 1));
}
.pm-message-row.user .pm-chat-bubble.bubble-file .octicon {
filter: invert(1); /* Bianco su bolla blu */
}
body.light-mode .pm-message-row.other .pm-chat-bubble.bubble-file .octicon {
filter: invert(0); /* Nero su bolla chiara */
}
/* ======================================= */
/* === SCOMPARSA PULSANTE AI IN CHAT === */
/* ======================================= */
/* Di default, il pulsante è a destra e visibile */
.flowcoach-ai-tutor {
right: 2rem;
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.3s ease, right 0.3s ease;
pointer-events: auto;
}
/* Quando la chat è attiva, fai sparire il pulsante */
body.chat-pm-active .flowcoach-ai-tutor {
opacity: 0;
transform: scale(0.8);
pointer-events: none; /* Rende il pulsante non cliccabile */
}
/* ======================================= */
/* === STILI CHAT PM (LAYOUT WIDE) === */
/* ======================================= */
/* 1. Corregge l'altezza e rimuove il padding laterale del .canvas */
/* styles.css - NUOVO (CORRETTO) */
/* 1. Corregge l'altezza e rimuove il padding laterale del .canvas */
/* 2. Applica i bordi arrotondati al contenitore principale della chat */
.pm-chat-container.card {
border-radius: var(--border-radius-lg); /* Es. 12px */
overflow: hidden; /* Necessario per far rispettare i bordi ai figli */
}
/* 3. (Bonus) Arrotonda leggermente di più le bolle della chat */
.pm-chat-bubble {
border-radius: 16px; /* Aumentato da 12px */
}
.pm-message-row.other .pm-chat-bubble {
border-bottom-left-radius: 6px; /* Aumentato da 4px */
}
.pm-message-row.user .pm-chat-bubble {
border-bottom-right-radius: 6px; /* Aumentato da 4px */
}
/* styles.css - NUOVO (CORRETTO) */
@media (max-width: 992px) {
#chat-pm-section.active {
width: calc(100% + 2rem);
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 768px) {
#chat-pm-section.active {
/* L'altezza è già gestita dalla regola .content-section.active */
}
}
/* ======================================= */
/* === STILI CHAT PM (MODALITÀ PM INBOX) === */
/* ======================================= */
/* Layout per l'app chat (lista + chat) */
.pm-chat-container.comm-hub-main-container {
display: grid;
/* 320px per la lista, il resto per la chat */
grid-template-columns: 320px 1fr;
padding: 0;
height: calc(100% - 95px); /* Altezza - header */
}
/* Stile per il pannello chat */
.pm-chat-container #pmChatPane {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
/* Header della chat attiva (visibile solo per il PM) */
#pmChatActiveHeader {
display: none; /* Nascosto di default per i clienti */
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--bs-border-color);
}
#pmChatActiveHeader h3 {
font-size: 1.1rem;
font-weight: 600;
}
/* Lista delle conversazioni (Inbox) */
.pm-inbox-list {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
}
.pm-inbox-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--input-border);
cursor: pointer;
transition: background-color 0.2s ease;
}
.pm-inbox-item:hover {
background-color: var(--menu-hover-bg);
}
.pm-inbox-item.active {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
}
.pm-inbox-item .pm-chat-avatar {
margin-top: 0; /* Resetta il margine dall'altra chat */
}
.pm-inbox-details {
flex-grow: 1;
overflow: hidden;
}
.pm-inbox-details .name {
font-weight: 600;
color: var(--heading-text);
}
.pm-inbox-details .last-message {
font-size: 0.85rem;
color: var(--light-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pm-inbox-details .unread-dot {
width: 8px;
height: 8px;
background-color: var(--primary-color);
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
/* ======================================= */
/* === 3X. SEZIONE SICUREZZA (CUSTOM) === */
/* ======================================= */
/* --- Layout Grid (per rimpiazzare .settings-layout) --- */
#security-section .grid-container {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
}
/* --- Card Header con Octicons --- */
#security-section .card-header h4 {
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-text);
}
#security-section .card-header .octicon {
/* Questo filtro rende l'icona grigia (light-text) */
filter: invert(65%) sepia(6%) saturate(379%) hue-rotate(175deg) brightness(89%) contrast(86%);
}
body.light-mode #security-section .card-header .octicon {
filter: none; /* In light mode, l'SVG è già scuro */
}
/* --- Stile per le Liste
nelle Card --- */
.security-details-list {
list-style: none;
padding: 0;
margin: 1rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.security-details-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--border-radius);
}
.security-details-list li strong {
font-weight: 500;
color: var(--light-text);
}
.security-details-list li span,
.security-details-list li a {
font-weight: 600;
color: var(--bs-body-color);
}
/* --- Stile Badge (es. "Nessun accesso umano") --- */
#security-section .compliance-badge.status-ok {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
padding: 0.6rem 1rem;
border-radius: var(--border-radius);
}
#security-section .compliance-badge .octicon {
filter: invert(39%) sepia(21%) saturate(2203%) hue-rotate(107deg) brightness(94%) contrast(89%); /* Verde */
}
body.light-mode #security-section .compliance-badge .octicon {
filter: invert(39%) sepia(21%) saturate(2203%) hue-rotate(107deg) brightness(94%) contrast(89%);
}
/* --- Panoramica Badge (quelli in alto) --- */
.security-overview-badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.security-badge {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
border-radius: var(--border-radius);
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-left-width: 4px; /* Bordo colorato a sinistra */
font-weight: 600;
color: var(--bs-body-color);
transition: all 0.2s ease-out;
cursor: help;
}
.security-badge:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
background-color: var(--menu-hover-bg);
}
.security-badge .status-icon {
font-size: 1.2rem;
}
/* Colori degli stati per i badge */
.security-badge.status-ok {
border-left-color: var(--success-color);
}
.security-badge.status-ok .status-icon {
color: var(--success-color);
}
.security-badge.status-warning {
border-left-color: var(--warning-color);
}
.security-badge.status-warning .status-icon {
color: var(--warning-color);
}
.security-badge.status-error {
border-left-color: var(--danger-color);
}
.security-badge.status-error .status-icon {
color: var(--danger-color);
}
/* Stile Call-out (già esistente, ma migliorato) */
.call-out {
margin-top: 1rem;
padding: 0.75rem 1.25rem;
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
border-left: 4px solid var(--primary-color);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-size: 0.9rem;
font-weight: 500;
color: var(--bs-body-color);
}
/* ======================================= */
/* === FULLCALENDAR SOFT & SMOOTH UI === */
/* ======================================= */
#calendar-section .card {
border: none;
box-shadow: var(--shadow-sm);
overflow: hidden; /* Assicura che i bordi arrotondati siano rispettati */
}
/* --- 1. Toolbar e Pulsanti --- */
.fc .fc-toolbar-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-text);
}
.fc .fc-button-primary {
background-color: var(--input-bg) !important;
border: 1px solid var(--bs-border-color) !important;
color: var(--heading-text) !important;
font-weight: 600;
border-radius: 10px !important; /* Pulsanti più arrotondati */
padding: 0.6rem 1.2rem !important;
transition: all 0.2s ease;
box-shadow: none !important;
}
.fc .fc-button-primary:hover {
background-color: var(--menu-hover-bg) !important;
transform: translateY(-1px);
}
.fc .fc-button-primary.fc-button-active {
background-color: var(--primary-color) !important;
color: #fff !important;
border-color: var(--primary-color) !important;
}
/* --- 2. Griglia Mese (DayGrid) --- */
.fc-theme-standard td, .fc-theme-standard th {
border-color: var(--bs-border-color) !important;
}
.fc .fc-daygrid-day-number {
color: var(--light-text);
font-weight: 500;
padding: 8px;
}
.fc .fc-day-today {
background-color: color-mix(in srgb, var(--primary-color) 5%, transparent) !important;
}
.fc .fc-col-header-cell-cushion { /* Giorni della settimana */
color: var(--light-text);
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
padding: 12px 0;
}
/* --- 3. Eventi (Pillole Soft) --- */
.fc-event {
border: none !important;
border-radius: 6px !important; /* Arrotondati */
padding: 3px 6px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
margin: 2px !important;
cursor: pointer;
transition: all 0.2s ease;
}
.fc-event:hover {
filter: brightness(1.08);
transform: scale(1.02);
}
/* Colori Soft per gli Eventi nella griglia */
.fc-event-task-completed {
background-color: color-mix(in srgb, var(--success-color) 20%, transparent) !important;
color: var(--success-color) !important;
border-left: 3px solid var(--success-color) !important;
}
.fc-event-task-pending {
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent) !important;
color: var(--warning-color) !important; /* Testo colorato invece che nero */
border-left: 3px solid var(--warning-color) !important;
}
.fc-event-phase {
background-color: color-mix(in srgb, var(--primary-color) 20%, transparent) !important;
color: var(--primary-color) !important;
border-left: 3px solid var(--primary-color) !important;
}
/* --- 4. FIX VISTA LISTA (Quella rotta nell'immagine) --- */
/* Rimuove i bordi neri e lo sfondo scuro dalle intestazioni dei giorni */
.fc .fc-list-day-cushion {
background-color: var(--menu-hover-bg) !important; /* Grigio molto chiaro/scuro a seconda del tema */
}
.fc .fc-list-day-text, .fc .fc-list-day-side-text {
color: var(--heading-text) !important;
font-weight: 700;
text-decoration: none !important;
}
/* Stile per le righe degli eventi in lista */
.fc-list-event:hover td {
background-color: transparent !important; /* Rimuove l'hover di default brutto */
}
.fc-list-event {
transition: all 0.2s ease;
}
.fc-list-event:hover {
background-color: var(--input-bg) !important; /* Hover soft personalizzato */
transform: translateX(5px); /* Piccolo movimento interattivo */
}
/* Il "pallino" colorato nella vista lista */
.fc-list-event-dot {
border-width: 6px !important; /* Più grande e visibile */
border-radius: 50%;
}
/* Testi nella vista lista */
.fc-list-event-title {
color: var(--bs-body-color) !important;
font-weight: 500;
}
.fc-list-event-time {
color: var(--light-text) !important;
font-size: 0.9rem;
}
/* Forza i colori dei pallini in base alle nostre classi */
.fc-event-task-completed .fc-list-event-dot { border-color: var(--success-color) !important; }
.fc-event-task-pending .fc-list-event-dot { border-color: var(--warning-color) !important; }
.fc-event-phase .fc-list-event-dot { border-color: var(--primary-color) !important; }
/* Rimuove le righe vuote fastidiose se presenti */
.fc-list-empty {
background-color: var(--input-bg) !important;
color: var(--light-text) !important;
font-style: italic;
}
/* ======================================= */
/* === STILI DRAWER (MODALE LATERALE) === */
/* ======================================= */
/* Overlay scuro che copre lo schermo */
.details-drawer-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0,0,0,0.5); /* Sfondo semi-trasparente scuro */
z-index: 1090;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
backdrop-filter: blur(2px); /* Effetto sfocatura leggero sullo sfondo */
}
.details-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
/* Il cassetto stesso */
.details-drawer {
position: fixed;
top: 0; right: 0;
width: 100%;
max-width: 450px; /* Larghezza massima del cassetto */
height: 100%;
background-color: var(--card-bg); /* Usa il colore delle card del tema */
z-index: 1100;
box-shadow: -5px 0 30px rgba(0,0,0,0.2); /* Ombra profonda verso sinistra */
display: flex;
flex-direction: column;
transform: translateX(100%); /* Parte nascosto a destra */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Animazione fluida "ease-out" */
}
.details-drawer.is-open {
transform: translateX(0); /* Scivola dentro */
}
/* Header del cassetto */
.details-drawer .drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--bs-border-color);
}
.details-drawer .drawer-header h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-text);
}
/* Contenuto scrollabile del cassetto */
.details-drawer .drawer-content {
flex-grow: 1;
overflow-y: auto;
padding: 1.5rem;
}
/* Stili per i metadati dentro il drawer (es. date, stato) */
.cal-event-meta {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.cal-event-meta-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background-color: var(--input-bg); /* Sfondo leggero */
border: 1px solid var(--bs-border-color);
border-radius: 12px; /* Arrotondato */
transition: border-color 0.2s ease;
}
.cal-event-meta-item:hover {
border-color: var(--primary-color); /* Effetto hover sottile */
}
.cal-event-meta-item i.cal-event-icon {
font-size: 1.4rem;
color: var(--primary-color);
opacity: 0.8;
}
.cal-event-meta-item div strong {
display: block;
font-size: 0.85rem;
color: var(--light-text);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.25rem;
}
.cal-event-meta-item div {
color: var(--heading-text);
font-weight: 500;
}
/* =================================== */
/* === FIX LAYOUT AUTH CONTAINER === */
/* =================================== */
#authContainer {
display: flex;
justify-content: center;
/* MODIFICA: Cambiato da 'center' a 'flex-start' per evitare il taglio in alto su schermi piccoli */
align-items: flex-start;
min-height: 100vh;
background-color: var(--page-bg);
/* MODIFICA: Aumentato il padding verticale per dare respiro sopra e sotto quando si scrolla */
padding: 40px 20px;
box-sizing: border-box;
overflow-y: auto;
}
.container.auth {
background-color: var(--card-bg);
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
width: 100%;
max-width: 480px;
text-align: center;
border: 1px solid var(--bs-border-color);
/* MODIFICA: 'margin: auto' centra verticalmente quando c'è spazio,
ma grazie a 'align-items: flex-start' nel genitore, non taglia la testa se manca spazio */
margin: auto;
flex-shrink: 0;
}
/* Assicurati che il logo abbia un margine inferiore definito */
.app-logo {
width: 140px;
margin-bottom: 30px; /* Importante per lo spazio dal titolo */
display: block; /* Assicura che i margini funzionino correttamente */
}
.container.auth .title {
font-size: 1.8rem;
font-weight: 700;
color: var(--heading-text);
margin-bottom: 25px;
}
/* E il margine della descrizione per distanziarla dal primo campo */
.container.auth p.light-text {
font-size: 0.95rem;
color: var(--light-text);
margin-bottom: 30px; /* Spazio maggiore per la descrizione */
}
/* Potrebbe essere utile anche aumentare il margine superiore del form, o del primo form-group */
#signupForm {
margin-top: 20px; /* Un po' di spazio dal testo descrittivo */
}
.form-group {
margin-bottom: 20px; /* Ridotto leggermente per compattare un po' */
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--heading-text);
font-size: 0.9rem;
}
.form-control-custom,
.container.auth input[type="email"],
.container.auth input[type="password"],
.container.auth input[type="text"] {
width: 100%;
padding: 14px 18px; /* Padding generoso */
border: 1px solid var(--bs-border-color);
border-radius: 10px; /* Input arrotondati */
background-color: var(--input-bg); /* Sfondo input leggermente diverso */
color: var(--heading-text);
font-size: 1rem;
transition: all 0.2s ease;
}
.container.auth input::placeholder {
color: var(--light-text);
opacity: 0.7;
}
.container.auth input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); /* Glow leggero */
outline: none;
background-color: var(--card-bg); /* Sfondo più chiaro al focus */
}
/* Password Toggle Icon */
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-wrapper input {
padding-right: 45px; /* Spazio per l'icona */
}
.password-toggle-icon {
position: absolute;
right: 15px;
cursor: pointer;
color: var(--light-text);
font-size: 0.95rem;
transition: color 0.2s ease;
}
.password-toggle-icon:hover {
color: var(--heading-text);
}
/* Pulsanti (Login/Signup) */
.btn.btn-primary-filled {
padding: 15px 25px; /* Bottone più grande */
font-size: 1.05rem;
font-weight: 700;
border-radius: 10px; /* Bottone arrotondato */
margin-top: 25px; /* Più spazio sopra il bottone */ box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2); /* Ombra per il bottone principale */
transition: all 0.2s ease;
}
.btn.btn-primary-filled:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
}
/* Messaggi di Feedback */
.feedback-message {
margin-top: 20px;
padding: 12px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
opacity: 0; /* Inizialmente nascosto */
transform: translateY(10px);
transition: all 0.3s ease-out;
}
.feedback-message.show {
opacity: 1;
transform: translateY(0);
}
.feedback-message.error {
background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
color: var(--danger-color);
border: 1px solid var(--danger-color);
}
.feedback-message.success {
background-color: color-mix(in srgb, var(--success-color) 15%, transparent);
color: var(--success-color);
border: 1px solid var(--success-color);
}
/* Switch View (link "Attiva account" / "Torna al login") */
.switch-view {
margin-top: 30px;
text-align: center;
font-size: 0.9rem;
color: var(--light-text);
}
.switch-view a {
color: var(--primary-color);
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.switch-view a:hover {
text-decoration: underline;
}
/* Specifica per l'input del codice invito */
#signupCode {
text-transform: uppercase; /* Forzare maiuscolo se vuoi, anche se il JS è già così */
letter-spacing: 1.5px; /* Più spaziatura per il codice */
font-family: 'Inter Tight', monospace; /* Font più tecnico */
font-weight: 600;
}
/* ================================================== */
/* === FIX: PREVENZIONE SCROLL ORIZZONTALE PAGINA === */
/* ================================================== */
/* 1. Blocca lo scroll orizzontale a livello di pagina principale */
html, body {
max-width: 100vw;
overflow-x: hidden; /* Nasconde qualsiasi sbordatura laterale indesiderata */
}
/* 2. Assicura che l'area principale non superi mai la larghezza disponibile */
.main-content {
max-width: 100%;
overflow-x: hidden; /* Doppio controllo per sicurezza */
}
/* 3. Il canvas deve contenere i suoi figli, anche se provano ad allargarsi */
.canvas {
max-width: 100%;
width: 100%;
/* overflow-x: hidden; <-- Rimosso perché potrebbe tagliare ombre o tooltip,
solitamente basta gestire bene i figli, ma se serve riattivale */
}
/* 4. FIX SPECIFICO PER IL CAROSELLO:
Questo è spesso il colpevole. Forziamo il contenitore del carosello
a non essere mai più largo del suo genitore (la card).
*/
.comms-carousel-container {
max-width: 100%;
width: 100%;
overflow-x: auto; /* Mantiene lo scroll INTERNO al carosello */
}
/* 5. Assicura che le card non si allarghino oltre il dovuto */
.card {
max-width: 100%;
}
/* 6. Fix per le griglie flessibili */
.grid-container {
width: 100%;
max-width: 100%;
}/* ======================================= */
/* === OPTLYX AI: SOLID NOTION-LIKE UI === */
/* ======================================= */
/* --- 1. Il Modale (Il Contenitore Solido) --- */
#projectAIChatModal .modal-panel {
box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important; /* Ombra molto più profonda e "pesante" */
border: 1px solid var(--bs-border-color); /* Bordo sottile ma definito */
border-radius: 16px; /* Angoli un po' più squadrati rispetto a prima */
overflow: hidden; /* Mantiene tutto contenuto */
}
/* Header più compatto e definito */
.ai-modal-header {
padding: 1rem 1.5rem;
background-color: var(--card-bg);
border-bottom: 2px solid var(--input-border); /* Bordo più spesso per separare */
}
.ai-modal-header span {
font-weight: 700; /* Testo più "spesso" */
letter-spacing: -0.5px; /* Feeling più compatto */
font-size: 1.15rem;
}
/* --- 2. Area di Log (Lo Sfondo) --- */
.ai-chat-log {
background-color: var(--card-bg) !important; /* Niente più gradienti, colore solido */
padding: 0; /* Rimuoviamo il padding generale per far toccare i bordi ai blocchi */
}
/* --- 3. I Messaggi (Blocchi Solidi) --- */
/* Contenitore generico del messaggio */
.chat-message-row {
max-width: 100%; /* Occupa tutto lo spazio disponibile */
padding: 1.5rem 2rem; /* Spaziatura interna generosa ma contenuta */
border-bottom: 1px solid var(--input-border); /* Separatore sottile tra i blocchi */
gap: 1.25rem;
}
/* --- Stile Messaggio UTENTE (Compatto e chiaro) --- */
.chat-message-row.user {
background-color: var(--input-bg); /* Sfondo leggermente diverso per distinguere */
flex-direction: row; /* Mantiene l'ordine normale, non invertito */
align-items: flex-start;
}
/* L'avatar dell'utente diventa più piccolo e discreto */
.chat-message-row.user .chat-avatar {
display: none; /* Opzionale: in Notion spesso l'utente non ha avatar nella chat AI per risparmiare spazio */
}
/* Se vuoi mantenere l'avatar utente, togli il display:none sopra e usa questo: */
/*
.chat-message-row.user .chat-avatar {
width: 32px; height: 32px; margin-top: 2px;
}
*/
.chat-message-row.user .ai-chat-bubble {
background: transparent;
padding: 0;
color: var(--light-text); /* Testo leggermente meno prominente per le tue domande */
font-weight: 500;
font-size: 1.1rem; /* Domande un po' più grandi, come titoli */
border: none;
border-radius: 0;
}
/* Aggiunge un'icona o prefisso alla domanda utente per distinguerla */
.chat-message-row.user .ai-chat-bubble::before {
content: 'Tu: ';
font-weight: 700;
color: var(--heading-text);
margin-right: 0.5rem;
}
/* --- Stile Messaggio AI (Il blocco "spesso") --- */
.chat-message-row.ai {
background-color: var(--card-bg);
align-items: flex-start;
}
/* Icona AI più definita */
.chat-message-row.ai .chat-avatar {
width: 32px;
height: 32px;
border-radius: 8px; /* Squadrata invece che tonda = più solido */
background-color: transparent;
border: 2px solid var(--input-border); /* Bordo attorno all'icona */
padding: 4px;
margin-top: 4px;
}
/* Il contenuto della risposta AI */
.chat-message-row.ai .ai-chat-bubble {
background: transparent;
padding: 0;
border: none;
border-radius: 0;
color: var(--bs-body-color);
font-size: 1rem;
line-height: 1.7; /* Migliore leggibilità */
}
/* Miglioriamo la tipografia dentro le risposte AI per renderle "documenti" */
.ai-chat-bubble.ai strong {
font-weight: 700;
color: var(--heading-text);
}
.ai-chat-bubble.ai ul, .ai-chat-bubble.ai ol {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
border-left: 3px solid var(--input-border); /* Linea laterale per le liste */
}
.ai-chat-bubble.ai li {
margin-bottom: 0.5rem;
}
.ai-chat-bubble.ai h3, .ai-chat-bubble.ai h4 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 700;
color: var(--heading-text);
}
/* --- 4. Indicatore "Sto ragionando" (Più tecnico) --- */
.chat-message-row.ai .reasoning-text {
font-family: 'Inter Tight', monospace; /* Font monospaziato per un look più tecnico */
font-size: 0.9rem;
color: var(--primary-color);
background: color-mix(in srgb, var(--primary-color) 8%, transparent);
padding: 0.4rem 0.8rem;
border-radius: 6px;
display: inline-block;
animation: pulse-soft 2s infinite;
}
@keyframes pulse-soft {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
/* --- 5. Area di Input (Solida e Ancorata) --- */
.ai-chat-input-area {
background-color: var(--card-bg);
border-top: 2px solid var(--input-border); /* Bordo superiore più spesso */
padding: 1.5rem;
gap: 1rem;
position: relative; /* Per eventuali suggerimenti che fluttuano sopra */
}
#aiChatInput {
background-color: var(--input-bg);
border: 2px solid var(--input-border); /* Bordo input più spesso di default */
border-radius: 12px; /* Raggio leggermente più stretto */
padding: 0 1.25rem;
height: 56px; /* Input più alto = più "spesso" */
font-size: 1.05rem;
font-weight: 500;
transition: all 0.2s ease-out;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* Leggera ombra interna per profondità */
}
#aiChatInput:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 20%, transparent); /* Focus ring più deciso */
}
#aiChatSendBtn {
width: 56px; /* Match input height */
height: 56px;
border-radius: 12px;
background-color: var(--heading-text); /* Usa il colore del testo (quasi nero/bianco) per massimo contrasto */
color: var(--card-bg); /* Testo invertito */
font-size: 1.3rem;
border: none;
transition: transform 0.2s ease;
}
#aiChatSendBtn:hover {
transform: scale(1.05);
background-color: var(--primary-color); /* Diventa colorato solo all'hover */
}
/* --- 6. Suggerimenti (Chips Solide) --- */
.ai-prompt-suggestions {
padding: 1rem 2rem;
background-color: var(--input-bg);
border-top: 1px solid var(--input-border);
gap: 0.75rem;
}
.prompt-suggestion-btn {
background-color: var(--card-bg);
border: 2px solid var(--input-border); /* Bordo più spesso */
color: var(--heading-text);
font-weight: 600;
padding: 0.6rem 1rem;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leggera ombra solida */
transition: all 0.2s ease-out;
}
.prompt-suggestion-btn:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(0,0,0,0.1);
}
.prompt-suggestion-btn i {
color: var(--light-text); /* Icone neutre di default */
}
.prompt-suggestion-btn:hover i {
color: var(--primary-color); /* Icone colorate all'hover */
}
/* ================================================= */
/* === OPTLYX AI COPILOT (FULL PAGE SOLID UI) === */
/* ================================================= */
/* 1. Layout Strutturale a Tutta Pagina */
#ai-assistant-section.active {
display: flex !important;
flex-direction: column;
height: calc(100vh - 70px) !important; /* Occupa tutta l'altezza meno l'header */
padding: 0 !important; /* Rimuove il padding del canvas per andare a bordo */
background-color: var(--bs-body-bg); /* Usa lo sfondo base della pagina */
}
.ai-fullscreen-container {
display: flex;
flex-direction: column;
height: 100%;
}
/* 2. Area Centrale di Log (Scrollabile) */
.ai-central-log {
flex-grow: 1;
overflow-y: auto;
padding: 2rem 1rem;
display: flex;
flex-direction: column;
align-items: center; /* Centra il contenuto orizzontalmente */
}
/* La "traccia" che contiene i messaggi, larghezza limitata come ChatGPT */
.chat-messages-track {
width: 100%;
max-width: 850px; /* Larghezza ottimale per la lettura */
display: flex;
flex-direction: column;
gap: 0; /* Nessun gap, usiamo padding interni ai messaggi */
}
/* 3. Schermata di Benvenuto (Stile "Empty State" Solido) */
.ai-welcome-screen {
max-width: 850px;
width: 100%;
margin: auto; /* Centra verticalmente se c'è spazio */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 4rem;
animation: fadeIn 0.5s ease-out;
}
.ai-welcome-logo {
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
filter: drop-shadow(0 4px 6px var(--shadow-color-primary-soft));
}
.ai-welcome-header h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--heading-text);
letter-spacing: -0.5px;
}
.ai-welcome-header p {
font-size: 1.1rem;
color: var(--light-text);
max-width: 600px;
margin: 0 auto 3rem auto;
line-height: 1.6;
}
/* 4. Griglia Suggerimenti "Solidi" (Card) */
.ai-solid-suggestions-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 colonne */
gap: 1rem;
width: 100%;
}
.solid-suggestion-card {
display: flex;
align-items: flex-start;
gap: 1rem;
text-align: left;
padding: 1.25rem;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: 16px; /* Molto arrotondato */
cursor: pointer;
transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Ombra sottilissima di base */
}
.solid-suggestion-card:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px var(--shadow-color-primary-soft); /* Ombra colorata all'hover */
}
.solid-suggestion-card .card-icon {
font-size: 1.4rem;
color: var(--primary-color);
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
padding: 10px;
border-radius: 10px;
flex-shrink: 0;
}
.solid-suggestion-card .card-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.solid-suggestion-card strong {
font-weight: 600;
color: var(--heading-text);
font-size: 1rem;
}
.solid-suggestion-card span {
font-size: 0.9rem;
color: var(--light-text);
font-weight: 500;
}
/* 5. Footer di Input "Pesante" */
.ai-input-footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1rem 2rem 1rem;
background: linear-gradient(to top, var(--bs-body-bg) 80%, transparent); /* Sfumatura verso l'alto */
flex-shrink: 0;
position: sticky; /* Assicura che rimanga in basso */
bottom: 0;
}
.ai-input-container-solid {
width: 100%;
max-width: 850px;
background-color: var(--input-bg);
border: 2px solid var(--bs-border-color);
border-radius: 16px;
padding: 0;
transition: all 0.2s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
/* --- FIX CRUCIALE --- */
overflow: visible !important; /* Era 'hidden', ora deve essere 'visible' per far uscire il menu */
position: relative; /* Assicura che z-index funzioni qui se serve */
z-index: 10; /* Porta questo contenitore sopra altri elementi se necessario */
}
#fullscreenChatForm {
position: relative !important; /* FONDAMENTALE: fa da ancora per i pulsanti */
display: flex;
width: 100%;
align-items: flex-end; /* Allinea la textarea in basso se cresce */
padding: 12px; /* Spazio attorno alla textarea */
}
/* Focus state "solido" */
.ai-input-container-solid:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px var(--shadow-color-primary-soft);
}
/* La textarea (input) */
.solid-chat-input {
width: 100%;
background: transparent;
border: none;
outline: none;
resize: none;
max-height: 200px;
min-height: 24px; /* Altezza minima per una riga di testo */
font-size: 1rem;
line-height: 1.5;
color: var(--heading-text);
font-family: 'Inter Tight', sans-serif;
/* CRUCIALE: Spazio per non far finire il testo sotto i pulsanti */
padding-left: 40px !important; /* Spazio per il pulsante [+] */
padding-right: 40px !important; /* Spazio per il pulsante [Invia] */
margin: 0; /* Reset margini */
}
.btn-solid-send {
position: absolute;
bottom: 10px; /* Distanza dal fondo del form */
right: 10px; /* Distanza dal lato destro */
width: 32px;
height: 32px;
border-radius: 8px; /* Leggermente squadrato come Gemini/OpenAI */
border: none;
background-color: var(--primary-color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 1rem;
z-index: 10;
}
.btn-solid-send:disabled {
background-color: var(--input-border);
color: var(--light-text);
cursor: not-allowed;
opacity: 0.7;
}
.btn-solid-send:not(:disabled):hover {
filter: brightness(1.1);
transform: scale(1.05);
}
.ai-footer-disclaimer {
font-size: 0.8rem;
color: var(--light-text);
margin-top: 1rem;
text-align: center;
font-weight: 500;
opacity: 0.8;
}
/* 6. Stili Messaggi (Blocchi Solidi) */
.message-block {
display: flex;
gap: 1.5rem;
padding: 2rem 0; /* Spazio generoso sopra e sotto */
border-bottom: 1px solid var(--input-border); /* Separatore sottile */
width: 100%;
animation: fadeIn 0.3s ease-out;
}
.message-block.user {
/* Opzionale: background leggero per i messaggi utente per distinguerli */
/* background-color: color-mix(in srgb, var(--primary-color) 3%, transparent); */
/* padding-left: 1rem; padding-right: 1rem; border-radius: 12px; */
}
.message-avatar {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 8px; /* Avatar squadrato = più "tech" */
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
}
.message-block.ai .message-avatar {
background-color: var(--primary-color); /* O usa l'immagine del logo */
color: #fff;
}
.message-block.ai .message-avatar img {
width: 24px; height: 24px;
}
.message-block.user .message-avatar {
background-color: var(--input-border);
color: var(--light-text);
}
.message-content {
flex-grow: 1;
font-size: 1.05rem;
line-height: 1.7;
color: var(--bs-body-color);
}
/* Formattazione Markdown "Solida" */
.message-content strong { font-weight: 700; color: var(--heading-text); }
.message-content h3 { font-size: 1.3rem; font-weight: 700; margin: 1.5rem 0 1rem 0; color: var(--heading-text); }
.message-content ul, .message-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.message-content li { margin-bottom: 0.5rem; }
.message-content code {
background-color: var(--input-border);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
}
/* Responsive */
@media (max-width: 768px) {
.ai-solid-suggestions-grid {
grid-template-columns: 1fr; /* 1 colonna su mobile */
}
.message-block {
gap: 1rem;
padding: 1.5rem 0;
}
.message-avatar {
width: 30px; height: 30px; font-size: 0.9rem;
}
}
/* ================================================= */
/* === OPTLYX AI: GEMINI STYLE (NO BG) === */
/* ================================================= */
/* --- 1. Contenitore Messaggio (Trasparente e Spaziato) --- */
.message-block {
display: flex;
gap: 1.5rem;
padding: 1.5rem 0.5rem; /* Spaziatura verticale generosa, laterale minima */
width: 100%;
animation: fadeIn 0.3s ease-out;
border-bottom: none; /* Nessun divisore visibile per un flusso pulito */
background-color: transparent !important; /* FORZA la trasparenza */
}
/* --- 2. Allineamento --- */
/* AI: A Sinistra */
.message-block.ai {
justify-content: flex-start;
}
/* Utente: A Destra */
.message-block.user {
justify-content: flex-end;
}
/* --- 3. Avatar AI (Totalmente Trasparente) --- */
.message-avatar {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 2px; /* Allineamento ottico con la prima riga di testo */
}
.message-block.ai .message-avatar {
background-color: transparent !important;
border: none !important;
}
.message-block.ai .message-avatar img {
width: 24px;
height: 24px;
/* Opzionale: un leggero drop-shadow per far staccare il logo se lo sfondo è simile */
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
}
/* Nascondiamo avatar utente */
.message-block.user .message-avatar {
display: none;
}
/* --- 4. Contenuto Messaggio (Testo Puro, Niente Bolle) --- */
.message-content {
font-size: 1.05rem;
line-height: 1.7;
color: var(--bs-body-color);
max-width: 100%;
/* Reset completo stili "bolla" */
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Stile specifico testo Utente */
.message-block.user .message-content {
max-width: 80%;
text-align: right; /* Testo allineato a destra come Gemini */
font-weight: 500; /* Leggermente più marcato per distinguerlo */
color: var(--heading-text); /* Colore leggermente più scuro/chiaro del corpo base */
font-size: 1.1rem; /* Leggermente più grande, come un titolo H3/H4 */
}
/* --- 5. Effetto WAVE sul testo "Sto ragionando..." --- */
.reasoning-text {
font-weight: 600;
font-size: 1.1rem;
display: inline-block;
/* Gradiente per l'effetto onda */
background: linear-gradient(
90deg,
var(--light-text) 0%,
var(--heading-text) 50%,
var(--light-text) 100%
);
background-size: 200% auto;
/* Clip del background al testo */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Animazione */
animation: text-wave 2s linear infinite;
}
@keyframes text-wave {
to {
background-position: -200% center;
}
}
/* ======================================= */
/* === FIX DROPDOWN NOTIFICHE === */
/* ======================================= */
/* 1. Forza il contenitore a fare da ancora stabile */
.notification-container {
position: relative !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important; /* Impedisce al contenitore di schiacciarsi */
}
/* 2. Stile robusto per il menu a tendina */
.notification-dropdown {
position: absolute !important;
top: calc(100% + 15px) !important; /* Un po' più in basso per non toccare l'header */
right: -10px !important; /* Leggero offset a destra per allinearsi meglio visivamente */
/* Dimensioni forzate per evitare lo "schiacciamento" */
width: 380px !important;
max-width: 90vw !important; /* Fallback per mobile */
min-width: 300px !important; /* Larghezza minima garantita */
/* Assicura che sia sopra tutto */
z-index: 9999 !important;
/* Stile visuale solido */
background-color: var(--card-bg) !important;
border: 1px solid var(--bs-border-color) !important;
border-radius: 16px !important;
box-shadow: 0 15px 50px rgba(0,0,0,0.3) !important; /* Ombra profonda per staccarlo dallo sfondo */
/* Reset di layout */
display: flex;
flex-direction: column;
overflow: hidden !important; /* Mantiene il contenuto dentro i bordi arrotondati */
}
/* 3. Header del dropdown */
.notification-header {
padding: 1.25rem 1.5rem !important;
background-color: var(--card-bg) !important;
border-bottom: 1px solid var(--input-border) !important;
}
.notification-header h3 {
margin: 0 !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
color: var(--heading-text) !important;
}
/* 4. Lista scrollabile */
.notification-list {
max-height: 400px !important;
overflow-y: auto !important;
padding: 0 !important;
}
/* ======================================= */
/* === FIX ICONA NOTIFICHE DARK MODE === */
/* ======================================= */
/* In Dark Mode, forza l'icona della campanella ad essere del colore primario (Blu Optlyx) */
body:not(.light-mode) .notification-btn .octicon {
/* Questo filtro trasforma l'icona nera originale nel blu #4361ee */
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(97%) contrast(95%) !important;
opacity: 1; /* Assicura che sia ben visibile */
transition: all 0.2s ease;
}
/* Effetto Hover: la rendiamo leggermente più luminosa */
body:not(.light-mode) .notification-btn:hover .octicon {
filter: invert(37%) sepia(88%) saturate(3001%) hue-rotate(224deg) brightness(130%) contrast(95%) !important;
transform: scale(1.1); /* Piccolo effetto zoom per enfatizzare l'interazione */
}
/* Assicuriamoci che il pulsante stesso non abbia bordi fastidiosi che cozzano col colore */
.notification-btn {
border-color: transparent !important; /* Rimuove il bordo grigio standard */
background-color: var(--input-bg); /* Gli diamo un leggero sfondo per farla "galleggiare" */
}
/* ======================================= */
/* === NUOVI EFFETTI SPECIALI (WOW!) === */
/* ======================================= */
/* --- 1. EFFETTO AURORA (Ambient Background) --- */
/* Animazione delle sfumature */
@keyframes aurora-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* L'elemento che contiene l'aurora */
body.aurora-effect .canvas::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1; /* Sta dietro a tutto nel canvas */
opacity: 0.4; /* Molto sottile */
filter: blur(80px); /* Sfocatura estrema per l'effetto "ambiente" */
background-size: 400% 400%; /* Grande background per muoversi */
animation: aurora-shift 30s ease infinite; /* Animazione molto lenta */
}
/* Colori Aurora - DARK MODE (Più profondi e saturi) */
body.aurora-effect:not(.light-mode) .canvas::before {
background-image: linear-gradient(-45deg,
rgba(67, 97, 238, 0.3), /* Primary Blu */
rgba(114, 9, 183, 0.2), /* Viola profondo */
rgba(58, 12, 163, 0.2), /* Blu scuro */
rgba(76, 201, 240, 0.3) /* Ciano chiaro */
);
}
/* Colori Aurora - LIGHT MODE (Più leggeri e pastello) */
body.aurora-effect.light-mode .canvas::before {
opacity: 0.6; /* Un po' più visibile su sfondo chiaro */
background-image: linear-gradient(-45deg,
rgba(67, 97, 238, 0.15), /* Blu molto chiaro */
rgba(236, 253, 245, 0.8),/* Quasi bianco/menta */
rgba(238, 242, 255, 0.8),/* Indaco chiarissimo */
rgba(167, 139, 250, 0.15)/* Viola soft */
);
}
/* --- 2. EFFETTO VITALITY (Micro-interazioni Elastiche) --- */
/* Click "elastico" sui bottoni */
body.vitality-effect .btn:active,
body.vitality-effect .clickable:active,
body.vitality-effect .nav-link:active,
body.vitality-effect .kpi-card:active {
transform: scale(0.96) !important; /* Compressione visibile al click */
transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); /* Rimbalzo elastico */
}
/* Pulsazione sugli elementi importanti (es. badge di notifica, status attivi) */
@keyframes subtle-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 40%, transparent); }
70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent); }
}
body.vitality-effect .notification-dot,
body.vitality-effect .status-chip.running,
body.vitality-effect .timeline-item.status-in-progress .timeline-item-icon {
animation: subtle-pulse 3s infinite;
}
/* Focus sugli input più "vivo" */
body.vitality-effect input:focus,
body.vitality-effect textarea:focus,
body.vitality-effect select:focus {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transizione elastica anche sul focus */
}
/* Stato attivo per i selettori di colore */
.color-swatch.active {
outline-color: var(--heading-text) !important; /* L'anello esterno diventa del colore del testo (bianco in dark mode) */
transform: scale(1.15);
}
/* ================================================= */
/* === EFFETTI SPECIALI: WELCOME SCREEN (APPLE/OPENAI) === */
/* ================================================= */
/* --- 1. Animazione Titolo (Text Reveal) --- */
.ai-welcome-header h2.animated-text-reveal {
overflow: hidden; /* Nasconde il testo che "entra" */
white-space: nowrap; /* Mantiene il titolo su una riga */
display: block; /* O block */
animation: none; /* Rimuovi animazioni precedenti */
}
.ai-welcome-header h2.animated-text-reveal span {
display: inline-block; /* Ogni lettera è un elemento animabile */
opacity: 0;
transform: translateY(20px);
animation: text-reveal-up 0.8s forwards;
animation-delay: var(--delay); /* Ritardo gestito via JS per ogni lettera */
}
@keyframes text-reveal-up {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- 2. Animazione Sottotitolo (Fade In) --- */
.ai-welcome-header p.animated-subtitle-fade {
opacity: 0;
transform: translateY(20px);
animation: fade-in-up 0.8s forwards;
animation-delay: 0.8s; /* Inizia dopo il titolo */
}
@keyframes fade-in-up {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- 3. Animazione Logo (Bagliore & Pulsazione) --- */
.ai-logo-animated-container {
position: relative;
width: 80px; /* Contenitore per logo e cerchi */
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
perspective: 1000px; /* Per future animazioni 3D */
}
#aiWelcomeLogo {
width: 64px;
height: 64px;
z-index: 2; /* Sopra i cerchi */
filter: drop-shadow(0 0 15px var(--primary-color-soft)); /* Bagliore iniziale */
animation: logo-glow 3s ease-in-out infinite alternate; /* Animazione bagliore */
}
@keyframes logo-glow {
0% { filter: drop-shadow(0 0 10px var(--primary-color-soft)); }
100% { filter: drop-shadow(0 0 25px var(--primary-color)); }
}
/* Cerchi di pulsazione */
.ai-logo-pulse-circle {
position: absolute;
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0;
animation: pulse-out 3s ease-out infinite; /* Animazione di espansione */
z-index: 1; /* Sotto il logo */
}
.circle-1 {
width: 60px; height: 60px;
animation-delay: 0s;
}
.circle-2 {
width: 70px; height: 70px;
animation-delay: 1s;
}
.circle-3 {
width: 80px; height: 80px;
animation-delay: 2s;
}
@keyframes pulse-out {
0% { transform: scale(0.5); opacity: 0.7; }
100% { transform: scale(1.5); opacity: 0; }
}
/* --- 4. Animazione Suggerimenti (Grid Staggered Fade) --- */
.ai-solid-suggestions-grid {
opacity: 0;
transform: translateY(30px);
animation: fade-in-up 0.8s forwards;
animation-delay: 1.2s; /* Inizia dopo il sottotitolo */
}
.solid-suggestion-card {
opacity: 0;
transform: translateY(20px);
animation: card-stagger-in 0.6s forwards;
animation-delay: var(--card-delay); /* Ritardo gestito via JS per ogni card */
}
@keyframes card-stagger-in {
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- 5. Stile Icone Octicons --- */
.card-icon-octi {
font-size: 1.4rem;
color: var(--primary-color);
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
padding: 10px;
border-radius: 10px;
flex-shrink: 0;
display: inline-flex; /* Assicura che il padding funzioni */
align-items: center;
justify-content: center;
}
/* ================================================= */
/* === AI WELCOME SCREEN: CLEAN & TIGHT VERSION === */
/* ================================================= */
/* --- 1. Contenitore Logo Pulito --- */
.ai-logo-container-clean {
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
height: 80px; /* Mantiene lo spazio ma senza elementi extra */
}
.ai-logo-container-clean .ai-welcome-logo {
width: 72px; /* Leggermente più grande per compensare l'assenza di sfondo */
height: 72px;
filter: drop-shadow(0 4px 12px rgba(67, 97, 238, 0.3)); /* Ombra morbida blu per farlo "galleggiare" */
animation: float-logo 3s ease-in-out infinite alternate; /* Leggero movimento fluttuante */
}
@keyframes float-logo {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
/* --- 2. Titolo Compatto (Attaccato) --- */
.ai-tight-title {
font-size: 2.2rem; /* Grande e leggibile */
font-weight: 700; /* Molto spesso (bold) */
letter-spacing: -0.03em; /* Avvicina leggermente le lettere per un look più compatto */
color: var(--heading-text);
margin-bottom: 0.75rem;
line-height: 1.2;
/* Opzionale: gradiente sottile sul testo per renderlo premium */
background: linear-gradient(135deg, var(--heading-text) 30%, var(--primary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- 3. Sottotitolo (Già presente, ma assicuriamoci che sia pulito) --- */
.animated-subtitle-fade {
font-size: 1.1rem;
color: var(--light-text);
max-width: 550px;
margin: 0 auto 3rem auto;
line-height: 1.5;
}
/* --- FIX: Rimuove il doppio scrollbar nella sezione AI --- */
#ai-assistant-section.active {
overflow: hidden !important; /* Blocca lo scroll sul contenitore esterno */
height: calc(100vh - 70px) !important; /* Forza l'altezza esatta (viewport - header) */
}
/* Assicura che il body non scorra quando siamo qui */
body:has(#ai-assistant-section.active) {
overflow: hidden !important;
}
/* --- Animazione Titolo "Premium Flow" --- */
.ai-tight-title {
font-size: 2.5rem;
font-weight: 800; /* Ancora più spesso */
letter-spacing: -0.04em; /* Molto compatto */
margin-bottom: 0.5rem;
line-height: 1.1;
/* Definizione del gradiente animato */
background: linear-gradient(
110deg,
var(--heading-text) 30%,
var(--primary-color) 50%,
var(--heading-text) 70%
);
background-size: 200% auto;
/* Applica il gradiente al testo */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent; /* Fallback */
/* L'animazione */
animation: title-flow 8s linear infinite;
}
/* Keyframe per far scorrere il riflesso */
@keyframes title-flow {
to {
background-position: -200% center;
}
}ù/* ======================================= */
/* === AI SMART BLOCKS & FEATURES === */
/* ======================================= */
/* --- Smart Block generico --- */
.ai-smart-block {
margin: 1rem 0;
padding: 1rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background-color: var(--card-bg);
animation: fadeIn 0.3s ease-out;
}
/* --- Task Smart Block --- */
.task-smart-block {
display: flex;
align-items: center;
gap: 1rem;
border-left: 4px solid var(--warning-color); /* Default a warning (in corso) */
}
.task-smart-block.completed { border-left-color: var(--success-color); }
.task-smart-block.overdue { border-left-color: var(--danger-color); }
.task-smart-block .task-details { flex-grow: 1; }
.task-smart-block .task-title { font-weight: 600; color: var(--heading-text); display: block; }
.task-smart-block .task-meta { font-size: 0.85rem; color: var(--light-text); }
/* --- Person/Contact Smart Block --- */
.person-smart-block {
display: flex;
align-items: center;
gap: 1rem;
}
.person-smart-block .person-avatar {
width: 48px; height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 600;
}
.person-smart-block .person-info { flex-grow: 1; }
.person-smart-block .person-name { font-weight: 700; color: var(--heading-text); display: block; }
.person-smart-block .person-role { font-size: 0.9rem; color: var(--light-text); }
/* --- Citazioni Fonti --- */
.citation-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
color: var(--primary-color);
padding: 0.1rem 0.5rem;
border-radius: 4px;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.citation-link:hover {
background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
transform: translateY(-1px);
}
.citation-link i { font-size: 0.8em; }
/* --- Feedback Loop (Pollice Su/Giù) --- */
.ai-feedback-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.message-block:hover .ai-feedback-actions { opacity: 1; }
.feedback-btn {
background: none; border: none;
color: var(--light-text);
cursor: pointer; font-size: 1rem;
padding: 4px;
transition: all 0.2s ease;
}
.feedback-btn:hover { color: var(--heading-text); transform: scale(1.2); }
.feedback-btn.active { color: var(--primary-color); }
/* --- Action Link (per la navigazione) --- */
.ai-action-link {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
font-weight: 600;
}
/* ======================================= */
/* === AI CHAT ATTACHMENT STYLES === */
/* ======================================= */
/* Aggiusta il padding dell'input per far spazio al pulsante + */
.solid-chat-input {
padding-left: 3rem !important; /* Spazio per il pulsante + a sinistra */
}
/* Stile del pulsante + */
.btn-solid-attach {
position: absolute;
bottom: 10px; /* Distanza dal fondo del form */
left: 10px; /* Distanza dal lato sinistro */
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background-color: var(--menu-hover-bg);
color: var(--heading-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}
.btn-solid-attach:hover {
background-color: var(--bs-border-color);
color: var(--primary-color);
}
/* Stile del Mini Modal (Menu) */
.ai-attach-menu {
position: absolute;
bottom: 55px; /* Appare sopra il pulsante + */
left: 0;
width: 220px;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
padding: 0.5rem;
z-index: 100;
animation: slideUpFade 0.2s ease-out;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.attach-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border: none;
background: transparent;
color: var(--bs-body-color);
font-weight: 500;
font-size: 0.95rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
text-align: left;
}
.attach-menu-item:hover:not(:disabled) {
background-color: var(--menu-hover-bg);
}
.attach-menu-item i {
font-size: 1.1rem;
width: 24px;
text-align: center;
}
/* Area di Anteprima Immagine */
/* Area di anteprima (opzionale, per quando carichi foto) */
.attachment-preview-area {
padding: 10px 15px 0 15px;
background-color: var(--input-bg);
}
.attachment-preview-area.hidden {
display: none;
border-bottom: none;
}
.preview-thumbnail-wrapper {
position: relative;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: visible; /* Per mostrare il pulsante X fuori */
}
.preview-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
border: 2px solid var(--input-border);
}
.remove-attachment-btn {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: 50%;
color: var(--light-text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 0.7rem;
transition: all 0.2s;
}
.remove-attachment-btn:hover {
background-color: var(--danger-color);
color: white;
border-color: var(--danger-color);
}
/* Stile per l'immagine all'interno del messaggio utente */
.message-content .user-uploaded-image {
max-width: 300px;
max-height: 300px;
width: auto;
height: auto;
border-radius: 12px;
margin-bottom: 0.75rem;
border: 1px solid var(--input-border);
display: block;
}
/* ======================================= */
/* === NUOVI EFFETTI SPECIALI (FX PACK 2) === */
/* ======================================= */
/* --- 1. NEON FLUX EFFECT --- */
body.neon-effect .btn-primary,
body.neon-effect .btn-primary-filled,
body.neon-effect .kpi-card-v2:hover,
body.neon-effect .nav-link.active,
body.neon-effect .status-chip.running,
body.neon-effect .notification-dot {
box-shadow: 0 0 15px color-mix(in srgb, var(--primary-color) 60%, transparent),
0 0 30px color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
border-color: var(--primary-color) !important;
}
body.neon-effect .form-control-custom:focus,
body.neon-effect input:focus {
box-shadow: 0 0 10px color-mix(in srgb, var(--primary-color) 50%, transparent) !important;
border-color: var(--primary-color) !important;
}
/* Effetto pulsazione neon per elementi critici */
@keyframes neon-pulse {
0% { box-shadow: 0 0 5px var(--primary-color); }
50% { box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); }
100% { box-shadow: 0 0 5px var(--primary-color); }
}
body.neon-effect .ai-chat-send-btn:not(:disabled),
body.neon-effect .flowcoach-ai-tutor {
animation: neon-pulse 3s infinite alternate;
}
/* --- 2. FILM GRAIN EFFECT --- */
/* Crea un overlay fisso con una texture di rumore SVG */
body.grain-effect::after {
content: "";
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; /* Permette di cliccare attraverso */
z-index: 9999;
opacity: 0.06; /* Regola l'intensità della grana qui (0.03 - 0.15) */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Leggermente meno opaco in light mode per non sporcare troppo */
body.light-mode.grain-effect::after {
opacity: 0.04;
mix-blend-mode: multiply;
}
/* --- 3. FOCUS MODE EFFECT --- */
/* Quando Focus Mode è attivo, tutto ciò che NON è in hover si sfoca leggermente */
body.focus-effect .canvas:hover .card:not(:hover),
body.focus-effect .canvas:hover .kpi-card-v2:not(:hover),
body.focus-effect .grid-container:hover .grid-item:not(:hover) {
filter: blur(2px) grayscale(30%);
opacity: 0.7;
transition: all 0.4s ease;
}
/* L'elemento in hover rimane nitido e si ingrandisce leggermente */
body.focus-effect .card:hover,
body.focus-effect .kpi-card-v2:hover {
transform: scale(1.02) translateY(-5px);
z-index: 10;
box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}
/* ======================================= */
/* === AI CHAT: ANTEPRIMA FILE & BLOCCHI === */
/* ======================================= */
/* Stile anteprima (sopra l'input) per file DOC */
.preview-thumbnail-doc {
width: 60px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--input-bg);
border: 2px solid var(--input-border);
border-radius: 8px;
color: var(--light-text);
}
.preview-thumbnail-doc i {
font-size: 1.5rem;
}
.preview-thumbnail-doc span {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
/* Stile per l'info file accanto all'anteprima */
.attachment-preview-area {
align-items: center;
}
.preview-file-info {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
flex-grow: 1;
}
.preview-file-info strong {
color: var(--heading-text);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-file-info span {
color: var(--light-text);
font-size: 0.8rem;
}
/* Stile per il blocco file DENTRO la chat */
.user-uploaded-file {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background-color: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 12px;
padding: 0.75rem 1rem;
margin-bottom: 0.75rem;
max-width: 350px;
}
.user-uploaded-file i {
font-size: 1.2rem;
color: var(--primary-color);
}
.user-uploaded-file span {
font-weight: 500;
color: var(--heading-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ======================================= */
/* === AI SMART BLOCKS & FEATURES (V2) === */
/* ======================================= */
/* --- Smart Block generico --- */
.ai-smart-block {
margin: 1rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--bs-border-color);
border-radius: 12px;
background-color: var(--card-bg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-left-width: 4px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.ai-smart-block .smart-block-content {
flex-grow: 1;
overflow: hidden; /* Impedisce al testo di "spingere" il bottone */
}
/* --- Task Smart Block --- */
.task-smart-block .task-title {
font-weight: 600;
color: var(--heading-text);
display: block;
margin-bottom: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-smart-block .task-meta {
font-size: 0.85rem;
color: var(--light-text);
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap; /* Va a capo su schermi piccoli */
}
/* --- Person/Contact Smart Block --- */
.person-smart-block {
border-left-color: var(--primary-color);
}
.person-smart-block .person-avatar {
width: 48px; height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 600;
flex-shrink: 0;
}
.person-smart-block .person-info {
flex-grow: 1;
overflow: hidden;
}
.person-smart-block .person-name {
font-weight: 700;
color: var(--heading-text);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.person-smart-block .person-role {
font-size: 0.9rem;
color: var(--light-text);
}
/* --- AI Alert Box --- */
.ai-alert {
margin: 1rem 0;
padding: 1rem 1.25rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 1rem;
font-weight: 600;
border: 1px solid;
}
.ai-alert i {
font-size: 1.2rem;
}
.ai-alert-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);
}
.ai-alert-warning {
background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
color: var(--warning-color);
border-color: color-mix(in srgb, var(--warning-color) 35%, transparent);
}
.ai-alert-danger {
background-color: color-mix(in srgb, var(--danger-color) 15%, transparent);
color: var(--danger-color);
border-color: color-mix(in srgb, var(--danger-color) 30%, transparent);
}
/* --- Citazioni Fonti --- */
.citation-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
color: var(--primary-color);
padding: 0.1rem 0.5rem;
border-radius: 4px;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.citation-link:hover {
background-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
transform: translateY(-1px);
}
.citation-link i { font-size: 0.8em; }
/* --- Feedback Loop (Pollice Su/Giù) --- */
.ai-feedback-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
opacity: 0.6;
transition: opacity 0.2s ease;
}
.message-block:hover .ai-feedback-actions { opacity: 1; }
.feedback-btn {
background: none; border: none;
color: var(--light-text);
cursor: pointer; font-size: 1rem;
padding: 4px;
transition: all 0.2s ease;
}
.feedback-btn:hover { color: var(--heading-text); transform: scale(1.2); }
.feedback-btn.active { color: var(--primary-color); }
/* --- Action Link (per la navigazione) --- */
.ai-action-link {
color: var(--primary-color);
text-decoration: underline;
cursor: pointer;
font-weight: 600;
}
/* ======================================= */
/* === STATO DI CARICAMENTO CANVAS (SPA) === */
/* ======================================= */
/*
* Questo loader copre l'intero canvas.
* È invisibile (opacity: 0) di default.
*/
.canvas-loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
/* Usa lo sfondo del body per coprire il contenuto vecchio */
background-color: var(--bs-body-bg);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
/*
* Quando il canvas ha la classe .is-loading (aggiunta da JS),
* il loader diventa visibile (opacity: 1) e blocca i click.
*/
.canvas.is-loading .canvas-loader {
opacity: 1;
pointer-events: auto;
}
/* * Usiamo lo spinner del Sentinel che già esiste,
* ma lo rendiamo un po' più grande per il caricamento pagina.
*/
.canvas-loader .sentinel-loader {
width: 60px;
height: 60px;
border-width: 5px;
}
/* ======================================= */
/* === STILI PER IL DROPDOWN DI RICERCA === */
/* ======================================= */
/*
Questo contenitore serve a posizionare il menu
rispetto alla barra di ricerca.
*/
.search-bar-container {
position: relative;
flex-grow: 1;
max-width: 650px;
}
/*
Posiziona il menu sotto la barra di ricerca
*/
.search-results-dropdown {
position: absolute;
top: calc(100% + 8px); /* 8px sotto la barra di ricerca */
left: 0;
right: 0;
z-index: 1100; /* Sopra tutto il resto */
background-color: var(--card-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--border-radius-lg);
padding: 0.5rem;
box-shadow: var(--shadow-lg);
max-height: 450px;
overflow-y: auto;
animation: fadeIn 0.2s ease-out;
}
.search-results-dropdown.hidden {
display: none;
}
.search-results-list {
list-style: none;
padding: 0;
margin: 0;
}
/* Intestazione di sezione (es. "Tasks", "Documenti") */
.search-result-header {
font-size: 0.8rem;
font-weight: 600;
color: var(--light-text);
text-transform: uppercase;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--input-border);
}
/* Singolo elemento nei risultati */
.search-result-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.2s ease;
}
.search-result-item:hover {
background-color: var(--menu-hover-bg);
}
.search-result-item .item-icon {
font-size: 1.1rem;
color: var(--light-text);
width: 24px;
text-align: center;
flex-shrink: 0;
}
.search-result-item .item-details {
overflow: hidden; /* Nasconde il testo che fuoriesce */
}
.search-result-item .item-name {
font-weight: 500;
color: var(--heading-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Aggiunge "..." */
}
.search-result-item .item-context {
font-size: 0.85rem;
color: var(--light-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Messaggio "Nessun risultato" o "Inizia a digitare" */
.no-search-results {
padding: 1.5rem;
text-align: center;
color: var(--light-text);
font-style: italic;
list-style-type: none;
}
/* ======================================= */
/* === STILI UPLOAD AVATAR (IMPOSTAZIONI) === */
/* ======================================= */
.avatar-uploader-preview {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--input-bg);
border: 2px dashed var(--bs-border-color);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.avatar-uploader-preview .user-avatar-initial {
font-size: 2.5rem;
color: var(--light-text);
}
.avatar-uploader-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Classi per mostrare/nascondere l'iniziale o l'immagine */
.avatar-uploader-preview img.hidden,
.avatar-uploader-preview .user-avatar-initial.hidden {
display: none;
}
.avatar-uploader-actions {
flex-grow: 1;
}
/* ======================================= */
/* === STILI PAGE LOADER (TIPO LINKEDIN) === */
/* ======================================= */
#pageLoader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--bs-body-bg); /* Usa lo sfondo del tema */
z-index: 9999; /* Sopra tutto */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.3s ease-out; /* Transizione per la scomparsa */
}
.loader-logo {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
filter: drop-shadow(0 4px 12px var(--shadow-color-primary-soft));
}
.loader-bar-container {
width: 200px;
height: 4px;
background-color: var(--input-border);
border-radius: 2px;
overflow: hidden; /* Nasconde la barra quando è fuori */
}
.loader-bar-fill {
width: 40%; /* La barra è solo il 40% del contenitore */
height: 100%;
background-color: var(--primary-color);
border-radius: 2px;
/* Animazione "va e vieni" infinita */
animation: slideIndeterminate 1.5s ease-in-out infinite;
}
/* Animazione che muove la barra da -40% a 240% */
@keyframes slideIndeterminate {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(250%); /* 100% (larghezza) + 100% (contenitore) + 40% (barra) */
}
100% {
transform: translateX(-100%);
}
}
/* === AGGIUNTE PER LUCIDE ICONS (V3) === */
/* --- Stile Base per le Icone Lucide --- */
.lucide {
width: 16px;
height: 16px;
vertical-align: middle;
/* Le icone Lucide usano 'currentColor' per il colore,
quindi non abbiamo più bisogno del complicato filtro 'invert()'
per il dark/light mode. Questo semplifica molto il CSS!
*/
}
.sidebar-nav .nav-link .lucide {
margin-right: 1rem;
width: 20px;
height: 20px;
color: var(--light-text); /* Colore grigio di default */
transition: color 0.2s, opacity 0.2s;
flex-shrink: 0; /* Impedisce all'icona di deformarsi */
}
.sidebar-nav .nav-link:hover .lucide {
color: var(--heading-text); /* Colore più luminoso all'hover */
}
/* L'icona attiva diventa del colore primario */
.sidebar-nav .nav-link.active .lucide {
color: var(--primary-color);
}
/* ======================================= */
/* === STILI ICONE LUCIDE (SETTINGS NAV) === */
/* ======================================= */
.settings-nav-link .lucide {
width: 18px;
height: 18px;
color: var(--light-text); /* Colore grigio di default */
transition: color 0.2s ease;
flex-shrink: 0;
}
.settings-nav-link:hover .lucide {
color: var(--heading-text); /* Colore più luminoso all'hover */
}
.settings-nav-link.active .lucide {
color: var(--primary-color); /* Colore primario quando attivo */
}
/* ======================================= */
/* === STILI ICONE LUCIDE (PRIVACY CENTER) === */
/* ======================================= */
/* --- 1. Stile per i Badge Orizzontali (Header) --- */
.compliance-badge .lucide {
width: 18px; /* Leggermente più grande */
height: 18px;
flex-shrink: 0; /* Impedisce all'icona di deformarsi */
}
/* Applica i colori di stato direttamente all'icona */
.compliance-badge .lucide.text-green {
color: var(--success-color);
}
.compliance-badge .lucide.text-red {
color: var(--danger-color);
}
.compliance-badge .lucide.text-yellow {
color: var(--warning-color);
}
.compliance-badge .lucide.text-cookie {
color: var(--info-color);
}
/* Colore per lo stato 'na' (non applicabile) */
.compliance-badge.status-na .lucide {
color: var(--light-text);
}
/* --- 2. Stile per Icone nei Titoli (h2) e Pulsanti --- */
/* Stili per le icone Lucide negli header delle card (es. "Policy di Retention") */
#privacy-section .card-header h2 .lucide {
width: 18px;
height: 18px;
margin-right: 0.75rem; /* Spazio dal testo */
color: var(--light-text); /* Colore grigio discreto */
vertical-align: -3px; /* Allineamento verticale migliore */
}
/* Stili per le icone Lucide nei bottoni (es. "Apri Richiesta") */
#privacy-section .btn .lucide {
width: 16px;
height: 16px;
margin-right: 0.5rem;
}
/* ======================================= */
/* === STILI ICONE LUCIDE (AI COPILOT) === */
/* ======================================= */
/* --- Welcome Screen --- */
/* (La classe .card-icon-octi funziona già perfettamente) */
/* --- Input Form --- */
.btn-solid-attach .lucide {
width: 20px;
height: 20px;
}
.ai-attach-menu .lucide {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn-solid-send .lucide {
width: 18px;
height: 18px;
}
/* --- Anteprima Allegato --- */
.preview-thumbnail-doc .lucide {
width: 28px;
height: 28px;
}
/* --- Messaggi in Chat --- */
.user-uploaded-file .lucide {
width: 20px;
height: 20px;
}
.ai-feedback-actions .lucide {
width: 16px;
height: 16px;
}
/* --- Smart Blocks --- */
.ai-alert .lucide {
width: 20px;
height: 20px;
}
.citation-link .lucide {
width: 12px;
height: 12px;
}
.ai-smart-block .btn-soft .lucide {
width: 16px;
height: 16px;
}
/* ======================================= */
/* === CONTROLLO PERMESSI (RBAC) UI === */
/* ======================================= */
/*
Nasconde il link alla Chat con il Project Manager
per tutti gli utenti che hanno il ruolo "viewer".
*/
body.role-viewer .sidebar-nav .nav-link[data-section="chat-pm"] {
display: none;
}