/* ============================================================
   PANE-style workspace — CSS originale
   Ricostruito da zero: token ispirati al linguaggio "liquid glass"
   ============================================================ */

/* ---------- TOKEN ---------- */
:root{
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px;
  --fs-title:clamp(34px,2.2vw + 14px,58px);

  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --gap:clamp(12px,.6vw + 8px,20px);
  --gutter:clamp(14px,1.4vw + 6px,32px);
  --side-w:252px; --frame:1840px;

  --ease:cubic-bezier(.22,.8,.24,1);
  --spring:cubic-bezier(.34,1.45,.55,1);
}

/* ---------- TEMA CHIARO ---------- */
:root{
  color-scheme:light;
  --bg:#eef1f7;
  --text:#101014;
  --text-2:rgb(16 16 20 / .68);
  --text-3:rgb(16 16 20 / .45);

  --glass:rgb(255 255 255 / .34);
  --glass-chrome:rgb(255 255 255 / .26);
  --glass-thick:#fafcffc2;
  --glass-solid:#f3f5fa;
  --blur:14px; --blur-thick:30px;
  --sat:170%; --bright:1.02;

  --rim-hi:#ffffffd9; --rim-mid:#ffffff73; --rim-lo:#ffffff1f;
  --sheen:#ffffff1a; --glint:#ffffff21;

  --depth:inset 0 1px 1px #ffffffb3, inset 0 -1px 1px #ffffff8c,
          inset 3px 4px 12px -6px #ffffffcc, inset -4px -6px 14px -8px #ffffff99;
  --shadow:0 1px 2px #1018281a, 0 24px 48px -24px #1018282e;
  --shadow-lift:0 2px 6px #1018281f, 0 28px 56px -22px #1018283d;

  --fill:#1018280f; --fill-2:#1018281a; --fill-hover:#1018280a;
  --sep:rgb(16 16 20 / .09);
  --well:#1018280d;

  --accent:#2f7cf6; --accent-ink:#1a5fd0;
  --green:#22a559; --orange:#f2711c; --pink:#e9468f; --purple:#8b5cf6;
  --teal:#0ea5a4; --yellow:#e3a008; --danger:#d92d3a;

  --wall-1:#e7ecf6; --wall-2:#dfe6f3; --wall-3:#eae7f4; --wall-4:#e4f0ee;
}

/* ---------- TEMA SCURO ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0c;
  --text:#f5f5f7;
  --text-2:#ebebf5b3;
  --text-3:#ebebf58c;

  --glass:rgb(26 26 36 / .42);
  --glass-chrome:rgb(28 28 38 / .36);
  --glass-thick:#1a1a1edb;
  --glass-solid:#1c1c20;
  --blur:14px; --blur-thick:30px;
  --sat:175%; --bright:.95;

  --rim-hi:#ffffffd9; --rim-mid:#ffffff73; --rim-lo:#ffffff1f;
  --sheen:#ffffff1a; --glint:#ffffff21;

  --depth:inset 0 1px 1px #ffffff4d, inset 0 -1px 1px #ffffff1a,
          inset 3px 4px 12px -6px #ffffff3d, inset -4px -6px 14px -8px #ffffff1f,
          inset 0 -16px 28px -18px #00000073;
  --shadow:0 1px 2px #0000004d, 0 24px 48px -22px #000000bf;
  --shadow-lift:0 2px 6px #00000059, 0 28px 56px -20px #000c;

  --fill:#9696af29; --fill-2:#9696af42; --fill-hover:#9696af1f;
  --sep:#ffffff1a;
  --well:#9696af29;

  --accent:#1f6fe6; --accent-ink:#7db4ff;
  --green:#34c46b; --orange:#ff8a3d; --pink:#f2649f; --purple:#a07cff;
  --teal:#22c3c0; --yellow:#f5b82e; --danger:#ff5a64;

  --wall-1:#232428; --wall-2:#1d2027; --wall-3:#26222c; --wall-4:#1c2724;
}

/* accenti alternativi */
:root[data-accent="purple"]{--accent:#7b3ff0;--accent-ink:#c0a2ff}
:root[data-accent="teal"]{--accent:#0e9a99;--accent-ink:#57e0dd}
:root[data-accent="pink"]{--accent:#d8407f;--accent-ink:#ff9dc4}
:root[data-accent="orange"]{--accent:#e06a12;--accent-ink:#ffb37a}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-md);line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ---------- WALLPAPER ---------- */
.wall{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(1100px 600px at 12% -8%, var(--wall-1) 0%, transparent 60%),
    radial-gradient(900px 700px at 88% 4%, var(--wall-3) 0%, transparent 58%),
    radial-gradient(800px 700px at 70% 100%, var(--wall-4) 0%, transparent 60%),
    radial-gradient(700px 500px at 0% 90%, var(--wall-2) 0%, transparent 62%),
    var(--bg);
}
.wall::before,.wall::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  animation:drift 26s var(--ease) infinite alternate;
}
.wall::before{
  width:46vw;height:46vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle at 30% 30%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 68%);
}
.wall::after{
  width:40vw;height:40vw;right:-6vw;bottom:-12vw;animation-delay:-11s;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb,var(--purple) 26%,transparent), transparent 70%);
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(3vw,2vw,0) scale(1.12)}
}

