/* ============================================================
   GESTIONE PROGETTI — Stylesheet v2
   Refined Industrial-Minimal Aesthetic
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Light Theme ─────────────────────────────────────────── */
:root {
    --bg-app:       #f4f3f0;
    --bg-sidebar:   #ffffff;
    --bg-card:      #ffffff;
    --bg-card-alt:  #faf9f7;
    --bg-input:     #f4f3f0;
    --bg-hover:     #eeecea;
    --bg-active:    #1a1a1a;
    --border:       rgba(0,0,0,.08);
    --border-hover: rgba(0,0,0,.15);
    --border-focus: #3d5af1;
    --text:         #1a1a1a;
    --text-secondary:#5a5a5a;
    --text-muted:   #9a9a9a;
    --text-inverse: #ffffff;
    --accent:       #3d5af1;
    --accent-soft:  rgba(61,90,241,.08);
    --accent-glow:  rgba(61,90,241,.2);
    --green:        #0d9f6e;
    --green-bg:     rgba(13,159,110,.08);
    --green-text:   #065f46;
    --amber:        #d97706;
    --amber-bg:     rgba(217,119,6,.08);
    --amber-text:   #92400e;
    --red:          #dc2626;
    --red-bg:       rgba(220,38,38,.06);
    --red-text:     #991b1b;
    --blue:         #2563eb;
    --blue-bg:      rgba(37,99,235,.06);
    --blue-text:    #1e40af;
    --purple:       #7c3aed;
    --purple-bg:    rgba(124,58,237,.06);
    --purple-text:  #5b21b6;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,.06);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.1);
    --shadow-card:  0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
    --radius:       12px;
    --radius-sm:    8px;
    --radius-xs:    6px;
    --font:         'Outfit', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;
    --transition:   .2s cubic-bezier(.4,0,.2,1);
    --sidebar-w:    260px;
}

/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-app:       #0e0e11;
    --bg-sidebar:   #151518;
    --bg-card:      #1a1a1f;
    --bg-card-alt:  #1f1f25;
    --bg-input:     #25252c;
    --bg-hover:     #2a2a32;
    --bg-active:    #ffffff;
    --border:       rgba(255,255,255,.07);
    --border-hover: rgba(255,255,255,.14);
    --border-focus: #5b7cf7;
    --text:         #ececef;
    --text-secondary:#a1a1aa;
    --text-muted:   #5e5e6e;
    --text-inverse: #0e0e11;
    --accent:       #5b7cf7;
    --accent-soft:  rgba(91,124,247,.1);
    --accent-glow:  rgba(91,124,247,.25);
    --green:        #34d399;
    --green-bg:     rgba(52,211,153,.1);
    --green-text:   #6ee7b7;
    --amber:        #fbbf24;
    --amber-bg:     rgba(251,191,36,.1);
    --amber-text:   #fcd34d;
    --red:          #f87171;
    --red-bg:       rgba(248,113,113,.08);
    --red-text:     #fca5a5;
    --blue:         #60a5fa;
    --blue-bg:      rgba(96,165,250,.08);
    --blue-text:    #93c5fd;
    --purple:       #a78bfa;
    --purple-bg:    rgba(167,139,250,.08);
    --purple-text:  #c4b5fd;
    --shadow-sm:    0 1px 2px rgba(0,0,0,.2);
    --shadow-md:    0 4px 16px rgba(0,0,0,.3);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.5);
    --shadow-card:  0 1px 3px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background: var(--bg-app);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

/* ── Layout ──────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.brand-logo-img {
    width: 170px;
    height: auto;
    display: block;
}

.brand-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 300;
    color: var(--text-secondary);
    letter-spacing: .15em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
}

.sidebar-nav {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    user-select: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--bg-active); color: var(--text-inverse); }
.nav-item.active svg { stroke: var(--text-inverse); }

.nav-item svg {
    width: 18px; height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
}

.nav-separator { height: 1px; background: var(--border); margin: 8px 14px; }

.nav-section-label {
    font-size: .68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    padding: 14px 14px 6px;
}

/* Sidebar footer */
.sidebar-footer {
    padding: 14px 12px;
    border-top: 1px solid var(--border);
}

