/* ============================================================
   RAPPORT-style CRM — CSS originale
   Palette calda (crema/butter/pine/tomato), tab bar a pillola, dock
   ============================================================ */

:root{
  --font:"Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg:#ebe8e1;
  --mesh-a:#f2d3bd; --mesh-b:#cfdfcd; --mesh-c:#f1e4bf;

  --glass:#ffffff75; --glass-2:#ffffffa3; --glass-3:#ffffffd1;
  --solid:#f6f4ef; --float:#fdfcf9;
  --well:#17191a0f; --line:#17191a17; --line-2:#17191a29;
  --rim:#ffffffc7;
  --shadow:0 1px 0 #ffffffb3 inset, 0 24px 48px -30px #46321e47;
  --shadow-pop:0 24px 60px -18px #281e1452, 0 2px 6px #281e1414;

  --text:#17191a; --muted:#676a66; --faint:#8e918c;
  --cream:#fbf8f2;
  --butter:#f2c94c; --on-butter:#17191a;
  --pine:#2f5c50;   --on-pine:#fbf8f2;
  --tomato:#c8431f; --on-tomato:#fbf8f2;
  --ink:#17191a;    --on-ink:#fbf8f2;
  --plain:#ffffff94; --on-plain:#17191a;
  --good:#2f7a52; --bad:#c8431f;
  --dock:#17191a; --on-dock:#fbf8f2;
  --pill:#17191a; --on-pill:#fbf8f2;

  --r-card:26px; --r-tile:22px; --r-ctl:999px;
  --gap:16px;
  --dock-x:20px; --dock-w:60px;
  --gutter:clamp(16px,1.6vw,28px);
  --app-max:1840px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111412;
  --mesh-a:#c8431f47; --mesh-b:#2f5c5080; --mesh-c:#f2c94c1a;
  --glass:#ffffff0d; --glass-2:#ffffff16; --glass-3:#222624;
  --solid:#1c201e; --float:#242927;
  --well:#ffffff0f; --line:#ffffff14; --line-2:#ffffff29;
  --rim:#ffffff12;
  --shadow:0 1px 0 #ffffff0d inset, 0 24px 48px -30px #000000b3;
  --shadow-pop:0 24px 60px -18px #000000b3, 0 0 0 1px #ffffff14;
  --text:#f1eee8; --muted:#a3a6a0; --faint:#7d807b;
  --ink:#f1eee8; --on-ink:#17191a;
  --tomato:#d8532d;
  --plain:#ffffff12; --on-plain:#f1eee8;
  --good:#6cc59a; --bad:#f08a68;
  --dock:#ffffff14; --on-dock:#f1eee8;
  --pill:#f1eee8; --on-pill:#17191a;
}

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

/* ---------- MESH ---------- */
.mesh{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mesh i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.95;will-change:transform}
.mesh__a{width:62vmax;height:62vmax;top:-24vmax;left:-18vmax;background:radial-gradient(closest-side,var(--mesh-a),transparent);animation:float1 22s var(--ease) infinite alternate}
.mesh__b{width:70vmax;height:70vmax;bottom:-30vmax;right:-24vmax;background:radial-gradient(closest-side,var(--mesh-b),transparent);animation:float2 26s var(--ease) infinite alternate}
.mesh__c{width:44vmax;height:44vmax;top:34%;left:44%;background:radial-gradient(closest-side,var(--mesh-c),transparent);animation:float1 19s var(--ease) infinite alternate-reverse}
@keyframes float1{from{transform:translate3d(0,0,0)}to{transform:translate3d(4vmax,3vmax,0)}}
@keyframes float2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4vmax,-2vmax,0)}}

/* ---------- APP ---------- */
.app{
  height:100%;display:flex;flex-direction:column;
  padding:var(--gutter);
  padding-left:max(var(--gutter), calc(var(--gutter) + var(--dock-w)));
  box-sizing:border-box;
  max-width:var(--app-max);margin:0 auto;
}

