/* Extracted from src/pages/weekplan/index.html — Week Plan page styles */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--topbar:56px;
/* ── Chip colori ADHD — light mode ── */
--chip-T-bg:#dcfce7; --chip-T-text:#14532d; --chip-T-border:#16a34a;
--chip-F-bg:#dbeafe; --chip-F-text:#1e3a8a; --chip-F-border:#3b82f6;
--chip-S-bg:#fdf4ff; --chip-S-text:#6b21a8; --chip-S-border:#a855f7;
--chip-N-bg:#f1f5f9; --chip-N-text:#475569; --chip-N-border:#94a3b8;
--chip-M-bg:#fef3c7; --chip-M-text:#78350f; --chip-M-border:#d97706;
--chip-U-bg:#fee2e2; --chip-U-text:#7f1d1d; --chip-U-border:#ef4444;
/* ── Filtri active — light ── */
--fil-T-bg:#dcfce7; --fil-T-text:#14532d; --fil-T-border:#16a34a;
--fil-F-bg:#dbeafe; --fil-F-text:#1e3a8a; --fil-F-border:#3b82f6;
--fil-S-bg:#fdf4ff; --fil-S-text:#6b21a8; --fil-S-border:#a855f7;
--fil-N-bg:#f1f5f9; --fil-N-text:#475569; --fil-N-border:#94a3b8;
--fil-M-bg:#fef3c7; --fil-M-text:#78350f; --fil-M-border:#d97706;
--fil-U-bg:#fee2e2; --fil-U-text:#991b1b; --fil-U-border:#ef4444;
/* ── Badge fromContent — light ── */
--cp-rev-bg:#fef3c7; --cp-rev-text:#78350f; --cp-rev-border:#d97706;
--cp-appr-bg:#dbeafe; --cp-appr-text:#1e3a8a; --cp-appr-border:#3b82f6;
--cp-ok-bg:#dcfce7; --cp-ok-text:#14532d; --cp-ok-border:#16a34a;
--cp-pub-bg:#ede9fe; --cp-pub-text:#4c1d95; --cp-pub-border:#7c3aed;
/* ── Oggi — light ── */
--today-col-tint:rgba(0,160,0,.06);
--today-name-color:#00a000;
--today-circle-bg:#00cc00;
--today-circle-text:#fff;
--today-circle-shadow:rgba(0,160,0,.25);
/* ── Stati task Plan — light ── */
--st-not_started-bg:#f1f5f9; --st-not_started-fg:#475569;
--st-planned-bg:#dbeafe; --st-planned-fg:#1d4ed8;
--st-in_progress-bg:#dcfce7; --st-in_progress-fg:#15803d;
--st-design-bg:#ede9fe; --st-design-fg:#6d28d9;
--st-review-bg:#ffedd5; --st-review-fg:#c2410c;
--st-on_hold-bg:#efedfb; --st-on_hold-fg:#6d5fd0;
--st-closed-bg:#f3f4f6; --st-closed-fg:#4b5563;
--st-cancelled-bg:#fee2e2; --st-cancelled-fg:#b91c1c;
}
[data-theme="dark"]{
/* ── Chip colori ADHD — dark mode (più luminosi per contrasto) ── */
--chip-T-bg:#1e4620; --chip-T-text:#86efac; --chip-T-border:#22c55e;
--chip-F-bg:#1a3a5c; --chip-F-text:#93c5fd; --chip-F-border:#60a5fa;
--chip-S-bg:#3d1545; --chip-S-text:#e879f9; --chip-S-border:#c026d3;
--chip-N-bg:#28283a; --chip-N-text:#b0b0c8; --chip-N-border:#6060a0;
--chip-M-bg:#402e00; --chip-M-text:#fbbf24; --chip-M-border:#f59e0b;
--chip-U-bg:#5c1a1a; --chip-U-text:#fca5a5; --chip-U-border:#f87171;
/* ── Filtri active — dark ── */
--fil-T-bg:rgba(13,255,0,.1); --fil-T-text:#4ade80; --fil-T-border:rgba(13,255,0,.4);
--fil-F-bg:rgba(56,189,248,.1); --fil-F-text:#7dd3fc; --fil-F-border:rgba(56,189,248,.4);
--fil-S-bg:rgba(217,70,239,.1); --fil-S-text:#f0abfc; --fil-S-border:rgba(217,70,239,.4);
--fil-N-bg:rgba(160,160,176,.08);--fil-N-text:#a0a0b0; --fil-N-border:rgba(160,160,176,.3);
--fil-M-bg:rgba(245,158,11,.1); --fil-M-text:#fbbf24; --fil-M-border:rgba(245,158,11,.4);
--fil-U-bg:rgba(239,68,68,.12); --fil-U-text:#fca5a5; --fil-U-border:rgba(239,68,68,.4);
/* ── Badge fromContent — dark ── */
--cp-rev-bg:#2a1800; --cp-rev-text:#fbbf24; --cp-rev-border:#78350f;
--cp-appr-bg:#1e3a5f; --cp-appr-text:#93c5fd; --cp-appr-border:#1e40af;
--cp-ok-bg:#0d2b0c; --cp-ok-text:#4ade80; --cp-ok-border:rgba(13,255,0,.4);
--cp-pub-bg:#2e1a4a; --cp-pub-text:#c4b5fd; --cp-pub-border:#7c3aed;
/* ── Oggi — dark ── */
--today-col-tint:rgba(13,255,0,.05);
--today-name-color:#0dff00;
--today-circle-bg:#0dff00;
--today-circle-text:#0a1a00;
--today-circle-shadow:rgba(13,255,0,.2);
--bg:#0f0f10;--surface:#1a1a1e;--surface-2:#111114;--surface-lt:#252530;
--border:#2a2a35;--border-lt:#222230;
--text:#e8e8f0;--text-2:#9090a8;--text-3:#606078;
--green-lt:#0d2b0c;--green-text:#0a1a00;
--amber-lt:#2a2800;--amber-dk:#f0b429;
--blue-lt:#0a1628;--blue-dk:#60a5fa;
--red-lt:#450a0a;--red-dk:#f87171;
--pink-lt:#2a0a1a;--pink-dk:#f472b6;
/* ── Stati task Plan — dark (luminosi per contrasto) ── */
--st-not_started-bg:#1e293b; --st-not_started-fg:#cbd5e1;
--st-planned-bg:#172554; --st-planned-fg:#93c5fd;
--st-in_progress-bg:#14321c; --st-in_progress-fg:#86efac;
--st-design-bg:#2e1a4a; --st-design-fg:#c4b5fd;
--st-review-bg:#3a1e0a; --st-review-fg:#fdba74;
--st-on_hold-bg:#241f45; --st-on_hold-fg:#c7bffb;
--st-closed-bg:#1f2937; --st-closed-fg:#9ca3af;
--st-cancelled-bg:#450a0a; --st-cancelled-fg:#fca5a5;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
/* ── Topbar ─────────────────────────────────────────────── */
.topbar{
height:var(--topbar);background:#0f0f11 !important;
display:flex;align-items:center;gap:8px;
padding:0 16px 0 20px;position:sticky;top:0;z-index:200;
border-bottom:0.5px solid rgba(255,255,255,.08);
flex-shrink:0;
}
.brand-wrap{display:flex;align-items:center;gap:9px;}
.brand-mark{
width:28px;height:28px;border-radius:var(--r);
background:var(--green);display:flex;align-items:center;
justify-content:center;font-size:12px;font-weight:800;color:var(--green-text);
flex-shrink:0;
}
.brand-name{font-size:var(--fs-sm);font-weight:700;color:var(--bg);letter-spacing:var(--ls-tight);}
.topbar-spacer{flex:1;}
.tb-btn{
width:30px;height:30px;border-radius:var(--r);
border:none;background:rgba(255,255,255,.06);
cursor:pointer;font-size:13px;color:rgba(255,255,255,.5);
display:flex;align-items:center;justify-content:center;
transition:background var(--t-fast);
}
.tb-btn:hover{background:rgba(255,255,255,.12);}
.av{
width:32px;height:32px;border-radius:50%;
background:#F5C842;display:flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;color:#1a1a1a;cursor:pointer;
}
/* ── App nav icons in topbar ── */
.topbar-apps{
display:flex;align-items:center;gap:2px;
margin-left:16px;padding-left:16px;
border-left:0.5px solid rgba(255,255,255,.1);
}
.app-nav-btn{
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:4px 8px;border-radius:var(--r);text-decoration:none;
transition:background var(--t-fast);cursor:pointer;
}
.app-nav-btn:hover{background:rgba(255,255,255,.08);}
.app-nav-btn.active{background:rgba(255,255,255,.1);}
.app-nav-icon{
width:26px;height:26px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;flex-shrink:0;
}
.app-nav-label{
font-size:9px;font-weight:500;
color:rgba(255,255,255,.4);white-space:nowrap;
letter-spacing:.01em;
}
.app-nav-btn:hover .app-nav-label{color:rgba(255,255,255,.7);}
/* ── Planning section header ─────────────────────────────── */
.planning-section{
background:var(--surface);
border-bottom:var(--bw) solid var(--border);
}
[data-theme="dark"] .planning-section {
background: #15151e;
}
.planning-header{
display:flex;align-items:center;justify-content:space-between;
padding:10px 8px 6px;
}
.period-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--text);letter-spacing:var(--ls-tight);}
.nav-group{display:flex;align-items:center;gap:4px;}
.nav-btn{
width:26px;height:26px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
cursor:pointer;color:var(--text-2);font-size:14px;
display:flex;align-items:center;justify-content:center;
transition:background var(--t-fast);
}
.nav-btn:hover{background:var(--surface-lt);}
.today-btn{
height:26px;padding:0 10px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
cursor:pointer;color:var(--text-2);font-size:var(--fs-xs);font-weight:500;
transition:background var(--t-fast);
}
.today-btn:hover{background:var(--surface-lt);}
/* ── Filtri ──────────────────────────────────────────────── */
.filters-bar{
display:flex;gap:6px;align-items:center;flex-wrap:wrap;
padding:0 8px 8px;
}
.fil-group{display:flex;gap:2px;flex-wrap:wrap;align-items:center;}
.fil-pill{
height:26px;padding:0 10px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
color:var(--text-3);font-size:var(--fs-xs);font-weight:500;
cursor:pointer;transition:all var(--t-fast);white-space:nowrap;
}
.fil-pill:hover{background:var(--surface-lt);color:var(--text);}
.fil-pill.active-T{background:var(--fil-T-bg);border-color:var(--fil-T-border);color:var(--fil-T-text);font-weight:700;}
.fil-pill.active-F{background:var(--fil-F-bg);border-color:var(--fil-F-border);color:var(--fil-F-text);font-weight:700;}
.fil-pill.active-S{background:var(--fil-S-bg);border-color:var(--fil-S-border);color:var(--fil-S-text);font-weight:700;}
.fil-pill.active-N{background:var(--fil-N-bg);border-color:var(--fil-N-border);color:var(--fil-N-text);font-weight:700;}
.fil-pill.active-meeting{background:var(--fil-M-bg);border-color:var(--fil-M-border);color:var(--fil-M-text);font-weight:700;}
.fil-pill.active-urgente{background:var(--fil-U-bg);border-color:var(--fil-U-border);color:var(--fil-U-text);font-weight:700;}
.fil-pill.active-all{background:var(--surface-lt);border-color:var(--text-2);color:var(--text);font-weight:600;}
.fil-sep{width:1px;height:16px;background:var(--border);margin:0 4px;}
.fil-count{font-size:var(--fs-xs);color:var(--text-3);margin-left:auto;white-space:nowrap;}
/* ── Week grid ───────────────────────────────────────────── */
.week-grid{
display:grid;grid-template-columns:repeat(7,1fr);
gap:15px;padding:10px 8px 0;
transition:grid-template-columns .2s ease;
}
.week-grid.no-weekend{grid-template-columns:repeat(5,1fr);}
.week-grid.no-weekend .day-col.weekend-col{display:none;}
.day-col{
box-sizing: border-box;
border-top:2px solid var(--border);
padding-top:16px;min-height:calc(57px + 8 * 49px);
background-image: repeating-linear-gradient(
to bottom,
transparent,
transparent 48px,
var(--border) 48px,
var(--border) 49px
);
background-position: 0 57px;
}
.day-col.today{
box-sizing: border-box;
border-top:4px solid var(--green);
background-image:
repeating-linear-gradient(
to bottom,transparent,transparent 48px,
var(--border) 48px,var(--border) 49px
),
linear-gradient(to bottom,var(--today-col-tint) 0%,transparent 140px);
background-position:0 57px,0 0;
}
.day-col.today .day-name{color:var(--today-name-color);}
.day-col.weekend{opacity:.40;}
.day-head{text-align:center;margin-bottom:14px;}
.day-name{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;}
.day-num{
font-size:20px;font-weight:400;color:var(--text);
display:flex;align-items:center;justify-content:center;
}
.day-num.today-circle{
background:var(--today-circle-bg);color:var(--today-circle-text);font-weight:800;
width:32px;height:32px;border-radius:50%;margin:0 auto;font-size:15px;
box-shadow:0 0 0 3px var(--today-circle-shadow);
}
.task-chips{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;}
/* ── Chips ───────────────────────────────────────────────── */
.chip{
font-size:var(--fs-xs);padding:9px 11px;border-radius:var(--r);
line-height:1.35;cursor:grab;display:flex;
align-items:center;justify-content:space-between;gap:4px;
transition:filter var(--t-fast),opacity var(--t-fast);
border:none;
position:relative;user-select:none;
font-weight:500;
}
.chip:active{cursor:grabbing;}
.chip.dragging{opacity:.35;cursor:grabbing;}
.day-col.drag-over .task-chips{
background:var(--green-lt);border-radius:var(--r);
outline:2px dashed var(--green-dk);outline-offset:2px;
}
.later-chips.drag-over{
background:var(--green-lt);border-radius:var(--r);
outline:2px dashed var(--green-dk);outline-offset:2px;
}
.chip:hover{filter:brightness(1.1);}
[data-theme="dark"] .chip:hover{filter:brightness(1.18);}
/* ── Chip ADHD: 3 segnali per tipo — sfondo, bordo sinistro, testo ── */
.chip.tipo-T{background:var(--chip-T-bg);color:var(--chip-T-text);border-left:3px solid var(--chip-T-border);}
.chip.tipo-F{background:var(--chip-F-bg);color:var(--chip-F-text);border-left:3px solid var(--chip-F-border);}
.chip.tipo-S{background:var(--chip-S-bg);color:var(--chip-S-text);border-left:3px solid var(--chip-S-border);}
.chip.tipo-N{background:var(--chip-N-bg);color:var(--chip-N-text);border-left:3px solid var(--chip-N-border);}
.chip.tipo-meeting{background:var(--chip-M-bg);color:var(--chip-M-text);border-left:3px solid var(--chip-M-border);}
.chip.tipo-urgente{
background:var(--chip-U-bg);color:var(--chip-U-text);
border-left:3px solid var(--chip-U-border);
outline:1px solid rgba(239,68,68,.3);outline-offset:1px;
}
[data-theme="dark"] .chip.tipo-urgente {
outline:1.5px solid rgba(248,113,113,.5);outline-offset:1px;
}
.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:var(--fs-xs);}
.chip-av{
width:15px;height:15px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:7px;font-weight:700;flex-shrink:0;
}
.chip-promoted{
display:inline-flex;align-items:center;gap:3px;
padding:1px 6px 1px 4px;border-radius:99px;
font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
flex-shrink:0;border:.5px solid transparent;line-height:1.5;
}
.chip-promoted.cp-revisione{background:var(--cp-rev-bg);color:var(--cp-rev-text);border-color:var(--cp-rev-border);}
.chip-promoted.cp-approvare{background:var(--cp-appr-bg);color:var(--cp-appr-text);border-color:var(--cp-appr-border);}
.chip-promoted.cp-approvato{background:var(--cp-ok-bg);color:var(--cp-ok-text);border-color:var(--cp-ok-border);}
.chip-promoted.cp-pubblicato{background:var(--cp-pub-bg);color:var(--cp-pub-text);border-color:var(--cp-pub-border);}
.chip-promoted.cp-content{background:var(--cp-appr-bg);color:var(--cp-appr-text);border-color:var(--cp-appr-border);}
.chip-promoted.cp-plan{background:var(--cp-ok-bg);color:var(--cp-ok-text);border-color:var(--cp-ok-border);}
.chip-promoted-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.chip-del{
font-size:9px;opacity:0;flex-shrink:0;cursor:pointer;
padding:0 2px;border-radius:2px;line-height:1;
transition:opacity .1s;margin-left:1px;
pointer-events:all;position:relative;z-index:2;
}
.chip:hover .chip-del{opacity:.5;}
.chip-del:hover{opacity:1 !important;}
.add-chip{position:relative;z-index:1;
font-size:var(--fs-xs);padding:4px 7px;border-radius:var(--r);
color:var(--text-3);border:var(--bw) dashed var(--border);
cursor:text;background:transparent;
}
.add-chip:hover{border-color:var(--text-2);color:var(--text-2);}
.add-input{
width:100%;font-size:var(--fs-xs);padding:4px 7px;border-radius:var(--r);
border:1px solid var(--green);background:var(--green-lt);
color:var(--text);outline:none;font-family:var(--font);
}
/* ── Legenda ──────────────────────────────────────────────── */
.legend{
display:flex;gap:14px;padding:8px 8px;flex-wrap:wrap;
border-top:var(--bw) solid var(--border);
}
.leg-item{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--text-3);}
.leg-dot{width:8px;height:8px;border-radius:var(--rs);border:var(--bw) solid transparent;}
/* ── Prima o poi ──────────────────────────────────────────── */
.later-section{
border-top:var(--bw) solid var(--border);
padding:8px 8px 10px;
}
.later-label{
font-size:var(--fs-xs);font-weight:600;color:var(--text-3);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.later-chips{display:flex;gap:5px;flex-wrap:wrap;}
/* ── Quick add ────────────────────────────────────────────── */
.quick-add-bar{
display:flex;align-items:center;gap:6px;
padding:6px 8px;border-top:var(--bw) solid var(--border);
background:var(--surface);position:sticky;bottom:0;
}
.qa-input{
flex:1;height:34px;border:var(--bw) solid var(--border);border-radius:var(--r);
padding:0 12px;font-size:var(--fs-sm);outline:none;background:var(--bg);
color:var(--text);font-family:var(--font);transition:border-color var(--t-fast);
}
.qa-input:focus{border-color:var(--green);}
.qa-tag-btn{
height:34px;padding:0 11px;border-radius:var(--r);
border:var(--bw) solid transparent;background:transparent;
font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:background var(--t-fast);
}
.qa-tag-btn.T{border-color:var(--green-dk);color:var(--green-text);}
.qa-tag-btn.T:hover{background:var(--green-lt);}
.qa-tag-btn.F{border-color:var(--blue-dk);color:var(--blue-dk);}
.qa-tag-btn.F:hover{background:var(--blue-lt);}
.qa-tag-btn.S{border-color:var(--pink-dk);color:var(--pink-dk);}
.qa-tag-btn.S:hover{background:var(--pink-lt);}
.qa-tag-btn.N{border-color:var(--border);color:var(--text-3);}
.qa-tag-btn.N:hover{background:var(--surface-lt);}
.qa-hint{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap;}
.qa-day-picker{display:flex;gap:3px;align-items:center;flex-shrink:0;}
.qa-day-pill{
height:30px;padding:0 9px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
color:var(--text-3);font-size:var(--fs-xs);font-weight:500;
cursor:pointer;transition:all var(--t-fast);white-space:nowrap;
display:flex;flex-direction:column;align-items:center;justify-content:center;
line-height:1.1;
}
.qa-day-pill:hover{background:var(--surface-lt);border-color:var(--text-2);color:var(--text);}
.qa-day-pill.active{
background:var(--green-lt);border-color:var(--green-dk);
color:var(--green-text);font-weight:700;
}
.qa-day-pill.today-pill{border-color:var(--green);color:var(--green-dk);}
.qa-day-pill .pill-day{font-size:9px;opacity:.7;}
.qa-day-pill .pill-num{font-size:12px;font-weight:600;}
.qa-later-pill{
height:30px;padding:0 9px;border-radius:var(--r);
border:var(--bw) dashed var(--border);background:transparent;
color:var(--text-3);font-size:var(--fs-xs);cursor:pointer;transition:all var(--t-fast);
}
.qa-later-pill:hover{border-color:var(--text-2);color:var(--text);}
.qa-later-pill.active{background:var(--amber-lt);border-color:var(--amber-dk);color:var(--amber-dk);font-weight:700;}
/* ── Type Picker overlay ──────────────────────────────────── */
.type-picker-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;
display:flex;align-items:flex-start;justify-content:center;padding-top:100px;
}
.type-picker-box{
background:var(--surface);border-radius:12px;
box-shadow:0 24px 48px rgba(0,0,0,.15);
padding:22px;width:380px;
}
.tp-tit{font-size:var(--fs-xs);font-weight:500;color:var(--text-2);margin-bottom:4px;}
.tp-testo-preview{
font-size:var(--fs-sm);font-weight:600;color:var(--text);
margin-bottom:16px;line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-row{font-size:var(--fs-xs);font-weight:700;color:var(--text-3);text-transform:uppercase;
letter-spacing:.06em;margin-bottom:8px;}
.tp-types{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;}
.tp-type-btn{
padding:10px 12px;border-radius:var(--r);border:var(--bw) solid var(--border);
background:transparent;cursor:pointer;text-align:left;transition:all var(--t-fast);
}
.tp-type-btn:hover{border-color:var(--text-2);background:var(--surface-lt);}
.tp-type-btn.sel{border-width:1.5px;}
.tp-type-btn .tp-label{font-size:var(--fs-sm);font-weight:600;color:var(--text);display:block;margin-bottom:2px;}
.tp-type-btn .tp-sublabel{font-size:var(--fs-xs);color:var(--text-3);}
.tp-actions{display:flex;gap:8px;justify-content:flex-end;}
.tp-cancel{
height:34px;padding:0 14px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
color:var(--text-2);font-size:var(--fs-sm);cursor:pointer;
}
.tp-cancel:hover{background:var(--surface-lt);}
.tp-confirm{
height:34px;padding:0 16px;border-radius:var(--r);border:none;
background:var(--green);color:var(--green-text);
font-size:var(--fs-sm);font-weight:700;cursor:pointer;
}
.tp-confirm:disabled{background:var(--border);color:var(--text-3);cursor:default;}
/* ── Task Form T ──────────────────────────────────────────── */
.form-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;
display:flex;align-items:center;justify-content:center;padding:20px;
}
.form-box{
background:var(--surface);border-radius:12px;
box-shadow:var(--shadow-lg);width:100%;max-width:480px;
max-height:90vh;overflow-y:auto;
}
.form-header{
display:flex;align-items:center;justify-content:space-between;
padding:16px 20px;border-bottom:var(--bw) solid var(--border);
}
.form-title-row{display:flex;align-items:center;gap:8px;}
.form-tag{
font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);
background:var(--green-lt);color:var(--green-text);border:var(--bw) solid var(--green-dk);
}
.form-testo{font-size:var(--fs-sm);font-weight:500;color:var(--text);}
.form-close{
width:28px;height:28px;border-radius:var(--r);border:none;background:transparent;
cursor:pointer;color:var(--text-3);font-size:16px;
display:flex;align-items:center;justify-content:center;
}
.form-close:hover{background:var(--surface-lt);}
.step-bar{
display:flex;align-items:center;gap:10px;
padding:12px 20px;border-bottom:var(--bw) solid var(--border);
}
.step-item{display:flex;align-items:center;gap:4px;}
.step-circle{
width:18px;height:18px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:700;flex-shrink:0;
}
.step-circle.done{background:var(--green);color:var(--green-text);}
.step-circle.active{background:var(--text);color:var(--surface);}
.step-circle.idle{background:var(--border);color:var(--text-3);}
.step-lbl{font-size:var(--fs-xs);}
.step-lbl.active{color:var(--text);font-weight:500;}
.step-lbl.idle{color:var(--text-3);}
.step-lbl.done{color:var(--text-2);}
.step-arrow{color:var(--border);font-size:12px;}
.form-body{padding:16px 20px;}
.form-section-lbl{
font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
letter-spacing:.06em;color:var(--text-3);margin-bottom:8px;
}
.form-back-btn{
font-size:var(--fs-xs);font-weight:500;color:var(--blue-dk);
background:transparent;border:none;cursor:pointer;padding:0;
margin-bottom:12px;display:inline-flex;align-items:center;gap:3px;
}
.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:8px;}
.opt-btn{
width:100%;text-align:left;padding:8px 12px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
cursor:pointer;transition:all var(--t-fast);
}
.opt-btn:hover{background:var(--surface-lt);}
.opt-btn.active{border-color:var(--green);background:var(--green-lt);}
.opt-btn .opt-name{font-size:var(--fs-sm);color:var(--text);display:block;}
.opt-btn .opt-sub{font-size:var(--fs-xs);color:var(--text-3);}
.opt-btn.full{grid-column:1/-1;}
.new-inline{display:flex;gap:6px;align-items:center;margin-top:6px;}
.new-input{
flex:1;height:34px;border:1px solid var(--green);border-radius:var(--r);
padding:0 10px;font-size:var(--fs-sm);outline:none;background:var(--green-lt);
color:var(--text);font-family:var(--font);
}
.new-add-btn{
height:34px;padding:0 12px;border-radius:var(--r);border:none;
background:var(--green);color:var(--green-text);font-size:var(--fs-xs);
font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity var(--t-fast);
}
.new-add-btn:disabled{background:var(--border);color:var(--text-3);cursor:default;}
.new-cancel-btn{
height:34px;padding:0 8px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
cursor:pointer;color:var(--text-3);font-size:var(--fs-xs);
}
.add-new-trigger{
width:100%;padding:8px 12px;margin-top:6px;border-radius:var(--r);
border:var(--bw) dashed var(--green);background:var(--green-lt);
cursor:pointer;color:var(--green-text);font-size:var(--fs-sm);font-weight:500;
text-align:left;transition:opacity var(--t-fast);
}
.no-client-trigger{
width:100%;padding:8px 12px;margin-top:4px;border-radius:var(--r);
border:var(--bw) dashed var(--border);background:transparent;
cursor:pointer;color:var(--text-3);font-size:var(--fs-sm);text-align:left;
}
.fase-btn{
width:100%;padding:8px 12px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
cursor:pointer;transition:all var(--t-fast);text-align:left;margin-bottom:4px;
display:flex;align-items:center;gap:8px;
}
.fase-btn:hover{background:var(--surface-lt);}
.fase-btn.active{border-color:var(--green);background:var(--green-lt);}
.fase-icon{font-size:13px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;}
.fase-name{font-size:var(--fs-sm);color:var(--text);font-weight:500;}
.fase-desc{font-size:var(--fs-xs);color:var(--text-3);}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.action-btn{
padding:12px;border-radius:var(--r);cursor:pointer;text-align:left;
border:var(--bw) solid var(--border);background:transparent;transition:all var(--t-fast);
}
.action-btn:hover{background:var(--surface-lt);}
.action-btn.active-nuovo{border-color:var(--green);background:var(--green-lt);}
.action-btn.active-collega{border-color:var(--blue-dk);background:var(--blue-lt);}
.action-btn-icon{font-size:16px;display:block;margin-bottom:4px;}
.action-btn-name{font-size:var(--fs-sm);font-weight:500;color:var(--text);display:block;}
.action-btn-sub{font-size:var(--fs-xs);color:var(--text-3);}
.search-input{
width:100%;height:32px;border:var(--bw) solid var(--border);border-radius:var(--r);
padding:0 10px;font-size:var(--fs-xs);outline:none;background:var(--bg);
color:var(--text);font-family:var(--font);margin-bottom:8px;
}
.task-option{
padding:8px 12px;border-radius:var(--r);cursor:pointer;
border:var(--bw) solid var(--border);background:transparent;
margin-bottom:4px;display:flex;align-items:center;justify-content:space-between;
transition:all var(--t-fast);
}
.task-option:hover{background:var(--surface-lt);}
.task-option.active{border-color:var(--blue-dk);background:var(--blue-lt);}
.task-option-name{font-size:var(--fs-xs);color:var(--text);}
.task-option-stato{
font-size:9px;padding:1px 6px;border-radius:var(--r-pill);
background:var(--surface-lt);color:var(--text-3);border:var(--bw) solid var(--border);
}
.form-footer{
display:flex;gap:8px;justify-content:flex-end;
padding:12px 20px;border-top:var(--bw) solid var(--border);
}
.btn-cancel{
height:34px;padding:0 16px;border-radius:var(--r);
border:var(--bw) solid var(--border);background:transparent;
color:var(--text-2);font-size:var(--fs-sm);cursor:pointer;
}
.btn-cancel:hover{background:var(--surface-lt);}
.btn-confirm{
height:34px;padding:0 16px;border-radius:var(--r);border:none;
background:var(--green);color:var(--green-text);
font-size:var(--fs-sm);font-weight:700;cursor:pointer;
}
.btn-confirm:disabled{background:var(--border);color:var(--text-3);cursor:default;}
/* ── Task detail panel ────────────────────────────────────── */
.task-panel-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:188;
display:none;align-items:center;justify-content:center;
}
.task-panel-overlay.open{display:flex;}
.task-panel{
width:340px;max-height:88vh;overflow-y:auto;
background:var(--surface);padding:0;
border-radius:12px;box-shadow:var(--shadow-lg);
border:var(--bw) solid var(--border);position:relative;
}
.tp-header{
padding:14px 18px 12px;
border-bottom:var(--bw) solid var(--border);
display:flex;align-items:center;justify-content:space-between;
gap:8px;flex-shrink:0;
}
.tp-header-left{display:flex;align-items:center;gap:8px;}
.tp-edit-label{
font-size:10px;font-weight:700;color:var(--text-3);
text-transform:uppercase;letter-spacing:.06em;
}
.tp-body{padding:18px 18px 14px;}
.tp-tipo{
font-size:var(--fs-xs);font-weight:700;padding:2px 9px;border-radius:var(--r-pill);
display:inline-block;margin-bottom:10px;
}
.tp-testo{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.4;}
.tp-ref{font-size:12px;color:var(--blue-dk);margin-bottom:10px;}
.tp-user{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);}
.tp-promote{margin-top:12px;padding-top:12px;border-top:var(--bw) solid var(--border);}
.tp-promote-lbl{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:6px;}
.tp-promote-btn{
font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--r);
border:var(--bw) solid var(--green);background:var(--green-lt);
color:var(--green-text);cursor:pointer;font-weight:600;
}
.tp-close{
position:absolute;top:12px;right:12px;width:26px;height:26px;
border-radius:var(--r);border:none;background:transparent;cursor:pointer;
color:var(--text-3);font-size:14px;display:flex;align-items:center;justify-content:center;
}
.tp-close:hover{background:var(--surface-lt);}
/* ── Separatore app ───────────────────────────────────────── */
.apps-sep{display:flex;align-items:center;gap:12px;padding:24px 20px 14px;}
.sep-line{flex:1;height:var(--bw);background:var(--border);}
.sep-lbl{
font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
letter-spacing:.08em;color:var(--text-3);white-space:nowrap;
}
/* ── App grid ─────────────────────────────────────────────── */
.apps-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:16px;padding:0 20px 40px;
}
.app-card{
background:var(--surface);border:var(--bw) solid var(--border);
border-radius:12px;padding:24px 24px 20px;
cursor:pointer;text-decoration:none;color:inherit;
display:flex;flex-direction:column;gap:12px;
transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
position:relative;overflow:hidden;
}
.app-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);border-color:var(--green);
}
.app-icon{
width:48px;height:48px;border-radius:10px;background:var(--green);
display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:800;color:var(--green-text);
position:relative;z-index:1;flex-shrink:0;
}
.app-body{position:relative;z-index:1;}
.app-name{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px;letter-spacing:-.02em;}
.app-desc{font-size:var(--fs-xs);color:var(--text-2);line-height:1.55;margin-bottom:12px;}
.app-tags{display:flex;gap:6px;flex-wrap:wrap;}
.app-tag{
font-size:var(--fs-xs);font-weight:500;padding:2px 8px;border-radius:var(--r-pill);
background:var(--surface-lt);border:var(--bw) solid var(--border);color:var(--text-3);
}
.app-arrow{
position:absolute;bottom:20px;right:20px;width:28px;height:28px;
border-radius:50%;background:var(--surface-lt);
display:flex;align-items:center;justify-content:center;
font-size:14px;color:var(--green-dk);transition:all var(--t-fast);z-index:1;
}
.app-card:hover .app-arrow{background:var(--green);color:var(--green-text);transform:translateX(2px);}
/* ── Footer ───────────────────────────────────────────────── */
.footer{
text-align:center;padding:16px;
font-size:var(--fs-xs);color:var(--text-3);
border-top:var(--bw) solid var(--border);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);}
#root{height:calc(100% - 56px);margin-top:56px;}
/* ── Nplan topbar ── */
#nplan-topbar{
position:fixed;top:0;left:0;right:0;height:56px;
background:#0f0f11;display:flex;align-items:center;gap:8px;
padding:0 16px 0 20px;z-index:200;
border-bottom:.5px solid rgba(255,255,255,.08);
font-family:'Inter',sans-serif;box-sizing:border-box;
}
.ntb-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.ntb-mark{width:28px;height:28px;border-radius:8px;background:var(--green);
display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;color:#111;flex-shrink:0;}
.ntb-name{font-size:13px;font-weight:700;color:var(--bg);letter-spacing:-.02em;white-space:nowrap;}
.ntb-nav{display:flex;align-items:center;gap:2px;
margin-left:16px;padding-left:16px;
border-left:.5px solid rgba(255,255,255,.1);flex-shrink:0;}
.ntb-app{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:4px 8px;border-radius:8px;text-decoration:none;transition:background .15s;}
.ntb-app:hover{background:rgba(255,255,255,.08);}
.ntb-icon{width:26px;height:26px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;flex-shrink:0;}
.ntb-lbl{font-size:9px;font-weight:500;color:rgba(255,255,255,.4);}
.ntb-sp{flex:1;}
.ntb-av{width:32px;height:32px;border-radius:50%;background:#F5C842;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:#1a1a1a;}
.ntb-esci{background:transparent;border:none;cursor:pointer;
color:rgba(255,255,255,.4);font-size:12px;padding:4px 8px;
border-radius:8px;font-family:inherit;
display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0;}
.ntb-esci:hover{color:rgba(255,255,255,.8);}
/* Hide sidebar brand duplicate (now in HTML topbar) */
#root>div>div:first-child>div:first-child>div:first-child { display:none !important; }
/* Esci in sidebar — hide it (now in HTML topbar) */
#root>div>div:first-child>div:first-child>button:first-of-type { display:none !important; }
/* ── WeekPlan unified topbar ── */
.wp-topbar{height:48px;background:#0f0f11;display:flex;align-items:center;
padding:0 16px;position:sticky;top:0;z-index:300;
border-bottom:.5px solid rgba(255,255,255,.08);flex-shrink:0;}
.wp-brand{display:flex;align-items:center;gap:8px;
margin-right:16px;padding-right:16px;
border-right:.5px solid rgba(255,255,255,.1);}
.wp-mark{width:24px;height:24px;border-radius:6px;background:var(--green);
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:800;color:#111;flex-shrink:0;}
.wp-name{font-size:12px;font-weight:700;color:var(--bg);letter-spacing:-.02em;}
.wp-tabs{display:flex;height:48px;}
.wp-tab{height:48px;padding:0 20px;background:transparent;border:none;
color:rgba(255,255,255,.45);font-size:var(--fs-base);font-weight:400;
cursor:pointer;font-family:inherit;border-bottom:2.5px solid transparent;
transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
white-space:nowrap;letter-spacing:var(--ls-tight);user-select:none;}
.wp-tab:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.04);}
.wp-tab.active{color:#fff;font-weight:700;border-bottom-color:var(--green);background:transparent;}
.wp-sp{flex:1;}
.wp-av{width:28px;height:28px;border-radius:50%;background:#F5C842;
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:700;color:#1a1a1a;margin-right:8px;}
.wp-logout{background:transparent;border:none;cursor:pointer;
color:rgba(255,255,255,.35);font-size:13px;padding:4px 8px;
border-radius:6px;font-family:inherit;transition:color .15s;}
.wp-logout:hover{color:rgba(255,255,255,.8);}
/* ── Tab view router ── */
/* ── App links nella topbar ──────────────────────────────── */
.wp-appnav {
display: flex;
align-items: center;
gap: 2px;
margin-right: 12px;
padding-right: 12px;
border-right: .5px solid rgba(255,255,255,.1);
}
.wp-applink {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 8px;
border-radius: 8px;
text-decoration: none;
transition: background .15s;
}
.wp-applink:hover { background: rgba(255,255,255,.08); }
.wp-appicon {
width: 22px;
height: 22px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 800;
flex-shrink: 0;
}
.wp-applbl {
font-size: 8px;
color: rgba(255,255,255,.4);
font-weight: 500;
line-height: 1;
}
.wp-view{display:none;}
.wp-view.wp-active{display:block;}
#wp-view-week.wp-active{display:flex;flex-direction:column;}
#wp-view-plan.wp-active{display:flex;flex-direction:column;height:calc(100vh - 48px);overflow:hidden;}
#wp-view-plan #nplan-topbar{display:none !important;}
#wp-view-plan #root{flex:1;overflow:hidden;}
/* ── Tab Clienti ──────────────────────────────────────────────── */
.cli-bar{display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;border-bottom:.5px solid var(--border);background:var(--bg);
position:sticky;top:48px;z-index:10;}
.cli-bar-title{font-size:15px;font-weight:600;color:var(--text);}
.cli-bar-count{font-size:12px;color:var(--text-3);background:var(--surface-lt);
padding:2px 8px;border-radius:99px;}
.cli-filt-wrap{display:flex;gap:4px;}
.cli-filt{padding:5px 12px;border-radius:99px;font-size:12px;font-weight:500;
border:.5px solid var(--border);background:transparent;color:var(--text-2);
cursor:pointer;font-family:inherit;transition:all .1s;}
.cli-filt.active{background:var(--green-lt);border-color:var(--green-dk);color:var(--green-text);font-weight:600;}
.cli-add-btn{padding:6px 14px;border-radius:8px;border:.5px solid var(--border);
background:var(--bg);color:var(--text);font-size:12px;font-weight:500;
cursor:pointer;font-family:inherit;transition:all .1s;}
.cli-add-btn:hover{background:var(--green);border-color:var(--green);color:#111;}
.cli-layout{display:flex;height:calc(100vh - 48px - 57px);overflow:hidden;}
.cli-list{flex:1;overflow-y:auto;}
.cli-panel{width:380px;flex-shrink:0;border-left:.5px solid var(--border);
overflow-y:auto;background:var(--bg);}
.cli-panel-hdr{display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;border-bottom:.5px solid var(--border);position:sticky;top:0;
background:var(--bg);z-index:5;}
.cli-panel-title{font-size:14px;font-weight:600;color:var(--text);}
.cli-panel-close{background:transparent;border:none;cursor:pointer;
color:var(--text-3);font-size:16px;line-height:1;padding:2px 6px;border-radius:4px;}
.cli-panel-close:hover{background:var(--surface-lt);color:var(--text);}
/* Tabella clienti */
.cli-list { padding: 0 20px 32px; }
.cli-table{width:100%;border-collapse:separate;border-spacing:0;}
.cli-table th{text-align:left;padding:9px 14px;font-size:10px;font-weight:600;
color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;
border-bottom:1px solid var(--border);background:var(--bg);
position:sticky;top:0;z-index:4;}
.cli-table td{padding:11px 14px;border-bottom:.5px solid var(--border-lt);vertical-align:middle;}
/* Linea divisoria più visibile tra clienti */
.cli-table tr.cli-divider > td {
border-top: 1px solid var(--border);
}
/* Prima colonna con nome cliente: padding sinistra ridotta per il dot */
.cli-table td:first-child { padding-left: 10px; }
.cli-table th:first-child { padding-left: 10px; }
.cli-table tr{cursor:pointer;transition:background .1s;}
.cli-table tr:hover td{background:var(--surface-lt);}
.cli-table tr.cli-row-active td{background:var(--green-lt);}
.cli-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;}
.cli-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cli-sub{font-size:11px;color:var(--text-3);margin-top:2px;}
.cli-acc-pills{display:flex;gap:3px;flex-wrap:wrap;margin-top:3px;}
.cli-acc-pill{padding:1px 6px;border-radius:3px;font-size:10px;
background:var(--border-lt);color:var(--text-2);}
.cli-pkg{display:inline-flex;padding:2px 8px;border-radius:99px;
font-size:10px;font-weight:600;}
.pkg-Starter{background:var(--green-lt);color:var(--green-text);}
.pkg-Essential{background:var(--blue-lt);color:#004d40;}
.pkg-Professional{background:var(--purple-lt,#eeedf9);color:#3730a3;}
.pkg-Full{background:#fce7f3;color:var(--pink-dk);}
.cli-status{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);}
.cli-status-dot{width:6px;height:6px;border-radius:50%;}
.s-Attivo{background:var(--green);}
.s-pausa{background:var(--amber);}
.s-onboarding{background:var(--blue);}
.s-Perso{background:var(--red);}
.cli-rev{font-size:12px;font-weight:600;color:var(--text);}
/* Pannello form */
.cli-field{padding:14px 16px;border-bottom:.5px solid var(--border-lt);}
.cli-field-label{font-size:10px;font-weight:600;color:var(--text-2);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.cli-inp{width:100%;padding:7px 10px;border:.5px solid var(--border);border-radius:6px;
font-size:13px;font-family:inherit;color:var(--text);background:var(--bg);outline:none;
box-sizing:border-box;}
.cli-inp:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(13,255,0,.1);}
.cli-sel{width:100%;padding:7px 10px;border:.5px solid var(--border);border-radius:6px;
font-size:13px;font-family:inherit;color:var(--text);background:var(--bg);outline:none;
cursor:pointer;}
.cli-panel-actions{padding:14px 16px;display:flex;gap:8px;
border-top:.5px solid var(--border);position:sticky;bottom:0;background:var(--bg);}
.cli-save-btn{flex:1;padding:8px;border-radius:6px;border:none;
background:var(--green);color:#111;font-size:13px;font-weight:700;
cursor:pointer;font-family:inherit;}
.cli-save-btn:hover{background:var(--green-dk);}
.cli-del-btn{padding:8px 12px;border-radius:6px;border:.5px solid #fee2e2;
background:transparent;color:var(--red);font-size:12px;cursor:pointer;font-family:inherit;}
.cli-acc-row{display:flex;align-items:center;gap:8px;padding:6px 0;
border-bottom:.5px solid var(--border-lt);}
.cli-acc-row:last-child{border-bottom:none;}
.cli-acc-plat{width:100px;flex-shrink:0;}
.cli-acc-handle{flex:1;}
.cli-acc-del{background:transparent;border:none;cursor:pointer;
color:var(--text-3);font-size:13px;padding:2px 4px;}
.cli-acc-del:hover{color:var(--red);}
.cli-add-acc{padding:5px 10px;border-radius:6px;border:.5px dashed var(--border);
background:transparent;color:var(--text-2);font-size:11px;cursor:pointer;
font-family:inherit;margin-top:6px;width:100%;}
.cli-add-acc:hover{border-color:var(--text-3);color:var(--text);}
/* ── Tab Finance ───────────────────────────────────────────── */
.fin-header{padding:20px;border-bottom:.5px solid var(--border);background:var(--bg);z-index:10;}
.fin-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:12px;}
.fin-kpi-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;}
.fin-kpi-card{background:var(--surface);border:.5px solid var(--border);border-radius:8px;
padding:12px;border-top:3px solid var(--accent);}
.fin-kpi-val{font-size:18px;font-weight:600;color:var(--text);line-height:1;}
.fin-kpi-lbl{font-size:10px;color:var(--text-3);margin-top:4px;text-transform:uppercase;letter-spacing:.04em;}
.fin-kpi-sub{font-size:9px;color:var(--text-2);margin-top:2px;}
.fin-tabs{display:flex;gap:0;border-bottom:.5px solid var(--border);background:var(--surface);
padding:0 20px;z-index:9;}
.fin-tab{padding:12px 16px;font-size:13px;font-weight:500;border:none;background:transparent;
color:var(--text-2);cursor:pointer;border-bottom:2px solid transparent;transition:all .1s;}
.fin-tab.active{color:var(--text);border-bottom-color:var(--accent);}
.fin-tab:hover{color:var(--text);}
#wp-view-finance.wp-active{display:flex;flex-direction:column;height:calc(100vh - 48px);overflow:hidden;}
.fin-content{flex:1;overflow-y:auto;}
.fin-view{display:none;}
.fin-view.active{display:block;}
/* ── Retainer Cycles (accordion + cicli mensili) ──────────────────── */
.fin-cli-card{background:var(--surface);border:.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:12px;}
.fin-cli-header{padding:12px;background:var(--surface-lt);border-bottom:.5px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;}
.fin-cli-header:hover{background:var(--bg);}
.fin-cli-name{font-weight:600;font-size:13px;color:var(--text);}
.fin-cli-badge{font-size:10px;padding:2px 6px;border-radius:4px;}
.fin-cli-badge.active{background:var(--green-lt);color:var(--green-text);}
.fin-cli-badge.warning{background:var(--warn-lt);color:var(--warn);}
.fin-cli-badge.danger{background:var(--danger-lt);color:var(--danger-text);}
.fin-cli-meta{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--text-2);}
.fin-cli-caret{font-size:12px;color:var(--text-3);transition:transform .15s;}
.fin-cli-card.open .fin-cli-caret{transform:rotate(180deg);}
.fin-cycles-wrap{padding:12px;display:flex;flex-direction:column;gap:12px;}
.fin-cycle-item{border:.5px solid var(--border-lt);border-radius:6px;padding:12px;background:var(--bg);}
.fin-cycle-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.fin-cycle-period{font-size:12px;font-weight:600;color:var(--text-2);}
.fin-cycle-state{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--surface-lt);color:var(--text-2);}
.fin-prog-wrap{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.fin-prog-bar{flex:1;height:6px;background:var(--surface-lt);border-radius:99px;overflow:hidden;}
.fin-prog-fill{height:100%;border-radius:99px;transition:width .3s;}
.fin-prog-label{font-size:11px;color:var(--text-3);white-space:nowrap;min-width:34px;text-align:right;}
.fin-cycle-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px;color:var(--text-2);border-top:.5px solid var(--border-lt);padding-top:8px;}
.fin-cell{display:flex;justify-content:space-between;align-items:center;}
.fin-cell-val{font-weight:600;color:var(--text);}
.fin-margin-pill{padding:2px 6px;border-radius:3px;font-weight:600;}
.fin-margin-pill.pos{background:var(--green-lt);color:var(--green-text);}
.fin-margin-pill.neg{background:var(--danger-lt);color:var(--danger-text);}
.fin-cycle-acts{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:.5px solid var(--border-lt);}
.fin-act-btn{flex:1;padding:6px;font-size:11px;border-radius:4px;border:.5px solid var(--border);background:var(--surface-lt);color:var(--text-2);cursor:pointer;font-family:inherit;transition:all .1s;}
.fin-act-btn:hover{background:var(--surface);color:var(--text);}
.fin-act-btn.close{background:var(--green-lt);border-color:var(--green);color:var(--green-text);font-weight:600;}
.fin-act-btn.close:hover{background:var(--green);color:#fff;}
/* ── OneShot Projects ──────────────────────────────────────── */
.fin-os-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.fin-os-card{background:var(--surface);border:.5px solid var(--border);border-radius:8px;padding:12px;border-left:3px solid var(--accent);}
.fin-os-card.done{border-left-color:var(--green);}
.fin-os-card.progress{border-left-color:var(--warn);}
.fin-os-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px;}
.fin-os-name{font-size:13px;font-weight:600;color:var(--text);}
.fin-os-cli{font-size:11px;color:var(--text-3);margin-bottom:10px;}
.fin-os-badge{font-size:9px;padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0;}
.fin-os-badge.todo{background:var(--surface-lt);color:var(--text-2);}
.fin-os-badge.progress{background:var(--warn-lt);color:var(--warn);}
.fin-os-badge.done{background:var(--green-lt);color:var(--green-text);}
.fin-os-value{font-size:18px;font-weight:600;color:var(--text);margin-bottom:8px;}
.fin-os-value span{font-size:11px;font-weight:400;color:var(--text-3);}
.fin-os-hours{display:flex;justify-content:space-between;font-size:11px;color:var(--text-2);margin-bottom:6px;}
.fin-os-empty{padding:32px;text-align:center;color:var(--text-3);font-size:13px;}
/* ── Tab Report ─────────────────────────────────────────── */
.rep-bar{display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;border-bottom:.5px solid var(--border);background:var(--bg);
position:sticky;top:48px;z-index:10;flex-wrap:wrap;gap:8px;}
.rep-bar-title{font-size:15px;font-weight:600;color:var(--text);}
.rep-membro-pills{display:flex;gap:4px;flex-wrap:wrap;}
.rep-pill{padding:4px 12px;border-radius:99px;font-size:11px;font-weight:500;
border:.5px solid var(--border);background:transparent;color:var(--text-2);
cursor:pointer;font-family:inherit;transition:all .1s;}
.rep-pill.active{background:var(--green-lt);border-color:var(--green-dk);color:var(--green-text);font-weight:600;}
.rep-refresh-btn{padding:5px 12px;border-radius:6px;border:.5px solid var(--border);
background:var(--bg);color:var(--text-2);font-size:12px;cursor:pointer;font-family:inherit;}
.rep-refresh-btn:hover{background:var(--surface-lt);}
.rep-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
padding:16px 20px;background:var(--surface-lt);border-bottom:.5px solid var(--border);}
.rep-kpi{background:var(--bg);border-radius:8px;padding:14px 16px;
border:.5px solid var(--border);}
.rep-kpi-label{font-size:10px;font-weight:600;color:var(--text-2);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.rep-kpi-value{font-size:24px;font-weight:700;color:var(--text);line-height:1;}
.rep-body{display:grid;grid-template-columns:1fr 1fr;gap:0;
padding:0;overflow-y:auto;height:calc(100vh - 48px - 57px - 88px);}
.rep-col{padding:20px;border-right:.5px solid var(--border);}
.rep-col:last-child{border-right:none;}
.rep-section-title{font-size:10px;font-weight:600;color:var(--text-2);
text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.rep-row{display:flex;align-items:center;gap:10px;
padding:8px 0;border-bottom:.5px solid var(--border-lt);}
.rep-row:last-child{border-bottom:none;}
.rep-row-name{font-size:13px;font-weight:500;color:var(--text);min-width:120px;flex:1;}
.rep-row-bar-wrap{width:100px;height:5px;background:var(--border);border-radius:3px;flex-shrink:0;}
.rep-row-bar{height:5px;border-radius:3px;background:var(--green);}
.rep-row-val{font-size:12px;font-weight:600;color:var(--text);min-width:40px;text-align:right;flex-shrink:0;}
.rep-row-pct{font-size:10px;color:var(--text-3);min-width:28px;text-align:right;flex-shrink:0;}
.rep-empty{padding:32px;text-align:center;color:var(--text-3);font-size:13px;}
/* ══════════════════════════════════════════════════════════════
NASSA PLAN — CSS vanilla, usa CSS vars di nassa-tokens
══════════════════════════════════════════════════════════════ */
/* ── Shell layout ─────────────────────────────────────────── */
.plan-shell {
display: flex;
height: 100%; /* il padre (#wp-view-plan) già ha 100vh-48px */
min-height: 0;
overflow: hidden;
font-family: var(--font, system-ui, sans-serif);
background: var(--bg, var(--bg));
}
/* ── Sidebar ──────────────────────────────────────────────── */
.plan-sidebar {
width: 220px;
flex-shrink: 0;
background: #0f0f11;
display: flex;
flex-direction: column;
padding: 12px 8px;
overflow-y: auto;
transition: width .22s ease, padding .22s ease;
overflow-x: hidden;
position: relative;
}
/* Stato mini — solo dot colorati */
.plan-sidebar.plan-sidebar-mini {
width: 52px;
padding: 8px 4px;
overflow-y: visible;
}
/* Nascondi testi in modalità mini */
.plan-sidebar.plan-sidebar-mini .plan-nav-label,
.plan-sidebar.plan-sidebar-mini .plan-nav-item span:last-child,
.plan-sidebar.plan-sidebar-mini .plan-nav-section:first-child,
.plan-sidebar.plan-sidebar-mini .plan-new-proj-btn,
.plan-sidebar.plan-sidebar-mini .plan-sidebar-fase-btn,
.plan-sidebar.plan-sidebar-mini .plan-sidebar-nuova-fase-btn,
.plan-sidebar.plan-sidebar-mini #plan-new-folder-btn {
display: none !important;
}
/* Nascondi anche group labels cliente e separatori in mini */
.plan-sidebar.plan-sidebar-mini .plan-cli-group-lbl,
.plan-sidebar.plan-sidebar-mini .plan-nav-label {
display: none !important;
}
/* In mini: nascondi il titolo, centra il toggle */
.plan-sidebar.plan-sidebar-mini .plan-sidebar-header-title {
display: none !important;
}
.plan-sidebar.plan-sidebar-mini .plan-sidebar-toggle {
margin: 0 auto 8px;
width: 36px;
height: 36px;
border-radius: 9px;
font-size: 16px;
border-color: rgba(255,255,255,.3);
background: rgba(255,255,255,.1);
}
/* Dot progetti in mini mode */
.plan-sidebar.plan-sidebar-mini .plan-proj-mini-dot {
display: flex !important;
}
/* Separatore visivo dopo il toggle in mini mode */
.plan-sidebar.plan-sidebar-mini .plan-proj-mini-sep {
display: block !important;
}
.plan-proj-mini-sep {
display: none;
width: 28px;
height: 0.5px;
background: rgba(255,255,255,.12);
margin: 4px auto;
}
.plan-proj-mini-dot {
display: none;
width: 36px;
height: 36px;
border-radius: 9px;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 2px auto;
position: relative;
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
color: #fff;
letter-spacing: .02em;
transition: transform .1s, box-shadow .1s;
user-select: none;
}
.plan-proj-mini-dot:hover { transform: scale(1.07); }
.plan-proj-mini-dot.active {
box-shadow: 0 0 0 2.5px rgba(255,255,255,.5), 0 0 0 4px rgba(255,255,255,.15);
}
/* Tooltip nome completo */
.plan-proj-mini-dot::after {
content: attr(data-nome);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: #1a1a1f;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 5px 10px;
border-radius: 7px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
z-index: 9999;
border: .5px solid rgba(255,255,255,.15);
box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.plan-proj-mini-dot:hover::after { opacity: 1; }
/* Bottone toggle sidebar */
.plan-sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 7px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(255,255,255,.07);
color: rgba(255,255,255,.75);
cursor: pointer;
font-size: 14px;
font-weight: 700;
transition: color .1s, background .1s, border-color .1s;
flex-shrink: 0;
margin-left: auto; /* spinge a destra nell'header */
}
.plan-sidebar-toggle:hover {
color: #fff;
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.4);
}
.plan-nav-section { padding: 0 0 4px; }
.plan-nav-label {
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,.35);
text-transform: uppercase;
letter-spacing: .08em;
padding: 8px 8px 4px;
}
.plan-nav-item {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 8px;
border-radius: 6px;
border: none;
background: transparent;
color: rgba(255,255,255,.55);
font-size: 13px;
font-family: inherit;
cursor: pointer;
text-align: left;
transition: background .1s, color .1s;
}
.plan-nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }
.plan-nav-item.active { background: rgba(255,255,255,.1); color: var(--bg); }
.plan-proj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.plan-proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-proj-count {
font-size: 10px; background: rgba(255,255,255,.12);
color: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 99px;
}
.plan-new-proj-btn {
background: transparent; border: none; color: rgba(255,255,255,.4);
font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1;
font-family: inherit;
}
.plan-new-proj-btn:hover { color: var(--bg); }
/* ── Main area ────────────────────────────────────────────── */
.plan-main {
flex: 1;
overflow: hidden; /* lo scroll avviene dentro .plan-scroll-area */
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
background: var(--surface-lt);
}
.plan-scroll-area {
flex: 1;
overflow-y: auto;
min-height: 0;
}
/* ── Detail panel ─────────────────────────────────────────── */
.plan-detail {
width: 380px;
flex-shrink: 0;
border-left: .5px solid var(--border, var(--border));
overflow-y: auto;
background: var(--bg, var(--bg));
}
.plan-detail-hdr {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: .5px solid var(--border, var(--border));
position: sticky;
top: 0;
background: var(--bg, var(--bg));
z-index: 5;
}
.plan-detail-stato {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 99px;
flex-shrink: 0;
}
.plan-detail-title {
font-size: 13px;
font-weight: 600;
color: var(--text, var(--text));
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-panel-close {
background: transparent;
border: none;
cursor: pointer;
color: var(--text-3, var(--text-3));
font-size: 16px;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
}
.plan-panel-close:hover { background: var(--surface-lt, var(--surface-lt)); }
.plan-detail-body { padding: 0 0 80px; }
/* ── Toolbar ──────────────────────────────────────────────── */
.plan-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: .5px solid var(--border, var(--border));
gap: 10px;
flex-wrap: wrap;
position: sticky;
top: 0;
background: var(--bg, var(--bg));
z-index: 5;
}
.plan-toolbar-left { display: flex; align-items: center; gap: 10px; }
.plan-toolbar-right { display: flex; align-items: center; gap: 8px; }
.plan-view-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.plan-task-count {
font-size: 11px;
color: rgba(255,255,255,.45);
background: rgba(255,255,255,.06);
padding: 2px 8px;
border-radius: 99px;
border: .5px solid rgba(255,255,255,.08);
}
.plan-search {
padding: 6px 10px;
border: .5px solid var(--border, var(--border));
border-radius: 6px;
font-size: 12px;
font-family: inherit;
outline: none;
width: 160px;
}
.plan-search:focus { border-color: var(--green, var(--green)); }
.plan-filt-sel {
padding: 6px 8px;
border: .5px solid var(--border, var(--border));
border-radius: 6px;
font-size: 12px;
font-family: inherit;
cursor: pointer;
background: var(--bg, var(--bg));
color: var(--text, var(--text));
}
.plan-add-btn {
padding: 6px 14px;
border-radius: 6px;
border: .5px solid var(--border, var(--border));
background: var(--bg, var(--bg));
color: var(--text, var(--text));
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .1s;
}
.plan-add-btn:hover { background: var(--green, var(--green)); border-color: var(--green, var(--green)); color: #111; }
/* ── Task grid ────────────────────────────────────────────── */
/* .plan-task-grid styles moved to refactor block below */
.plan-task-header {
display: grid;
grid-template-columns: var(--plan-cols, 1fr 110px 40px 100px 80px 72px 80px);
padding: 0 16px;
height: 34px;
align-items: center;
font-size: 10px;
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: .5px solid var(--border);
background: var(--surface-lt, #f9f9fb);
border-radius: 8px 8px 0 0;
position: sticky;
top: 0;
z-index: 4;
user-select: none;
}
/* Prima cella header: spazio per il checkbox bulk */
.plan-task-header span:first-child {
padding-left: 26px;
}
.plan-task-header span {
position: relative;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
white-space: nowrap;
}
/* Resize handle */
.plan-col-resize {
position: absolute;
right: 0;
top: 0;
width: 12px; /* zona cliccabile larga */
height: 100%;
cursor: col-resize;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.plan-col-resize::after {
content: '';
display: block;
width: 1px;
height: 60%;
background: var(--border);
border-radius: 1px;
transition: background .12s, width .12s;
}
.plan-col-resize:hover::after,
.plan-col-resize.dragging::after {
background: var(--blue-dk, #2563eb);
width: 2px;
}
.plan-task-row {
display: grid;
grid-template-columns: var(--plan-cols, 1fr 110px 40px 100px 80px 72px 80px);
align-items: center;
padding: 0 16px;
height: 52px;
border-bottom: 0.5px solid var(--border, #e5e7eb);
cursor: pointer;
transition: background .1s;
background: var(--bg, #fff);
}
/* Budget cell */
.plan-cell-budget {
font-size: 12px;
color: var(--text-2);
font-weight: 500;
}
.plan-cell-budget.over { color: var(--red-dk); }
.plan-budget-inp {
border: none;
background: transparent;
font-size: 12px;
color: var(--text-2);
font-family: inherit;
font-weight: 500;
outline: none;
width: 100%;
cursor: pointer;
padding: 0;
}
.plan-budget-inp:focus {
border-bottom: 1px solid var(--blue-dk, #2563eb);
cursor: text;
}
/* ── Subtask inline rows ── */
.plan-subtask-inline-row {
grid-template-columns: var(--plan-cols, 1fr 130px 44px 110px 88px 72px 88px) !important;
background: var(--surface-lt) !important;
padding: 7px 20px !important;
border-left: 2px solid var(--border-lt) !important;
}
.plan-subtask-inline-row:hover {
background: var(--surface-lt) !important; opacity: 0.9;
}
/* Stato select nelle subtask — stessa pill del task */
.plan-subtask-inline-row .plan-stato-sel {
font-size: 10px;
padding: 2px 8px;
min-width: 72px;
}
/* Input testo subtask */
.plan-sub-txt-inp {
flex: 1;
border: none;
background: transparent;
outline: none;
font-family: inherit;
font-size: 12px;
padding: 0;
min-width: 0;
color: var(--text);
}
.plan-sub-txt-inp::placeholder { color: var(--text-3); }
.plan-sub-txt-inp.done {
text-decoration: line-through;
color: var(--text-3);
}
/* Budget input nella subtask */
.plan-subtask-inline-row .plan-budget-inp {
font-size: 12px;
color: var(--text-2);
}
.plan-task-row:hover { background: var(--surface-lt); }
[data-theme="light"] .plan-task-row { border-bottom-color: #f1f5f9; }
[data-theme="light"] .plan-task-row:hover { background: #f8fafc; }
.plan-task-titolo {
font-size: 13px;
font-weight: 500;
color: var(--text);
display: flex;
align-items: center;
gap: 4px;
letter-spacing: -.01em;
overflow: hidden;
min-width: 0;
cursor: default;
position: relative;
}
.plan-titolo-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1 1 0;
}
.plan-titolo-actions {
display: none; /* nascosto di default, mostrato via JS su hover come overlay */
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
gap: 3px;
align-items: center;
flex-shrink: 0;
background: var(--surface);
padding: 2px 4px 2px 12px;
border-radius: 6px;
/* gradiente a sinistra per mascherare il testo tagliato */
box-shadow: -20px 0 12px 4px var(--surface);
}
.plan-task-row:hover .plan-titolo-actions {
display: inline-flex;
}
.plan-titolo-actions button {
background: transparent;
border: none;
cursor: pointer;
color: var(--text-3);
padding: 0;
border-radius: 50%;
opacity: 0;
transition: opacity .12s, background .12s, color .12s, transform .1s;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
flex-shrink: 0;
}
/* Urgente: rosso */
.plan-titolo-actions .plan-urgente-flag {
width: 20px; height: 20px;
}
/* + subtask: verde */
.plan-titolo-actions .btn-add-sub {
color: #16a34a;
border: .5px solid #bbf7d0 !important;
background: #f0fdf4;
border-radius: 50% !important;
}
[data-theme="dark"] .plan-titolo-actions .btn-add-sub {
color: #4ade80;
border-color: rgba(74,222,128,.3) !important;
background: #052e16;
}
/* btn-add-sub ora gestisce anche il toggle expand */
.plan-titolo-actions .btn-add-sub.has-todos {
background: #dcfce7;
border-color: #16a34a !important;
}
[data-theme="dark"] .plan-titolo-actions .btn-add-sub.has-todos {
background: #14532d;
border-color: #4ade80 !important;
}
/* todo ☑: blu */
.plan-titolo-actions button:nth-child(3) {
color: #2563eb;
background: #eff6ff;
border: .5px solid #bfdbfe;
border-radius: 50% !important;
}
[data-theme="dark"] .plan-titolo-actions button:nth-child(3) {
color: #60a5fa;
background: #172554;
border-color: rgba(96,165,250,.3);
}
/* tag 🏷: viola */
.plan-titolo-actions button:nth-child(4) {
color: #7c3aed;
background: #f5f3ff;
border: .5px solid #ddd6fe;
border-radius: 50% !important;
}
[data-theme="dark"] .plan-titolo-actions button:nth-child(4) {
color: #a78bfa;
background: #2e1a4a;
border-color: rgba(167,139,250,.3);
}
[data-theme="dark"] .plan-titolo-actions button[data-trash] {
color: #fca5a5;
background: #5c1a1a;
border-color: rgba(248,113,113,.3) !important;
border-radius: 50% !important;
}
.plan-titolo-actions button[data-trash] {
border-radius: 50% !important;
}
[data-theme="dark"] .plan-titolo-actions {
background: var(--surface);
box-shadow: -20px 0 12px 4px var(--surface);
}
.plan-titolo-actions button:hover {
filter: brightness(.93);
opacity: 1 !important;
transform: scale(1.08);
}
.plan-task-row:hover .plan-titolo-actions button {
opacity: 1;
}
.plan-cell-muted { font-size: 11px; color: var(--text-3); }
.plan-overdue { font-size: 11px; color: #fca5a5; font-weight: 700; }
.plan-stato-sel {
border: none;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
padding: 3px 9px;
font-family: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
min-width: 76px;
text-align: center;
letter-spacing: .01em;
}
.plan-row-del {
display: none; /* cestino spostato nelle action inline */
}
.plan-task-row:hover .plan-row-del { opacity: 1; }
.plan-row-del:hover { color: var(--red-dk, var(--red-dk)); background: var(--red-lt, var(--red-lt)); }
/* .plan-group-hdr moved to refactor block */
.plan-group-add {
background: transparent;
border: none;
cursor: pointer;
color: var(--text-3, var(--text-3));
font-size: 11px;
font-family: inherit;
padding: 2px 6px;
border-radius: 4px;
}
.plan-group-add:hover { color: var(--text, var(--text)); background: var(--surface-lt, var(--surface-lt)); }
.plan-empty-group { padding: 8px 20px; }
.plan-empty-add {
background: transparent;
border: .5px dashed var(--border, var(--border));
color: var(--text-3, var(--text-3));
font-size: 12px;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
}
.plan-empty-add:hover { border-color: var(--text-3, var(--text-3)); color: var(--text, var(--text)); }
.plan-empty-state {
padding: 60px 20px;
text-align: center;
color: var(--text-3, var(--text-3));
font-size: 13px;
}
/* ── From Week badge ──────────────────────────────────────── */
.plan-from-week {
font-size: 9px;
font-weight: 800;
background: var(--green, var(--green));
color: #003300;
padding: 1px 4px;
border-radius: 3px;
flex-shrink: 0;
}
/* ── Dettaglio task — form fields ─────────────────────────── */
.plan-field {
padding: 12px 16px;
border-bottom: .5px solid var(--border-lt, var(--border-lt));
}
.plan-field-row {
display: flex;
gap: 0;
border-bottom: .5px solid var(--border-lt, var(--border-lt));
}
.plan-field-row .plan-field {
border-bottom: none;
}
/* .plan-field-label → vedi definizione sotto */
.plan-field-inp {
width: 100%;
padding: 6px 8px;
border: .5px solid var(--border, var(--border));
border-radius: 6px;
font-size: 13px;
font-family: inherit;
color: var(--text, var(--text));
background: var(--bg, var(--bg));
outline: none;
box-sizing: border-box;
}
.plan-field-inp:focus { border-color: var(--green, var(--green)); }
.plan-field-sel {
width: 100%;
padding: 6px 8px;
border: .5px solid var(--border, var(--border));
border-radius: 6px;
font-size: 13px;
font-family: inherit;
color: var(--text, var(--text));
background: var(--bg, var(--bg));
cursor: pointer;
outline: none;
}
.plan-field-ta {
width: 100%;
padding: 6px 8px;
border: .5px solid var(--border, var(--border));
border-radius: 6px;
font-size: 13px;
font-family: inherit;
color: var(--text, var(--text));
background: var(--bg, var(--bg));
resize: vertical;
outline: none;
box-sizing: border-box;
}
.plan-field-ta:focus { border-color: var(--green, var(--green)); }
/* ── Subtask ──────────────────────────────────────────────── */
/* .plan-sub-count → definizione completa sotto */
/* .plan-subtask-row → vedi definizione sotto */
.plan-subtask-inp {
flex: 1;
border: none;
border-bottom: .5px solid transparent;
font-size: 13px;
font-family: inherit;
color: var(--text, var(--text));
background: transparent;
outline: none;
}
.plan-subtask-inp:focus { border-bottom-color: var(--green, var(--green)); }
.plan-subtask-done { text-decoration: line-through; color: var(--text-3, var(--text-3)); }
.plan-subtask-del {
background: transparent; border: none; cursor: pointer;
color: var(--text-3, var(--text-3)); font-size: 12px; padding: 0 2px;
opacity: 0;
}
.plan-subtask-row:hover .plan-subtask-del { opacity: 1; }
.plan-subtask-del:hover { color: var(--red-dk, var(--red-dk)); }
/* .plan-add-sub-btn → vedi definizione sotto */
/* .plan-add-sub-btn:hover → definizione aggiornata sotto */
/* ── Commenti ─────────────────────────────────────────────── */
.plan-msgs-list { margin-bottom: 8px; }
.plan-msg { padding: 8px 0; border-bottom: .5px solid var(--border-lt, var(--border-lt)); }
.plan-msg:last-child { border-bottom: none; }
.plan-msg-author { font-size: 11px; font-weight: 600; color: var(--text-2, var(--text-2)); margin-bottom: 2px; }
.plan-msg-text { font-size: 13px; color: var(--text, var(--text)); line-height: 1.4; }
.plan-msg-ago { font-size: 10px; color: var(--text-3, var(--text-3)); margin-top: 2px; }
.plan-msg-compose { display: flex; gap: 6px; }
.plan-msg-inp {
flex: 1; padding: 6px 8px;
border: .5px solid var(--border, var(--border)); border-radius: 6px;
font-size: 12px; font-family: inherit; outline: none;
}
.plan-msg-inp:focus { border-color: var(--green, var(--green)); }
.plan-msg-send {
padding: 6px 10px; border-radius: 6px;
border: .5px solid var(--border, var(--border));
background: var(--bg, var(--bg)); cursor: pointer;
font-size: 13px; font-family: inherit;
}
.plan-msg-send:hover { background: var(--green, var(--green)); border-color: var(--green, var(--green)); }
/* ── Dettaglio actions ────────────────────────────────────── */
.plan-detail-actions { padding: 16px; }
.plan-del-task-btn {
background: transparent;
border: .5px solid var(--border, var(--border));
color: var(--red-dk, var(--red-dk));
font-size: 12px;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
}
.plan-del-task-btn:hover { background: var(--red-lt, var(--red-lt)); }
/* ── Vista Ore ────────────────────────────────────────────── */
.plan-ore-tabs { display: flex; gap: 4px; }
/* ── Team Planner griglia ── */
.plan-team-grid {
display: grid;
border-left: 0.5px solid var(--border);
border-top: 0.5px solid var(--border);
overflow-x: auto;
}
.plan-team-hdr-cell {
padding: 7px 8px 5px;
border-right: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
text-align: center;
background: var(--surface);
white-space: nowrap;
}
.plan-team-hdr-cell.today-col { color: var(--today-name-color); background: var(--today-col-tint); border-top: 2px solid var(--green); }
.plan-team-hdr-cell.member-hdr { text-align: left; }
.plan-team-member-cell {
padding: 8px 10px;
border-right: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
display: flex; flex-direction: column; gap: 4px;
background: var(--surface);
}
.plan-team-member-info { display: flex; align-items: center; gap: 8px; }
.plan-team-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.plan-team-member-name { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-team-cap-bar { height: 3px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 2px; }
.plan-team-cap-fill { height: 100%; border-radius: 99px; }
.plan-team-cap-label { font-size: 9px; text-align: right; }
.plan-team-day-cell {
padding: 4px 5px;
border-right: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
display: flex; flex-direction: column; gap: 3px;
min-height: 60px;
}
.plan-team-day-cell.today-col { background: var(--today-col-tint); }
.plan-team-day-cell.weekend { opacity: .7; }
.plan-team-chip {
padding: 2px 5px;
border-radius: 3px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
border-left: 2.5px solid transparent;
line-height: 1.4;
}
.plan-team-chip:hover { filter: brightness(.92); }
.plan-team-chip.urgente { outline: 1px solid rgba(239,68,68,.4); outline-offset: 1px; }
.plan-team-day-ore { font-size: 9px; color: var(--text-3); text-align: right; margin-top: auto; padding-top: 2px; }
.plan-team-day-ore.over { color: #ef4444; font-weight: 700; }
.plan-team-day-ore.warn { color: #f59e0b; font-weight: 600; }
.plan-team-day-ore.ok { color: #16a34a; }
.plan-team-week-total {
padding: 6px 8px;
border-right: 0.5px solid var(--border);
border-bottom: 0.5px solid var(--border);
display: flex; flex-direction: column; gap: 2px;
align-items: flex-end; justify-content: center;
background: var(--surface);
}
.plan-team-week-h { font-size: 13px; font-weight: 700; color: var(--text); }
.plan-team-week-cap { font-size: 9px; color: var(--text-3); }
.plan-ore-tab {
padding: 5px 12px; border-radius: 99px;
border: .5px solid var(--border, var(--border));
background: transparent; color: var(--text-3, var(--text-3));
font-size: 12px; font-weight: 500;
cursor: pointer; font-family: inherit;
}
.plan-ore-tab.active { background: var(--green-lt, var(--green-lt)); border-color: var(--green-dk, var(--green-dk)); color: var(--green-text, var(--green-text)); font-weight: 600; }
.plan-nav-arrow {
background: transparent; border: .5px solid var(--border, var(--border));
border-radius: 6px; padding: 4px 10px; cursor: pointer;
font-size: 14px; color: var(--text-2, var(--text-2)); font-family: inherit;
}
.plan-nav-arrow:hover { background: var(--surface-lt, var(--surface-lt)); }
.plan-ore-date { font-size: 13px; color: var(--text, var(--text)); font-weight: 500; }
.plan-ore-body { padding: 20px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
.plan-ore-summary { background: var(--surface-lt, var(--surface-lt)); border-radius: 10px; padding: 16px; border: .5px solid var(--border, var(--border)); }
.plan-ore-kpi { display: inline-block; margin-right: 24px; }
.plan-ore-kpi-val { font-size: 28px; font-weight: 700; color: var(--text, var(--text)); }
.plan-ore-kpi-label { font-size: 11px; color: var(--text-3, var(--text-3)); }
.plan-ore-progress-wrap { height: 5px; background: var(--border, var(--border)); border-radius: 3px; margin-top: 12px; }
.plan-ore-progress-bar { height: 5px; border-radius: 3px; background: var(--green, var(--green)); transition: width .3s; }
.plan-section-title { font-size: 10px; font-weight: 700; color: var(--text-3, var(--text-3)); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.plan-ore-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: .5px solid var(--border-lt, var(--border-lt));
}
.plan-ore-row:last-child { border-bottom: none; }
.plan-ore-row-info { flex: 1; min-width: 0; }
.plan-ore-row-titolo { font-size: 13px; font-weight: 500; color: var(--text, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-ore-row-proj { font-size: 11px; color: var(--text-3, var(--text-3)); }
.plan-ore-row-h { font-size: 13px; font-weight: 600; color: var(--text, var(--text)); }
.plan-ore-row-edit { background: transparent; border: none; cursor: pointer; color: var(--text-3, var(--text-3)); font-size: 13px; }
.plan-ore-row-edit:hover { color: var(--text, var(--text)); }
/* ── Retainer ─────────────────────────────────────────────── */
.plan-retainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.plan-retainer-card { background: var(--bg, var(--bg)); border: .5px solid var(--border, var(--border)); border-radius: 8px; padding: 12px; }
.plan-retainer-name { font-size: 12px; font-weight: 600; color: var(--text, var(--text)); margin-bottom: 2px; }
.plan-retainer-pkg { font-size: 10px; color: var(--text-3, var(--text-3)); margin-bottom: 8px; }
.plan-retainer-bar-wrap { height: 4px; background: var(--border, var(--border)); border-radius: 2px; margin-bottom: 4px; }
.plan-retainer-bar { height: 4px; border-radius: 2px; transition: width .3s; }
.plan-retainer-meta { font-size: 10px; color: var(--text-3, var(--text-3)); }
/* ── Vista Scadenze ───────────────────────────────────────── */
.plan-scad-body { padding: 16px 20px; }
.plan-scad-group { margin-bottom: 24px; }
.plan-scad-group-hdr { font-size: 12px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
/* ── Tipo contratto toggle ────────────────────────────────── */
.cli-tipo-toggle { display: flex; gap: 6px; }
.cli-tipo-btn {
padding: 6px 16px;
border-radius: 6px;
border: .5px solid var(--border, var(--border));
background: transparent;
color: var(--text-3, var(--text-3));
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: all .1s;
}
.cli-tipo-btn.active {
background: var(--blue-lt, var(--blue-lt));
border-color: var(--blue-dk, var(--blue-dk));
color: var(--blue-dk, var(--blue-dk));
font-weight: 600;
}
.cli-tipo-btn:first-child.active {
background: var(--green-lt, var(--green-lt));
border-color: var(--green-dk, var(--green-dk));
color: var(--green-dk, var(--green-dk));
}
.cli-field-row {
display: flex;
gap: 0;
}
.cli-field-row .cli-field {
border-bottom: none;
border-right: .5px solid var(--border-lt, var(--border-lt));
}
.cli-field-row .cli-field:last-child {
border-right: none;
}
/* ── Modal inline (plan) ──────────────────────────────────── */
.plan-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 800;
display: flex;
align-items: center;
justify-content: center;
}
.plan-modal {
background: var(--bg, var(--bg));
border-radius: 12px;
padding: 24px;
width: 360px;
max-width: calc(100vw - 32px);
box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.plan-modal-title {
font-size: 15px;
font-weight: 700;
color: var(--text, var(--text));
margin-bottom: 16px;
}
.plan-modal-label {
font-size: 10px;
font-weight: 600;
color: var(--text-3, var(--text-3));
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 6px;
}
.plan-modal-inp {
width: 100%;
padding: 8px 10px;
border: .5px solid var(--border, var(--border));
border-radius: 8px;
font-size: 14px;
font-family: inherit;
color: var(--text, var(--text));
outline: none;
box-sizing: border-box;
margin-bottom: 16px;
}
.plan-modal-inp:focus { border-color: var(--green, var(--green)); }
.plan-modal-row { display: flex; gap: 8px; margin-bottom: 16px; }
.plan-modal-sel {
flex: 1;
padding: 8px 10px;
border: .5px solid var(--border, var(--border));
border-radius: 8px;
font-size: 13px;
font-family: inherit;
color: var(--text, var(--text));
background: var(--bg, var(--bg));
outline: none;
cursor: pointer;
}
.plan-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.plan-modal-cancel {
padding: 8px 16px;
border-radius: 8px;
border: .5px solid var(--border, var(--border));
background: transparent;
color: var(--text-3, var(--text-3));
font-size: 13px;
font-family: inherit;
cursor: pointer;
}
.plan-modal-cancel:hover { background: var(--surface-lt, var(--surface-lt)); }
.plan-modal-confirm {
padding: 8px 20px;
border-radius: 8px;
border: none;
background: var(--green, var(--green));
color: #111;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
.plan-modal-confirm:hover { background: var(--green-dk, var(--green-dk)); }
/* Colori progetto swatches */
.plan-color-swatches { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.plan-color-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform .1s, border-color .1s;
}
.plan-color-swatch:hover { transform: scale(1.2); }
.plan-color-swatch.selected { border-color: var(--text, var(--text)); transform: scale(1.15); }
/* ── Editing inline nella riga task ─────────────────────────── */
.plan-inline-sel {
border: none;
background: transparent;
font-size: 12px;
font-family: inherit;
color: var(--text-3);
cursor: pointer;
padding: 2px 0;
border-radius: 4px;
max-width: 26px; /* solo la freccia dropdown — l'avatar è a sinistra */
outline: none;
opacity: 0; /* nascosto — click sull'avatar lo attiva */
position: absolute;
width: 26px;
height: 26px;
}
.plan-inline-sel:hover { opacity: 1; background: transparent; }
/* Wrapper per assegnato: posizione relativa */
.plan-ass-wrap {
position: relative;
display: inline-flex;
align-items: center;
width: 24px;
height: 24px;
}
.plan-ass-wrap .plan-inline-sel {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.plan-ass-wrap:hover .plan-inline-av { transform: scale(1.1); }
.plan-prior-sel {
max-width: 100px;
font-weight: 600;
font-size: 11px;
padding: 2px 8px;
border-radius: 99px;
border: none !important;
-webkit-appearance: none;
appearance: none;
opacity: .85;
}
.plan-prior-sel:hover { opacity: 1; }
/* ── Urgente flag ── */
.plan-urgente-flag {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
background: #ef4444;
border: none;
color: #fff;
font-size: 11px;
font-weight: 900;
flex-shrink: 0;
cursor: pointer;
transition: all .12s;
letter-spacing: 0;
}
[data-theme="dark"] .plan-urgente-flag {
background: #dc2626;
color: #fff;
}
.plan-urgente-flag:hover {
background: #b91c1c;
transform: scale(1.08);
}
.plan-urgente-flag.off {
background: #fee2e2;
color: #dc2626;
border: 1.5px solid #fca5a5;
opacity: 0;
}
[data-theme="dark"] .plan-urgente-flag.off {
background: #3a0f0f;
color: #f87171;
border-color: rgba(248,113,113,.4);
}
.plan-task-row:hover .plan-urgente-flag.off { opacity: 1; }
/* Riga urgente — bordo rosso e sfondo leggerissimo */
.plan-task-row.is-urgente {
background: #fff5f5; /* rosso molto chiaro, non invasivo */
border-left: 3px solid #fca5a5; /* bordo sinistro rosso soft */
border-bottom-color: #fecaca;
}
[data-theme="dark"] .plan-task-row.is-urgente {
background: rgba(239,68,68,.07);
border-left-color: rgba(239,68,68,.4);
}
.plan-task-row.is-urgente:hover {
background: rgba(90,15,15,.65);
box-shadow: inset 3px 0 0 #ef4444;
}
.plan-inline-av {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 0 0 1.5px var(--bg);
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
cursor: pointer;
transition: transform .1s;
}
.plan-inline-av:hover { transform: scale(1.1); }
.plan-dead-label { cursor: pointer; }
.plan-dead-label:hover { text-decoration: underline; text-decoration-style: dotted; }
.plan-inline-date {
width: 110px;
padding: 3px 6px;
border: .5px solid var(--green);
border-radius: 6px;
font-size: 12px;
font-family: inherit;
color: var(--text);
background: var(--bg);
outline: none;
box-shadow: 0 0 0 2px rgba(13,255,0,.12);
}
/* Titolo non propaga il click — solo il testo è cliccabile */
/* cursor in .plan-task-titolo già definito sopra */
/* ── Group toggle button ─────────────────────────────────── */
.plan-no-sched {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 800;
padding: 1px 4px;
border-radius: 3px; /* stesso stile del badge W */
background: #fecaca; /* rosso chiaro — simmetrico al badge W verde */
color: #991b1b; /* rosso scuro leggibile */
border: .5px solid #f87171;
cursor: pointer;
margin-right: 4px;
flex-shrink: 0;
transition: background .1s;
letter-spacing: .02em;
}
.plan-no-sched:hover {
background: #fee2e2;
}
.plan-no-sched:hover { background: var(--amber-dk); color: #fff; }
.plan-group-toggle {
padding: 5px 10px;
border-radius: 6px;
border: .5px solid var(--border);
background: transparent;
color: var(--text-3);
font-size: 11px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .1s;
}
.plan-group-toggle:hover,
.plan-group-toggle.active {
background: var(--blue-lt);
border-color: var(--blue-dk);
color: var(--blue-dk);
}
/* ── Group header per stato ──────────────────────────────── */
.plan-group-hdr {
display: grid;
grid-template-columns: var(--plan-cols, 1fr 110px 40px 100px 80px 72px 80px);
align-items: stretch;
gap: 0;
padding: 0;
min-height: 44px;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
color: var(--text, #1c1c1e);
border-top: 2px solid var(--border, #e5e7eb);
border-bottom: 0.5px solid var(--border, #e5e7eb);
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
margin-top: 0;
}
.plan-group-hdr:first-child { margin-top: 0; border-top: none; }
.plan-group-hdr:hover { background: rgba(255,255,255,.03); }
[data-theme="light"] .plan-group-hdr { color: var(--text); }
[data-theme="light"] .plan-task-row { border-bottom-color: #e5e7eb; }
[data-theme="light"] .plan-task-row:hover { background: #f8fafc; }
[data-theme="light"] .plan-group-hdr:hover { filter: brightness(.96); }
.plan-group-hdr:first-child { border-top: none; margin-top: 0; }
.plan-group-hdr + .plan-task-row { border-top: none; }
/* ── Plan sidebar: nascondi brand, app-nav, logout (ridondanti con wp-topbar) ── */
#wp-view-plan [data-wp="plan-sidebar"] > :nth-child(1),
#wp-view-plan [data-wp="plan-sidebar"] > :nth-child(2),
#wp-view-plan [data-wp="plan-sidebar"] > :nth-child(3) {
display: none !important;
}
/* ── Clienti placeholder ── */
.clienti-empty{display:flex;flex-direction:column;align-items:center;
justify-content:center;padding:80px 20px;color:var(--text-3,var(--text-2));
font-size:13px;gap:8px;}
/* ── Raffinamento tabella Plan ──────────────────────────────── */
/* .plan-task-grid completo definito sotto */
/* .plan-task-header background merged below */
.plan-task-row:last-child { border-bottom: none; }
/* .plan-add-btn già in definizione principale */
/* .plan-filt-sel font-size già in definizione principale */
/* .plan-search font-size già in definizione principale */
/* Prior badge senza freccia */
/* -webkit-appearance già in .plan-prior-sel sopra */
/* Task titolo cliccabile — sottolineatura su hover */
.plan-task-titolo:hover > span:last-child {
text-decoration: underline;
text-decoration-color: var(--border);
text-underline-offset: 2px;
}
/* ── Chip Week — nome progetto/cliente + cerchio completamento ── */
.chip-body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
gap: 1px;
}
.chip-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.3;
}
.chip-ref {
font-size: 9px;
font-weight: 500;
opacity: .7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
letter-spacing: .01em;
}
/* Cerchio completamento */
.chip-complete {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
opacity: .4;
transition: opacity .15s, background .15s, transform .15s;
line-height: 1;
margin-right: 2px;
}
.chip-complete:hover {
opacity: 1;
transform: scale(1.15);
}
.chip-complete.done {
background: currentColor;
opacity: .7;
color: #fff;
border-color: transparent;
font-size: 9px;
}
.chip-complete.done:hover {
opacity: .5;
}
/* Revisione aperta — numero visibile */
.chip-complete.re-open {
opacity: .6;
font-size: 8px;
}
/* Chip completata — testo barrato leggero */
.chip.chip-done .chip-text {
text-decoration: line-through;
opacity: .55;
}
.chip.chip-done .chip-ref {
opacity: .35;
}
.chip.chip-done {
filter: saturate(0.4);
}
/* ── Dashboard progetto ─────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
DASHBOARD PROGETTO — layout a 2 colonne, collassabile
══════════════════════════════════════════════════════ */
.plan-proj-dash {
flex-shrink: 0;
border-bottom: .5px solid var(--border);
background: var(--bg);
}
[data-theme="light"] .plan-proj-dash {
background: #fff;
border-bottom-color: #e2e8f0;
}
/* Toggle header — clicca per collassare */
.plan-dash-toggle-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
cursor: pointer;
user-select: none;
transition: background .1s;
border-bottom: .5px solid transparent;
}
.plan-dash-toggle-hdr:hover { background: var(--surface-lt); }
.plan-dash-toggle-hdr.open { border-bottom-color: var(--border); }
.plan-dash-toggle-arrow {
font-size: 10px;
color: var(--text-3);
transition: transform .2s;
flex-shrink: 0;
}
.plan-dash-toggle-hdr.open .plan-dash-toggle-arrow { transform: rotate(90deg); }
.plan-dash-proj-name {
font-size: 13px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.plan-dash-proj-meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.plan-dash-proj-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* Corpo collassabile */
.plan-dash-body {
display: grid;
grid-template-columns: 1fr 340px;
gap: 0;
overflow: hidden;
max-height: 0;
transition: max-height .3s ease;
}
.plan-dash-body.open {
max-height: 800px;
}
/* Colonna sinistra — metriche */
.plan-dash-col-left {
padding: 10px 16px 14px;
border-right: .5px solid var(--border);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Colonna destra — note + tariffe */
.plan-dash-col-right {
padding: 10px 16px 14px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
/* Sezione label */
.plan-dash-sec-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.3);
margin-bottom: 6px;
}
[data-theme="light"] .plan-dash-sec-label {
color: #64748b;
}
/* ── KPI pills (4 in fila) */
.plan-dash-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.plan-dash-kpi-cell {
background: rgba(255,255,255,.06);
border-radius: 6px;
padding: 8px 10px 6px;
display: flex;
flex-direction: column;
gap: 2px;
border: .5px solid rgba(255,255,255,.12);
}
[data-theme="light"] .plan-dash-kpi-cell {
background: #f1f5f9;
border-color: #cbd5e1;
}
.plan-dash-kpi-num {
font-size: 18px;
font-weight: 700;
letter-spacing: -.03em;
line-height: 1;
color: var(--text);
}
[data-theme="light"] .plan-dash-kpi-num {
color: #0f172a;
}
.plan-dash-kpi-lbl {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
}
[data-theme="light"] .plan-dash-kpi-lbl {
color: #64748b;
}
/* ── Progress bars */
.plan-dash-progress-row {
display: flex;
flex-direction: column;
gap: 5px;
}
.plan-dash-progress-label {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,.5);
}
.plan-dash-bar {
height: 4px;
border-radius: 99px;
background: rgba(255,255,255,.08);
overflow: hidden;
}
.plan-dash-bar-fill {
height: 100%;
border-radius: 99px;
transition: width .4s ease;
}
/* ── Finance row (3 celle) */
.plan-dash-finance {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.plan-dash-fin-cell {
background: rgba(255,255,255,.06);
border-radius: 6px;
padding: 7px 10px;
border: .5px solid rgba(255,255,255,.12);
display: flex;
flex-direction: column;
gap: 2px;
}
[data-theme="light"] .plan-dash-fin-cell {
background: #f1f5f9;
border-color: #cbd5e1;
}
.plan-dash-fin-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
}
[data-theme="light"] .plan-dash-fin-label {
color: #64748b;
}
.plan-dash-fin-value {
font-size: 15px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
line-height: 1.1;
}
.plan-dash-fin-value.over { color: #fca5a5; }
.plan-dash-fin-value.warn { color: #fbbf24; }
.plan-dash-fin-sub {
font-size: 9px;
color: rgba(255,255,255,.3);
}
/* ── Deadline + Ore budget (inline edit) */
.plan-dash-fields-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.plan-dash-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.plan-dash-field-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
}
.plan-dash-field-val {
font-size: 13px;
font-weight: 600;
color: var(--text);
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
border: .5px solid transparent;
transition: all .1s;
background: transparent;
font-family: inherit;
width: 100%;
outline: none;
}
.plan-dash-field-val:hover { background: var(--surface-lt); border-color: var(--border); }
.plan-dash-field-val:focus { background: var(--surface-lt); border-color: var(--blue-dk); }
/* ── Rate table */
.plan-price-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: .5px solid;
transition: filter .1s, transform .1s;
flex-shrink: 0;
}
.plan-price-pill:hover { filter: brightness(.94); transform: scale(1.02); }
.plan-price-pill.retainer {
background: #f0fdf4; color: #14532d; border-color: #bbf7d0;
}
[data-theme="dark"] .plan-price-pill.retainer {
background: #052e16; color: #86efac; border-color: rgba(74,222,128,.3);
}
.plan-price-pill.oneshot {
background: #fffbeb; color: #78350f; border-color: #fde68a;
}
[data-theme="dark"] .plan-price-pill.oneshot {
background: #2d1b00; color: #fbbf24; border-color: rgba(251,191,36,.3);
}
.plan-price-pill.norate {
background: var(--surface-lt); color: var(--text-3); border-color: var(--border);
}
/* ── Overlay tariffe ── */
.plan-rates-overlay {
position: fixed;
inset: 0;
z-index: 600;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 60px 16px 16px;
pointer-events: none;
}
.plan-rates-overlay.open { pointer-events: all; }
.plan-rates-panel {
width: 320px;
background: var(--surface);
border: .5px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(-8px);
opacity: 0;
transition: transform .18s ease, opacity .18s ease;
pointer-events: none;
}
.plan-rates-overlay.open .plan-rates-panel {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.plan-rates-panel-hdr {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: .5px solid var(--border);
background: var(--bg);
}
.plan-rates-panel-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
flex: 1;
}
.plan-rates-panel-close {
background: transparent;
border: none;
cursor: pointer;
color: var(--text-3);
font-size: 16px;
padding: 2px 6px;
border-radius: 4px;
line-height: 1;
}
.plan-rates-panel-close:hover { background: var(--surface-lt); color: var(--text); }
.plan-rates-panel-body {
padding: 12px 14px;
overflow-y: auto;
max-height: 60vh;
display: flex;
flex-direction: column;
gap: 0;
}
.plan-dash-rates-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.plan-rate-mode-btn {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 5px;
border: .5px solid var(--border);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
transition: all .15s;
}
.plan-rate-mode-btn:hover { border-color: var(--blue-dk); color: var(--blue-dk); }
.plan-rate-mode-btn.active { background: var(--blue-lt,#dbeafe); border-color: var(--blue-dk); color: var(--blue-dk); }
.plan-rate-row {
display: grid;
grid-template-columns: 22px 1fr 70px 56px 70px;
gap: 6px;
align-items: center;
padding: 4px 0;
border-bottom: .5px solid var(--border-lt);
font-size: 11px;
}
.plan-rate-row:last-child { border-bottom: none; }
.plan-rate-row-hdr {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-3);
padding-bottom: 2px;
}
.plan-rate-inp {
border: .5px solid var(--border);
border-radius: 4px;
padding: 3px 5px;
font-size: 11px;
font-family: inherit;
background: var(--bg);
color: var(--text);
width: 100%;
outline: none;
box-sizing: border-box;
text-align: right;
}
.plan-rate-inp:focus { border-color: var(--blue-dk); }
/* Note area */
.plan-proj-note-area {
flex: 1;
min-height: 80px;
max-height: 160px;
resize: vertical;
font-size: 12px;
line-height: 1.5;
border: .5px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
background: var(--surface-lt);
color: var(--text);
font-family: inherit;
outline: none;
transition: border-color .1s;
}
.plan-proj-note-area:focus { border-color: var(--green); }
/* Responsive: sotto 720px → 1 colonna */
@media (max-width: 720px) {
.plan-dash-body { grid-template-columns: 1fr; }
.plan-dash-col-left { border-right: none; border-bottom: .5px solid var(--border); }
.plan-dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
.plan-dash-finance { grid-template-columns: repeat(3, 1fr); }
}
/* Deadline input legacy (compat) */
.plan-dash-deadline-inp {
border: none;
background: transparent;
font-size: 13px;
font-weight: 600;
font-family: inherit;
color: var(--text);
cursor: pointer;
outline: none;
padding: 4px 6px;
border-radius: 6px;
}
.plan-proj-dash-hdr {
display: flex;
align-items: flex-start;
gap: 12px;
padding-bottom: 16px;
border-bottom: .5px solid var(--border);
margin-bottom: 16px;
}
.plan-proj-dash-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 6px;
}
.plan-proj-edit-btn {
padding: 5px 12px;
border-radius: 6px;
border: .5px solid var(--border);
background: transparent;
color: var(--text-3);
font-size: 11px;
cursor: pointer;
font-family: inherit;
flex-shrink: 0;
transition: background .1s;
}
.plan-proj-edit-btn:hover {
background: var(--surface-lt);
color: var(--text);
}
/* KPI row */
.plan-proj-kpi-row {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.plan-proj-kpi {
flex: 1;
min-width: 80px;
padding: 12px 14px;
border-radius: 8px;
border: .5px solid var(--border);
background: var(--bg);
display: flex;
flex-direction: column;
}
/* Sezione note */
.plan-proj-note-sec {
border-top: .5px solid var(--border);
padding: 16px 0 20px;
}
.plan-proj-section-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-3);
margin-bottom: 8px;
}
.plan-proj-note-area-legacy {
/* merged into .plan-proj-note-area sopra */
display: none;
transition: border-color .15s;
}
/* .plan-proj-note-area:focus → già sopra */
/* Commenti */
.plan-proj-comm-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 10px;
max-height: 220px;
overflow-y: auto;
}
.plan-comm-row {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface-lt);
}
.plan-comm-form {
display: flex;
gap: 8px;
align-items: center;
padding-top: 8px;
border-top: .5px solid var(--border);
flex-wrap: wrap;
}
/* ── Grid refactored — card per gruppo ─────────────────────── */
.plan-col-header-sticky {
position: sticky;
top: 0;
z-index: 4;
background: var(--surface-lt);
margin: 0 16px;
border-radius: 8px 8px 0 0;
border-bottom: .5px solid var(--border);
}
/* merged into .plan-group-hdr above */
/* ── Fase header esteso (cartella con oreBudget/stato) ── */
/* merged into .plan-group-hdr above */
.plan-fase-ore-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 2px 8px 2px 6px;
border-radius: 99px;
background: var(--surface-lt);
color: var(--text-2);
border: .5px solid var(--border);
}
.plan-fase-stato-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
letter-spacing: .02em;
cursor: pointer;
}
.plan-task-grid {
margin: 0;
border-radius: 0;
background: var(--bg);
min-width: 0;
overflow: hidden;
transition: max-height .25s ease, opacity .2s;
border-bottom: 0.5px solid var(--border);
}
.plan-task-grid.collapsed {
max-height: 0 !important;
opacity: 0;
pointer-events: none;
margin-bottom: 0;
}
/* merged into .plan-group-hdr above */
.plan-fase-arrow {
font-size: 9px;
color: var(--text-3);
transition: transform .2s;
flex-shrink: 0;
margin-right: 4px;
}
.plan-fase-arrow.open { transform: rotate(90deg); }
.plan-task-grid:last-child {
margin-bottom: 40px;
}
/* Prima riga senza border-top */
.plan-task-grid .plan-task-row:first-child {
border-top: none;
}
/* ── VISTA ANNO ─────────────────────────────────────────────── */
#wp-view-anno.wp-active {
display: flex;
flex-direction: column;
height: calc(100vh - 48px);
overflow: hidden;
background: var(--surface-lt);
}
.anno-shell {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
padding: 0 0 40px;
}
.anno-toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-bottom: .5px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 10;
flex-wrap: wrap;
}
.anno-nav {
display: flex;
align-items: center;
gap: 4px;
margin-right: 8px;
}
.anno-nav-btn {
width: 28px;
height: 28px;
border-radius: 6px;
border: .5px solid var(--border);
background: transparent;
color: var(--text);
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .1s;
}
.anno-nav-btn:hover { background: var(--surface-lt); }
.anno-year-lbl {
font-size: 18px;
font-weight: 700;
letter-spacing: -.02em;
color: var(--text);
min-width: 52px;
text-align: center;
}
.anno-today-btn {
padding: 5px 12px;
border-radius: 6px;
border: .5px solid var(--border);
background: transparent;
font-size: 12px;
font-weight: 500;
color: var(--text-2);
cursor: pointer;
font-family: inherit;
margin-left: 4px;
}
.anno-today-btn:hover { background: var(--surface-lt); }
.anno-filter-sel {
font-size: 12px;
border: .5px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
background: var(--bg);
color: var(--text);
font-family: inherit;
cursor: pointer;
}
/* Tabella */
.anno-table {
margin: 20px 24px 0;
border: .5px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg);
}
.anno-row {
display: grid;
grid-template-columns: 80px 1fr 1fr 1fr 1fr 1fr;
border-bottom: .5px solid var(--border);
transition: background .1s;
}
.anno-row:last-child { border-bottom: none; }
.anno-hdr-row {
background: var(--surface-lt);
cursor: default !important;
}
.anno-row:not(.anno-hdr-row):hover {
background: var(--surface-lt);
}
.anno-row-current {
background: rgba(13,255,0,.03);
}
.anno-row-current .anno-cell-month {
font-weight: 700;
color: var(--green-dk);
}
.anno-cell {
padding: 13px 16px;
font-size: 13px;
color: var(--text-3);
border-right: .5px solid var(--border);
display: flex;
align-items: center;
}
.anno-cell:last-child { border-right: none; }
.anno-cell-hdr {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-3);
padding: 10px 16px;
}
.anno-cell-month {
font-size: 13px;
font-weight: 600;
color: var(--text-2);
background: var(--surface-lt);
border-right: .5px solid var(--border);
}
/* Valori colorati */
.anno-val-green { color: var(--green-dk); font-weight: 600; }
.anno-val-blue { color: var(--blue-dk, #1864ab); font-weight: 600; }
.anno-val-amber { color: var(--amber-dk, #854F0B); font-weight: 600; }
.anno-val-muted { color: var(--text-2); font-weight: 500; }
.anno-val-purple { color: var(--purple-dk, #7C3AED); font-weight: 600; }
/* ── KANBAN SUB-VISTA ───────────────────────────────────────── */
.week-view-toggle {
border-color: var(--border) !important;
color: var(--text-3) !important;
opacity: .6;
transition: opacity .15s, background .15s;
}
.week-view-toggle.active {
opacity: 1;
background: var(--surface-lt) !important;
color: var(--text) !important;
}
.kb-view {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 16px 20px 40px;
background: var(--bg);
display: flex;
flex-direction: column;
gap: 12px;
}
.kb-toolbar {
display: flex;
align-items: center;
gap: 8px;
}
.kb-toolbar-title {
font-size: 12px;
color: var(--text-3);
font-weight: 500;
}
.kb-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
align-items: start;
}
.kb-col {
background: var(--surface-lt);
border: .5px solid var(--border);
border-radius: 10px;
overflow: hidden;
min-height: 120px;
}
.kb-col-hdr {
display: flex;
align-items: center;
gap: 7px;
padding: 10px 14px;
border-bottom: .5px solid var(--border);
background: var(--bg);
}
.kb-col-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.kb-col-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-3);
flex: 1;
}
.kb-col-count {
font-size: 11px;
font-weight: 500;
color: var(--text-3);
background: var(--surface-lt);
padding: 1px 7px;
border-radius: 99px;
border: .5px solid var(--border);
}
.kb-cards {
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 60px;
transition: background .15s;
}
.kb-cards.kb-drag-over {
background: var(--green-lt);
border-radius: 6px;
}
.kb-card {
background: var(--bg);
border: .5px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
cursor: grab;
transition: box-shadow .15s, opacity .15s;
}
.kb-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.06);
border-color: var(--border-strong, var(--border));
}
.kb-card-dragging {
opacity: .4;
cursor: grabbing;
}
.kb-card-done {
opacity: .6;
filter: saturate(.35);
}
.kb-card-done .kb-card-text {
text-decoration: line-through;
}
.kb-card-text {
font-size: 12px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
margin-bottom: 6px;
word-break: break-word;
}
.kb-card-ref {
font-size: 10px;
color: var(--text-3);
margin-bottom: 6px;
}
.kb-card-foot {
display: flex;
align-items: center;
gap: 6px;
}
.kb-card-badge {
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 99px;
flex-shrink: 0;
}
.kb-card-av {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
margin-left: auto;
}
.kb-empty {
font-size: 11px;
color: var(--text-3);
text-align: center;
padding: 20px 8px;
}
.kb-add-btn {
width: 100%;
font-size: 11px;
color: var(--text-3);
background: transparent;
border: none;
border-top: .5px solid var(--border);
padding: 8px 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background .1s;
}
.kb-add-btn:hover {
background: var(--surface-lt);
color: var(--text);
}
/* ── Urgente flag ──────────────────────────────────────────── */
/* .chip position:relative → merged */
.chip-urgente {
border-left: 3px solid var(--red-dk) !important;
padding-right: 22px !important; /* spazio per il badge */
}
.chip.chip-urgente::before {
content: '!';
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--red-dk);
color: #fff;
font-size: 9px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
letter-spacing: 0;
box-shadow: 0 1px 3px rgba(220,38,38,.35);
}
/* Kanban card urgente */
.kb-card-urgente {
border-left: 3px solid var(--red-dk) !important;
}
.kb-card-urgente::before {
content: '!';
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--red-dk);
color: #fff;
font-size: 9px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 1px 3px rgba(220,38,38,.35);
}
/* position:relative merged in .kb-card above */
/* ── Todo (ex Subtask) — design migliorato ──────────── */
.plan-field-label { font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:.05em; color:var(--text-3); margin-bottom:6px; display:block; }
.plan-subtask-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 0; border-bottom: .5px solid var(--border);
transition: background .1s;
}
.plan-subtask-row:hover { background: var(--surface-lt); border-radius: 4px; }
.plan-subtask-row:last-child { border-bottom: none; }
/* .plan-subtask-inp → già definita sopra */
/* .plan-subtask-inp:focus → già definita sopra */
/* .plan-subtask-done → già definita sopra */
.plan-add-sub-btn {
margin-top: 6px; font-size: 11px; color: var(--text-3);
background: transparent; border: none; cursor: pointer;
font-family: inherit; padding: 4px 0; display: flex;
align-items: center; gap: 4px; transition: color .1s;
}
.plan-add-sub-btn:hover { color: var(--green-dk); }
.plan-add-sub-btn::before { content: '+'; font-weight: 700; }
.plan-sub-count {
font-size: 10px; background: var(--surface-lt);
padding: 1px 6px; border-radius: 99px;
border: .5px solid var(--border); color: var(--text-3);
margin-left: 6px; font-weight: 500;
}
/* ── Subtask inline nella griglia ──────────────────────────── */
/* .plan-subtask-inline-row — stile in prima definizione con !important */
.plan-subtask-inline-row:last-child { border-bottom: none; }
/* .plan-subtask-inline-row:hover → già definita sopra con !important */
/* ═══════════════════════════════════════════════════════════════════════════
UTILITY CLASSES — sostituzione stili cssText inline
═══════════════════════════════════════════════════════════════════════════ */
/* ── Popup / dropdown generico ─────────────────────────────────────────── */
.plan-popup {
position: fixed;
z-index: 9999;
background: var(--bg);
border: .5px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
padding: 4px;
}
.plan-popup-opt {
display: block;
width: 100%;
text-align: left;
padding: 6px 10px;
border: none;
border-radius: 5px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
margin-bottom: 1px;
background: transparent;
}
.plan-popup-opt:hover { opacity: 0.85; }
/* ── Pill / badge generici ──────────────────────────────────────────────── */
.plan-pill {
border: none;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
text-align: center;
}
.plan-pill-sm {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
}
/* ── Colore picker (fasi) ───────────────────────────────────────────────── */
.plan-color-picker {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.plan-color-swatch-circle {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
flex-shrink: 0;
transition: border-color .1s, transform .1s;
border: 2.5px solid transparent;
}
.plan-color-swatch-circle:hover { transform: scale(1.1); }
.plan-color-swatch-circle.selected { border-color: #000 !important; }
/* ── Toggle stato (In Play / Complete) ─────────────────────────────────── */
.plan-stato-toggle {
display: flex;
gap: 8px;
}
.plan-stato-toggle-btn {
flex: 1;
padding: 7px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text-2);
transition: all .15s;
font-family: inherit;
}
/* ── Log ore form ───────────────────────────────────────────────────────── */
.plan-log-form {
display: flex;
padding: 6px 0 6px 22px;
gap: 6px;
align-items: center;
flex-wrap: wrap;
background: var(--surface-lt);
border-radius: 6px;
margin: 2px 0 4px;
}
.plan-log-history-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
font-size: 11px;
color: var(--text-2);
}
/* ── Fase header columns ────────────────────────────────────────────────── */
.plan-fase-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.plan-fase-ore-lbl {
font-size: 13px;
font-weight: 800;
}
.plan-fase-name {
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Dashboard fields ───────────────────────────────────────────────────── */
.plan-dash-meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.plan-dash-mini-kpi {
display: flex;
gap: 12px;
font-size: 11px;
color: var(--text-3);
}
.plan-dash-kpi-inline b {
font-weight: 700;
}
/* ── Rate table ─────────────────────────────────────────────────────────── */
.plan-rate-def-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-top: .5px solid var(--border-lt);
margin-top: 4px;
}
/* ── Modal color section ────────────────────────────────────────────────── */
.plan-modal-color-section {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
/* ── planRenderDetail helpers ───────────────────────────────────────────── */
.plan-detail-section-label {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
margin-bottom: 8px;
}
.plan-detail-urgente-btn {
padding: 5px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
font-family: inherit;
}
.plan-detail-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.plan-detail-kpi-cell {
background: var(--surface-lt);
border-radius: 8px;
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 2px;
border: .5px solid var(--border-lt);
}
.plan-hdr-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.plan-comm-row {
display: flex;
gap: 8px;
padding: 6px 0;
border-bottom: .5px solid var(--border-lt);
}
.plan-comm-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.plan-comm-form {
display: flex;
gap: 6px;
align-items: center;
padding-top: 6px;
flex-wrap: wrap;
}
/* ── Micro-utility: layout flexbox ricorrenti ─────────────────────────────── */
.u-flex-ac { display:flex; align-items:center; }
.u-flex-ac-g4 { display:flex; align-items:center; gap:4px; }
.u-flex-ac-g6 { display:flex; align-items:center; gap:6px; }
.u-flex-ac-g8 { display:flex; align-items:center; gap:8px; }
.u-flex-ac-g10 { display:flex; align-items:center; gap:10px; }
.u-flex-ac-sb { display:flex; align-items:center; justify-content:space-between; }
.u-flex-col-g2 { display:flex; flex-direction:column; gap:2px; }
.u-flex-col-g4 { display:flex; flex-direction:column; gap:4px; }
.u-flex-col-g6 { display:flex; flex-direction:column; gap:6px; }
.u-flex-col-g8 { display:flex; flex-direction:column; gap:8px; }
.u-flex-col-g16 { display:flex; flex-direction:column; gap:16px; }
.u-flex-g4 { display:flex; gap:4px; }
.u-flex-g6 { display:flex; gap:6px; }
.u-flex-g8 { display:flex; gap:8px; }
.u-flex-wrap { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.u-min0 { min-width:0; overflow:hidden; }
.u-overflow-h { overflow:hidden; }
/* ── Micro-utility: bottoni/link testuali ──────────────────────────────────── */
.u-btn-ghost {
background: transparent;
border: none;
font-size: 12px;
cursor: pointer;
color: var(--text-3);
}
.u-btn-ghost-sm {
background: transparent;
border: none;
font-size: 10px;
cursor: pointer;
color: var(--text-3);
}
.u-label-sm {
font-size: 10px;
color: var(--text-3);
font-weight: 600;
}
.u-muted-12 { color: var(--text-3); font-size: 12px; }
.u-green-bold { color: var(--green-dk); font-weight: 700; }
/* ── Micro-utility: bordi e sfondi ────────────────────────────────────────── */
.u-card-inp {
border: .5px solid var(--border);
border-radius: 6px;
padding: 5px 8px;
background: var(--surface);
color: var(--text-2);
}
.u-border-b { border-bottom: .5px solid var(--border-lt); }
.u-border-l-green { border-left: 3px solid var(--green); padding-left: 13px; }
/* ── Sidebar fase buttons ───────────────────────────────────────────────── */
.plan-sidebar-fase-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 5px;
width: 100%;
text-align: left;
font-size: 11px;
color: var(--text-2);
transition: background .1s;
font-family: inherit;
}
.plan-sidebar-fase-btn:hover { background: var(--surface-lt); }
.plan-sidebar-nuova-fase-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 5px;
width: 100%;
text-align: left;
font-size: 11px;
color: var(--text-3);
transition: background .1s, color .1s;
font-family: inherit;
}
.plan-sidebar-nuova-fase-btn:hover { background: var(--surface-lt); color: var(--blue-dk); }
/* ── Column sorting ────────────────────────────────────────────────────────── */
.plan-task-header span[style*="cursor: pointer"]:hover,
.plan-task-header span[style*="cursor:pointer"]:hover {
color: var(--text);
}
.plan-col-sorted {
color: var(--blue-dk, #2563eb) !important;
}
.plan-sort-arrow {
font-size: 9px;
font-weight: 700;
color: var(--blue-dk, #2563eb);
margin-left: 2px;
display: inline;
opacity: 0;
transition: opacity .1s;
}
/* Mostra freccia attiva */
.plan-col-sorted .plan-sort-arrow {
opacity: 1;
}
/* Header ordinabile — hover mostra l'icona sort */
.plan-task-header span[title="Clicca per ordinare"] {
cursor: pointer;
transition: color .1s;
gap: 4px;
}
.plan-task-header span[title="Clicca per ordinare"]:hover {
color: var(--text-primary, #1c1c1e);
}
/* Icona ↕ su hover delle colonne non ancora ordinate */
.plan-task-header span[title="Clicca per ordinare"]:not(.plan-col-sorted):hover::after {
content: '↕';
font-size: 9px;
opacity: .35;
margin-left: 2px;
}
/* Colonna ordinata — evidenzia */
.plan-col-sorted {
color: var(--blue-dk, #2563eb) !important;
}
/* ════════════════════════════════════════════════════════════
BULK ACTIONS
════════════════════════════════════════════════════════════ */
/* Checkbox di selezione — overlay sulla colonna titolo */
/* Drag handle riordinamento task */
.plan-drag-handle {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--border-strong, #ccc);
font-size: 13px;
cursor: grab;
opacity: 0;
transition: opacity .12s;
user-select: none;
z-index: 7;
}
.plan-task-row:hover .plan-drag-handle {
opacity: 1;
}
.plan-drag-handle:active { cursor: grabbing; }
.plan-task-row .plan-bulk-chk {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
opacity: 1; /* sempre visibile */
z-index: 6;
background: transparent;
border-radius: 4px;
border: none;
}
.plan-task-row .plan-bulk-chk input {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--blue-dk, #2563eb);
margin: 0;
border-radius: 3px;
}
.plan-task-row:hover .plan-bulk-chk,
.plan-task-row.plan-selected .plan-bulk-chk {
opacity: 1;
}
/* Riga selezionata */
.plan-task-row.plan-selected {
background: var(--blue-lt, #dbeafe) !important;
box-shadow: inset 3px 0 0 var(--blue-dk, #2563eb) !important;
}
.plan-task-row.plan-selected .plan-titolo-text {
color: var(--blue-dk, #2563eb);
}
/* Indent titolo fisso per checkbox sempre visibile */
.plan-task-row .plan-task-titolo {
padding-left: 28px; /* fisso — checkbox sempre presente */
}
/* Toolbar bulk — sotto la toolbar principale */
.plan-bulk-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: var(--blue-dk, #2563eb);
color: #fff;
font-size: 12px;
font-weight: 600;
border-bottom: none;
position: sticky;
top: 0;
z-index: 5;
animation: slideDown .15s ease;
}
@keyframes slideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.plan-bulk-count {
font-size: 13px;
font-weight: 800;
white-space: nowrap;
min-width: 60px;
}
.plan-bulk-sep {
width: 1px;
height: 16px;
background: rgba(255,255,255,.3);
flex-shrink: 0;
}
.plan-bulk-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.3);
background: transparent;
color: #fff;
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .1s;
white-space: nowrap;
}
.plan-bulk-action:hover { background: rgba(255,255,255,.15); }
.plan-bulk-action.danger { border-color: rgba(255,100,100,.5); }
.plan-bulk-action.danger:hover { background: rgba(220,38,38,.3); }
.plan-bulk-close {
margin-left: auto;
background: transparent;
border: none;
color: rgba(255,255,255,.7);
font-size: 16px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.plan-bulk-close:hover { color: #fff; }
/* Dropdown bulk (stato, assegnato, priorità) */
.plan-bulk-dropdown {
position: fixed;
z-index: 9999;
background: var(--bg);
border: .5px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
padding: 4px;
min-width: 140px;
}
.plan-bulk-dropdown-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border: none;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
transition: background .1s;
background: transparent;
}
.plan-bulk-dropdown-opt:hover { background: var(--surface-lt); }
/* ── Select-all checkbox nell'header ─────────────────────────────────────── */
.plan-bulk-select-all {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transition: opacity .15s;
}
.plan-bulk-select-all input {
width: 14px;
height: 14px;
cursor: pointer;
accent-color: var(--blue-dk, #2563eb);
margin: 0;
}
/* Mostra il select-all quando la bulk mode è attiva o hover sull'header */
.plan-task-header:hover .plan-bulk-select-all,
.plan-bulk-active ~ * .plan-bulk-select-all,
#plan-main.plan-bulk-active .plan-bulk-select-all {
opacity: 1;
}
.plan-task-header { position: relative; }
/* ── cssText cleanup round 3 — classi per pattern ricorrenti ──────────────── */
.u-empty-state {
padding: 60px;
text-align: center;
color: var(--text-3);
font-size: 13px;
}
.u-empty-state-sm {
padding: 40px;
text-align: center;
color: var(--text-3);
font-size: 13px;
}
.u-text-muted-12 { color: var(--text-3); font-size: 12px; }
.u-text-muted-9 { font-size: 9px; color: var(--text-3); margin-top: 1px; }
.u-text-400-muted { font-weight: 400; color: var(--text-3); }
.u-flex-jcsb { display: flex; justify-content: space-between; align-items: center; }
.u-flex-col-g1 { padding: 2px 0 4px 20px; display: flex; flex-direction: column; gap: 1px; }
.u-text-ellipsis { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-date-input-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.u-dead-wrap { position: relative; display: inline-flex; align-items: center; min-width: 44px; }
.u-toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); }
.u-bar-mini { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; width: 100%; }
.u-bar-mini-fill { height: 100%; border-radius: 2px; }
.u-fase-footer { margin: 8px 16px 24px; }
.u-resize-v { height: 60px; resize: vertical; }
/* ── Keyboard navigation ──────────────────────────────────────────────────── */
.plan-task-row.plan-focused {
outline: 2px solid var(--blue-dk, #2563eb);
outline-offset: -2px;
background: var(--surface-lt);
box-shadow: inset 3px 0 0 var(--blue-dk, #2563eb);
}
/* Rimuovi focus visivo quando si usa il mouse */
.plan-task-row:not(.plan-focused):focus { outline: none; }
/* ════════════════════════════════════════════════════════════
VISTA FINANZE — lista finanziaria progetti
════════════════════════════════════════════════════════════ */
.plan-fin-table {
margin: 0 24px;
border-radius: 8px;
overflow: hidden;
border: .5px solid var(--border);
background: var(--bg);
}
.plan-fin-hdr {
display: grid;
grid-template-columns: 2fr 1.2fr 1.4fr 1fr 1fr 120px 90px 50px 24px;
padding: 8px 16px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
background: var(--surface-lt);
border-bottom: .5px solid var(--border);
user-select: none;
gap: 8px;
}
.plan-fin-row {
display: grid;
grid-template-columns: 2fr 1.2fr 1.4fr 1fr 1fr 120px 90px 50px 24px;
padding: 10px 16px;
border-bottom: .5px solid var(--border-lt);
align-items: center;
gap: 8px;
transition: background .1s;
cursor: pointer;
}
.plan-fin-arrow {
font-size: 12px;
color: var(--text-3);
text-align: right;
opacity: 0;
transition: opacity .1s;
}
.plan-fin-row:hover .plan-fin-arrow { opacity: 1; }
.plan-fin-row:last-child { border-bottom: none; }
.plan-fin-row:hover { background: var(--surface-lt); }
.plan-fin-row.plan-fin-group {
background: var(--surface-lt);
cursor: default;
padding: 6px 16px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
grid-template-columns: 1fr;
gap: 0;
border-bottom: .5px solid var(--border);
}
/* Colonne */
.plan-fin-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-fin-cli { font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-fin-budget { font-size: 12px; font-weight: 600; }
.plan-fin-budget.over { color: var(--red-dk); }
.plan-fin-budget.ok { color: var(--text); }
.plan-fin-budget.empty { color: var(--text-3); }
.plan-fin-bar-wrap {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.plan-fin-bar-fill {
height: 100%;
border-radius: 3px;
transition: width .3s;
}
.plan-fin-profit { font-size: 12px; font-weight: 700; }
.plan-fin-profit.pos { color: var(--green-dk); }
.plan-fin-profit.neg { color: var(--red-dk); }
.plan-fin-profit.zero { color: var(--text-3); }
.plan-fin-due { font-size: 11px; color: var(--text-2); }
.plan-fin-due.overdue { color: var(--red-dk); font-weight: 600; }
.plan-fin-status { }
.plan-fin-margin { font-size: 12px; font-weight: 700; text-align: right; }
.plan-fin-margin.high { color: var(--green-dk); }
.plan-fin-margin.mid { color: var(--amber-dk); }
.plan-fin-margin.low { color: var(--red-dk); }
.plan-fin-margin.none { color: var(--text-3); }
/* KPI bar in cima */
.plan-fin-kpi-bar {
display: flex;
gap: 12px;
padding: 12px 16px;
margin: 0 24px 12px;
background: var(--surface-lt);
border-radius: 8px;
border: .5px solid var(--border);
}
.plan-fin-kpi {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.plan-fin-kpi-val {
font-size: 18px;
font-weight: 800;
color: var(--text);
white-space: nowrap;
}
.plan-fin-kpi-lbl {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
}
.plan-fin-kpi-sep {
width: .5px;
background: var(--border);
flex-shrink: 0;
}
/* ── Progetti Plan nella lista clienti ─────────────────────────────────────── */
.cli-plan-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.cli-plan-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
white-space: nowrap;
cursor: pointer;
transition: opacity .1s;
}
.cli-plan-pill:hover { opacity: .75; }
.cli-plan-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.cli-plan-pill.tipo-retainer {
background: var(--green-lt, #dcfce7);
color: var(--green-dk, #16a34a);
border: .5px solid var(--green-dk, #16a34a);
}
.cli-plan-pill.tipo-oneshot {
background: var(--amber-lt, #fef3c7);
color: var(--amber-dk, #d97706);
border: .5px solid var(--amber-dk, #d97706);
}
/* ── Card progetto nella lista clienti ─────────────────────────────────────── */
/* Le card stanno dentro la cella td.nome ma si estendono full-width
tramite margini negativi per aggirare il padding della tabella */
.cli-proj-cards {
display: flex;
flex-direction: column;
gap: 0;
margin: 6px -14px -11px; /* sfora il padding della td (14px) */
border-top: .5px solid var(--border-lt);
}
/* Mini-header colonne per le card */
.cli-proj-cards-hdr {
display: grid;
grid-template-columns: 8px minmax(0,1fr) 110px 100px 72px 60px;
gap: 8px;
padding: 5px 14px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
background: var(--surface-0);
border-bottom: .5px solid var(--border-lt);
}
.cli-proj-card {
display: grid;
grid-template-columns: 8px minmax(0,1fr) 110px 100px 72px 60px;
align-items: center;
gap: 8px;
padding: 7px 14px;
cursor: pointer;
transition: background .1s;
font-size: 11px;
border-bottom: .5px solid var(--border-lt);
background: var(--surface-0);
}
.cli-proj-card:last-child { border-bottom: none; }
.cli-proj-card:hover { background: var(--blue-lt, #dbeafe); }
.cli-proj-card-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cli-proj-card-name {
font-size: 12px; font-weight: 500; color: var(--text-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli-proj-card-name-wrap { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cli-proj-card-tipo {
font-size: 9px; font-weight: 700; padding: 1px 5px;
border-radius: 99px; flex-shrink: 0; white-space: nowrap;
}
.cli-proj-card-budget { font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--text-3); }
.cli-proj-card-budget.over { color: var(--red-dk); font-weight: 600; }
.cli-proj-card-budget.ok { color: var(--text-2); }
.cli-proj-card-ore-wrap { display: flex; flex-direction: column; gap: 2px; }
.cli-proj-card-bar { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cli-proj-card-bar-fill { height: 100%; border-radius: 2px; }
.cli-proj-card-ore-lbl { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.cli-proj-card-due { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.cli-proj-card-due.overdue { color: var(--red-dk); font-weight: 600; }
.cli-proj-card-margin { font-size: 11px; font-weight: 600; text-align: right; white-space: nowrap; }
.cli-proj-card-margin.high { color: var(--green-dk); }
.cli-proj-card-margin.mid { color: var(--amber-dk); }
.cli-proj-card-margin.low { color: var(--red-dk); }
.cli-proj-card-margin.none { color: var(--text-3); }
/* Riga cliente con progetti: padding bottom ridotto (le card lo "chiudono") */
.cli-table tr.has-projects > td { padding-bottom: 0 !important; vertical-align: top; }
.cli-table tr.has-projects > td:not(:first-child) { padding-top: 16px; }
/* ── Feed NassaContent (sola lettura) nella dashboard progetto ─────────────── */
.plan-feed-preview {
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
border: .5px solid var(--border);
background: var(--surface-lt);
}
.plan-feed-preview-hdr {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.plan-feed-preview-title {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
}
.plan-feed-preview-link {
font-size: 10px;
color: var(--blue-dk);
text-decoration: none;
cursor: pointer;
}
.plan-feed-preview-link:hover { text-decoration: underline; }
.plan-feed-preview-stats {
display: flex;
gap: 12px;
align-items: center;
}
.plan-feed-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.plan-feed-stat-val {
font-size: 18px;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.plan-feed-stat-lbl {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
}
.plan-feed-stat-sep {
width: .5px;
height: 28px;
background: var(--border);
flex-shrink: 0;
}
.plan-feed-preview-empty {
font-size: 11px;
color: var(--text-3);
text-align: center;
padding: 8px 0;
}
/* ── Colonna Budget nella lista clienti ─────────────────────────────────────── */
.cli-budget-val {
font-size: 12px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
.cli-budget-val.zero { color: var(--text-3); font-weight: 400; }
.cli-budget-val.over { color: var(--red-dk); }
.cli-budget-sub {
font-size: 10px;
color: var(--text-3);
margin-top: 1px;
white-space: nowrap;
}
.cli-budget-bar {
height: 3px;
border-radius: 2px;
background: var(--border);
overflow: hidden;
margin-top: 3px;
min-width: 60px;
}
.cli-budget-bar-fill {
height: 100%;
border-radius: 2px;
transition: width .3s;
}
/* ── Anno tab — KPI bar e miglioramenti ──────────────────────────── */
.anno-kpi-bar {
display: flex;
gap: 0;
margin: 16px 24px 0;
border: .5px solid var(--border);
border-radius: 10px;
overflow: hidden;
background: var(--bg);
}
.anno-kpi {
flex: 1;
padding: 12px 16px;
border-right: .5px solid var(--border);
display: flex;
flex-direction: column;
gap: 3px;
}
.anno-kpi:last-child { border-right: none; }
.anno-kpi-val {
font-size: 22px;
font-weight: 800;
color: var(--text);
letter-spacing: -.02em;
line-height: 1;
}
.anno-kpi-lbl {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-3);
}
.anno-kpi-sub {
font-size: 11px;
color: var(--text-3);
margin-top: 1px;
}
/* Barra ore nella tabella */
.anno-ore-wrap {
display: flex;
flex-direction: column;
gap: 3px;
width: 100%;
}
.anno-ore-bar {
height: 4px;
border-radius: 2px;
background: var(--border);
overflow: hidden;
}
.anno-ore-bar-fill {
height: 100%;
border-radius: 2px;
background: var(--purple-dk, #7C3AED);
transition: width .4s;
}
/* Colonne tabella estesa */
.anno-row {
display: grid;
grid-template-columns: 90px 80px 90px 90px 80px 130px 90px 80px 70px !important;
}
.anno-cell {
padding: 10px 12px !important;
font-size: 12px !important;
}
.anno-cell-hdr {
padding: 8px 12px !important;
font-size: 9px !important;
}
.anno-cell-month {
font-size: 12px !important;
}
/* ── Report: filtri periodo e export ──────────────────────────── */
.rep-date-inp {
font-size:11px;padding:4px 8px;border:.5px solid var(--border);
border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;cursor:pointer;
}
.rep-date-inp:focus{outline:none;border-color:var(--blue-dk);}
.rep-export-btn {
font-size:11px;font-weight:600;padding:5px 12px;border-radius:6px;
border:.5px solid var(--border);background:transparent;color:var(--text-2);
cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s;
}
.rep-export-btn:hover{background:var(--blue-dk);color:#fff;border-color:var(--blue-dk);}
.rep-proj-sel {
font-size:11px;padding:4px 8px;border:.5px solid var(--border);
border-radius:6px;background:var(--bg);color:var(--text);font-family:inherit;max-width:180px;
}
.rep-period-active{background:var(--blue-dk)!important;color:#fff!important;border-color:var(--blue-dk)!important;}
/* ── Timer live in-app ───────────────────────────────────────────────────── */
.plan-timer-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 6px;
border: .5px solid var(--border);
background: transparent;
color: var(--text-2);
font-size: 11px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: all .15s;
white-space: nowrap;
}
.plan-timer-btn:hover { background: var(--surface-lt); }
.plan-timer-btn.running {
background: var(--red-lt, #fee2e2);
color: var(--red-dk, #dc2626);
border-color: var(--red-dk, #dc2626);
animation: timerPulse 2s ease-in-out infinite;
}
@keyframes timerPulse {
0%, 100% { opacity: 1; }
50% { opacity: .7; }
}
.plan-timer-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Bottone timer su ogni riga task */
.plan-row-timer {
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: #16a34a;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .12s, background .12s, transform .1s;
flex-shrink: 0;
margin-left: 8px;
}
[data-theme="dark"] .plan-row-timer {
background: #15803d;
color: #fff;
}
.plan-row-timer:hover { background: #166534; transform: scale(1.08); }
.plan-row-timer.running {
opacity: 1;
background: #ef4444;
color: #fff;
animation: plan-timer-pulse 1.5s ease-in-out infinite;
}
[data-theme="dark"] .plan-row-timer.running {
background: #dc2626;
color: #fff;
}
@keyframes plan-timer-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
50% { box-shadow: 0 0 0 5px rgba(239,68,68,.0); }
}
/* Timer nella cella Ore — appare su hover della riga */
.plan-ore-timer {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid #16a34a;
background: #f0fdf4;
color: #16a34a;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .12s, border-color .12s, transform .12s;
}
[data-theme="dark"] .plan-ore-timer {
border-color: #22c55e;
background: #052e16;
color: #4ade80;
}
.plan-task-row:hover .plan-ore-timer { display: inline-flex; }
.plan-ore-timer:hover { background: #dcfce7; transform: scale(1.1); }
[data-theme="dark"] .plan-ore-timer:hover { background: #14532d; }
.plan-ore-timer.running {
display: inline-flex;
background: #ef4444;
border-color: #ef4444;
color: #fff;
animation: plan-timer-pulse 1.5s ease-in-out infinite;
}
[data-theme="dark"] .plan-ore-timer.running {
background: #dc2626;
border-color: #dc2626;
}
/* Navbar timer widget */
#plan-timer-widget {
display: none;
align-items: center;
gap: 8px;
padding: 4px 10px;
background: var(--red-lt, #fee2e2);
border-radius: 8px;
border: .5px solid var(--red-dk, #dc2626);
font-size: 11px;
color: var(--red-dk, #dc2626);
font-weight: 600;
cursor: pointer;
}
#plan-timer-widget.visible { display: flex; }
#plan-timer-clock { font-variant-numeric: tabular-nums; min-width: 36px; }
/* ── Notifiche deadline nella navbar ─────────────────────────────────────── */
#wp-notif-btn {
position: relative;
width: 32px;
height: 32px;
border-radius: 8px;
border: .5px solid rgba(255,255,255,.12);
background: transparent;
color: rgba(255,255,255,.6);
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
flex-shrink: 0;
}
#wp-notif-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
#wp-notif-badge {
position: absolute;
top: -3px; right: -3px;
min-width: 16px; height: 16px;
border-radius: 99px;
background: var(--red-dk, #dc2626);
color: #fff;
font-size: 9px;
font-weight: 700;
display: none;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1.5px solid #15151a;
}
#wp-notif-badge.visible { display: flex; }
/* Pannello notifiche */
#wp-notif-panel {
display: none;
position: fixed;
top: 54px; right: 12px;
width: 320px;
background: var(--bg);
border: .5px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
z-index: 9999;
overflow: hidden;
}
#wp-notif-panel.open { display: block; }
.wp-notif-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 10px;
border-bottom: .5px solid var(--border);
}
.wp-notif-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
}
.wp-notif-close {
background: transparent;
border: none;
font-size: 16px;
cursor: pointer;
color: var(--text-3);
line-height: 1;
padding: 0 2px;
}
.wp-notif-close:hover { color: var(--text); }
.wp-notif-list { max-height: 360px; overflow-y: auto; }
.wp-notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-bottom: .5px solid var(--border-lt);
cursor: pointer;
transition: background .1s;
}
.wp-notif-item:last-child { border-bottom: none; }
.wp-notif-item:hover { background: var(--surface-lt); }
.wp-notif-icon {
width: 28px; height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.wp-notif-icon.urgente { background: var(--red-lt); color: var(--red-dk); }
.wp-notif-icon.scaduta { background: var(--red-lt); color: var(--red-dk); }
.wp-notif-icon.oggi { background: var(--amber-lt); color: var(--amber-dk); }
.wp-notif-icon.domani { background: var(--amber-lt); color: var(--amber-dk); }
.wp-notif-icon.settimana{ background: var(--blue-lt); color: var(--blue-dk); }
.wp-notif-icon.ore { background: var(--purple-lt,#ede9fe); color: var(--purple-dk,#7c3aed); }
.wp-notif-body { flex: 1; min-width: 0; }
.wp-notif-text {
font-size: 12px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-notif-sub {
font-size: 10px;
color: var(--text-3);
margin-top: 2px;
white-space: nowrap;
}
.wp-notif-empty {
padding: 24px 16px;
text-align: center;
font-size: 12px;
color: var(--text-3);
}
/* ── Ricerca globale Cmd+K ───────────────────────────────────────────────── */
#wp-search-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 99999;
align-items: flex-start;
justify-content: center;
padding-top: 80px;
backdrop-filter: blur(2px);
}
#wp-search-overlay.open { display: flex; }
#wp-search-box {
width: 560px;
max-width: calc(100vw - 32px);
background: var(--bg);
border: .5px solid var(--border);
border-radius: 14px;
box-shadow: 0 16px 48px rgba(0,0,0,.24);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: calc(100vh - 160px);
}
.wp-search-input-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: .5px solid var(--border);
}
.wp-search-icon {
font-size: 15px;
color: var(--text-3);
flex-shrink: 0;
}
#wp-search-inp {
flex: 1;
border: none;
outline: none;
font-size: 15px;
font-weight: 400;
color: var(--text);
background: transparent;
font-family: inherit;
}
#wp-search-inp::placeholder { color: var(--text-3); }
.wp-search-esc {
font-size: 10px;
color: var(--text-3);
background: var(--surface-lt);
border: .5px solid var(--border);
border-radius: 5px;
padding: 2px 6px;
flex-shrink: 0;
font-family: inherit;
}
/* Filtri rapidi */
.wp-search-filters {
display: flex;
gap: 6px;
padding: 8px 16px;
border-bottom: .5px solid var(--border-lt);
overflow-x: auto;
scrollbar-width: none;
}
.wp-search-filters::-webkit-scrollbar { display: none; }
.wp-search-filter {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
border: .5px solid var(--border);
background: transparent;
color: var(--text-3);
cursor: pointer;
white-space: nowrap;
font-family: inherit;
transition: all .1s;
}
.wp-search-filter:hover { background: var(--surface-lt); color: var(--text); }
.wp-search-filter.active {
background: var(--blue-dk);
color: #fff;
border-color: var(--blue-dk);
}
/* Risultati */
.wp-search-results {
overflow-y: auto;
flex: 1;
}
.wp-search-section-hdr {
padding: 8px 16px 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-3);
background: var(--surface-lt);
border-bottom: .5px solid var(--border-lt);
}
.wp-search-result {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
cursor: pointer;
transition: background .1s;
border-bottom: .5px solid var(--border-lt);
}
.wp-search-result:last-child { border-bottom: none; }
.wp-search-result:hover,
.wp-search-result.focused { background: var(--blue-lt, #dbeafe); }
.wp-search-result-icon {
width: 30px; height: 30px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.wp-search-result-body { flex: 1; min-width: 0; }
.wp-search-result-title {
font-size: 13px;
font-weight: 500;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-search-result-title mark {
background: var(--amber-lt, #fef3c7);
color: var(--amber-dk, #d97706);
border-radius: 2px;
font-weight: 700;
}
.wp-search-result-sub {
font-size: 11px;
color: var(--text-3);
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wp-search-result-badge {
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 99px;
flex-shrink: 0;
white-space: nowrap;
}
.wp-search-empty {
padding: 32px 16px;
text-align: center;
font-size: 13px;
color: var(--text-3);
}
.wp-search-footer {
padding: 8px 16px;
border-top: .5px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
font-size: 10px;
color: var(--text-3);
}
.wp-search-footer kbd {
background: var(--surface-lt);
border: .5px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
font-size: 10px;
font-family: inherit;
}