/* Auth bar (username + logout) */
.auth-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 10px;
    margin-bottom: 4px;
}
.auth-bar-icon {
    width: 15px; height: 15px;
    stroke: var(--text-muted); stroke-width: 2; fill: none; flex-shrink: 0;
}
.auth-bar-username {
    flex: 1;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.auth-bar-logout svg {
    width: 15px; height: 15px;
}
.sidebar.collapsed .auth-bar-username,
.sidebar.collapsed .auth-bar-icon { display: none; }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-input);
    border: 1px solid var(--border);
    transition: all var(--transition);
    width: 100%;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 500;
}

.theme-toggle:hover { border-color: var(--border-hover); background: var(--bg-hover); }

.theme-toggle svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    flex-shrink: 0;
}

.theme-toggle-label { flex: 1; }

.theme-toggle-track {
    width: 38px;
    height: 20px;
    background: var(--border-hover);
    border-radius: 10px;
    position: relative;
    transition: background .3s ease;
    flex-shrink: 0;
}

.theme-toggle-track::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: var(--bg-card);
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

[data-theme="dark"] .theme-toggle-track { background: var(--accent); }
[data-theme="dark"] .theme-toggle-track::after { transform: translateX(18px); }

/* ── Sidebar collapse toggle ─────────────────────────────── */
.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 7px;
    margin-bottom: 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-collapse-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; stroke-width: 2; fill: none;
    flex-shrink: 0;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    transform: rotate(180deg); /* points left = collapse */
}

/* ── Sidebar collapsed state ─────────────────────────────── */
.sidebar {
    transition: width .3s cubic-bezier(.4,0,.2,1);
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed ~ .main { margin-left: 64px; }
.main { transition: margin-left .3s cubic-bezier(.4,0,.2,1); }

.sidebar.collapsed .sidebar-brand {
    padding: 14px 0;
    align-items: center;
    justify-content: center;
}
.sidebar.collapsed .brand-logo-img,
.sidebar.collapsed .brand-tagline { display: none; }
.sidebar.collapsed .nav-section-label { display: none; }
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 10px 0;
}
.sidebar.collapsed .nav-label { display: none; }
.sidebar.collapsed .theme-toggle {
    justify-content: center;
    padding: 9px 0;
}
.sidebar.collapsed .theme-toggle-label,
.sidebar.collapsed .theme-toggle-track { display: none; }
.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(0deg); /* points right = expand */
}

/* ── Darwin background accents ───────────────────────────── */
/* Very faint decorative blobs referencing the logo palette  */
.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    padding: 32px 36px;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.main::before,
.main::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

/* Top-right blob — blue/accent */
.main::before {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -180px;
    background: radial-gradient(circle, rgba(37,99,235,.07) 0%, transparent 70%);
}

/* Bottom-left blob — amber/gold */
.main::after {
    width: 440px;
    height: 440px;
    bottom: -140px;
    left: calc(var(--sidebar-w) - 120px);
    background: radial-gradient(circle, rgba(217,119,6,.055) 0%, transparent 70%);
}

/* Ensure page content stays above decorative blobs */
.page, .page-header, .toolbar, .stat-grid, .card, .table-wrap, .modal-overlay {
    position: relative;
    z-index: 1;
}

/* Sidebar accent: thin multi-color gradient top bar */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #2563eb 0%,
        #7c3aed 25%,
        #dc2626 50%,
        #d97706 75%,
        #16a34a 100%
    );
    opacity: .55;
    border-radius: 0;
    z-index: 1;
}

[data-theme="dark"] .main::before {
    background: radial-gradient(circle, rgba(91,124,247,.09) 0%, transparent 70%);
}
[data-theme="dark"] .main::after {
    background: radial-gradient(circle, rgba(251,191,36,.06) 0%, transparent 70%);
}

.page { display: none; }
.page.active { display: block; animation: pageIn .35s ease; }

@keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page Header ─────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 400px;
}

.search-box .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    stroke: var(--text-muted);
    stroke-width: 2;
    fill: none;
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: .88rem;
    outline: none;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.search-box input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-box input::placeholder { color: var(--text-muted); }

.filter-select {
    padding: 10px 36px 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: .88rem;
    outline: none;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.filter-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 14px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }

.btn-sm { padding: 6px 14px; font-size: .82rem; }

.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.btn-icon:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-hover); }

.btn-icon-xs { width: 26px; height: 26px; }
.btn-icon-xs svg { width: 12px; height: 12px; }