/* ---------- LAYOUT ---------- */
.app{
  position:relative;z-index:1;height:100%;
  display:grid;grid-template-columns:var(--side-w) 1fr;
  gap:0;padding:var(--gutter);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- VETRO ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
  backdrop-filter:blur(var(--blur)) saturate(var(--sat)) brightness(var(--bright));
  border:.5px solid var(--rim-lo);
  box-shadow:var(--shadow), var(--depth);
  border-radius:var(--r-lg);
  position:relative;
}
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--sheen),transparent 42%);
  mix-blend-mode:overlay;opacity:.7;
}
.glass--thick{
  background:var(--glass-thick);
  -webkit-backdrop-filter:blur(var(--blur-thick)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-thick)) saturate(var(--sat));
}

/* ---------- SIDEBAR ---------- */
.side{
  border-radius:var(--r-xl);
  padding:16px 14px;
  display:flex;flex-direction:column;gap:18px;
  overflow:hidden;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 2px;text-decoration:none;color:inherit;
}
.brand__mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb,var(--accent) 88%,#fff), var(--accent));
  box-shadow:inset 0 1px 1px #ffffff66, 0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent);
  flex:0 0 auto;
}
.brand__mark svg{stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round}
.brand__name{font-family:var(--font-display);font-size:19px;font-weight:650;letter-spacing:-.02em}

.nav{display:flex;flex-direction:column;gap:2px;position:relative}
.nav__item{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:12px;
  color:var(--text-2);text-decoration:none;font-size:14px;font-weight:520;
  transition:background .18s var(--ease), color .18s var(--ease);
  position:relative;z-index:1;
}
.nav__item .ico{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85}
.nav__item:hover{background:var(--fill-hover);color:var(--text)}
.nav__item.is-active{
  color:var(--text);background:var(--fill);
  box-shadow:inset 0 1px 0 var(--rim-hi), inset 0 -1px 0 var(--rim-lo);
}
.nav__item.is-active .ico{opacity:1;color:var(--accent-ink)}
.nav__count{
  margin-left:auto;font-size:11px;font-weight:650;color:var(--text-2);
  background:var(--fill-2);border-radius:7px;padding:1px 6px;min-width:20px;text-align:center;
}
.nav__label{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);padding:14px 11px 6px;
}

.side__foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.me{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;
  background:var(--fill);cursor:pointer;transition:background .18s var(--ease);
}
.me:hover{background:var(--fill-2)}
.me__name{font-size:13px;font-weight:600;line-height:1.2}
.me__role{font-size:11.5px;color:var(--text-3)}

/* avatar */
.av{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;
  box-shadow:inset 0 0 0 1.5px var(--rim-mid), 0 2px 6px -2px #0006;
}
.av--s{width:24px;height:24px;font-size:10.5px}
.av--l{width:38px;height:38px;font-size:14px}