/* ---------- TOPBAR ---------- */
.top{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding-bottom:16px;position:relative;z-index:10;
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;white-space:nowrap}
.brand__mark{
  width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);
  box-shadow:0 6px 14px -8px #17191a80;
}
.brand__mark svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.brand__name{font-size:19px;font-weight:600;letter-spacing:-.02em}

/* tabs a pillola */
.tabs{justify-self:center;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:var(--r-ctl)}
.tabs::-webkit-scrollbar{display:none}
.tabs__track{position:relative;display:flex;gap:2px;width:max-content;padding:4px;border-radius:var(--r-ctl);
  background:var(--glass-2);border:1px solid var(--rim);box-shadow:var(--shadow)}
.tab{
  position:relative;z-index:2;padding:10px 17px;font-size:13.5px;font-weight:600;
  color:var(--muted);text-decoration:none;border-radius:var(--r-ctl);white-space:nowrap;
  transition:color .28s var(--ease);
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--on-pill)}
.tabs__pill{
  position:absolute;z-index:1;top:4px;bottom:4px;left:0;width:0;
  background:var(--pill);border-radius:var(--r-ctl);
  transition:left .34s var(--ease), width .34s var(--ease);
}

.top__tools{display:flex;align-items:center;gap:8px}
.ibtn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-ctl);
  border:1px solid var(--rim);background:var(--glass-2);color:var(--text);
  cursor:pointer;transition:transform .16s var(--ease), background .2s var(--ease);
  box-shadow:0 1px 0 #ffffffb3 inset;
}
.ibtn:hover{background:var(--glass-3);transform:translateY(-1px)}
.ibtn:active{transform:scale(.95)}
.ibtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* pulsante switch app */
.switch{
  display:inline-flex;align-items:center;gap:7px;
  padding:0 15px;height:38px;border-radius:var(--r-ctl);
  border:1px solid var(--rim);background:var(--glass-2);color:var(--text);
  font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform .16s var(--ease), background .2s var(--ease);
  box-shadow:0 1px 0 #ffffffb3 inset;white-space:nowrap;
}
.switch:hover{background:var(--glass-3);transform:translateY(-1px)}
.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:.6}

.av{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#fff;
  background:linear-gradient(160deg,#2f5c50,#1d3a32);
  box-shadow:0 0 0 2px var(--rim), 0 4px 10px -4px #17191a80;cursor:pointer;
}

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

/* ---------- CARDS ---------- */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(12,1fr)}
.card{
  background:var(--glass);border:1px solid var(--rim);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:18px;position:relative;min-width:0;
  display:flex;flex-direction:column;gap:14px;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  animation:rise .5s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card__head{display:flex;align-items:center;gap:9px}
.card__title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.card__hint{margin-left:auto;font-size:12px;color:var(--faint)}
.card__link{font-size:12.5px;font-weight:600;color:var(--pine);text-decoration:none}
:root[data-theme="dark"] .card__link{color:var(--good)}

.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
@media (max-width:1200px){
  .col-3{grid-column:span 6}
  .col-4,.col-5,.col-7,.col-8{grid-column:span 6}
}
@media (max-width:820px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8{grid-column:span 12}
  .top{grid-template-columns:auto 1fr;row-gap:10px}
  .top__tools{grid-column:span 2;justify-content:flex-end}
  .app{padding-left:var(--gutter);padding-bottom:90px}
}

/* ---------- KPI TILES ---------- */
.kpi{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-tile);
  background:var(--glass-2);border:1px solid var(--rim);box-shadow:var(--shadow)}