/* ── Stat Cards ──────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    transition: all var(--transition);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
}

.stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity var(--transition);
}

.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card:hover::after { opacity: 1; }

.stat-card .stat-icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.stat-card .stat-icon svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }

.stat-card .label {
    font-size: .74rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-card .value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.stat-card .stat-sub { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.stat-sub-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 600;
}
.stat-sub-item svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.stat-sub-item.green { color: var(--green); }
.stat-sub-item.blue  { color: var(--blue); }
.stat-sub-sep { color: var(--border-hover); font-size: .75rem; }

.stat-card.green .stat-icon { background: var(--green-bg); }
.stat-card.green .stat-icon svg { stroke: var(--green); }
.stat-card.green .value { color: var(--green); }
.stat-card.green::after { background: var(--green); }

.stat-card.amber .stat-icon { background: var(--amber-bg); }
.stat-card.amber .stat-icon svg { stroke: var(--amber); }
.stat-card.amber .value { color: var(--amber); }
.stat-card.amber::after { background: var(--amber); }

.stat-card.blue .stat-icon { background: var(--blue-bg); }
.stat-card.blue .stat-icon svg { stroke: var(--blue); }
.stat-card.blue .value { color: var(--blue); }
.stat-card.blue::after { background: var(--blue); }

.stat-card.purple .stat-icon { background: var(--purple-bg); }
.stat-card.purple .stat-icon svg { stroke: var(--purple); }
.stat-card.purple .value { color: var(--purple); }
.stat-card.purple::after { background: var(--purple); }

.stat-card.accent .stat-icon { background: var(--accent-soft); }
.stat-card.accent .stat-icon svg { stroke: var(--accent); }
.stat-card.accent .value { color: var(--accent); }
.stat-card.accent::after { background: var(--accent); }

.stat-card.grey .value { color: var(--text-muted); }
.stat-card.grey::after { background: var(--text-muted); }

.stat-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 90px;
    height: 90px;
    pointer-events: none;
    opacity: 0.07;
}
.stat-bg-icon svg {
    width: 100%; height: 100%;
    fill: none;
    stroke-width: 1.5;
    stroke: var(--text-muted);
}
.stat-card.green  .stat-bg-icon svg { stroke: var(--green); }
.stat-card.blue   .stat-bg-icon svg { stroke: var(--blue); }
.stat-card.purple .stat-bg-icon svg { stroke: var(--purple); }
.stat-card.amber  .stat-bg-icon svg { stroke: var(--amber); }
.stat-card.grey   .stat-bg-icon svg { stroke: var(--text-muted); }

/* ── Section Title ───────────────────────────────────────── */
.section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title svg { width: 18px; height: 18px; stroke: var(--text-muted); stroke-width: 2; fill: none; }
.section-title-note {
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-card-alt);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px 8px;
    letter-spacing: .01em;
}

/* ── Project Rows ────────────────────────────────────────── */
.projects-grid { display: flex; flex-direction: column; gap: 6px; }

.project-row {
    display: grid;
    grid-template-columns: 2.8fr 120px 1fr 0.7fr 78px 100px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--transition);
    cursor: pointer;
    box-shadow: var(--shadow-card);
}

.project-row:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-md);
    transform: translateX(3px);
}

.project-row .proj-name { font-weight: 600; font-size: .9rem; letter-spacing: -.01em; }

