/* ============================================================
   VENDORA SUITE 2.0 · SHELL — login + app frame
   Richiede tokens.css + components.css
   ============================================================ */

/* ================= AUTH SCREEN ================= */
.auth-screen{
  min-height:100dvh;
  display:grid;place-items:center;
  padding:24px;
  position:relative;
  overflow:hidden;
  background:var(--v-canvas);
}
/* atmosfera: braci sfocate + grana, mai invadenti */
.auth-screen::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(560px 420px at 18% 8%,color-mix(in srgb,var(--v-brand) 9%,transparent),transparent 70%),
    radial-gradient(640px 480px at 86% 92%,color-mix(in srgb,var(--v-brand) 7%,transparent),transparent 70%),
    radial-gradient(420px 340px at 78% 12%,color-mix(in srgb,var(--v-blue) 5%,transparent),transparent 70%);
  pointer-events:none;
}
.auth-grain{position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");}
.auth-box{position:relative;z-index:2;width:min(430px,100%)}
.auth-card{padding:34px 34px 28px;text-align:center}
.auth-mark{
  width:58px;height:58px;margin:0 auto 18px;border-radius:18px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--v-brand),var(--v-brand-press));
  box-shadow:0 10px 26px -8px color-mix(in srgb,var(--v-brand) 60%,transparent),var(--v-inner-light);
}
.auth-mark img,.auth-mark svg{width:30px;height:30px;filter:brightness(0) invert(1)}
.auth-title{font-family:var(--v-font-display);font-size:var(--v-fs-28);font-weight:800;letter-spacing:-.025em}
.auth-sub{color:var(--v-muted);font-size:var(--v-fs-14);margin:8px 0 26px}
.auth-google{width:100%;justify-content:center;gap:11px}
.auth-google img{width:18px;height:18px}
.auth-sep{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--v-muted-2);font-size:var(--v-fs-12)}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:var(--v-line)}
.auth-emergency{text-align:left}
.auth-emergency summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  font:600 var(--v-fs-13)/1 var(--v-font);color:var(--v-muted);padding:8px;border-radius:var(--v-r-sm);
  transition:color var(--v-t-base) var(--v-ease);
}
.auth-emergency summary:hover{color:var(--v-text)}
.auth-emergency summary::-webkit-details-marker{display:none}
.auth-emergency[open] summary{color:var(--v-text)}
.auth-emergency .v-stack{margin-top:12px}
.auth-foot{margin-top:18px;text-align:center;font-size:var(--v-fs-12);color:var(--v-muted-2)}
.auth-error{margin-top:14px;display:none}
.auth-error.show{display:flex}

/* entrata in scena login */
.auth-box .v-enter{animation:none}
.auth-stagger>*{opacity:0;transform:translateY(14px);animation:v-auth-in var(--v-t-scene) var(--v-ease) forwards}
.auth-stagger>*:nth-child(1){animation-delay:60ms}
.auth-stagger>*:nth-child(2){animation-delay:130ms}
.auth-stagger>*:nth-child(3){animation-delay:200ms}
.auth-stagger>*:nth-child(4){animation-delay:270ms}
.auth-stagger>*:nth-child(5){animation-delay:340ms}
.auth-stagger>*:nth-child(6){animation-delay:410ms}
@keyframes v-auth-in{to{opacity:1;transform:none}}

/* ================= APP SHELL ================= */
body.is-authenticated .auth-screen{display:none}
.shell{display:none}
body.is-authenticated .shell{
  display:grid;
  position:relative;
  grid-template-columns:262px 1fr;
  grid-template-rows:64px 1fr;
  grid-template-areas:"side top" "side main";
  height:100dvh;
  background:var(--v-canvas);
}