.kpi__lab{font-size:12.5px;color:var(--muted);font-weight:500}
.kpi__val{font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi__delta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600}
.up{color:var(--good)} .down{color:var(--bad)}
.kpi__delta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- CHART ---------- */
.chart{width:100%;height:170px;display:block;overflow:visible}
.chart__area{fill:url(#gradRev);opacity:.5}
.chart__line{fill:none;stroke:var(--tomato);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.chart__dot{fill:var(--bg);stroke:var(--tomato);stroke-width:2.5}
.chart__grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.chart__lbl{fill:var(--faint);font-size:10.5px;font-family:var(--font)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- PIPELINE ---------- */
.stages{display:flex;flex-direction:column;gap:9px}
.stage{display:flex;align-items:center;gap:10px;font-size:13px}
.stage__name{min-width:86px;color:var(--muted);font-weight:500}
.stage__bar{flex:1;height:26px;border-radius:9px;background:var(--well);overflow:hidden;position:relative}
.stage__bar>i{
  display:block;height:100%;border-radius:9px;width:0;
  transition:width .8s var(--ease);
  display:flex;align-items:center;justify-content:flex-end;padding-right:8px;
}
.stage__n{font-size:11.5px;font-weight:700;color:var(--on-pine)}
.stage__val{font-size:12.5px;font-weight:600;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- TABELLA DEAL ---------- */
.deals{display:flex;flex-direction:column}
.drow{
  display:grid;grid-template-columns:1.6fr .9fr .8fr .7fr;gap:10px;align-items:center;
  padding:11px 10px;border-radius:14px;font-size:13.2px;
  transition:background .16s var(--ease);cursor:pointer;
}
.drow:hover{background:var(--well)}
.drow--head{
  font-size:11.5px;font-weight:600;color:var(--faint);text-transform:uppercase;
  letter-spacing:.05em;padding:4px 10px 8px;cursor:default;
}
.drow--head:hover{background:none}
.drow__co{display:flex;align-items:center;gap:9px;min-width:0}
.drow__co b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow__logo{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  font-size:11px;font-weight:700;color:var(--on-cream,#fff);
}
.drow__amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.tag{
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;
  justify-self:start;letter-spacing:.01em;
}
.tag--lead{background:var(--well);color:var(--muted)}
.tag--disc{background:#f2c94c33;color:#8a6d0b}
.tag--prop{background:#2f5c5022;color:var(--pine)}
.tag--won{background:#2f7a5222;color:var(--good)}
.tag--lost{background:#c8431f1f;color:var(--bad)}
:root[data-theme="dark"] .tag--disc{background:#f2c94c22;color:#f2c94c}
:root[data-theme="dark"] .tag--prop{background:#6cc59a1f;color:#6cc59a}

/* ---------- ACTIVITY ---------- */
.feed{display:flex;flex-direction:column;gap:2px}
.act{display:flex;gap:11px;padding:9px 8px;border-radius:13px;transition:background .16s var(--ease)}
.act:hover{background:var(--well)}
.act__av{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff}
.act__txt{font-size:13px;line-height:1.35;min-width:0}
.act__txt b{font-weight:600}
.act__time{font-size:11.5px;color:var(--faint);margin-top:1px}

/* ---------- TASK ---------- */
.tasks{display:flex;flex-direction:column;gap:1px}
.task{display:flex;align-items:center;gap:11px;padding:10px 8px;border-radius:13px;cursor:pointer;transition:background .16s var(--ease)}
.task:hover{background:var(--well)}
.tick{
  width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line-2);display:grid;place-items:center;transition:.2s var(--ease);
}
.tick svg{width:11px;height:11px;stroke:var(--on-pine);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:.2s var(--ease)}
.task.is-done .tick{background:var(--pine);border-color:var(--pine)}
.task.is-done .tick svg{opacity:1}
.task__n{font-size:13.2px;font-weight:500}
.task.is-done .task__n{color:var(--faint);text-decoration:line-through}
.task__when{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap}

/* ---------- TOP CUSTOMERS ---------- */
.cust{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:13px;transition:background .16s var(--ease)}
.cust:hover{background:var(--well)}
.cust__n{font-size:13.2px;font-weight:600;line-height:1.2}
.cust__m{font-size:11.5px;color:var(--faint)}
.cust__v{margin-left:auto;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- DOCK ---------- */
.dock{
  position:fixed;left:max(var(--dock-x), calc((100vw - var(--app-max)) / 2 + var(--dock-x)));
  top:0;bottom:0;margin:auto 0;height:fit-content;width:var(--dock-w);
  display:flex;flex-direction:column;gap:4px;align-items:center;padding:8px;
  background:var(--dock);color:var(--on-dock);border-radius:var(--r-ctl);
  box-shadow:0 20px 40px -18px #00000073;z-index:30;
  backdrop-filter:blur(18px);
}
.dock__b{
  width:42px;height:42px;border-radius:var(--r-ctl);display:grid;place-items:center;
  border:none;background:transparent;color:inherit;cursor:pointer;
  transition:background .18s var(--ease), transform .16s var(--ease);opacity:.75;
}
.dock__b:hover{background:#ffffff1f;opacity:1}
:root[data-theme="dark"] .dock__b:hover{background:#ffffff14}
.dock__b.is-on{background:#ffffff26;opacity:1}
.dock__b svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .dock{top:auto;bottom:calc(12px + env(safe-area-inset-bottom));left:0;right:0;margin:0 auto;
    flex-direction:row;width:fit-content;height:auto;padding:6px}
}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--solid);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r-ctl);box-shadow:var(--shadow-pop);
  padding:11px 20px;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)}

:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:10px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--solid);padding:10px 14px;border-radius:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ============================================================
   SEZIONI INTERNE (pipeline, customers, schedule, finance, growth, projects, settings)
   ============================================================ */

/* ---------- PAGE HEAD ---------- */
.pagehead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:var(--gap)}
.pagehead__t{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.03em;margin:0;line-height:1.1}
.pagehead__s{font-size:13px;color:var(--muted);margin:4px 0 0}
.headtools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.search{
  height:38px;padding:0 15px;border-radius:var(--r-ctl);
  border:1px solid var(--rim);background:var(--glass-2);color:var(--text);
  font:inherit;font-size:13.5px;min-width:190px;
  box-shadow:0 1px 0 #ffffffb3 inset;outline:none;
}
.search::placeholder{color:var(--faint)}
.search:focus{border-color:var(--pine)}
:root[data-theme="dark"] .search:focus{border-color:var(--good)}

.sel{
  height:38px;padding:0 34px 0 15px;border-radius:var(--r-ctl);
  border:1px solid var(--rim);background:var(--glass-2);color:var(--text);
  font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676a66' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;
  box-shadow:0 1px 0 #ffffffb3 inset;
}

.pillbtn{
  height:38px;padding:0 16px;border-radius:var(--r-ctl);
  border:1px solid var(--rim);background:var(--glass-2);color:var(--text);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 0 #ffffffb3 inset;
  transition:background .18s var(--ease), transform .16s var(--ease);
}
.pillbtn:hover{background:var(--glass-3);transform:translateY(-1px)}
.pillbtn:active{transform:scale(.97)}
.pillbtn.is-on{background:var(--pill);color:var(--on-pill);border-color:transparent}
.pillbtn--ink{background:var(--ink);color:var(--on-ink);border-color:transparent}
.pillbtn--ink:hover{filter:brightness(1.12);background:var(--ink)}
.pillbtn--danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,transparent)}
.pillbtn--danger:hover{background:color-mix(in srgb,var(--bad) 12%,transparent)}
.pillbtn--sm{height:30px;padding:0 12px;font-size:12px}

/* ---------- PIPELINE BOARD ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.board{grid-template-columns:1fr}}

.bcol{
  background:var(--glass);border:1px solid var(--rim);border-radius:var(--r-tile);
  padding:12px;min-height:180px;transition:background .2s var(--ease), border-color .2s var(--ease);
}
.bcol.is-over{background:var(--glass-3);border-color:var(--pine)}
:root[data-theme="dark"] .bcol.is-over{border-color:var(--good)}

.bcol__h{display:flex;align-items:center;gap:7px;padding:2px 4px 10px;font-size:12.5px}
.bcol__dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.bcol__h b{font-weight:600;font-size:12.5px}
.bcol__n{font-size:11px;color:var(--faint);background:var(--well);border-radius:6px;padding:1px 6px}
.bcol__v{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.bcol__list{display:flex;flex-direction:column;gap:8px}
.bcol__empty{font-size:12px;color:var(--faint);padding:14px 6px;text-align:center}

.dcard{
  background:var(--glass-2);border:1px solid var(--rim);border-radius:16px;padding:11px;
  cursor:grab;transition:box-shadow .2s var(--ease), transform .2s var(--ease);
  box-shadow:0 1px 0 #ffffffb3 inset, 0 6px 16px -12px #46321e50;
}
.dcard:hover{transform:translateY(-1px);box-shadow:0 1px 0 #ffffffb3 inset, 0 12px 24px -14px #46321e66}
.dcard.is-drag{opacity:.45;transform:scale(.97)}
.dcard__top{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:5px}
.dcard__top b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard__name{font-size:12px;color:var(--muted);line-height:1.35;margin-bottom:8px}
.dcard__foot{display:flex;align-items:center;gap:8px;font-size:11.5px}
.dcard__amt{font-weight:700;font-variant-numeric:tabular-nums}
.dcard__owner{margin-left:auto;color:var(--faint)}
.dcard__bar{height:3px;border-radius:99px;background:var(--well);margin-top:8px;overflow:hidden}
.dcard__bar>i{display:block;height:100%;border-radius:99px}

/* ---------- CUSTOMERS ---------- */
.custsplit{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--gap);align-items:start}
@media (max-width:900px){.custsplit{grid-template-columns:1fr}}

.clist{padding:14px}
.clist__body{display:flex;flex-direction:column;gap:2px;margin-top:4px;max-height:calc(100vh - 240px);overflow-y:auto}
.crow{
  display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:14px;cursor:pointer;
  transition:background .16s var(--ease);
}
.crow:hover{background:var(--well)}
.crow.is-sel{background:var(--glass-3);box-shadow:inset 0 0 0 1px var(--rim)}
.crow__n{font-size:13.2px;font-weight:600;display:block;line-height:1.2}
.crow__m{font-size:11.5px;color:var(--faint);display:block}
.crow__v{margin-left:auto;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

.custdetail{display:flex;flex-direction:column;gap:16px;min-height:300px}
.cdetail__empty{padding:40px 20px;text-align:center;color:var(--faint);font-size:13.5px}
.cdetail__head{display:flex;align-items:center;gap:14px}
.cdetail__name{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.15}
.cdetail__meta{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.cdetail__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
@media (max-width:700px){.cdetail__kpis{grid-template-columns:repeat(2,1fr)}}
.mini{
  background:var(--glass-2);border:1px solid var(--rim);border-radius:14px;padding:11px;
  display:flex;flex-direction:column;gap:3px;
}
.mini span{font-size:11px;color:var(--muted)}
.mini b{font-size:15px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cdetail__sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 8px;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipx{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--well);color:var(--muted)}
.chipx--pine{background:color-mix(in srgb,var(--pine) 16%,transparent);color:var(--pine)}
:root[data-theme="dark"] .chipx--pine{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}

.tl{display:flex;flex-direction:column;gap:11px;padding-left:4px}
.tl__i{display:flex;gap:10px;font-size:12.5px;line-height:1.4}
.tl__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.tl__when{display:block;font-size:11px;color:var(--faint);margin-top:1px}

/* ---------- SCHEDULE ---------- */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:1000px){.week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.week{grid-template-columns:repeat(2,minmax(0,1fr))}}

.wday{background:var(--glass);border:1px solid var(--rim);border-radius:var(--r-tile);padding:11px;min-height:150px}
.wday.is-today{background:var(--glass-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--pine) 40%,transparent)}
:root[data-theme="dark"] .wday.is-today{box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 40%,transparent)}
.wday__h{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.wday__h span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600}
.wday__h b{font-size:16px;font-weight:600;margin-left:auto}
.wday__body{display:flex;flex-direction:column;gap:6px}
.wday__empty{font-size:12px;color:var(--faint);text-align:center;padding:14px 0}
.wev{
  border-left:3px solid var(--pine);border-radius:8px;padding:6px 8px;
  background:var(--glass-2);display:flex;flex-direction:column;gap:1px;
}
.wev__t{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.wev__n{font-size:11.5px;font-weight:500;line-height:1.3}

.agenda{display:flex;flex-direction:column;gap:2px}
.agrow{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:13px;transition:background .16s var(--ease)}
.agrow:hover{background:var(--well)}
.agrow__d{font-size:11px;font-weight:700;color:var(--muted);min-width:52px;text-transform:capitalize}
.agrow__t{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;min-width:40px;color:var(--pine)}
:root[data-theme="dark"] .agrow__t{color:var(--good)}
.agrow__n{font-size:13px;font-weight:500;min-width:0}
.agrow__c{display:block;font-size:11.5px;color:var(--faint);font-weight:400}

/* ---------- FINANCE ---------- */
.invoices{display:flex;flex-direction:column}
.irow{
  display:grid;grid-template-columns:76px 1.5fr 96px 90px 100px 92px;gap:10px;align-items:center;
  padding:11px 8px;border-radius:13px;font-size:13px;transition:background .16s var(--ease);
}
.irow:hover{background:var(--well)}
@media (max-width:820px){.irow{grid-template-columns:1fr 1fr;row-gap:6px}}
.irow__n{font-weight:700;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.irow__co{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.irow__d{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.irow__amt{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

.forecast{display:flex;flex-direction:column;gap:10px}
.frow{display:flex;align-items:center;gap:12px;font-size:12.5px}
.frow__l{min-width:150px;color:var(--muted);font-weight:500}
.frow__b{flex:1;height:22px;border-radius:8px;background:var(--well);overflow:hidden}
.frow__b>i{display:block;height:100%;border-radius:8px;width:0;transition:width .8s var(--ease)}
.frow__v{min-width:96px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- GROWTH ---------- */
.cohort{display:flex;flex-direction:column;gap:2px}
.coh{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:11px 8px;border-radius:13px;font-size:13px;transition:background .16s var(--ease)}
.coh:hover{background:var(--well)}
.coh__y{font-weight:700;color:var(--pine);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .coh__y{color:var(--good)}
.coh__n{color:var(--muted);font-size:12.5px}
.coh__v{font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- PROJECTS ---------- */
.statuses{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--gap)}
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--gap)}
.pcard{gap:12px}
.pcard__badge{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;flex:0 0 auto;
}
.pcard__n{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pcard__co{font-size:11.5px;color:var(--faint)}
.pcard__meter{height:7px;border-radius:99px;background:var(--well);overflow:hidden}
.pcard__meter>i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--pine),var(--good));
  transition:width .6s var(--ease);
}
.pcard__pct{font-size:11.5px;color:var(--muted);margin-top:-6px;font-variant-numeric:tabular-nums}
.pcard__steps{display:flex;flex-direction:column;gap:1px;margin-top:2px}
.pstep{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:11px;cursor:pointer;font-size:12.8px;transition:background .16s var(--ease)}
.pstep:hover{background:var(--well)}
.pstep .tick{width:17px;height:17px}
.pstep.is-done .tick{background:var(--pine);border-color:var(--pine)}
.pstep.is-done .tick svg{opacity:1}
.pstep.is-done>span:last-child{color:var(--faint);text-decoration:line-through}

/* ---------- SETTINGS ---------- */
.setrow{
  display:flex;align-items:center;gap:16px;padding:13px 4px;
  border-bottom:1px solid var(--line);
}
.setrow:last-child{border-bottom:none}
.setrow>div:first-child{min-width:0;flex:1}
.setrow b{display:block;font-size:13.5px;font-weight:600}
.setrow span{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.setrow .search,.setrow .sel{margin-left:auto}
.segctl{display:flex;gap:2px;padding:3px;border-radius:99px;background:var(--well);margin-left:auto}
.segctl button{
  border:none;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:99px;cursor:pointer;transition:.2s var(--ease);white-space:nowrap;
}
.segctl button.is-on{background:var(--pill);color:var(--on-pill)}