.project-row .proj-meta {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.project-row .proj-meta svg { width: 12px; height: 12px; stroke: var(--text-muted); stroke-width: 2; fill: none; }
.proj-last-update { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px; padding: 1px 6px; }
.proj-last-update svg { width: 10px; height: 10px; }
.proj-deadline-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card-alt);
    width: 90px;
}
.proj-deadline-cell.expired {
    background: rgba(239,68,68,.07);
    border-color: rgba(239,68,68,.3);
}
.proj-deadline-lbl {
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.proj-deadline-date {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}
.proj-deadline-cell.expired .proj-deadline-date { color: var(--red); }
.proj-deadline-cell.expired .proj-deadline-lbl  { color: var(--red); opacity: .7; }

.project-row .proj-cell { font-size: .82rem; color: var(--text-secondary); }
.proj-cell-importo { padding-left: 8px; text-align: center; }
.proj-effort-prev { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }

.proj-effort-wrap { display: flex; flex-direction: column; gap: 3px; }

.proj-effort-row {
    display: flex; align-items: baseline; gap: 3px;
    font-size: .8rem; flex-wrap: wrap;
}
.proj-effort-imp  { font-weight: 700; color: var(--text); }
.proj-effort-div  { color: var(--text-muted); font-weight: 400; }
.proj-effort-prev-val { color: var(--text-muted); font-weight: 500; }
.proj-effort-unit { font-size: .72rem; color: var(--text-muted); font-weight: 400; }

.proj-effort-pct {
    margin-left: auto;
    font-size: .68rem; font-weight: 700;
    padding: 1px 5px; border-radius: 20px;
    font-family: var(--font-mono);
}
.pct-green { background: var(--green-bg);  color: var(--green-text); }
.pct-amber { background: var(--amber-bg);  color: var(--amber-text); }
.pct-red   { background: var(--red-bg);    color: var(--red-text);   }

.effort-green { color: var(--green) !important; }
.effort-amber { color: var(--amber) !important; }
.effort-red   { color: var(--red)   !important; }

.marg-badge {
    display: inline-block;
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 20px;
    font-family: var(--font-mono);
}
.marg-pos { background: var(--green-bg);  color: var(--green-text);  border: 1px solid var(--green);  }
.marg-neg { background: var(--red-bg);    color: var(--red-text);    border: 1px solid var(--red);    }
.project-row .proj-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.badge-attivo { background: var(--green-bg); color: var(--green-text); }
.badge-attivo::before { background: var(--green); }

.badge-manutenzione { background: var(--amber-bg); color: var(--amber-text); }
.badge-manutenzione::before { background: var(--amber); }

.badge-sospeso { background: var(--red-bg); color: var(--red-text); }
.badge-sospeso::before { background: var(--red); }

.badge-terminato { background: var(--blue-bg); color: var(--blue-text); }
.badge-terminato::before { background: var(--blue); }

.badge-commessa { background: var(--green-bg); color: var(--green); }
.badge-commessa::before { background: var(--green); }

.badge-rd { background: var(--blue-bg); color: var(--blue-text); }
.badge-rd::before { background: var(--blue); }

.badge-non-monitorare {
    background: rgba(168,85,247,.1);
    color: rgb(168,85,247);
    border: 1px dashed rgba(168,85,247,.4);
    font-weight: 500;
}
.badge-non-monitorare::before { display: none; }
.badge-non-monitorare svg {
    width: 11px; height: 11px;
    stroke: currentColor; stroke-width: 2; fill: none;
    flex-shrink: 0;
}

/* ── Non-monitorare project row ──────────────────────────── */
.project-row.non-monitorare {
    border-left: 3px solid var(--text-muted);
    background: var(--bg-card-alt);
    opacity: .82;
}
.project-row.non-monitorare:hover {
    opacity: 1;
    border-left-color: var(--accent);
}
.project-row.non-monitorare .proj-name {
    color: var(--text-secondary);
}

.nm-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 5px;
    color: var(--text-muted);
}
.nm-icon svg {
    width: 14px; height: 14px;
    stroke: currentColor; stroke-width: 1.8; fill: none;
}

/* ── Form toggle (non monitorare checkbox) ───────────────── */
.form-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.form-toggle-label input[type="checkbox"] { display: none; }

.form-toggle-track {
    width: 38px;
    height: 20px;
    background: var(--border-hover);
    border-radius: 10px;
    position: relative;
    transition: background .25s ease;
    flex-shrink: 0;
}
.form-toggle-track::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: var(--bg-card);
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.form-toggle-label input:checked + .form-toggle-track { background: var(--text-muted); }
.form-toggle-label input:checked + .form-toggle-track::after { transform: translateX(18px); }

.form-toggle-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.form-toggle-text svg {
    width: 15px; height: 15px;
    stroke: currentColor; stroke-width: 2; fill: none;
}

/* ── N/D (non disponibile) ───────────────────────────────── */
.nd-val {
    font-size: .8em;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .04em;
    font-style: italic;
}

/* N/D checkbox inline in form label */
.effort-prev-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nd-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    transition: all var(--transition);
    user-select: none;
}
.nd-check:hover { border-color: var(--border-hover); color: var(--text); }
.nd-check input[type="checkbox"] {
    width: 12px; height: 12px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Muted style for disabled effort input */
input[type="number"]:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: var(--bg-hover) !important;
}

/* ── Detail ──────────────────────────────────────────────── */
.detail-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 28px; flex-wrap: wrap; gap: 14px;
}

.detail-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; }

.detail-updated {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: .78rem; color: var(--text-muted);
}
.detail-updated svg { width: 13px; height: 13px; flex-shrink: 0; }

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin-bottom: 16px;
}

.info-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
    border-left-width: 3px;
}