/* ---------- MAIN ---------- */
.main{
  overflow-y:auto;overflow-x:hidden;
  padding-left:var(--gap);
  scrollbar-width:thin;scrollbar-color:var(--fill-2) transparent;
}
.main::-webkit-scrollbar{width:10px}
.main::-webkit-scrollbar-thumb{background:var(--fill-2);border-radius:10px;border:3px solid transparent;background-clip:content-box}

.topbar{
  display:flex;align-items:center;gap:12px;
  padding:0 4px 18px;position:sticky;top:0;z-index:6;
  background:linear-gradient(180deg, var(--bg) 30%, transparent);
  backdrop-filter:blur(6px);
}
.topbar h1{
  font-family:var(--font-display);font-size:var(--fs-title);font-weight:640;
  letter-spacing:-.03em;line-height:1.02;margin:0;
}
.topbar .sub{font-size:13.5px;color:var(--text-3);margin-top:4px}
.spacer{flex:1}

/* pulsante switch verso l'altra app */
.switch{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:11px;
  border:.5px solid var(--rim-lo);background:var(--fill);color:var(--text);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--rim-mid);
  transition:background .18s var(--ease), transform .14s var(--spring);
}
.switch:hover{background:var(--fill-2);transform:translateY(-1px)}
.switch:active{transform:scale(.97)}
.switch b{font-weight:700}
.switch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:.55}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:12px;border:.5px solid var(--rim-lo);
  background:var(--fill);color:var(--text);
  padding:9px 14px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  transition:transform .14s var(--spring), background .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:inset 0 1px 0 var(--rim-mid);
  white-space:nowrap;
}
.btn:hover{background:var(--fill-2)}
.btn:active{transform:scale(.97)}
.btn--accent{
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 115%,#fff), var(--accent));
  color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 1px #ffffff59, 0 8px 20px -10px color-mix(in srgb,var(--accent) 90%,transparent);
}
.btn--accent:hover{filter:brightness(1.06)}
.btn--ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-2)}
.btn--ghost:hover{background:var(--fill);color:var(--text)}
.btn--sm{padding:6px 11px;font-size:12.5px;border-radius:10px}
.iconbtn{
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  border:.5px solid var(--rim-lo);background:var(--fill);cursor:pointer;color:var(--text-2);
  transition:background .18s var(--ease),color .18s var(--ease),transform .14s var(--spring);
  box-shadow:inset 0 1px 0 var(--rim-mid);
}
.iconbtn:hover{background:var(--fill-2);color:var(--text)}
.iconbtn:active{transform:scale(.94)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- GRIGLIA HOME ---------- */
.grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(12,1fr);
  padding-bottom:28px;
}
.card{
  padding:18px;border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:14px;min-width:0;
  transition:box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover{box-shadow:var(--shadow-lift), var(--depth)}
.card__head{display:flex;align-items:center;gap:9px}
.card__title{font-size:13px;font-weight:650;letter-spacing:.01em}
.card__hint{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.card__ico{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--fill-2);color:var(--accent-ink);
}
.card__ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* colonne */
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
.col-3{grid-column:span 3}
@media (max-width:1180px){
  .col-8,.col-4,.col-6{grid-column:span 12}
  .col-3{grid-column:span 6}
}
@media (max-width:720px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .col-3{grid-column:span 12}
}

/* ---------- FOCUS ---------- */
.focus{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ring{position:relative;width:150px;height:150px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg);display:block}
.ring__track{stroke:var(--fill-2);fill:none}
.ring__bar{
  stroke:url(#focusGrad);fill:none;stroke-linecap:round;
  transition:stroke-dashoffset .6s var(--ease);
}
.ring__mid{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px;
}
.ring__time{
  font-family:var(--font-display);font-size:30px;font-weight:640;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.ring__lab{font-size:11px;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase}
.focus__side{display:flex;flex-direction:column;gap:10px;min-width:180px;flex:1}
.focus__task{font-size:14.5px;font-weight:600;line-height:1.3}
.focus__meta{font-size:12.5px;color:var(--text-3)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;cursor:pointer;
  background:var(--fill);border:.5px solid var(--rim-lo);color:var(--text-2);
  transition:.16s var(--ease);
}
.chip:hover{background:var(--fill-2);color:var(--text)}
.chip.is-on{background:var(--accent);color:#fff;border-color:transparent}

/* ---------- TASK LIST ---------- */
.tasks{display:flex;flex-direction:column;gap:2px}
.task{
  display:flex;align-items:flex-start;gap:11px;
  padding:9px 10px;border-radius:11px;cursor:pointer;
  transition:background .16s var(--ease);
}
.task:hover{background:var(--fill-hover)}
.tick{
  width:19px;height:19px;border-radius:6px;flex:0 0 auto;margin-top:1px;
  border:1.5px solid var(--rim-mid);display:grid;place-items:center;
  transition:.18s var(--spring);background:transparent;
}
.tick svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:.18s var(--spring)}
.task:hover .tick{border-color:var(--accent)}
.task.is-done .tick{background:var(--accent);border-color:var(--accent)}
.task.is-done .tick svg{opacity:1;transform:scale(1)}
.task__body{min-width:0;flex:1}
.task__name{font-size:13.8px;font-weight:550;line-height:1.35}
.task.is-done .task__name{color:var(--text-3);text-decoration:line-through}
.task__meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11.5px;color:var(--text-3)}
.pill{
  font-size:10.5px;font-weight:650;padding:2px 7px;border-radius:6px;
  background:var(--fill-2);color:var(--text-2);
}
.pill--pink{background:color-mix(in srgb,var(--pink) 20%,transparent);color:var(--pink)}
.pill--green{background:color-mix(in srgb,var(--green) 20%,transparent);color:var(--green)}
.pill--orange{background:color-mix(in srgb,var(--orange) 22%,transparent);color:var(--orange)}

/* ---------- EVENTI ---------- */
.events{display:flex;flex-direction:column;gap:8px}
.event{
  display:flex;gap:11px;align-items:center;padding:10px;border-radius:12px;
  background:var(--fill-hover);transition:background .16s var(--ease);
}
.event:hover{background:var(--fill)}
.event__time{
  font-size:11.5px;font-weight:650;color:var(--text-2);min-width:44px;
  font-variant-numeric:tabular-nums;
}
.event__bar{width:3px;align-self:stretch;border-radius:3px;background:var(--accent)}
.event__name{font-size:13.2px;font-weight:560;line-height:1.3}
.event__where{font-size:11.5px;color:var(--text-3);margin-top:1px}

/* ---------- PROGETTI ---------- */
.proj{display:flex;flex-direction:column;gap:13px}
.proj__row{display:flex;flex-direction:column;gap:6px}
.proj__top{display:flex;align-items:center;gap:8px;font-size:13.2px;font-weight:560}
.proj__pct{margin-left:auto;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:99px;background:var(--fill-2);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;transition:width .7s var(--ease)}

/* ---------- TEAM ---------- */
.team{display:flex;flex-direction:column;gap:3px}
.member{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:11px;transition:background .16s var(--ease)}
.member:hover{background:var(--fill-hover)}
.member__n{font-size:13.2px;font-weight:550}
.member__s{font-size:11.5px;color:var(--text-3);margin-left:auto;display:flex;align-items:center;gap:5px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.dot--busy{background:var(--orange)}
.dot--away{background:var(--text-3)}

/* ---------- STREAK ---------- */
.streak{display:flex;align-items:flex-end;gap:5px;height:78px;padding-top:6px}
.streak__d{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.streak__b{
  width:100%;border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb,var(--accent) 55%,transparent));
  transition:height .5s var(--ease);min-height:3px;
}
.streak__b--muted{background:var(--fill-2)}
.streak__l{font-size:9.5px;color:var(--text-3);font-weight:600}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);
  background:var(--glass-thick);backdrop-filter:blur(var(--blur-thick)) saturate(var(--sat));
  border:.5px solid var(--rim-lo);border-radius:14px;box-shadow:var(--shadow);
  padding:11px 18px;font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:.26s var(--ease);z-index:100;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- ANIMAZIONI D'INGRESSO ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card,.side{animation:rise .5s var(--ease) both}
.card:nth-child(1){animation-delay:.02s}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.1s}
.card:nth-child(4){animation-delay:.14s}
.card:nth-child(5){animation-delay:.18s}
.card:nth-child(6){animation-delay:.22s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--glass-solid);padding:10px 14px;border-radius:10px}