/* ---------- SIDEBAR ---------- */
.side{
  grid-area:side;
  display:flex;flex-direction:column;
  background:var(--v-surface);
  min-height:0;
}
.side-brand{
  display:flex;align-items:center;gap:11px;
  height:64px;padding:0 18px;flex:0 0 auto;
}
.side-brand-mark{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,var(--v-brand),var(--v-brand-press));
  box-shadow:0 6px 14px -5px color-mix(in srgb,var(--v-brand) 55%,transparent);
}
.side-brand-mark img{width:20px;height:20px;filter:brightness(0) invert(1)}
.side-brand-name{font-family:var(--v-font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.02}
.side-brand-name small{display:block;font:600 var(--v-fs-12)/1 var(--v-font);color:var(--v-muted-2);letter-spacing:.14em;margin-top:3px;text-transform:uppercase}
/* wordmark "Vendora" col font originale del logo (SVG inline, ricolorato dal tema) */
.side-brand-word{height:19px;width:auto;color:var(--v-text);display:block;flex:0 0 auto}

.side-nav{flex:1;overflow-y:auto;padding:6px 12px 16px;min-height:0}
.side-sect{margin-top:16px}
.side-sect-label{
  padding:0 10px 7px;
  font:700 var(--v-fs-11)/1 var(--v-font);
  text-transform:uppercase;letter-spacing:.09em;color:var(--v-muted-2);
}
.side-item{
  position:relative;
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 10px;margin:1px 0;
  border:0;border-radius:11px;background:transparent;
  font:500 var(--v-fs-14)/1.2 var(--v-font);color:var(--v-text-2);
  cursor:pointer;text-decoration:none;text-align:left;
  transition:background-color var(--v-t-fast) var(--v-ease),color var(--v-t-fast) var(--v-ease);
}
.side-item .v-icon{color:var(--v-muted);transition:color var(--v-t-fast) var(--v-ease)}
.side-item:hover{background:var(--v-surface-2);color:var(--v-text)}
.side-item:hover .v-icon{color:var(--v-text-2)}
.side-item.active{background:var(--v-brand-soft);color:var(--v-brand-deep);font-weight:600}
.side-item.active .v-icon{color:var(--v-brand-deep)}
.side-item.active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--v-brand);
}
.side-item .chev{margin-left:auto;transition:transform var(--v-t-base) var(--v-ease);color:var(--v-muted-2)}
.side-group[open]>.side-item .chev,.side-group.open>.side-item .chev{transform:rotate(90deg)}
.side-sub{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--v-t-slow) var(--v-ease)}
.side-group.open .side-sub{grid-template-rows:1fr}
.side-sub-inner{min-height:0;padding-left:22px;display:flex;flex-direction:column;position:relative}
.side-sub-inner::before{content:"";position:absolute;left:15px;top:4px;bottom:4px;width:1px;background:var(--v-line)}
.side-sub .side-item{font-size:var(--v-fs-13);padding:7px 10px}
.side-sub .side-item.active::before{left:-19px}