/* Temi widget dettaglio progetto */
.info-theme-violet { border-left-color: #8b5cf6; background: linear-gradient(135deg, rgba(139,92,246,.07) 0%, var(--bg-card) 65%); }
.info-theme-slate  { border-left-color: #64748b; background: linear-gradient(135deg, rgba(100,116,139,.07) 0%, var(--bg-card) 65%); }
.info-theme-blue   { border-left-color: #3b82f6; background: linear-gradient(135deg, rgba(59,130,246,.07) 0%, var(--bg-card) 65%); }
.info-theme-amber  { border-left-color: #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,.07) 0%, var(--bg-card) 65%); }
.info-theme-orange { border-left-color: #f97316; background: linear-gradient(135deg, rgba(249,115,22,.07) 0%, var(--bg-card) 65%); }
.info-theme-green  { border-left-color: #10b981; background: linear-gradient(135deg, rgba(16,185,129,.09) 0%, var(--bg-card) 65%); }
.info-theme-red    { border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,.10) 0%, var(--bg-card) 65%); }
.info-theme-teal   { border-left-color: #14b8a6; background: linear-gradient(135deg, rgba(20,184,166,.07) 0%, var(--bg-card) 65%); }
.info-theme-rose   { border-left-color: #f43f5e; background: linear-gradient(135deg, rgba(244,63,94,.07) 0%, var(--bg-card) 65%); }

/* Varianti forti per Effort totale */
.info-theme-green-strong  { border-left-color: #10b981; border-left-width: 4px; background: linear-gradient(135deg, rgba(16,185,129,.22) 0%, var(--bg-card) 70%); }
.info-theme-amber-strong  { border-left-color: #f59e0b; border-left-width: 4px; background: linear-gradient(135deg, rgba(245,158,11,.22) 0%, var(--bg-card) 70%); }
.info-theme-red-strong    { border-left-color: #ef4444; border-left-width: 4px; background: linear-gradient(135deg, rgba(239,68,68,.22) 0%, var(--bg-card) 70%); }

.info-item .info-label {
    font-size: .7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .07em;
    font-weight: 600; margin-bottom: 5px;
}

/* Colori label per ogni tema — specificità > .info-item .info-label */
.info-item.info-theme-violet .info-label { color: #8b5cf6; }
.info-item.info-theme-slate  .info-label { color: #64748b; }
.info-item.info-theme-blue   .info-label { color: #3b82f6; }
.info-item.info-theme-amber  .info-label { color: #f59e0b; }
.info-item.info-theme-orange .info-label { color: #f97316; }
.info-item.info-theme-green  .info-label { color: #10b981; }
.info-item.info-theme-red    .info-label { color: #ef4444; }
.info-item.info-theme-teal   .info-label { color: #14b8a6; }
.info-item.info-theme-rose   .info-label { color: #f43f5e; }
.info-item.info-theme-green-strong .info-label { color: #10b981; }
.info-item.info-theme-amber-strong .info-label { color: #f59e0b; }
.info-item.info-theme-red-strong   .info-label { color: #ef4444; }

.info-item .info-value { font-size: .95rem; font-weight: 600; }
.info-item .info-value.num { color: #1a1a1a; }

/* Valore Effort totale = stesso colore della label */
.info-item.info-theme-violet .info-value.num { color: #8b5cf6; }
.info-item.info-theme-slate  .info-value.num { color: #64748b; }
.info-item.info-theme-blue   .info-value.num { color: #3b82f6; }
.info-item.info-theme-amber  .info-value.num { color: #f59e0b; }
.info-item.info-theme-orange .info-value.num { color: #f97316; }
.info-item.info-theme-green  .info-value.num { color: #10b981; }
.info-item.info-theme-red    .info-value.num { color: #ef4444; }
.info-item.info-theme-teal   .info-value.num { color: #14b8a6; }
.info-item.info-theme-rose   .info-value.num { color: #f43f5e; }
.info-item.info-theme-green-strong .info-value.num { color: #10b981; }
.info-item.info-theme-amber-strong .info-value.num { color: #f59e0b; }
.info-item.info-theme-red-strong   .info-value.num { color: #ef4444; }

/* Widget largo (occupa 2 colonne nella grid) */
.info-item-wide { grid-column: span 2; }

/* Periodo R&D */
.info-date-range { display: flex; flex-direction: column; gap: 3px; }
.info-date-row { display: flex; gap: 6px; font-size: .88rem; font-weight: 600; }
.info-date-lbl { font-size: .72rem; font-weight: 400; color: var(--text-muted); width: 46px; flex-shrink: 0; align-self: center; }

/* Team widget (TL + PM unificati) */
.info-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.info-team > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-team > span svg {
    width: 13px; height: 13px;
    stroke: var(--accent); stroke-width: 2; fill: none;
    flex-shrink: 0;
}
.info-team-role {
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    flex-shrink: 0;
}
.info-team-sep {
    height: 1px;
    background: var(--border);
}

/* ── Activities Grid (CSS Grid div layout) ───────────────── */
.detail-annual-charts { margin-bottom: 24px; }
.activities-section { margin-top: 0; }
.activities-section h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }

/* 9-column grid: name | stato | inizio | fine | eff-prev | effort | costo | importo | actions */
:root { --act-cols: 1fr 100px 86px 86px 110px 86px 90px 120px 80px; }

.act-grid-container {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}

.act-grid-header {
    display: grid;
    grid-template-columns: var(--act-cols);
    padding: 0;
    background: var(--bg-active);
    border-bottom: 2px solid var(--border);
    border-radius: 8px 8px 0 0;
}
.act-grid-header > div {
    padding: 7px 12px;
    font-size: .68rem; font-weight: 700;
    color: var(--text-inverse);
    text-transform: uppercase; letter-spacing: .08em;
    line-height: 1.2;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.act-hdr-unit {
    font-size: .62rem; font-weight: 500;
    opacity: .6; letter-spacing: .04em;
    text-transform: lowercase;
    margin-top: 1px;
}
/* Colonne numeriche (eff-prev, effort, costo, importo): allineate a destra come i dati */
.act-grid-header > div:nth-child(n+5):nth-child(-n+8) { text-align: right; }
/* Header dentro un gruppo: bordo top per separare dall'header del gruppo */
.act-rows-wrap .act-grid-header {
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.act-grid-row {
    display: grid;
    grid-template-columns: var(--act-cols);
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.act-grid-row:last-child { border-bottom: none; }

.act-data-row > div {
    padding: 10px 12px;
    font-size: .85rem;
    color: var(--text-secondary);
}
.act-data-row:hover { background: var(--bg-hover); }
.act-row-planned { border-left: 3px solid #4caf50 !important; }
[data-theme="dark"] .act-row-planned { border-left: 3px solid #66bb6a !important; }


.act-col-date { white-space: nowrap; }
.act-col-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; padding: 0 8px !important; }

/* ── Drag handle gruppi ──────────────────────────────────── */
.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: var(--text-muted);
    opacity: 0;
    cursor: grab;
    transition: opacity .15s;
    border-radius: 4px;
}
.drag-handle svg { width: 14px; height: 14px; }
.drag-handle:active { cursor: grabbing; }
.act-group-header:hover .group-drag-handle { opacity: 1; }
.drag-handle:hover { opacity: 1 !important; background: rgba(255,255,255,.2); }

/* ── Drag nativo gruppi ──────────────────────────────────── */
.act-group-block.group-dragging { opacity: .4; }
.act-group-header.group-drag-over {
    outline: 2px solid rgba(255,255,255,.6);
    outline-offset: -2px;
}


/* ── Activity Groups / Accordion ────────────────────────────── */
.act-group-block { border-bottom: 1px solid var(--border); }
.act-group-block:last-child { border-bottom: none; }

.act-group-header {
    cursor: pointer; user-select: none;
    background: #3a5fa8;
    border-bottom: 1px solid #2e4f8a;
}
[data-theme="dark"] .act-group-header {
    background: #2d4f8a;
    border-bottom: 1px solid #223d6e;
}
.act-group-header:hover { filter: brightness(1.1); }

/* Group header uses 2-column grid: drag handle + everything else */
.act-group-header.act-grid-row {
    grid-template-columns: 28px 1fr;
}

.act-col-group-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 0;
}

.act-group-header .group-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-weight: 600;
    font-size: .88rem;
}

.act-group-header .group-summary {
    color: rgba(255,255,255,.75);
}

.act-group-header .group-summary .num {
    color: rgba(255,255,255,.95);
}

.act-group-header .group-chevron svg {
    stroke: #fff;
}

.group-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.btn-icon-white { color: rgba(255,255,255,.8) !important; }
.btn-icon-white:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }

.btn-icon[title="Elimina"] { color: var(--red) !important; }
.btn-icon[title="Elimina"]:hover { background: rgba(239,68,68,.12) !important; color: var(--red) !important; }

.btn-icon[title="Elimina gruppo"] { color: #ffaaaa !important; }
.btn-icon[title="Elimina gruppo"]:hover { background: rgba(255,140,140,.18) !important; color: #ff8c8c !important; }

.group-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.gsm-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 10px;
    min-width: 150px;
    background: rgba(255,255,255,.15);
    border-radius: 20px;
    font-size: .76rem;
    color: rgba(255,255,255,.9);
    white-space: nowrap;
}

.gsm-chip .num { color: #fff; font-weight: 600; }

.gsm-chip.gsm-ok {
    background: rgba(13,159,110,.75);
    color: #fff;
    font-weight: 600;
}

.gsm-chip.gsm-equal {
    background: rgba(217,119,6,.75);
    color: #fff;
    font-weight: 600;
}

.gsm-chip.gsm-over {
    background: rgba(220,38,38,.7);
    color: #fff;
    font-weight: 600;
}

.group-chevron {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.group-chevron svg {
    width: 14px; height: 14px;
    stroke: var(--accent); stroke-width: 2.5; fill: none;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.group-chevron.open svg { transform: rotate(90deg); }

/* Activity rows inside a group */
.act-in-group { background: var(--accent-soft); border-left: 3px solid var(--accent-glow); }
.act-in-group:hover { background: color-mix(in srgb, var(--accent) 10%, transparent) !important; }

/* Ungrouped rows */
.act-rows-wrap[data-type="ungrouped"] .act-data-row { background: var(--bg-card); }
.act-rows-wrap[data-type="ungrouped"] .act-data-row:hover { background: var(--bg-hover) !important; }

/* ── Rinomina Gruppo ─────────────────────────────────────── */
.modal:has(.group-rename-body) {
    width: 360px;
    max-height: fit-content;
}
.modal:has(.group-rename-body) .modal-body {
    padding: 20px 24px 12px;
}
.modal:has(.group-rename-body) .modal-footer {
    padding: 12px 24px;
}

/* ── Confirm Dialog ──────────────────────────────────────── */
.modal:has(.confirm-body) {
    width: 380px;
    height: 300px;
}
.modal:has(.confirm-body) .modal-header {
    padding: 16px 22px;
}
.modal:has(.confirm-body) .modal-body {
    padding: 18px 22px 10px;
}
.modal:has(.confirm-body) .modal-footer {
    padding: 12px 22px;
}

.confirm-body {
    text-align: center;
    padding: 4px 0 2px;
}

.confirm-icon-wrap {
    width: 50px; height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.confirm-icon-wrap svg {
    width: 22px; height: 22px;
    stroke-width: 1.8; fill: none;
}

.confirm-icon-wrap.danger  { background: var(--red-bg);    }
.confirm-icon-wrap.danger  svg { stroke: var(--red);   }
.confirm-icon-wrap.warning { background: var(--amber-bg);  }
.confirm-icon-wrap.warning svg { stroke: var(--amber); }
.confirm-icon-wrap.success { background: var(--green-bg);  }
.confirm-icon-wrap.success svg { stroke: var(--green); }

.confirm-message {
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 340px;
    margin: 0 auto;
}

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
    z-index: 500; align-items: center; justify-content: center;
}

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

.modal {
    display: block;
    position: relative;
    top: auto; left: auto;
    z-index: auto;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 16px; width: 560px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); animation: modalIn .3s cubic-bezier(.4,0,.2,1);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

.modal-header h3 { font-size: 1.1rem; font-weight: 700; }
.modal-body { padding: 26px; }

.modal-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 18px 26px; border-top: 1px solid var(--border);
}

/* ── Forms ────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.form-row.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
    font-size: .76rem; color: var(--text-muted);
    font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 14px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-family: var(--font); font-size: .88rem;
    outline: none; transition: all var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }

.form-group textarea { resize: vertical; min-height: 80px; }

/* ── Progress Bar ────────────────────────────────────────── */
.progress-bar { height: 5px; background: var(--bg-input); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.progress-bar .fill { height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.progress-bar .fill.green { background: var(--green); }
.progress-bar .fill.amber { background: var(--amber); }
.progress-bar .fill.red   { background: var(--red); }

/* ── Empty State ─────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; stroke: var(--text-muted); stroke-width: 1.2; fill: none; margin-bottom: 14px; opacity: .5; }
.empty-state p { font-size: .95rem; }

/* ── Toast ───────────────────────────────────────────────── */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }

.toast {
    padding: 12px 20px 12px 16px; border-radius: var(--radius);
    font-size: .88rem; font-weight: 500; color: #fff;
    box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 8px;
    animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
}

.toast svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.toast.success { background: #059669; }
.toast.error   { background: #dc2626; }
.toast.info    { background: var(--accent); }

@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(40px); } }

/* ── Numbers ─────────────────────────────────────────────── */
.num { font-family: var(--font-mono); font-size: .85rem; font-weight: 500; text-align: right; }
.num-currency { color: var(--green); }
.num-effort   { color: var(--amber); }

/* ── Note Block ──────────────────────────────────────────── */
.note-block {
    background: var(--bg-card-alt); border-left: 3px solid var(--accent);
    padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .88rem; color: var(--text-secondary); line-height: 1.7;
    margin-top: 14px; white-space: pre-wrap;
}

/* ── Top Project Row ─────────────────────────────────────── */
.top-project-row {
    display: flex; align-items: center; gap: 14px;
    padding: 0 16px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 6px; box-shadow: var(--shadow-card); transition: all var(--transition);
    height: 72px; overflow: hidden;
}

.top-project-row:hover { transform: translateX(3px); border-color: var(--border-hover); }
.top-project-row .rank { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); width: 36px; text-align: center; display: flex; align-items: center; gap: 3px; }
.rank-medal { font-size: 1.3rem; line-height: 1; }
.top-project-row .top-name { flex: 1; font-weight: 600; font-size: .92rem; }
.top-project-row .badge { width: 90px; text-align: center; flex-shrink: 0; }
.top-project-row .top-amount { font-family: var(--font-mono); color: var(--green); font-weight: 500; font-size: .88rem; }

/* Top row style */
.top-project-row.top {
    border-left: 3px solid var(--green-bg);
    background: var(--green-bg);
}
.top-project-row.top:hover { border-left-color: var(--green); }
.rank.top { color: var(--green) !important; }

/* Flop row style */
.top-project-row.flop {
    border-left: 3px solid var(--red-bg);
    background: var(--red-bg);
}
.top-project-row.flop:hover { border-left-color: var(--red); }
.rank.flop { color: var(--red) !important; }

/* Top / Flop separator */
.top-flop-sep {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 2px;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.top-flop-sep.green { color: var(--green); }
.top-flop-sep.green .top-flop-line { background: var(--green-bg); }
.top-flop-sep.red   { color: var(--red); }
.top-flop-sep.red   .top-flop-line { background: var(--red-bg); }
.top-flop-line { flex: 1; height: 1px; }

/* Rendimento row extras */
.top-rend-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.top-rend-info .top-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-rend-effort { font-size: .74rem; color: var(--text-muted); font-family: var(--font-mono); }

.rend-bar-wrap {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.rend-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.rend-bar-fill.positive { background: var(--green); }
.rend-bar-fill.negative { background: var(--red); }

.rend-pct {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 700;
    min-width: 64px;
    text-align: right;
}
.rend-positive { color: var(--green); }
.rend-neutral  { color: var(--amber); }
.rend-negative { color: var(--red); }

/* ── Annual charts ───────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 28px;
}
.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-card);
    min-width: 0;
    overflow: hidden;
}
.chart-card-title {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 16px;
}
.chart-wrap {
    position: relative;
    height: 220px;
}
@media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
}

/* ── Top 5 side-by-side grid ─────────────────────────────── */
.top5-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .top5-grid { grid-template-columns: 1fr; }
}

/* ── Mobile ──────────────────────────────────────────────── */
.mobile-toggle {
    display: none; position: fixed; top: 16px; left: 16px; z-index: 200;
    width: 40px; height: 40px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md);
}

.mobile-toggle svg { width: 20px; height: 20px; stroke: var(--text); stroke-width: 2; fill: none; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main { margin-left: 0; padding: 24px 16px; padding-top: 64px; }
    .mobile-toggle { display: flex !important; }
    .project-row { grid-template-columns: 1fr 1fr; }
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 20px 0 4px;
    flex-wrap: wrap;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--surface, var(--bg-card));
    color: var(--text);
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}
.page-btn:hover:not([disabled]) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    cursor: default;
}
.page-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 36px;
    color: var(--text-muted);
    font-size: .85rem;
    user-select: none;
}
.pagination-info {
    font-size: .78rem;
    color: var(--text-muted);
    margin-left: 10px;
    white-space: nowrap;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }