/* ============================================================
   SKOOUT CRM — Style ispirato a Zoho CRM
   Sidebar bianca, layout pulito, topbar, tabelle leggere
   ============================================================ */

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

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:#f3f4f6; color:#1f2937; font-size:14px; line-height:1.5; }
a { text-decoration:none; color:inherit; }

/* ===== LAYOUT ===== */
.app-container { display:flex; min-height:100vh; }

/* ===== SIDEBAR — bianca, leggera, stile Zoho ===== */
.sidebar {
    width:220px; background:#fff; color:#374151;
    border-right:1px solid #e5e7eb;
    padding:0; display:flex; flex-direction:column;
    position:fixed; top:0; left:0; height:100vh;
    z-index:200; overflow-y:auto;
}

.logo {
    display:flex; align-items:center; gap:10px;
    padding:18px 20px 16px;
    border-bottom:1px solid #e5e7eb;
    margin-bottom:8px;
}
.logo i { color:#4f46e5; font-size:20px; }
.logo h2 { font-size:16px; font-weight:800; color:#111827; letter-spacing:-0.3px; }

.menu { display:flex; flex-direction:column; gap:1px; padding:4px 10px; flex:1; }

.menu a {
    color:#6b7280; text-decoration:none;
    padding:9px 12px; border-radius:7px;
    font-weight:500; font-size:13px;
    transition:all 0.15s;
    display:flex; align-items:center; gap:10px;
}
.menu a i { width:16px; text-align:center; font-size:13px; color:#9ca3af; transition:color 0.15s; }
.menu a:hover { background:#f5f3ff; color:#4f46e5; }
.menu a:hover i { color:#4f46e5; }
.menu a.active {
    background:#eef2ff; color:#4f46e5; font-weight:600;
    border-left:3px solid #4f46e5; padding-left:9px;
}
.menu a.active i { color:#4f46e5; }

/* Separatore sezione menu */
.menu-section {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:0.8px; color:#9ca3af; padding:14px 12px 6px;
}

.sidebar-footer {
    padding:12px 10px; border-top:1px solid #e5e7eb;
    margin-top:auto;
}
.logout-link {
    color:#6b7280; text-decoration:none; padding:9px 12px;
    border-radius:7px; font-size:13px; font-weight:500;
    display:flex; align-items:center; gap:10px; transition:all 0.15s;
}
.logout-link:hover { background:#fef2f2; color:#ef4444; }
.logout-link i { color:#9ca3af; font-size:13px; }

/* ===== TOPBAR ===== */
.topbar {
    position:fixed; top:0; left:220px; right:0; height:56px;
    background:#fff; border-bottom:1px solid #e5e7eb;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; z-index:100;
}
.topbar-left { display:flex; align-items:center; gap:8px; }
.topbar-breadcrumb { font-size:14px; font-weight:600; color:#111827; }
.topbar-breadcrumb span { color:#9ca3af; margin:0 6px; font-weight:400; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-avatar {
    width:32px; height:32px; border-radius:50%;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    color:#fff; font-weight:700; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex-grow:1; padding:76px 28px 32px;
    background:#f3f4f6; margin-left:220px; min-height:100vh;
}

/* ===== PAGE HEADER ===== */
.page-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px;
}
.page-header h1 {
    font-size:18px; font-weight:700; color:#111827;
    display:flex; align-items:center; gap:8px;
}
.page-header h1 i { color:#4f46e5; font-size:16px; }
.page-header p { font-size:12px; color:#6b7280; margin-top:2px; }

/* ===== CARDS DASHBOARD ===== */
.cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }

.card {
    background:#fff; padding:18px 20px; border-radius:10px;
    border:1px solid #e5e7eb; position:relative; overflow:hidden;
    transition:box-shadow 0.2s;
}
.card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.card.clickable { cursor:pointer; }

/* Strip colorata top */
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.card.blue::before   { background:#4f46e5; }
.card.purple::before { background:#7c3aed; }
.card.cyan::before   { background:#0891b2; }
.card.green::before  { background:#16a34a; }
.card.amber::before  { background:#d97706; }

.card h3 {
    font-size:11px; color:#6b7280; text-transform:uppercase;
    letter-spacing:0.5px; margin-bottom:10px; font-weight:600;
}
.card .value { font-size:28px; font-weight:800; color:#111827; }
.card .value span { font-size:13px; color:#9ca3af; font-weight:400; }
.card .card-sub { font-size:12px; color:#6b7280; margin-top:5px; }
.card .card-icon { position:absolute; top:16px; right:16px; font-size:20px; opacity:0.07; color:#111827; }

/* ===== SEZIONI CONTENITORE ===== */
.section-box {
    background:#fff; padding:0; border-radius:10px;
    border:1px solid #e5e7eb; margin-bottom:20px; overflow:hidden;
}

.section-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:16px 20px; border-bottom:1px solid #f3f4f6;
}
.section-header h2 { font-size:15px; color:#111827; font-weight:700; }

/* Contenuto dentro section-box */
.section-body { padding:20px; }

/* ===== FILTRI ===== */
.table-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid #f3f4f6; background:#fafafa; }
.filter-group { position:relative; display:flex; align-items:center; }
.filter-icon { position:absolute; left:10px; color:#9ca3af; font-size:12px; }
.filter-group input[type="text"] {
    padding:7px 10px 7px 30px; border:1px solid #d1d5db; border-radius:7px;
    outline:none; font-size:13px; color:#374151; width:200px;
    background:#fff; font-family:'Inter',sans-serif; transition:border 0.2s;
}
.filter-group input[type="text"]:focus { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,0.1); }
.filter-group select {
    padding:7px 12px; border:1px solid #d1d5db; border-radius:7px;
    outline:none; font-size:13px; color:#374151;
    background:#fff; cursor:pointer; height:34px;
    font-family:'Inter',sans-serif;
}
.filter-group select:focus { border-color:#4f46e5; }
.date-filter { display:flex; align-items:center; gap:6px; font-size:13px; color:#6b7280; }
.date-filter input[type="date"] {
    padding:6px 10px; border:1px solid #d1d5db; border-radius:7px;
    outline:none; font-size:13px; background:#fff;
}

/* ===== BOTTONI ===== */
.btn-primary {
    background:#4f46e5; color:#fff; border:none;
    padding:7px 16px; border-radius:7px; cursor:pointer;
    font-weight:600; font-size:13px; font-family:'Inter',sans-serif;
    transition:background 0.15s; height:34px;
    display:inline-flex; align-items:center; gap:6px;
}
.btn-primary:hover { background:#4338ca; }

.btn-danger { background:#ef4444; color:#fff; border:none; padding:6px 12px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; font-family:'Inter',sans-serif; }
.btn-danger:hover { background:#dc2626; }

.btn-action {
    background:#fff; border:1px solid #d1d5db; padding:6px 12px;
    border-radius:7px; cursor:pointer; color:#374151;
    font-weight:500; font-size:12px; font-family:'Inter',sans-serif;
    transition:all 0.15s; display:inline-flex; align-items:center; gap:6px;
}
.btn-action:hover { background:#f9fafb; border-color:#9ca3af; color:#111827; }

.btn-icon {
    background:none; border:none; cursor:pointer;
    padding:5px 7px; border-radius:6px;
    color:#9ca3af; font-size:14px; transition:all 0.15s;
}
.btn-icon:hover { background:#f3f4f6; color:#374151; }
.btn-icon.danger:hover { background:#fef2f2; color:#ef4444; }

/* ===== TABELLE ===== */
.table-container { overflow-x:auto; }

.work-table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.work-table thead { background:#fafafa; border-bottom:1px solid #e5e7eb; }
.work-table th {
    padding:11px 16px; color:#6b7280; font-weight:600;
    font-size:11px; text-transform:uppercase; letter-spacing:0.4px;
    white-space:nowrap; border-bottom:1px solid #e5e7eb;
}
.work-table td {
    padding:13px 16px; border-bottom:1px solid #f3f4f6;
    color:#374151; vertical-align:middle;
}
.work-table tr:last-child td { border-bottom:none; }
.work-table tbody tr:hover td { background:#fafafa; }
.company-name { font-weight:600; color:#111827; }
.td-actions { display:flex; gap:4px; align-items:center; }
.gap-actions { display:flex; gap:4px; align-items:center; justify-content:flex-end; }

/* ===== BADGE / PILLS ===== */
.badge {
    padding:3px 8px; border-radius:5px;
    font-size:11px; font-weight:600; display:inline-block;
    white-space:nowrap;
}
.badge-call      { background:#ede9fe; color:#5b21b6; }
.badge-meeting   { background:#dbeafe; color:#1d4ed8; }
.badge-task      { background:#fef3c7; color:#92400e; }
.badge-green     { background:#d1fae5; color:#065f46; }
.badge-red       { background:#fee2e2; color:#991b1b; }
.badge-gray      { background:#f3f4f6; color:#4b5563; }
.badge-orange    { background:#ffedd5; color:#9a3412; }

/* Priorità */
.prio-alta   { background:#fee2e2; color:#991b1b; }
.prio-media  { background:#fef3c7; color:#92400e; }
.prio-bassa  { background:#f3f4f6; color:#4b5563; }

/* Stato prospect */
.stato-nuovo                { background:#dbeafe; color:#1d4ed8; }
.stato-contattato           { background:#fef3c7; color:#92400e; }
.stato-appuntamento_fissato { background:#ede9fe; color:#5b21b6; }
.stato-convertito           { background:#d1fae5; color:#065f46; }
.stato-non_interessato      { background:#f3f4f6; color:#6b7280; }

/* Fase trattativa */
.fase-qualifica    { background:#dbeafe; color:#1d4ed8; }
.fase-proposta     { background:#fef3c7; color:#92400e; }
.fase-negoziazione { background:#ede9fe; color:#5b21b6; }
.fase-vinta        { background:#d1fae5; color:#065f46; }
.fase-persa        { background:#fee2e2; color:#991b1b; }

/* ===== FORM GLOBALE ===== */
.form-group { margin-bottom:14px; }
.form-group label {
    display:block; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.4px;
    color:#6b7280; margin-bottom:5px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width:100%; padding:9px 12px; border:1px solid #d1d5db;
    border-radius:7px; font-size:13px; color:#111827;
    outline:none; background:#fff; font-family:'Inter',sans-serif;
    transition:all 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,0.1);
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ===== MODALE ===== */
.modal-overlay {
    display:none; position:fixed; top:0; left:0;
    width:100%; height:100%;
    background:rgba(17,24,39,0.45);
    backdrop-filter:blur(3px);
    z-index:1000; justify-content:center; align-items:center;
}
.modal-overlay.open { display:flex; }
.modal-content {
    background:#fff; width:100%; max-width:520px;
    border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.15);
    animation:modalIn 0.2s ease-out; overflow:hidden;
}
.modal-content.modal-lg { max-width:660px; }
@keyframes modalIn { from{transform:translateY(-8px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 20px; background:#fafafa; border-bottom:1px solid #e5e7eb;
}
.modal-header h3 { font-size:15px; color:#111827; font-weight:700; }
.close-modal-btn { font-size:20px; color:#9ca3af; cursor:pointer; background:none; border:none; line-height:1; transition:color 0.15s; }
.close-modal-btn:hover { color:#374151; }
.modal-body { padding:20px; max-height:72vh; overflow-y:auto; }
.modal-footer {
    padding:12px 20px; background:#fafafa;
    border-top:1px solid #e5e7eb;
    display:flex; justify-content:flex-end; gap:8px;
}

/* ===== NOTE ===== */
.notes-history { max-height:180px; overflow-y:auto; margin-bottom:14px; }
.note-block { background:#fffbeb; border-left:3px solid #f59e0b; padding:10px 12px; border-radius:6px; margin-bottom:8px; }
.note-time { font-size:11px; color:#78716c; display:block; margin-bottom:3px; font-weight:600; }
.note-block p { font-size:13px; color:#44403c; line-height:1.5; margin:0; }
.note-empty { font-size:13px; color:#9ca3af; text-align:center; padding:18px 0; }

/* Dettaglio note */
.note-item { background:#fffbeb; border-left:3px solid #f59e0b; padding:10px 12px; border-radius:6px; margin-bottom:8px; }
.note-item .note-time { font-size:11px; color:#78716c; font-weight:600; margin-bottom:3px; display:block; }
.note-item p { font-size:13px; color:#44403c; margin:0; line-height:1.5; }

/* ===== CALENDARIO ===== */
.cal-nav {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; background:#fff; border-bottom:1px solid #e5e7eb;
}
.cal-nav-title { font-size:15px; font-weight:700; color:#111827; }
.cal-grid-header {
    display:grid; grid-template-columns:repeat(7,1fr);
    background:#fafafa; border-bottom:1px solid #e5e7eb;
}
.cal-day-header {
    padding:10px 6px; font-size:11px; font-weight:600;
    text-align:center; color:#6b7280; text-transform:uppercase; letter-spacing:0.3px;
}
.cal-days-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#e5e7eb; }
.cal-day-cell { background:#fff; min-height:90px; padding:6px; cursor:pointer; transition:background 0.1s; }
.cal-day-cell:hover { background:#fafafa; }
.cal-day-cell.other-month { background:#f9fafb; }
.cal-day-cell.other-month .cal-day-num { color:#d1d5db; }
.cal-day-cell.today { background:#eef2ff; }
.cal-day-cell.today .cal-day-num { background:#4f46e5; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.cal-day-num { font-size:12px; font-weight:700; color:#374151; margin-bottom:4px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
.cal-event { font-size:10px; padding:2px 6px; border-radius:4px; margin-bottom:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; font-weight:500; }
.cal-event.riunione { background:#dbeafe; color:#1d4ed8; }
.cal-event.chiamata { background:#d1fae5; color:#065f46; }
.cal-event.demo     { background:#ede9fe; color:#5b21b6; }
.cal-event.altro    { background:#fef3c7; color:#92400e; }
.cal-event.task-ev  { background:#ffedd5; color:#9a3412; }
.cal-more { font-size:10px; color:#9ca3af; padding:2px 4px; }

/* ===== TASK ===== */
.task-card { background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; display:flex; align-items:flex-start; gap:10px; transition:box-shadow 0.15s; }
.task-card:hover { box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.task-card.completato { opacity:0.5; }
.task-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.task-icon.telefonata { background:#d1fae5; color:#065f46; }
.task-icon.compito    { background:#fef3c7; color:#92400e; }
.task-body { flex:1; }
.task-titolo { font-weight:600; font-size:13px; color:#111827; }
.task-meta   { font-size:11px; color:#9ca3af; margin-top:2px; }
.task-note   { font-size:12px; color:#6b7280; margin-top:4px; font-style:italic; }
.task-actions { display:flex; gap:4px; align-items:center; }
.task-scaduta .task-meta { color:#ef4444; font-weight:600; }

/* ===== STATUS ===== */
.status { padding:3px 8px; border-radius:5px; font-size:11px; font-weight:600; }
.status-pending { background:#f3f4f6; color:#4b5563; }
.status-urgent  { background:#fee2e2; color:#991b1b; }
.status-done    { background:#d1fae5; color:#065f46; }

/* ===== TOAST ===== */
#toast {
    position:fixed; bottom:24px; right:24px; background:#111827; color:#fff;
    padding:11px 18px; border-radius:9px; font-size:13px; font-weight:600;
    z-index:9999; opacity:0; transform:translateY(6px);
    transition:all 0.25s; pointer-events:none;
    display:flex; align-items:center; gap:8px;
}
#toast.show { opacity:1; transform:translateY(0); }
#toast.success { background:#065f46; }
#toast.error   { background:#991b1b; }

/* ===== LOGIN ===== */
.login-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#eef2ff 0%,#f5f3ff 100%);
}
.login-box {
    background:#fff; border-radius:14px; padding:40px 36px;
    width:100%; max-width:400px;
    box-shadow:0 8px 32px rgba(79,70,229,0.12);
    border:1px solid #e0e7ff;
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo i { font-size:32px; color:#4f46e5; }
.login-logo h1 { font-size:20px; font-weight:800; color:#111827; margin-top:8px; }
.login-logo p  { font-size:13px; color:#6b7280; margin-top:4px; }
.login-error {
    background:#fef2f2; border:1px solid #fca5a5;
    color:#991b1b; padding:10px 14px; border-radius:8px;
    font-size:13px; margin-bottom:16px;
}

/* ===== KPI PAGE ===== */
.kpi-layout { display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start; }
.params-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:24px; }
.params-card h2 { font-size:16px; font-weight:700; color:#111827; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.param-hint { font-size:11px; color:#9ca3af; margin-top:3px; }
.param-divider { border:none; border-top:1px solid #f3f4f6; margin:16px 0; }
.btn-salva { width:100%; padding:11px; background:#4f46e5; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; font-family:'Inter',sans-serif; cursor:pointer; transition:background 0.15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-salva:hover { background:#4338ca; }
.btn-salva.saved { background:#065f46; }
.results-col { display:flex; flex-direction:column; gap:14px; }
.result-hero { background:#111827; border-radius:10px; padding:24px 28px; color:#fff; }
.result-hero .hero-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#6b7280; margin-bottom:6px; }
.result-hero .hero-number { font-size:60px; font-weight:900; line-height:1; }
.result-hero .hero-sub { margin-top:8px; font-size:13px; color:#6b7280; }
.result-hero .hero-sub strong { color:#818cf8; }
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.result-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px 20px; position:relative; overflow:hidden; }
.result-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:10px 10px 0 0; }
.result-card.blue::before   { background:#4f46e5; }
.result-card.purple::before { background:#7c3aed; }
.result-card.cyan::before   { background:#0891b2; }
.result-card.amber::before  { background:#d97706; }
.result-card .rc-icon { position:absolute; top:14px; right:14px; font-size:20px; opacity:0.07; }
.result-card.blue .rc-icon   { color:#4f46e5; }
.result-card.purple .rc-icon { color:#7c3aed; }
.result-card.cyan .rc-icon   { color:#0891b2; }
.result-card.amber .rc-icon  { color:#d97706; }
.result-card .rc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#6b7280; margin-bottom:6px; }
.result-card .rc-number { font-size:32px; font-weight:800; color:#111827; line-height:1; }
.result-card .rc-unit { font-size:13px; font-weight:400; color:#9ca3af; }
.result-card .rc-sub { font-size:12px; color:#6b7280; margin-top:6px; }
.results-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:#9ca3af; text-align:center; background:#fff; border:1px dashed #d1d5db; border-radius:10px; }
.results-empty i { font-size:36px; margin-bottom:12px; opacity:0.3; }

/* ===== DETTAGLIO PAGINE ===== */
.detail-avatar { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; flex-shrink:0; }
.info-row { display:flex; flex-direction:column; gap:3px; padding:11px 0; border-bottom:1px solid #f3f4f6; }
.info-row:last-child { border-bottom:none; }
.info-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#9ca3af; }
.info-value { font-size:14px; font-weight:600; color:#111827; }
.breadcrumb { display:flex; align-items:center; gap:7px; font-size:13px; color:#6b7280; margin-bottom:18px; }
.breadcrumb a { color:#4f46e5; }
.breadcrumb a:hover { text-decoration:underline; }
.trattativa-card { background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; padding:14px; cursor:pointer; transition:all 0.15s; text-decoration:none; display:block; }
.trattativa-card:hover { border-color:#4f46e5; background:#eef2ff; }
.trattativa-card .tc-nome { font-weight:700; font-size:14px; color:#111827; margin-bottom:6px; }
.trattativa-card .tc-importo { font-size:18px; font-weight:800; color:#16a34a; }
.link-nome { color:#111827; font-weight:600; text-decoration:none; }
.link-nome:hover { color:#4f46e5; text-decoration:underline; }

/* ===== PROGRESS ===== */
.progress-wrap { height:4px; background:#f3f4f6; border-radius:99px; margin-top:8px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; }
.bg-blue   { background:#4f46e5; }
.bg-purple { background:#7c3aed; }
.bg-cyan   { background:#0891b2; }
.bg-green  { background:#16a34a; }

/* ===== UTILITY ===== */
.text-right   { text-align:right; }
.text-center  { text-align:center; }
.text-green   { color:#16a34a; font-weight:700; }
.text-red     { color:#ef4444; font-weight:700; }
.text-muted   { color:#9ca3af; font-size:12px; }
.fw-700       { font-weight:700; }
.mt-10        { margin-top:10px; }
.mt-16        { margin-top:16px; }

/* ===== FIX LAYOUT PAGINE DETTAGLIO ===== */

/* Section box con contenuto diretto (non filtri) */
.section-box .table-container { padding-bottom:4px; }

/* Dettaglio azienda/prospect — layout responsive */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* Header dettaglio pagina */
.detail-header {
    display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:20px; gap:16px; flex-wrap:wrap;
}
.detail-hero { display:flex; align-items:center; gap:16px; }

/* Avatar grande con iniziale */
.avatar-box {
    width:52px; height:52px; border-radius:12px;
    background:linear-gradient(135deg,#4f46e5,#7c3aed);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:800; color:#fff; flex-shrink:0;
}

/* Info rows dentro section-box senza padding extra */
.section-box .info-row {
    padding:11px 20px; border-bottom:1px solid #f3f4f6;
    display:flex; flex-direction:column; gap:3px;
}
.section-box .info-row:last-child { border-bottom:none; }
.section-box .info-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#9ca3af; }
.section-box .info-value { font-size:14px; font-weight:600; color:#111827; }

/* Trattativa card dentro azienda */
.trattativa-card {
    background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px;
    padding:14px 16px; cursor:pointer; transition:all 0.15s;
    text-decoration:none; display:block; margin:0 20px 12px;
}
.trattativa-card:hover { border-color:#4f46e5; background:#eef2ff; }
.trattativa-card:last-child { margin-bottom:20px; }
.trattativa-card .tc-nome { font-weight:700; font-size:14px; color:#111827; margin-bottom:6px; }
.trattativa-card .tc-importo { font-size:18px; font-weight:800; color:#16a34a; }

/* Note item */
.note-item {
    background:#fffbeb; border-left:3px solid #f59e0b;
    padding:10px 14px; border-radius:6px; margin-bottom:8px;
}
.note-item .note-time { font-size:11px; color:#78716c; font-weight:600; margin-bottom:3px; display:block; }
.note-item p { font-size:13px; color:#44403c; margin:0; line-height:1.5; }

/* Appuntamento card inline */
.app-card {
    display:flex; gap:12px; align-items:flex-start;
    padding:12px 16px; cursor:pointer;
    border-bottom:1px solid #f3f4f6; transition:background 0.1s;
}
.app-card:hover { background:#f9fafb; }
.app-card:last-child { border-bottom:none; }
.app-card-icon {
    width:34px; height:34px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.app-card-body { flex:1; }
.app-card-title { font-weight:600; font-size:13px; color:#111827; }
.app-card-meta  { font-size:11px; color:#9ca3af; margin-top:2px; }

/* Task card */
.task-card { margin:0 20px 8px; }
.task-card:last-child { margin-bottom:20px; }

/* Importo grande trattativa */
.importo-hero { font-size:44px; font-weight:900; color:#16a34a; line-height:1; }

/* Breadcrumb migliorato */
.breadcrumb {
    display:flex; align-items:center; gap:6px;
    font-size:13px; color:#6b7280; margin-bottom:16px;
    flex-wrap:wrap;
}
.breadcrumb a { color:#4f46e5; font-weight:500; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { color:#d1d5db; font-size:10px; }

/* Responsive */
@media(max-width:900px) {
    .two-col, .three-col { grid-template-columns:1fr; }
    .kpi-layout { grid-template-columns:1fr; }
    .cards-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
    .cards-grid { grid-template-columns:1fr; }
    .main-content { padding:70px 16px 24px; }
    .sidebar { width:200px; }
    .main-content { margin-left:200px; }
    .topbar { left:200px; }
}

/* ===== NOTIFICHE BADGE ===== */
.notif-badge{background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;margin-left:auto;}
.notif-item{display:flex;gap:12px;align-items:flex-start;padding:14px 20px;border-bottom:1px solid #f3f4f6;transition:background .1s;cursor:pointer;}
.notif-item:hover{background:#fafafa;}
.notif-item.non-letta{background:#fefce8;border-left:3px solid #eab308;}
.notif-item.non-letta:hover{background:#fef9c3;}
.notif-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;}
.notif-icon.task{background:#fef3c7;color:#d97706;}
.notif-icon.appuntamento{background:#dbeafe;color:#1d4ed8;}
.notif-icon.scadenza{background:#fee2e2;color:#dc2626;}
.notif-icon.sistema{background:#ede9fe;color:#7c3aed;}
.notif-titolo{font-weight:600;font-size:13px;color:#111827;}
.notif-testo{font-size:12px;color:#6b7280;margin-top:2px;}
.notif-time{font-size:11px;color:#9ca3af;margin-top:4px;}
/* ===== OFFERTA / PREVENTIVO ===== */
.offerta-riga{display:grid;grid-template-columns:80px 1fr 2fr 100px 80px 90px 90px 50px;gap:8px;align-items:start;padding:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:10px;}
.offerta-riga input,.offerta-riga select,.offerta-riga textarea{width:100%;padding:7px 9px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;font-family:'Inter',sans-serif;background:#fff;outline:none;}
.offerta-riga input:focus,.offerta-riga select:focus,.offerta-riga textarea:focus{border-color:#4f46e5;}
.offerta-riga textarea{min-height:56px;resize:vertical;}
.offerta-totale-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:18px 20px;}
.offerta-totale-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px solid #f3f4f6;}
.offerta-totale-row:last-child{border-bottom:none;font-weight:800;font-size:16px;color:#111827;}
.offerta-totale-row.finale{font-size:18px;color:#16a34a;}
/* ===== DOCUMENTI ===== */
.doc-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f3f4f6;}
.doc-item:hover{background:#fafafa;}
.doc-icon{width:36px;height:36px;border-radius:8px;background:#ede9fe;color:#7c3aed;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.doc-nome{font-weight:600;font-size:13px;color:#111827;}
.doc-meta{font-size:11px;color:#9ca3af;}
/* ===== TEAM ===== */
.team-member{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #f3f4f6;}
.team-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.team-info{flex:1;}
.team-info strong{font-size:14px;color:#111827;display:block;}
.team-info span{font-size:12px;color:#6b7280;}
.ruolo-badge{padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;}
.ruolo-amministratore{background:#ede9fe;color:#5b21b6;}
.ruolo-editore{background:#f3f4f6;color:#4b5563;}