.side-foot{flex:0 0 auto;padding:12px;border-top:1px solid var(--v-line)}
.side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer;border:0;background:transparent;width:100%;text-align:left;transition:background-color var(--v-t-fast) var(--v-ease)}
.side-user:hover{background:var(--v-surface-2)}
.side-user-name{font:600 var(--v-fs-13)/1.25 var(--v-font);color:var(--v-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-mail{font:400 var(--v-fs-11)/1.3 var(--v-font);color:var(--v-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- TOPBAR (BARRA UNICA) ---------- */
.top{
  grid-area:top;
  display:flex;align-items:center;gap:12px;
  padding:0 var(--v-gutter) 0 20px;
  background:var(--v-surface);
  min-width:0;
  position:relative;
}
/* Angolo concavo della "L unica": dove il bordo inferiore della top bar incontra
   il bordo destro della sidebar si formava un vertice a 90° NETTO (spigolo), perche'
   il workspace arrotondato (border-top-left-radius:16px) ci sta annidato dentro.
   Questo filler dipinge il bianco-chrome nel notch con una curva concava che combacia
   col raggio del workspace: la L appare arrotondata e lo spigolo sparisce.
   Ancorato alla top bar (left:0 = bordo sx del workspace), quindi vale in home E nei tool. */
.top::after{
  content:"";
  position:absolute;
  left:0;top:100%;
  width:16px;height:16px;
  background:var(--v-surface);
  -webkit-mask:radial-gradient(circle 16px at 100% 100%,transparent 0 15.5px,#000 16.5px);
          mask:radial-gradient(circle 16px at 100% 100%,transparent 0 15.5px,#000 16.5px);
  pointer-events:none;
  z-index:3;
}
.top-title{min-width:0;margin-right:auto;display:flex;align-items:center;gap:12px}
.top-crumb{font:500 var(--v-fs-12)/1 var(--v-font);color:var(--v-muted-2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.top-h{font-family:var(--v-font-display);font-size:var(--v-fs-17);font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-burger{display:none}

/* slot Control API: i controlli dichiarati dal tool vivono QUI */
/* L'ombra dei bottoni (es. pill "primary") veniva tranciata quadrata dallo scroll
   container: overflow-x:auto forza overflow-y:auto, e l'altezza = quella del bottone.
   Trucco standard: padding generoso (contiene tutta la coda sfocata dell'ombra) +
   margin negativo pari (l'ingombro di layout resta = altezza bottone, niente shift). */
.top-controls{display:flex;align-items:center;gap:9px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-block:20px;margin-block:-20px}
.top-controls::-webkit-scrollbar{display:none}

.top-client{max-width:220px}
/* Selettore clienti e selettore marketplace nascosti nei tool che non li usano
   (allowlist TOOLS_WITH_SELECTORS in app.js, decisione Cristian 24/07/2026).
   !important necessario: .top-client ridichiara `display` dentro la media query in fondo
   al file, e senza questo i selettori ricomparirebbero sugli schermi stretti. */
.top-client.is-hidden,.top-controls.is-hidden{display:none!important}
.top-client-icon{display:none}
.top-client .v-select{height:var(--v-control-h-sm);font-size:var(--v-fs-13);border-radius:var(--v-r-pill);padding-left:15px}

/* ---------- WORKSPACE ---------- */
.main{
  grid-area:main;
  min-width:0;min-height:0;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:var(--v-canvas);
  /* la "L unica" (header+sidebar = un pezzo solo): il taglio è SOLO qui, verso il workspace */
  border-top:1px solid var(--v-line);
  border-left:1px solid var(--v-line);
  border-top-left-radius:16px;
}
.page{width:min(1360px,100%);margin:0 auto;padding:28px var(--v-gutter) 56px}
/* Home col cockpit cliente montato: niente cap a 1360px, la dashboard usa tutta la view */
.page:has(> .home-client-frame){width:100%;padding:18px 14px 40px}
.page-head{margin-bottom:22px}
.page-h1{font-size:var(--v-fs-28);font-weight:800;letter-spacing:-.025em}
.page-sub{color:var(--v-muted);margin-top:5px;font-size:var(--v-fs-14)}

/* runner tool: l'iframe è il workspace, niente cornici doppie */
/* l'iframe (layer compositato) sfugge al border-radius di .main su Chromium:
   arrotondo esplicitamente l'angolo alto-sx cosi' non spunta lo spigolo quadrato
   sotto la curva della "L unica". 15px = 16px del main meno il bordo 1px. */
.tool-stage{display:none;height:100%;overflow:hidden;border-top-left-radius:15px}
body[data-view="tool"] .tool-stage{display:block}
body[data-view="tool"] .page{display:none}
.tool-stage iframe{width:100%;height:100%;border:0;display:block;background:var(--v-canvas);border-top-left-radius:15px}

/* ---------- SIDEBAR COLLASSATA DENTRO UN TOOL (rail di icone, si riapre in hover) ---------- */
@media (min-width:901px){
  /* rail collassato che SPINGE il contenuto (come la home): la colonna della griglia
     passa da 72px a 262px in hover e l'iframe si riadatta — niente overlay che copre. */
  body.is-authenticated[data-view="tool"] .shell{
    grid-template-columns:72px 1fr;
    transition:grid-template-columns var(--v-t-base) var(--v-ease);
  }
  body.is-authenticated[data-view="tool"] .shell:has(.side:hover){grid-template-columns:262px 1fr}
  body[data-view="tool"] .side{overflow:hidden}
  body[data-view="tool"] .side:not(:hover) .side-brand{justify-content:center;padding:0}
  body[data-view="tool"] .side:not(:hover) .side-brand-name,
  body[data-view="tool"] .side:not(:hover) .side-brand-word,
  body[data-view="tool"] .side:not(:hover) .side-sect-label,
  body[data-view="tool"] .side:not(:hover) .side-item>span,
  body[data-view="tool"] .side:not(:hover) .side-item .chev,
  body[data-view="tool"] .side:not(:hover) .side-sub,
  body[data-view="tool"] .side:not(:hover) .side-user>span:not(.v-avatar),
  body[data-view="tool"] .side:not(:hover) .side-user>svg{display:none}
  body[data-view="tool"] .side:not(:hover) .side-nav{padding:6px 10px 16px}
  body[data-view="tool"] .side:not(:hover) .side-item{justify-content:center;padding:9px}
  body[data-view="tool"] .side:not(:hover) .side-user{justify-content:center;padding:8px 0}
}

/* ---------- HOME DASHBOARD ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px;align-items:stretch}
.dash-grid-b{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px;align-items:stretch}
.dashboard-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.dashboard-filters{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.dashboard-filters .v-label{margin:0}
.dashboard-freshness{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-8px 0 14px;padding:10px 13px;border:1px solid var(--v-line);border-radius:var(--v-r-md);background:var(--v-surface-2);color:var(--v-muted);font-size:var(--v-fs-12)}
.dashboard-table-head{padding:20px 20px 0}
.spark{display:block;width:100%;height:34px;margin-top:2px}
.chart-box{position:relative}
.chart-box svg{display:block;width:100%}
.chart-legend{display:flex;gap:16px;flex-wrap:wrap}
.chart-key{display:inline-flex;align-items:center;gap:7px;font:500 var(--v-fs-12)/1 var(--v-font);color:var(--v-muted)}
.chart-key i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.chart-key .chart-sales{background:var(--v-chart-1)}
.chart-key .chart-cost{background:var(--v-chart-2)}
.chart-tip{
  position:absolute;pointer-events:none;z-index:10;display:none;
  background:var(--v-text);color:var(--v-surface);
  padding:9px 12px;border-radius:10px;box-shadow:var(--v-shadow-lg);
  font:500 var(--v-fs-12)/1.5 var(--v-font);white-space:nowrap;
}
.chart-tip b{font-variant-numeric:tabular-nums}
.client-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--v-line)}
.client-row:last-child{border-bottom:0}
.client-row-main{flex:1;min-width:0}
.client-progress{margin-top:7px}
.client-logo{width:36px;height:36px;border-radius:10px;background:var(--v-surface-2);border:1px solid var(--v-line);display:grid;place-items:center;font:700 var(--v-fs-12)/1 var(--v-font-display);color:var(--v-text-2);flex:0 0 auto}
.client-logo.compact{width:30px;height:30px;font-size:var(--v-fs-11)}
.client-name{font:600 var(--v-fs-13)/1.3 var(--v-font);color:var(--v-text)}
.client-meta{font:400 var(--v-fs-12)/1.3 var(--v-font);color:var(--v-muted)}
.dept-quick-link{justify-content:flex-start}
.dept-quick-count{margin-left:auto}

/* ---------- REPARTO (griglia tool) ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.tool-card{display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:transform var(--v-t-base) var(--v-ease),box-shadow var(--v-t-base) var(--v-ease),border-color var(--v-t-base) var(--v-ease)}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--v-shadow-md);border-color:var(--v-line-strong)}
.tool-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--v-brand-soft);color:var(--v-brand-deep)}
.tool-card h3{font-family:var(--v-font-display);font-size:var(--v-fs-15);font-weight:700;letter-spacing:-.01em}
.tool-card p{margin:0;font-size:var(--v-fs-13);color:var(--v-muted);line-height:1.5}
.tool-card .v-row{margin-top:auto}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid,.dash-grid-b{grid-template-columns:1fr}
}
@media (max-width:900px){
  body.is-authenticated .shell{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .side{
    position:fixed;inset:0 auto 0 0;width:min(300px,84vw);z-index:70;
    transform:translateX(-104%);
    transition:transform var(--v-t-slow) var(--v-ease);
    box-shadow:var(--v-shadow-lg);
  }
  body.nav-open .side{transform:none}
  .side-veil{position:fixed;inset:0;background:var(--v-veil);z-index:65;opacity:0;pointer-events:none;transition:opacity var(--v-t-slow) var(--v-ease)}
  body.nav-open .side-veil{opacity:1;pointer-events:auto}
  .top-burger{display:inline-grid}
  .top{padding:0 16px}
  .top-crumb{display:none}
  .top-client{display:block;max-width:none;flex:0 0 auto}
  .top-client .v-combo-btn{width:40px;min-width:40px;padding:0;justify-content:center}
  .top-client-icon{display:block;color:var(--v-text-2)}
  .top-client-label,.top-client-chevron{display:none}
  .page{padding:20px 16px 48px}
  .page-h1{font-size:var(--v-fs-22)}
  .dashboard-page-head{align-items:flex-start}
}
@media (max-width:560px){
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .v-card{padding:16px}
  body[data-view="tool"] .top-title{display:none}
  .top-controls .v-btn span.lbl{display:none}
  .dashboard-page-head{flex-direction:column}
  .dashboard-filters{width:100%;justify-content:space-between}
}

/* ---------- POPUP AVANZAMENTO BACKFILL AMAZON (basso-destra, per cliente) ---------- */
/* Visibile SOLO con un cliente selezionato che ha un backfill SP-API in corso.       */
.amz-pop{position:fixed;right:18px;bottom:18px;z-index:58;width:min(320px,calc(100vw - 28px));
  border:1px solid var(--v-line);border-radius:var(--v-r-lg);background:var(--v-surface);
  box-shadow:var(--v-shadow-lg);padding:14px 16px;display:none}
.amz-pop.show{display:block}
.amz-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.amz-pop-title{flex:1;font:700 var(--v-fs-13)/1.3 var(--v-font);color:var(--v-text)}
.amz-pop-close{border:0;background:none;cursor:pointer;color:var(--v-muted);font-size:var(--v-fs-15);
  line-height:1;padding:4px;border-radius:var(--v-r-sm)}
.amz-pop-close:hover{background:var(--v-surface-2);color:var(--v-text)}
.amz-pop-sub{font-size:var(--v-fs-12);color:var(--v-muted);margin:0 0 10px}
.amz-pop-bar{position:relative;height:8px;border-radius:var(--v-r-pill);background:var(--v-surface-2);overflow:hidden}
.amz-pop-bar>span{position:absolute;inset:0 auto 0 0;background:var(--v-green);border-radius:inherit;
  transition:width var(--v-t-slow) var(--v-ease)}
.amz-pop-txt{display:flex;justify-content:space-between;font-size:var(--v-fs-12);color:var(--v-muted);margin-top:6px}
.amz-pop-txt b{color:var(--v-text-2)}
@media (max-width:560px){.amz-pop{right:10px;bottom:10px}}

/* ---------- HOME COCKPIT CLIENTE (iframe di tools/home-cliente.html) ---------- */
/* Montato da renderHome quando un cliente è selezionato: l'iframe È il workspace. */
.home-client-frame{display:block;width:100%;height:calc(100vh - 118px);border:0;background:var(--v-canvas);border-radius:var(--v-r-lg)}
@media (max-width:560px){.home-client-frame{height:calc(100vh - 100px)}}