/* ============================================================ VENDORA SUITE 2.0 · COMPONENTI (.v-*) Ogni pezzo di UI, shell O tool, usa SOLO questi componenti. Richiede tokens.css. Nessun hex qui dentro: solo var(--v-*). ============================================================ */ /* ---------- BOTTONI ---------- */ .v-btn{ height:var(--v-control-h); padding:0 18px; display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1px solid var(--v-line); border-radius:var(--v-r-pill); background:var(--v-surface); color:var(--v-text); font:600 var(--v-fs-14)/1 var(--v-font); letter-spacing:.005em; cursor:pointer;user-select:none;text-decoration:none;white-space:nowrap; box-shadow:var(--v-shadow-xs),var(--v-inner-light); transition:background-color var(--v-t-base) var(--v-ease), border-color var(--v-t-base) var(--v-ease), box-shadow var(--v-t-base) var(--v-ease), transform var(--v-t-fast) var(--v-ease); } .v-btn:hover{background:var(--v-surface-2);border-color:var(--v-line-strong)} .v-btn:active{transform:scale(.98)} .v-btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .v-btn.primary{background:var(--v-action);border-color:transparent;color:var(--v-on-action);box-shadow:0 3px 12px -4px color-mix(in srgb,var(--v-action) 42%,transparent)} .v-btn.primary:hover{background:var(--v-action-hover)} .v-btn.primary:active{background:var(--v-action-press)} .v-btn.ink{background:var(--v-text);border-color:transparent;color:var(--v-surface)} .v-btn.ghost{background:transparent;border-color:transparent;box-shadow:none} .v-btn.ghost:hover{background:var(--v-surface-2)} .v-btn.soft{background:var(--v-brand-soft);border-color:transparent;color:var(--v-brand-deep);box-shadow:none} .v-btn.soft:hover{background:color-mix(in srgb,var(--v-brand) 18%,var(--v-surface))} .v-btn.danger{background:var(--v-red-soft);border-color:transparent;color:var(--v-red);box-shadow:none} .v-btn.sm{height:var(--v-control-h-sm);padding:0 14px;font-size:var(--v-fs-13)} .v-btn.lg{height:var(--v-control-h-lg);padding:0 24px;font-size:var(--v-fs-15)} .v-btn .v-icon{flex:0 0 auto} /* freccia annidata "button-in-button" per le CTA */ .v-btn .v-btn-orb{ width:26px;height:26px;margin-right:-8px; display:inline-grid;place-items:center; border-radius:50%; background:color-mix(in srgb,var(--v-on-brand) 16%,transparent); transition:transform var(--v-t-base) var(--v-ease-spring); } .v-btn:hover .v-btn-orb{transform:translate(2px,-1px)} .v-icon-btn{ width:var(--v-control-h);height:var(--v-control-h);flex:0 0 auto; display:inline-grid;place-items:center; border:1px solid var(--v-line);border-radius:var(--v-r-pill); background:var(--v-surface);color:var(--v-text-2);cursor:pointer; box-shadow:var(--v-shadow-xs); transition:background-color var(--v-t-base) var(--v-ease),color var(--v-t-base) var(--v-ease),border-color var(--v-t-base) var(--v-ease),transform var(--v-t-fast) var(--v-ease); } .v-icon-btn:hover{background:var(--v-surface-2);color:var(--v-text)} .v-icon-btn:active{transform:scale(.94)} .v-icon-btn.sm{width:var(--v-control-h-sm);height:var(--v-control-h-sm)} .v-icon-btn.ghost{border-color:transparent;background:transparent;box-shadow:none} /* ---------- ICONE (sprite, stroke 1.6 coerente) ---------- */ .v-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .v-icon.lg{width:22px;height:22px} .v-icon.sm{width:15px;height:15px} /* ---------- CARD (double-bezel di serie) ---------- */ .v-card{ background:var(--v-surface); border:1px solid var(--v-line); border-radius:var(--v-r-lg); box-shadow:var(--v-shadow-sm),var(--v-inner-light); padding:22px; } .v-card.tight{padding:16px} .v-card.flush{padding:0;overflow:hidden} .v-card.flat{box-shadow:var(--v-shadow-xs)} /* guscio esterno: card che "siede" in un vassoio (per hero/moduli di pregio) */ .v-shell{ background:color-mix(in srgb,var(--v-surface-3) 55%,transparent); border:1px solid var(--v-line); border-radius:var(--v-r-xl); padding:7px; } .v-shell>.v-card{border-radius:calc(var(--v-r-xl) - 7px);box-shadow:var(--v-shadow-md),var(--v-inner-light)} .v-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} .v-card-title{font-family:var(--v-font-display);font-size:var(--v-fs-15);font-weight:700;letter-spacing:-.01em;color:var(--v-text)} .v-card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 12px} .v-card-sub{font-size:var(--v-fs-13);color:var(--v-muted);margin-top:3px} .v-card.wip{border-style:dashed;background:color-mix(in srgb,var(--v-surface) 84%,var(--v-brand-soft))} /* ---------- KPI TILE ---------- */ .v-kpi{display:flex;flex-direction:column;gap:10px;min-width:0} .v-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .v-kpi-label{font-size:var(--v-fs-13);font-weight:500;color:var(--v-muted);letter-spacing:.01em} .v-kpi-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--v-brand-soft);color:var(--v-brand-deep)} .v-kpi-value{font-family:var(--v-font-display);font-size:var(--v-fs-28);font-weight:800;letter-spacing:-.025em;color:var(--v-text);font-variant-numeric:tabular-nums} .v-kpi-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .v-delta{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--v-r-pill);font:600 var(--v-fs-12)/1 var(--v-font);font-variant-numeric:tabular-nums} .v-delta.up{background:var(--v-green-soft);color:var(--v-green)} .v-delta.down{background:var(--v-red-soft);color:var(--v-red)} .v-delta.flat{background:var(--v-surface-2);color:var(--v-muted)} .v-kpi-note{font-size:var(--v-fs-12);color:var(--v-muted-2)} .v-kpi.hero{border-color:var(--v-brand);border-width:2px} .v-kpi.compact{gap:5px} .v-kpi.compact .v-kpi-label{font-size:var(--v-fs-11);text-transform:uppercase;letter-spacing:.05em} .v-kpi.compact .v-kpi-value{font-size:var(--v-fs-22)} .v-kpi.compact .v-kpi-value.sm{font-size:var(--v-fs-17)} .v-kpi.compact .v-kpi-note{margin-top:3px} .v-kpi.data{position:relative} .v-kpi.data .v-kpi-value{font-size:24px;font-family:var(--v-font-mono);line-height:1} /* ---------- FORM ---------- */ .v-label{display:block;font:600 var(--v-fs-13)/1.3 var(--v-font);color:var(--v-text);margin-bottom:7px} .v-help{font-size:var(--v-fs-12);color:var(--v-muted);margin-top:6px} .v-error-text{font-size:var(--v-fs-12);color:var(--v-red);margin-top:6px} .v-form-field{display:flex;flex-direction:column;gap:6px} .v-form-field>.v-label{margin-bottom:0} .v-form-field.spaced{margin-bottom:11px} .v-input,.v-select,.v-textarea{ width:100%; height:var(--v-control-h); padding:0 13px; border:1px solid var(--v-line); border-radius:var(--v-r-sm); background:var(--v-surface); color:var(--v-text); font:500 var(--v-fs-14)/1.4 var(--v-font); box-shadow:var(--v-shadow-xs); outline:0; transition:border-color var(--v-t-base) var(--v-ease),box-shadow var(--v-t-base) var(--v-ease); } .v-textarea{height:auto;min-height:96px;padding:11px 13px;resize:vertical} .v-input::placeholder,.v-textarea::placeholder{color:var(--v-muted-2);font-weight:400} /* Il bordo che si accende vale per tutti e tre. L'alone --v-brand-ring invece NON va al .v-select: sui select Chromium accende :focus-visible anche col semplice click del mouse (sui button no), quindi l'alone 4px si sommava all'outline di tokens.css e usciva il doppio anello arancione del selettore marketplace — misurato il 28/07/2026: outline 2px + box-shadow 0 0 0 4px. Sul select basta il bordo. Sui campi di TESTO l'alone resta: lì dice dove stai scrivendo. */ .v-input:focus,.v-select:focus,.v-textarea:focus{border-color:color-mix(in srgb,var(--v-brand) 55%,var(--v-line))} .v-input:focus,.v-textarea:focus{box-shadow:var(--v-brand-ring)} .v-input:disabled,.v-select:disabled,.v-textarea:disabled{background:var(--v-surface-2);color:var(--v-muted);cursor:not-allowed} .v-input[aria-invalid="true"],.v-textarea[aria-invalid="true"]{border-color:var(--v-red)} .v-input.sm,.v-select.sm{height:var(--v-control-h-sm);font-size:var(--v-fs-13)} .v-input.spaced,.v-select.spaced,.v-textarea.spaced{margin-bottom:14px} .v-select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:15px; } [data-theme="dark"] .v-select{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA1AB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* campo con icona a sinistra (search ecc.) */ .v-field{position:relative;display:flex;align-items:center} .v-field>.v-icon{position:absolute;left:12px;color:var(--v-muted-2);pointer-events:none} .v-field>.v-input{padding-left:38px} input[type="checkbox"].v-check,input[type="radio"].v-radio{width:16px;height:16px;accent-color:var(--v-brand);cursor:pointer} input[type="range"].v-range{accent-color:var(--v-brand)} /* ---------- SWITCH ---------- */ .v-switch{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 auto} .v-switch input{opacity:0;width:0;height:0;position:absolute} .v-switch i{position:absolute;inset:0;border-radius:var(--v-r-pill);background:var(--v-line-strong);cursor:pointer;transition:background-color var(--v-t-base) var(--v-ease)} .v-switch i::before{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(27,30,36,.25);transition:transform var(--v-t-base) var(--v-ease-spring)} .v-switch input:checked+i{background:var(--v-brand)} .v-switch input:checked+i::before{transform:translateX(17px)} .v-switch input:focus-visible+i{box-shadow:var(--v-brand-ring)} /* ---------- SEGMENTED ---------- */ .v-segmented{display:inline-flex;padding:3px;gap:2px;background:var(--v-surface-2);border:1px solid var(--v-line);border-radius:var(--v-r-pill)} .v-segmented button{ border:0;background:transparent;color:var(--v-muted); height:32px;padding:0 16px;border-radius:var(--v-r-pill); font:600 var(--v-fs-13)/1 var(--v-font);cursor:pointer; transition:background-color var(--v-t-base) var(--v-ease),color var(--v-t-base) var(--v-ease),box-shadow var(--v-t-base) var(--v-ease); } .v-segmented button:hover{color:var(--v-text)} .v-segmented button.active{background:var(--v-surface);color:var(--v-text);box-shadow:var(--v-shadow-xs)} /* ---------- TAB ---------- */ .v-tabs{display:flex;gap:24px;border-bottom:1px solid var(--v-line)} .v-tabs.wrap{flex-wrap:wrap} .v-tabs.spaced{margin-bottom:16px} .v-tab{ border:0;background:transparent;padding:11px 2px 13px;cursor:pointer; font:600 var(--v-fs-14)/1 var(--v-font);color:var(--v-muted); border-bottom:2px solid transparent;margin-bottom:-1px; transition:color var(--v-t-base) var(--v-ease),border-color var(--v-t-base) var(--v-ease); } .v-tab:hover{color:var(--v-text)} .v-tab.active{color:var(--v-text);border-bottom-color:var(--v-brand)} /* ---------- BADGE / PILL ---------- */ .v-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--v-r-pill);font:600 var(--v-fs-12)/1 var(--v-font);white-space:nowrap} .v-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto} .v-badge.plain::before{display:none} .v-badge.success{background:var(--v-green-soft);color:var(--v-green)} .v-badge.warning{background:var(--v-amber-soft);color:var(--v-amber)} .v-badge.danger{background:var(--v-red-soft);color:var(--v-red)} .v-badge.info{background:var(--v-blue-soft);color:var(--v-blue)} .v-badge.brand{background:var(--v-brand-soft);color:var(--v-brand-deep)} .v-badge.neutral{background:var(--v-surface-2);color:var(--v-muted)} .v-badge.violet{background:var(--v-violet-soft);color:var(--v-violet)} .v-badge.orange{background:var(--v-orange-soft);color:var(--v-orange)} .v-eyebrow{display:inline-block;font:700 var(--v-fs-11)/1.2 var(--v-font);text-transform:uppercase;letter-spacing:.09em;color:var(--v-brand-deep)} /* ---------- CHIP / FILTRO COMPATTO ---------- */ .v-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 11px;border:1px solid var(--v-line);border-radius:var(--v-r-pill);background:var(--v-surface);color:var(--v-muted);font:600 var(--v-fs-12)/1.25 var(--v-font);white-space:nowrap;box-shadow:var(--v-shadow-xs);transition:background-color var(--v-t-fast) var(--v-ease),border-color var(--v-t-fast) var(--v-ease),color var(--v-t-fast) var(--v-ease),opacity var(--v-t-fast) var(--v-ease)} .v-chip:hover{background:var(--v-surface-2);border-color:var(--v-line-strong);color:var(--v-text)} .v-chip.active,.v-chip.on{background:var(--v-brand-soft);border-color:transparent;color:var(--v-brand-deep)} .v-chip.success,.v-chip.ok{background:var(--v-green-soft);border-color:transparent;color:var(--v-green)} .v-chip.warning{background:var(--v-amber-soft);border-color:transparent;color:var(--v-amber)} .v-chip.danger{background:var(--v-red-soft);border-color:transparent;color:var(--v-red)} .v-chip.info{background:var(--v-blue-soft);border-color:transparent;color:var(--v-blue)} .v-chip.neutral,.v-chip.mut{background:var(--v-surface-2);color:var(--v-muted)} .v-chip.off{opacity:.42} .v-chip.compact{min-height:0;padding:3px 10px;gap:5px;box-shadow:none} .v-chip.interactive{cursor:pointer;user-select:none} .v-chip.dashed{border-style:dashed} /* ---------- TABELLE ---------- */ .v-table-wrap{overflow-x:auto;border-radius:var(--v-r-lg)} .v-table{width:100%;border-collapse:collapse;font-size:var(--v-fs-14)} .v-table th{ padding:11px 14px;text-align:left; font:600 var(--v-fs-11)/1.3 var(--v-font); text-transform:uppercase;letter-spacing:.06em;color:var(--v-muted); border-bottom:1px solid var(--v-line);white-space:nowrap; } .v-table td{padding:13px 14px;color:var(--v-text);border-bottom:1px solid var(--v-line);vertical-align:middle} .v-table td.num,.v-table th.num{text-align:right;font-variant-numeric:tabular-nums} .v-table tbody tr:last-child td{border-bottom:0} .v-table tbody tr{transition:background-color var(--v-t-fast) var(--v-ease)} .v-table tbody tr:hover{background:color-mix(in srgb,var(--v-surface-2) 55%,transparent)} /* ---------- AVATAR ---------- */ .v-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;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);color:var(--v-text-2);flex:0 0 auto;overflow:hidden} .v-avatar.lg{width:44px;height:44px;font-size:var(--v-fs-14)} /* ---------- ALERT ---------- */ .v-alert{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--v-line);border-radius:var(--v-r-md);padding:13px 15px;font:500 var(--v-fs-13)/1.5 var(--v-font);background:var(--v-surface);color:var(--v-text-2)} .v-alert.info{border-color:color-mix(in srgb,var(--v-blue) 26%,var(--v-line));background:var(--v-blue-soft);color:var(--v-text)} .v-alert.warning{border-color:color-mix(in srgb,var(--v-amber) 30%,var(--v-line));background:var(--v-amber-soft);color:var(--v-text)} .v-alert.danger{border-color:color-mix(in srgb,var(--v-red) 30%,var(--v-line));background:var(--v-red-soft);color:var(--v-text)} .v-alert.success{border-color:color-mix(in srgb,var(--v-green) 30%,var(--v-line));background:var(--v-green-soft);color:var(--v-text)} /* ---------- EMPTY STATE ---------- */ .v-empty{display:grid;place-items:center;text-align:center;gap:6px;min-height:200px;padding:32px;border:1px dashed var(--v-line-strong);border-radius:var(--v-r-lg);background:color-mix(in srgb,var(--v-surface) 60%,transparent);color:var(--v-muted)} .v-empty .v-icon{width:26px;height:26px;color:var(--v-muted-2);margin-bottom:4px} .v-empty b{font:600 var(--v-fs-14)/1.4 var(--v-font);color:var(--v-text-2)} /* ---------- SKELETON ---------- */ .v-skeleton{position:relative;overflow:hidden;background:var(--v-surface-2);border-radius:var(--v-r-sm)} .v-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v-surface) 65%,transparent),transparent);animation:v-shimmer 1.6s var(--v-ease) infinite} @keyframes v-shimmer{to{transform:translateX(100%)}} /* ---------- DROPDOWN MENU ---------- */ .v-menu{ position:absolute;min-width:210px;padding:6px;z-index:60; background:var(--v-surface);border:1px solid var(--v-line); border-radius:var(--v-r-md);box-shadow:var(--v-shadow-lg); transform-origin:top right; animation:v-pop var(--v-t-base) var(--v-ease) both; } @keyframes v-pop{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}} .v-menu-item{ display:flex;align-items:center;gap:10px;width:100%; padding:9px 11px;border:0;border-radius:9px;background:transparent; font:500 var(--v-fs-13)/1 var(--v-font);color:var(--v-text);cursor:pointer;text-align:left;text-decoration:none; transition:background-color var(--v-t-fast) var(--v-ease); } .v-menu-item:hover{background:var(--v-surface-2)} .v-menu-item.danger{color:var(--v-red)} .v-menu-sep{height:1px;background:var(--v-line);margin:6px 4px} .v-menu-label{padding:8px 11px 4px;font:600 var(--v-fs-11)/1 var(--v-font);text-transform:uppercase;letter-spacing:.07em;color:var(--v-muted-2)} /* ---------- MODALE ---------- */ .v-modal-veil{position:fixed;inset:0;background:var(--v-veil);backdrop-filter:blur(6px);z-index:90;display:grid;place-items:center;padding:20px;animation:v-fade var(--v-t-base) var(--v-ease) both} @keyframes v-fade{from{opacity:0}to{opacity:1}} .v-modal{width:min(560px,100%);max-height:min(82vh,760px);overflow:auto;background:var(--v-surface);border:1px solid var(--v-line);border-radius:var(--v-r-xl);box-shadow:var(--v-shadow-lg);padding:26px;animation:v-rise var(--v-t-slow) var(--v-ease) both} .v-modal.compact{width:min(480px,100%);padding:28px} .v-modal.narrow{width:min(480px,93vw)} .v-modal.dense{padding:22px} .v-modal.wide{width:min(660px,93vw)} .v-modal.xl{width:min(780px,100%);max-height:90vh;overflow-y:auto;padding:0} .v-modal.structured{width:100%;max-width:560px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:88vh} .v-modal-veil.high{z-index:200} .v-modal-veil.top{z-index:1000} .v-modal-veil.toggle{display:none} .v-modal-veil.toggle.show{display:grid} .v-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--v-line)} .v-modal-head .v-card-title,.v-modal-head h2,.v-modal-head h3{margin:0} .v-modal-body{padding:20px 22px;overflow:auto;display:flex;flex-direction:column;gap:14px} .v-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--v-line)} @keyframes v-rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} /* ---------- TOAST ---------- */ .v-toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:100} .v-toast{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--v-text);color:var(--v-surface);border-radius:var(--v-r-md);box-shadow:var(--v-shadow-lg);font:500 var(--v-fs-13)/1.4 var(--v-font);animation:v-rise var(--v-t-slow) var(--v-ease) both} .v-toast.floating{position:fixed;right:24px;bottom:24px;z-index:200;max-width:min(420px,calc(100vw - 32px))} .v-toast.floating.success{background:var(--v-green);color:var(--v-surface)} .v-toast.floating.error{background:var(--v-red);color:var(--v-surface)} .v-toast.centered{position:fixed;left:50%;bottom:20px;z-index:200;max-width:min(640px,calc(100vw - 32px));transform:translateX(-50%);animation:none;background:var(--v-surface-2);color:var(--v-text);border:1px solid var(--v-line)} .v-toast.centered.err{border-color:var(--v-red)} .v-toast.centered.ok{border-color:var(--v-green)} .v-toast.toggled{opacity:0;pointer-events:none;transition:opacity var(--v-t-slow) var(--v-ease),transform var(--v-t-slow) var(--v-ease)} .v-toast.toggled.show{opacity:1;transform:translateX(-50%) translateY(-4px)} /* Stato database: banner di manutenzione/riavvio annunciato a tutto il team. Centrato con margin auto (niente transform: v-rise lo sovrascriverebbe). */ .v-maint-banner{position:fixed;top:16px;left:0;right:0;margin:0 auto;width:fit-content;z-index:220;display:none;align-items:center;gap:12px;max-width:min(720px,calc(100vw - 32px));padding:14px 18px;background:var(--v-red);color:var(--v-surface);border-radius:var(--v-r-md);box-shadow:var(--v-shadow-lg);font:500 var(--v-fs-13)/1.45 var(--v-font)} .v-maint-banner.show{display:flex;animation:v-rise var(--v-t-slow) var(--v-ease) both} .v-maint-banner .v-num{font-variant-numeric:tabular-nums} /* chi ha lanciato l'allarme: deve saltare all'occhio (prima era "(annunciato da nico)", illeggibile) */ .v-maint-banner .v-maint-chi{display:inline-block;padding:1px 9px;margin:0 1px;border-radius:var(--v-r-pill);background:var(--v-surface);color:var(--v-red);font-weight:700;white-space:nowrap} /* ---------- TOOLTIP (title-free, data-tip) ---------- */ [data-tip]{position:relative} [data-tip]:hover::after{ content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%); background:var(--v-text);color:var(--v-surface);font:500 var(--v-fs-12)/1.3 var(--v-font); padding:6px 10px;border-radius:8px;white-space:nowrap;z-index:80;pointer-events:none; animation:v-fade var(--v-t-fast) var(--v-ease) both; } /* ---------- PROGRESS ---------- */ .v-progress{height:7px;background:var(--v-surface-2);border-radius:var(--v-r-pill);overflow:hidden} .v-progress>i{display:block;height:100%;background:var(--v-brand);border-radius:var(--v-r-pill);transition:width var(--v-t-scene) var(--v-ease)} .v-progress.green>i{background:var(--v-green)} .v-progress.amber>i{background:var(--v-amber)} .v-progress.red>i{background:var(--v-red)} /* ---------- ENTRATE IN SCENA (stagger) ---------- */ .v-enter{opacity:0;transform:translateY(12px);filter:blur(4px)} .v-enter.in{opacity:1;transform:none;filter:none;transition:opacity var(--v-t-scene) var(--v-ease),transform var(--v-t-scene) var(--v-ease),filter var(--v-t-scene) var(--v-ease)} /* ---------- COMBO (tendina con ricerca, es. selettore cliente) ---------- */ .v-combo{position:relative} .v-combo-btn{ height:var(--v-control-h-sm);max-width:230px; display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 14px; border:1px solid var(--v-line);border-radius:var(--v-r-pill); background:var(--v-surface);color:var(--v-text); font:600 var(--v-fs-13)/1 var(--v-font);cursor:pointer; box-shadow:var(--v-shadow-xs); transition:background-color var(--v-t-base) var(--v-ease),border-color var(--v-t-base) var(--v-ease); } .v-combo-btn:hover{background:var(--v-surface-2);border-color:var(--v-line-strong)} .v-combo-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v-combo-pop{ position:absolute;right:0;top:calc(100% + 8px);width:240px;min-width:100%;max-width:80vw;padding:8px; background:var(--v-surface);border:1px solid var(--v-line); border-radius:var(--v-r-md);box-shadow:var(--v-shadow-lg);z-index:60; transform-origin:top right;animation:v-pop var(--v-t-base) var(--v-ease) both; } .v-combo-search{height:var(--v-control-h-sm)!important;font-size:var(--v-fs-13)!important} .v-combo-list{max-height:300px;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:1px} .v-combo-item{ display:flex;align-items:center;min-height:36px;width:100%;text-align:left;padding:6px 12px;border:0;border-radius:9px; background:transparent;font:500 var(--v-fs-13)/1.35 var(--v-font);color:var(--v-text); cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .v-combo-item:hover,.v-combo-item.hover{background:var(--v-surface-2)} .v-combo-item.sel{background:var(--v-brand-soft);color:var(--v-brand-deep);font-weight:600} /* Quando un cliente compare perche' ha combaciato un ALIAS e non il nome, si dice quale: vedersi apparire "+WATT SRL" dopo aver scritto "noviqa" senza spiegazione confonde. */ .v-combo-alias{color:var(--v-text-3);font-size:.82em;font-weight:400;margin-left:.4em} .v-combo-empty{padding:14px;text-align:center;font-size:var(--v-fs-12);color:var(--v-muted)} /* ---------- COMBO RICCO (righe con miniatura/sottotitolo/kpi) ---------- Usato dal Control API della shell (type:"combo") e riusabile nei tool: stessa famiglia del picker clienti, con contenuto ricco tipo selettore prodotto (SEO Hub). Il pannello "float" vive su body in position:fixed perché gli slot della topbar scrollano (overflow-x) e clipperebbero. */ .v-combo-pop.float{position:fixed;right:auto;top:auto} .v-combo-pop.wide{width:330px;max-width:92vw} .v-combo-pop.narrow{width:250px;max-width:92vw} .v-combo-pop .v-combo-list{max-height:min(300px,48vh);margin-top:6px;border:1px solid var(--v-line);border-radius:10px;gap:0;overflow:auto} .v-combo-pop.narrow .v-combo-list{border:0;border-radius:0} .v-combo-opt{display:flex;gap:10px;align-items:center;width:100%;padding:7px 9px;border:0;border-bottom:1px solid var(--v-line);border-radius:0;background:transparent;cursor:pointer;text-align:left;font:500 var(--v-fs-13)/1.25 var(--v-font);color:var(--v-text)} .v-combo-list>.v-combo-opt:last-child{border-bottom:0} .v-combo-pop.narrow .v-combo-opt{border-bottom:0;border-radius:8px} .v-combo-opt:hover,.v-combo-opt.hover{background:var(--v-surface-2)} .v-combo-opt.sel{background:var(--v-brand-soft);color:var(--v-brand-deep)} .v-combo-opt[disabled]{opacity:.45;cursor:not-allowed} .v-combo-opt .t{flex:1 1 auto;min-width:0} .v-combo-opt b{display:block;font-weight:600;font-size:var(--v-fs-13);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v-combo-sub{display:block;font:500 10px/1.4 var(--v-font-mono);color:var(--v-muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .v-combo-opt.sel .v-combo-sub{color:inherit;opacity:.7} .v-combo-thumb{width:32px;height:32px;border-radius:6px;background:var(--v-surface-2);border:1px solid var(--v-line);display:flex;align-items:center;justify-content:center;color:var(--v-muted);flex:0 0 auto;overflow:hidden} .v-combo-thumb img{width:100%;height:100%;object-fit:contain} .v-combo-thumb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6} .v-combo-thumb.acc{background:var(--v-inverse);color:var(--v-brand);border-color:var(--v-inverse)} .v-combo-kpi{margin-left:auto;text-align:right;font:600 10.5px/1.35 var(--v-font-mono);color:var(--v-muted);white-space:nowrap;flex:0 0 auto} .v-combo-title{padding:6px 9px 2px;font:700 var(--v-fs-11)/1 var(--v-font);text-transform:uppercase;letter-spacing:.07em;color:var(--v-muted-2)} .v-combo-sep{height:1px;background:var(--v-line);margin:6px 4px} .v-combo-dates{display:flex;gap:5px;align-items:center;padding:6px 5px 3px;flex-wrap:wrap} .v-combo-dates input[type=date]{font:500 11px/1 var(--v-font-mono);border:1px solid var(--v-line);border-radius:8px;padding:6px 7px;background:var(--v-surface);color:var(--v-text)} .v-combo-dates .fr{font-size:var(--v-fs-12);color:var(--v-muted)} /* ---------- BACHECA · RICHIESTE AL DEV TEAM ---------- */ /* trigger nella sidebar (sopra il tondino profilo) */ .dev-trigger{width:100%;justify-content:flex-start;margin-bottom:8px} .dev-count-badge{display:none;min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:var(--v-r-pill);background:var(--v-action);color:var(--v-on-action);font:700 var(--v-fs-11)/20px var(--v-font);text-align:center;font-variant-numeric:tabular-nums} .dev-count-badge.show{display:inline-block} /* rail collassato dentro un tool: solo icona */ @media (min-width:901px){ body[data-view="tool"] .side:not(:hover) .dev-trigger{justify-content:center;padding:0 9px} body[data-view="tool"] .side:not(:hover) .dev-trigger>span{display:none} } /* modale bacheca (default v-modal è 560px: qui serve più largo per la board) */ #devPanel{display:none} #devPanel.open{display:grid} .dev-modal{width:min(920px,100%)} #dbPanel{display:none} #dbPanel.open{display:grid} .db-modal{width:min(640px,100%)} /* modale Impostazioni · gestione clienti (la conferma di eliminazione è il confirm() nativo: un secondo veil finirebbe sotto o sopra a caso, hanno tutti lo stesso z-index) */ #clientsPanel{display:none} #clientsPanel.open{display:grid} .clients-add{display:grid;gap:6px;margin-bottom:8px} .clients-add-row{display:flex;gap:8px;align-items:center} .clients-add-row .v-input{flex:1;min-width:0} .clients-h3{font-size:var(--v-fs-14);margin:18px 0 10px} /* tab orizzontali del pannello Impostazioni (Clienti / Attività / Log della Suite) */ .settings-tabs{display:flex;gap:2px;border-bottom:1px solid var(--v-line);margin:2px 0 18px} .settings-tab{appearance:none;-webkit-appearance:none;background:none;border:0;padding:10px 16px;font:600 var(--v-fs-14)/1 var(--v-font);color:var(--v-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--v-t-fast) var(--v-ease)} .settings-tab:hover{color:var(--v-text)} .settings-tab.is-active{color:var(--v-brand-deep);border-bottom-color:var(--v-brand)} .clients-row{display:flex;align-items:center;gap:10px;border:1px solid var(--v-line);border-radius:var(--v-r-lg);background:var(--v-surface);padding:10px 14px} .clients-row-name{font-size:var(--v-fs-14);flex:1;min-width:0;overflow-wrap:anywhere} .client-event{display:flex;align-items:center;gap:10px;border:1px solid var(--v-line);border-radius:var(--v-r-lg);background:var(--v-surface);padding:10px 14px} .client-event .v-avatar{width:28px;height:28px;font-size:var(--v-fs-11)} .client-event .v-avatar img{width:100%;height:100%;object-fit:cover} .client-event-text{font-size:var(--v-fs-13);flex:1;min-width:0;overflow-wrap:anywhere} .client-event-date{color:var(--v-muted-2);font-size:var(--v-fs-12);white-space:nowrap} .dev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px} .dev-head h2{font-size:var(--v-fs-22)} .dev-head p{margin-top:5px;font-size:var(--v-fs-13)} .dev-head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} #devBoardToggle.active{background:var(--v-brand-soft);color:var(--v-brand-deep)} /* form richiesta */ .dev-form{display:grid;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--v-line);margin-bottom:18px} .dev-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} @media (max-width:640px){.dev-form-grid{grid-template-columns:1fr}} .dev-form-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px} .dev-feedback{font-size:var(--v-fs-13);font-weight:600;color:var(--v-green)} .dev-feedback.error{color:var(--v-red)} .dev-mine h3{margin:0 0 12px;font-size:var(--v-fs-14)} /* liste + item */ .dev-list{display:grid;gap:10px} .dev-item{border:1px solid var(--v-line);border-radius:var(--v-r-lg);background:var(--v-surface);padding:14px 16px;display:grid;gap:8px} .dev-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dev-item-top strong{font-size:var(--v-fs-14)} .dev-item-meta{color:var(--v-muted);font-size:var(--v-fs-12)} .dev-item-desc{color:var(--v-muted);font-size:var(--v-fs-13);white-space:pre-wrap;margin:0;overflow-wrap:anywhere} .dev-item-reply{font-size:var(--v-fs-13);border-left:3px solid color-mix(in srgb,var(--v-brand) 45%,var(--v-line));padding:2px 0 2px 10px;color:var(--v-text)} .dev-item-reply span{color:var(--v-muted-2);font-size:var(--v-fs-11);text-transform:uppercase;font-weight:600;letter-spacing:.05em;display:block} .dev-item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* badge tipo/stato (via color-mix sui token semantici, niente hex) */ .dev-badge{display:inline-flex;align-items:center;border-radius:var(--v-r-pill);padding:3px 9px;font:700 var(--v-fs-11)/1 var(--v-font);letter-spacing:.02em} .dev-badge.stato-nuova{color:var(--v-blue);background:color-mix(in srgb,var(--v-blue) 12%,var(--v-surface))} .dev-badge.stato-in-lavorazione{color:var(--v-amber);background:color-mix(in srgb,var(--v-amber) 14%,var(--v-surface))} .dev-badge.stato-fatta{color:var(--v-green);background:color-mix(in srgb,var(--v-green) 12%,var(--v-surface))} .dev-badge.stato-rifiutata{color:var(--v-red);background:color-mix(in srgb,var(--v-red) 11%,var(--v-surface))} .dev-badge.stato-archiviata{color:var(--v-muted);background:var(--v-surface-2);border:1px solid var(--v-line)} .dev-badge.tipo-bug{color:var(--v-red);background:color-mix(in srgb,var(--v-red) 11%,var(--v-surface))} .dev-badge.tipo-richiesta{color:var(--v-brand-deep);background:var(--v-brand-soft)} .dev-badge.tipo-idea{color:var(--v-violet);background:color-mix(in srgb,var(--v-violet) 14%,var(--v-surface))} .dev-badge.tipo-aiuto{color:var(--v-blue);background:color-mix(in srgb,var(--v-blue) 12%,var(--v-surface))} /* board: filtri, chip di stato, riepilogo */ .dev-board-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} /* .v-btn{display:inline-flex} batterebbe l'attributo [hidden]: lo ripristiniamo per il bottone admin-only */ #devArchiveDone[hidden]{display:none} .dev-chiprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .dev-chip{height:32px;padding:0 13px;border:1px solid var(--v-line);border-radius:var(--v-r-pill);background:var(--v-surface);color:var(--v-muted);font:600 var(--v-fs-13)/1 var(--v-font);cursor:pointer;white-space:nowrap;box-shadow:var(--v-shadow-xs)} .dev-chip:hover{background:var(--v-surface-2);color:var(--v-text)} .dev-chip.active{background:var(--v-brand-soft);color:var(--v-brand-deep);border-color:transparent} .dev-filter-select{width:auto;height:var(--v-control-h-sm);border-radius:var(--v-r-pill);font-size:var(--v-fs-13);color:var(--v-muted)} .dev-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px} .dev-summary-card{border:1px solid var(--v-line);border-radius:var(--v-r-lg);padding:12px;background:var(--v-surface-2)} .dev-summary-card span{display:block;color:var(--v-muted);font-size:var(--v-fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .dev-summary-card strong{display:block;margin-top:4px;font-size:var(--v-fs-22);font-variant-numeric:tabular-nums} @media (max-width:720px){.dev-summary{grid-template-columns:repeat(2,minmax(0,1fr))}} /* controlli di triage admin per item */ .dev-item-admin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--v-line);padding-top:10px} .dev-item-admin-field{display:flex;align-items:center;gap:6px} .dev-item-admin-field.grow{flex:1;min-width:220px} .dev-item-admin label{font-size:var(--v-fs-11);color:var(--v-muted-2);font-weight:600;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .dev-item-admin .dev-mini{height:var(--v-control-h-sm);width:auto;font-size:var(--v-fs-13)} .dev-item-admin-field.grow .dev-mini{width:100%;min-width:0} /* ---------- SPEDIZIONI RICHIESTE ---------- */ /* Prima qui c'era una riga sola di testo e non si capiva nulla: né chi l'aveva chiesta, né quando. Ora la scheda ha una gerarchia — cliente e stato in evidenza, il sommario sotto, i campi in griglia — e riusa .dev-item della bacheca per non inventare un secondo stile. */ .sped-tabs{margin-bottom:14px} .sped-item{width:100%;text-align:left;cursor:pointer;transition:border-color .12s,background .12s} .sped-item:hover{border-color:var(--v-line-strong);background:var(--v-surface-2)} .sped-sum{color:var(--v-muted);font-size:var(--v-fs-12)} /* auto-fit: su schermo stretto i campi scendono da soli, senza media query. 230px perché i campi sono 6: così su desktop fanno due righe da tre invece di una da cinque più un orfano. */ .sped-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 16px;border-top:1px dashed var(--v-line);padding-top:11px} .sped-field{display:grid;gap:2px;min-width:0} /* --v-muted e non --v-muted-2: queste etichette sono maiuscolette da 11px, cioè il testo più piccolo della scheda, e con --v-muted-2 stavano a 2,58:1 in chiaro (il minimo è 4,5:1). Il token globale NON si tocca — lo usano altri 11 punti della Suite: si cambia solo qui. Misurato: 4,93:1 in chiaro e 6,58:1 in scuro sulla superficie della scheda. */ .sped-field span{color:var(--v-muted);font-size:var(--v-fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.04em} .sped-field strong{font-size:var(--v-fs-13);font-weight:600;overflow-wrap:anywhere} .sped-note{margin:0;color:var(--v-text-2);font-size:var(--v-fs-13);overflow-wrap:anywhere} /* L'errore era testo rosso e somigliava al link «Apri in Lettere di vettura →» (rosso anche lui, ma di brand): si leggeva come un pulsante da cliccare. Ora riusa .v-alert.danger, che è un riquadro — forma diversa, non solo tinta diversa. Qui resta solo ciò che l'alert non fa. */ .sped-err{margin:0;overflow-wrap:anywhere} .sped-go{color:var(--v-brand-deep);font-size:var(--v-fs-12);font-weight:700} /* registro: righe di sola lettura — la spedizione può non esistere più, non ci si clicca */ .sped-ev{background:var(--v-surface-2)} .sped-ev .dev-item-top strong{font-weight:600} .sped-ev-tolta{border-left:3px solid var(--v-red)} .sped-ev-nuova{border-left:3px solid var(--v-blue)} /* Su telefono i bottoni della testata (qui sono tre) non ci stanno in riga col titolo: senza questo, «Aggiorna» e la X finiscono TAGLIATI fuori dalla modale e il pannello non si chiude più. Vale anche per la bacheca, che usa la stessa testata. */ @media (max-width:560px){ .dev-head{flex-wrap:wrap} .dev-head>div:first-child{flex:1 1 100%} .dev-head-actions{width:100%;justify-content:flex-end;flex-wrap:wrap} /* Qui i bottoni sono TRE e a 390px ne servono 298 di larghezza su 296 disponibili: la X finiva da sola su una riga sua, sotto gli altri due. Non le si tolgono due pixel a un gap — domani un carattere più largo se li riprende: la X va dove uno la cerca, in alto a destra accanto al titolo. Solo in questo pannello: la bacheca ha la sua testata. */ #spedPanel .dev-head{position:relative} /* Il posto per la X si toglie al TITOLO, non alla testata: sulla testata stringerebbe anche la riga dei bottoni, che di larghezza non ne ha da regalare — e a spezzarsi in due sarebbero loro. */ #spedPanel .dev-head>div:first-child{padding-right:42px} #spedPanel #closeSpedPanel{position:absolute;top:0;right:0} } /* ---------- CAMPANELLA · NOTIFICHE ---------- */ /* ⚠️ `.v-icon-btn{display:inline-grid}` BATTE l'attributo [hidden]: senza questa riga la campanella resterebbe visibile a tutti, che è esattamente la cosa da non fare (visibile solo a tre account, decisione di Cristian 05/08/2026). Stessa trappola già pagata con #devArchiveDone qui sopra. */ .top-bell[hidden]{display:none} /* Il pallino sta SOPRA l'icona: il bottone deve fare da riferimento, .v-icon-btn non è posizionato. L'anello dello stesso colore della barra stacca il pallino dall'icona anche quando ci finisce sopra. */ .top-bell{position:relative} .top-bell-badge{display:none;position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--v-r-pill);background:var(--v-action);color:var(--v-on-action);font:700 var(--v-fs-11)/18px var(--v-font);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--v-surface)} .top-bell-badge.show{display:block} /* .dev-item è display:grid e nasce per un
: su un