/* ===================================================================
   APP CHROME — rifiniture dell'app cliente allineate al sistema del sito.

   Caricato per ultimo: qui stanno le correzioni trasversali (interruttore
   del tema, pulsante "desk", pannello Live positions) senza toccare gli
   8.000 righe di app.css / hub.css / login-v3.css.
   =================================================================== */

/* --- interruttore del tema (stessa icona della nav pubblica) --- */
/* in basso a destra: l'alto è già occupato dalla pill di sessione (hub) e dal
   pulsante Position (app) */
.app-theme{
  position:fixed;right:18px;bottom:18px;z-index:640;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;cursor:pointer;
  border:1px solid var(--lline2);border-radius:var(--lr-pill);
  background:var(--lpanel);color:var(--link);box-shadow:var(--lsh-sm)}
.app-theme:hover{border-color:var(--ldim)}
.app-theme:focus-visible{outline:2px solid var(--lacc);outline-offset:2px}
.app-theme-ico{width:16px;height:16px;border-radius:50%;
  border:1.6px solid currentColor;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);
  transition:transform .25s ease}
html[data-theme="dark"] .app-theme-ico{transform:rotate(180deg)}
@media(max-width:720px){ .app-theme{right:12px;bottom:12px} }

/* --- marchio + ritorno al desk: stessa lettura della nav pubblica
   (simbolo Rolvue, nome in Inter 600), non più un pulsante nudo. --- */
/* `#stageApp.active #appBack` (in common.css) è più specifico di `#appBack`:
   la riga va scritta con la stessa specificità o resta display:block. */
#stageApp.active #appBack{display:flex;align-items:center;gap:14px;
  left:24px;top:14px;padding:0}
.app-brand{display:inline-flex;align-items:center;gap:9px;
  color:var(--link);font-family:var(--lsans);font-size:16px;font-weight:600;
  letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.app-brand .ldot{flex:0 0 22px;width:22px;height:22px}
.app-brand-sep{width:1px;height:14px;margin:0 2px;background:var(--lline2)}
.app-brand-desk{color:var(--lsoft);font-size:12.5px;font-weight:450}
.app-back-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--lsans);font-size:12.5px;font-weight:500;cursor:pointer;
  background:var(--lpanel);border:1px solid var(--lline2);border-radius:var(--lr-pill);
  color:var(--lsoft);padding:7px 14px;box-shadow:var(--lsh-sm);
  transition:border-color .18s ease,color .18s ease}
.app-back-btn:hover{color:var(--link);border-color:var(--ldim)}
@media(max-width:880px){
  #stageApp.active #appBack{left:12px;top:10px;gap:9px}
  .app-brand-name{display:none}
}

/* --- Live positions: le azioni della scheda uscivano dal pannello ---
   La riga era flex nowrap dentro una colonna da 320px: "✓ Applied" finiva
   sotto `overflow:hidden` e si vedeva tagliato a metà. Ora la riga va a capo
   e i pulsanti si adattano alla larghezza disponibile. */
#stageApp #trk-dashboard .ib-meta-row{
  flex-wrap:wrap !important;row-gap:8px}
#stageApp #trk-dashboard .ib-meta{flex:1 1 100%;min-width:0}
#stageApp #trk-dashboard .ib-actions{
  flex-wrap:wrap;justify-content:flex-start;width:100%;gap:6px}
#stageApp #trk-dashboard .ib-actions .ib-view,
#stageApp #trk-dashboard .ib-actions .ib-discard,
#stageApp #trk-dashboard .ib-actions .ib-apply{
  flex:1 1 auto;justify-content:center;text-align:center;white-space:nowrap;
  padding-left:10px;padding-right:10px}
#stageApp #trk-dashboard .ib-actions .ib-apply{flex-basis:100%}

/* intestazione della scheda: nome della banca e sede sulla stessa riga,
   chip del settore a capo quando non ci sta (prima si spezzava "Goldman
   / Sachs" per fare posto al chip) */
#stageApp #trk-dashboard .ib-top{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px}
#stageApp #trk-dashboard .ib-title{
  display:flex;align-items:baseline;gap:7px;flex:1 1 auto;min-width:0}
#stageApp #trk-dashboard .ib-firm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stageApp #trk-dashboard .ib-loc{white-space:nowrap;flex:0 0 auto}
#stageApp #trk-dashboard .ib-sec{flex:0 0 auto;white-space:nowrap}
#stageApp #trk-dashboard .ib-role{
  overflow-wrap:anywhere;line-height:1.35;margin-top:4px}

/* la conferma di scarto scorre dentro la scheda: serve il ritaglio, ma solo lì */
#stageApp #trk-dashboard .inbox-item{overflow:hidden}
#stageApp #trk-dashboard .inbox-list{padding-right:2px}

/* --- il pannello e la tabella seguono il tema --- */
#stageApp #trk-dashboard .inbox-panel,
#stageApp #trk-dashboard .track-panel{
  background:var(--lpanel) !important;
  border-color:var(--lline) !important;
  box-shadow:var(--lsh-sm) !important}
#stageApp #trk-dashboard .inbox-item{
  background:var(--lpanel-soft) !important;border-color:var(--lline) !important}
#stageApp #trk-dashboard .inbox-item:hover{
  background:var(--lpanel2) !important;border-color:var(--lline2) !important}

/* --- la pagina dell'app usa lo sfondo del tema, non un colore fisso --- */
html:has(#stageApp.active #view-notif.on #trk-dashboard:not([style*="none"])),
body:has(#stageApp.active #view-notif.on #trk-dashboard:not([style*="none"])){
  background:var(--lbg) !important}

/* --- nav dell'app: stessa grammatica della nav pubblica (pill, Inter 600,
   pannello su linea sottile). Sostituisce il pulsante isolato "Position". --- */
/* la nav è fissa: ogni vista lascia lo spazio per non finirci sotto */
#stageApp .account-page,
#stageApp .contact-live{padding-top:92px}
#stageApp .positions-page{padding-top:84px}
@media(max-width:880px){
  #stageApp .account-page,
  #stageApp .contact-live,
  #stageApp .positions-page{padding-top:70px}
}
/* Dashboard: la barra KPI è fissa in alto (layout "cockpit"). Scende sotto la
   nav invece di finirci sotto, e i pannelli scendono di conseguenza. Sotto i
   980px la barra torna nel flusso (responsive.css) e il padding va tolto. */
@media(min-width:981px){
  #stageApp #trk-dashboard{padding-top:106px !important}
  #stageApp #trk-dashboard > .kpi-row{top:70px !important}
}
.app-nav{
  position:fixed;top:10px;right:28px;z-index:720;
  display:inline-flex;align-items:center;gap:2px;
  padding:4px;border:1px solid var(--lline2);border-radius:var(--lr-pill);
  background:var(--lpanel);box-shadow:var(--lsh-sm)}
.app-nav button{
  display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 14px;border:0;border-radius:var(--lr-pill);
  background:transparent;color:var(--lsoft);
  font-family:var(--lsans);font-size:13px;font-weight:600;letter-spacing:-.018em;
  cursor:pointer;transition:background .18s ease,color .18s ease}
.app-nav button:hover{background:var(--lpanel-soft);color:var(--link)}
.app-nav button.active{background:var(--lacc);color:var(--lon-acc)}
.app-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:880px){
  .app-nav{right:12px;top:8px;padding:3px}
  .app-nav button{padding:0 10px;gap:0}
  .app-nav button span{display:none}
}