/* ══════════════════════════════════════════════════════════════════════════ TOKEN DI TEMA Riferimento completo, con specimen dal vivo: docs/design-system.html Nessun colore, raggio, spazio o durata va scritto a mano altrove. ══════════════════════════════════════════════════════════════════════════ */ :root { --bg-primary: #0a1014; --bg-secondary: #111b21; --bg-tertiary: #202c33; --bg-hover: #1a2529; --border-color: #2a3942; --text-primary: #e9edef; --text-secondary: #8696a0; --brand: #00a884; --brand-hover: #008f70; /* Dove il verde deve portare testo: bianco su --brand misura 3,03:1 e l'etichetta di .btn-primary e 14px bold, cioe testo normale per WCAG. In tema scuro i due coincidono, li il verde chiaro e gia conforme. */ /* Verde che porta testo bianco: bianco su #00a884 e 3,03:1, su #0f7a62 e 5,28:1. Uguale nei due temi, cosi il pulsante ha un aspetto solo. */ --brand-strong: #0f7a62; --brand-strong-hover: #0b6350; --btn-secondary-hover-bg: #2a3942; /* Livelli di form (regola dei tre livelli, AGENTS.md) */ --panel-bg: var(--bg-tertiary); --panel-border: var(--border-color); --field-bg: var(--bg-secondary); --field-border: var(--border-color); /* Stato — inchiostro per tema scuro */ --st-ok: #2ee6b6; --st-warn: #facc15; --st-danger: #f87171; --st-info: #93c5fd; --st-accent: #c4b5fd; --st-neutral: #b3c0c9; /* Sorgenti — inchiostro per tema scuro */ --src-crm-ink: #b3d9fe; --src-safee-ink: #a6e99f; --src-didattiko-ink: #e0c8ff; --src-erp-ink: #fbc99e; /* Profondita */ --grad-surface: linear-gradient(180deg, #162026, #111b21); --grad-raised: linear-gradient(180deg, #2b3941, #1e2a30); --sh-1: 0 1px 2px rgba(0, 0, 0, 0.2); --sh-2: 0 2px 8px rgba(0, 0, 0, 0.28); --sh-3: 0 10px 24px rgba(0, 0, 0, 0.34); color-scheme: dark; accent-color: var(--brand); scrollbar-color: var(--border-color) transparent; } body.light-theme, html.light-theme { --bg-primary: #f5f5f5; --bg-secondary: #ffffff; --bg-tertiary: #e8e8e8; --bg-hover: #f0f0f0; --border-color: #d0d0d0; --text-primary: #1a1a1a; --text-secondary: #666666; --btn-secondary-hover-bg: #d4d4d4; --panel-bg: #f4f6f8; --panel-border: #d4dbe3; --field-bg: #ffffff; --field-border: #d4dbe3; --st-ok: #0b6350; --st-warn: #854d0e; --st-danger: #b91c1c; --st-info: #1d4ed8; --st-accent: #5b21b6; --st-neutral: #4c5c66; --src-crm-ink: #025086; --src-safee-ink: #085e02; --src-didattiko-ink: #5f3389; --src-erp-ink: #713f01; --grad-surface: linear-gradient(180deg, #ffffff, #fbfbfb); --grad-raised: linear-gradient(180deg, #fbfcfd, #e9edf1); --sh-1: 0 1px 2px rgba(15, 23, 42, 0.06); --sh-2: 0 2px 8px rgba(15, 23, 42, 0.1); --sh-3: 0 10px 24px rgba(15, 23, 42, 0.16); } /* color-scheme raggiunge i controlli nativi solo dall'elemento radice. theme-boot.js mette la classe su prima del primo paint. */ html.light-theme { color-scheme: light; } /* Invarianti fra i due temi */ :root { --st-ok-bg: rgba(0, 168, 132, 0.14); --st-ok-bd: rgba(0, 168, 132, 0.3); --st-warn-bg: rgba(234, 179, 8, 0.14); --st-warn-bd: rgba(234, 179, 8, 0.3); --st-danger-bg: rgba(239, 68, 68, 0.14); --st-danger-bd: rgba(239, 68, 68, 0.3); --st-info-bg: rgba(59, 130, 246, 0.14); --st-info-bd: rgba(59, 130, 246, 0.3); --st-accent-bg: color-mix(in oklab, var(--src-didattiko), transparent 86%); --st-accent-bd: color-mix(in oklab, var(--src-didattiko), transparent 70%); --st-neutral-bg: rgba(134, 150, 160, 0.14); --st-neutral-bd: rgba(134, 150, 160, 0.3); --src-crm: #0075c3; --src-safee: #23881a; --src-didattiko: #8951bf; --src-erp: #93673e; --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px; --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --fs-micro: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-title: 20px; --fs-kpi: 22px; --dur-fast: 120ms; --dur: 150ms; --dur-slow: 300ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); --sh-focus: 0 0 0 2px rgba(0, 168, 132, 0.3); --z-dropdown: 200; --z-sticky: 300; --z-backdrop: 1100; --z-modal: 1200; --z-modal-nested: 1300; --z-toast: 1400; --z-tooltip: 1500; } /* ── Superfici native del browser ──────────────────────────────────────── Cursore, selezione, barre di scorrimento, spunte, calendario dei campi data: senza queste righe il tema scuro le eredita chiare. */ ::selection { background: rgba(0, 168, 132, 0.28); color: var(--text-primary); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } /* Movimento ridotto: preferenza di sistema, finora mai onorata. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } /* Gli indicatori di attesa restano in movimento: uno spinner fermo sembra un'interfaccia bloccata, non un'interfaccia rispettosa. Rallentati, non annullati. */ .fa-spin, .fa-pulse, .dash-kpi-spinner, [class*="spinner"] { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg-primary); color: var(--text-primary); } /* Login: stessi stili dell'app whatsapp */ .login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0a1014; display: flex; align-items: center; justify-content: center; z-index: 1000; } .login-stack { width: 100%; max-width: 400px; } .login-logo { display: block; margin: 0 auto 14px; height: 54px; width: auto; object-fit: contain; } .login-box { background: #202c33; padding: 32px; border-radius: 12px; width: 100%; max-width: 400px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } .login-box h2 { color: #e9edef; margin-bottom: 24px; font-size: 20px; text-align: center; } .login-field { margin-bottom: 16px; } .login-field label { display: block; color: #8696a0; font-size: 13px; margin-bottom: 6px; } .login-field input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #202c33; outline: none; background: #111b21; color: #e9edef; font-size: 14px; transition: border-color 0.15s ease; } .login-field input:focus { border-color: #00a884; } .login-field input[type="checkbox"] { width: 40px; min-width: 40px; height: 22px; padding: 0; } .login-button { width: 100%; padding: 12px; border-radius: 8px; border: none; cursor: pointer; background: #00a884; color: #111b21; font-size: 14px; font-weight: 500; transition: background 0.15s ease; margin-top: 8px; } .login-button:hover { background: #0bd4aa; } .login-button:disabled { background: #8696a0; cursor: not-allowed; } .login-error { display: none; background: #f15c6d; color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: center; } .login-info { display: none; background: #1e40af; color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: center; } .login-link-btn { width: 100%; margin-top: 10px; background: transparent; border: 1px solid #2f4858; color: #9fd6ff; border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 13px; } .login-link-btn:hover { background: #1a2529; } .login-link-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* ── Layout shell a griglia (header / sidebar+main / footer) ── */ .dashboard-shell { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 220px 1fr; grid-template-areas: "header header" "sidebar main"; min-height: 100vh; } .dashboard-head { grid-area: header; } .app-sidebar { grid-area: sidebar; background: var(--grad-surface); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow-y: auto; padding: 12px 0; } .dashboard-main { grid-area: main; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; /* Spazio per footer fisso in viewport */ padding-bottom: 56px; } .dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--grad-surface); border-bottom: 1px solid var(--border-color); } .dashboard-head-left { flex-shrink: 0; } .dashboard-head-center { flex: 1; min-width: 280px; max-width: 760px; margin: 0 8px; } .dashboard-title { font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 12px; color: var(--text-primary); transition: color 0.3s ease; } .dashboard-logo { height: 40px; width: auto; object-fit: contain; } .dashboard-content { padding: 0; color: var(--text-secondary); line-height: 1.6; } .dashboard-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .company-search { position: relative; flex: 1 1 460px; max-width: 520px; } .dashboard-head-tools { display: flex; align-items: center; gap: 10px; } .week-select-wrap { flex: 0 0 280px; max-width: 280px; } .week-select-wrap select { width: 100%; height: 40px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; padding: 0 10px; outline: none; } .week-select-wrap select:focus { border-color: var(--brand); } .company-search-input-wrap { height: 40px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); display: flex; align-items: center; gap: 8px; padding: 0 10px; } .company-search-input-wrap i { color: var(--text-secondary); font-size: 13px; } .company-search-input-wrap input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--text-primary); font-size: 13px; } .company-search-input-wrap input::placeholder { color: var(--text-secondary); } .company-search-clear { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .company-search-clear:hover { background: var(--bg-hover); } .company-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); max-height: 300px; overflow: auto; } .company-search-status { padding: 10px 12px; color: var(--text-secondary); font-size: 12px; } .company-search-item { border: none; border-bottom: 1px solid var(--border-color); background: transparent; width: 100%; text-align: left; color: var(--text-primary); padding: 10px 12px; cursor: pointer; } .company-search-item:last-child { border-bottom: none; } .company-search-item:hover, .company-search-item.active { background: var(--bg-hover); } .company-search-item-title { font-size: 13px; font-weight: 700; } .company-search-item-meta { margin-top: 2px; font-size: 11px; color: var(--text-secondary); } .theme-toggle { display: flex; align-items: center; gap: 6px; margin-right: 2px; } .theme-icon { font-size: 12px; color: var(--text-secondary); } .theme-switch { position: relative; width: 44px; height: 22px; background: var(--bg-tertiary); border-radius: 11px; cursor: pointer; border: 1px solid var(--border-color); transition: background 0.3s ease, border-color 0.3s ease; } .theme-switch-handle { position: absolute; /* Pista alta 22 con bordo 1px: l'interno e' 20 e il pallino 18, quindi il margine giusto e' 1, non 2. Con 2 il pallino stava 3px sotto il bordo alto e 1px sopra quello basso: storto di 2px. */ top: 1px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } /* Checkbox editabili: stile switch coerente col tema chiaro/scuro */ input[type="checkbox"]:not([disabled]) { appearance: none; -webkit-appearance: none; width: 40px; min-width: 40px; height: 22px; border-radius: 11px; border: 1px solid var(--border-color); background-color: var(--bg-tertiary); background-repeat: no-repeat; background-image: radial-gradient(circle 8px at 9px 11px, #ffffff 98%, transparent 100%); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, background-image 0.2s ease, box-shadow 0.2s ease; vertical-align: middle; } input[type="checkbox"]:not([disabled]):checked { border-color: var(--brand); background-color: var(--brand); background-image: radial-gradient(circle 8px at 31px 11px, #ffffff 98%, transparent 100%); } input[type="checkbox"]:not([disabled]):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.24); } /* Checkbox non editabili: visualizzazione icona spunta/crocetta */ input[type="checkbox"][disabled] { appearance: none; -webkit-appearance: none; width: 18px; min-width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); vertical-align: middle; cursor: default; opacity: 1; } input[type="checkbox"][disabled]:checked { border-color: rgba(0, 168, 132, 0.55); background-color: rgba(0, 168, 132, 0.18); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300a884' d='M6.2 12.4 2.6 8.8l1.4-1.4 2.2 2.2 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E"); } input[type="checkbox"][disabled]:not(:checked) { border-color: rgba(239, 68, 68, 0.45); background-color: rgba(239, 68, 68, 0.12); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23dc2626' d='M4.2 3 8 6.8 11.8 3 13 4.2 9.2 8 13 11.8 11.8 13 8 9.2 4.2 13 3 11.8 6.8 8 3 4.2z'/%3E%3C/svg%3E"); } .btn-secondary { background: var(--grad-raised); color: var(--text-primary); border: 1px solid var(--border-color); } @media (hover: hover) { .btn-secondary:hover:not(:disabled) { background: var(--btn-secondary-hover-bg); color: var(--text-primary); } } .btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; } .modal-close-circle-btn { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .modal-close-circle-btn i { font-size: 14px; } .header-button { padding: 6px 14px; border-radius: 8px; border: none; cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease, opacity 0.1s ease; } .header-button-secondary { background: var(--bg-tertiary); color: var(--text-primary); } .header-button-secondary:hover { background: var(--bg-hover); transform: scale(1.03); } .header-button-secondary:active { transform: scale(0.97); } .filters-row { margin-bottom: 14px; } .period-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 6px 14px; flex-wrap: nowrap; overflow: hidden; } .date-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; } .date-filter-item { display: flex; align-items: center; gap: 8px; } .date-filter-item label { font-size: 12px; color: var(--text-secondary); min-width: 22px; } .date-filter-item input { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); padding: 6px 9px; font-size: 13px; } .date-filter-item select { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); color: var(--text-primary); padding: 6px 9px; font-size: 13px; } .preset-buttons { display: flex; flex-wrap: nowrap; gap: 6px; margin-left: auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; max-width: 100%; } .preset-btn { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--grad-raised); color: var(--text-secondary); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .preset-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .preset-btn.active { background: var(--brand-strong); border-color: var(--brand); color: #fff; } .period-filter-bar--dash { margin-top: 0; } .dashboard-error { background: #f15c6d; color: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; } .hidden { display: none; } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } .kpi-card { border: 1px solid var(--border-color); border-radius: 10px; background: var(--grad-surface); padding: 14px; } .kpi-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; } .kpi-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text-primary); } .panel { border: 1px solid var(--border-color); border-radius: 10px; background: var(--grad-surface); padding: 14px; margin-bottom: 14px; } .panel h2 { margin: 0; font-size: 18px; color: var(--text-primary); } .panel-subtitle { margin: 4px 0 12px; font-size: 13px; color: var(--text-secondary); } .chart-wrap { height: 320px; } .table-wrap { overflow: auto; } .company-table { width: 100%; border-collapse: collapse; min-width: 760px; } .company-table th, .company-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-color); text-align: left; font-size: 13px; color: var(--text-primary); } /* Colonne importo/valore: sempre allineate a destra in tutte le tabelle */ table th.amount-col, table td.amount-col, table th[class*="col-amount"], table td[class*="col-amount"], table th[class*="col-num"], table td[class*="col-num"] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .company-table th { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .company-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 18px; } .company-table th.sortable:hover { color: var(--text-primary); } .company-table th.sortable::after { content: "↕"; position: absolute; right: 6px; opacity: 0.45; } .company-table th.sortable[data-sort-dir="asc"]::after { content: "↑"; opacity: 0.95; } .company-table th.sortable[data-sort-dir="desc"]::after { content: "↓"; opacity: 0.95; } .state-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap; } /* I colori del testo erano hex fissi tarati sul tema chiaro: in tema scuro queste pill scendevano a 1,7–2,5:1, cioe illeggibili. Ora l'inchiostro viene dai token di stato e cambia con il tema; fondo e bordo restano identici, quindi l'aspetto in tema chiaro non cambia. */ .state-ordered { background: var(--st-ok-bg); color: var(--st-ok); border: 1px solid var(--st-ok-bd); } .state-quote { background: var(--st-info-bg); color: var(--st-info); border: 1px solid var(--st-info-bd); } .state-variations { background: var(--st-accent-bg); color: var(--st-accent); border: 1px solid var(--st-accent-bd); } .state-report { background: var(--st-warn-bg); color: var(--st-warn); border: 1px solid var(--st-warn-bd); } .state-other { background: var(--st-neutral-bg); color: var(--st-neutral); border: 1px solid var(--st-neutral-bd); } .doc-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .company-table:not(.aziende-master-table) th:nth-child(8), .company-table:not(.aziende-master-table) th:nth-child(9), .company-table:not(.aziende-master-table) th:nth-child(10), .company-table:not(.aziende-master-table) th:nth-child(11), .company-table:not(.aziende-master-table) td:nth-child(8), .company-table:not(.aziende-master-table) td:nth-child(9), .company-table:not(.aziende-master-table) td:nth-child(10), .company-table:not(.aziende-master-table) td:nth-child(11) { text-align: center; width: 108px; } .doc-open-btn, .doc-delete-btn, .doc-accept-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; height: 30px; line-height: 1; box-sizing: border-box; font-family: inherit; font-size: 12px; font-weight: 400; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background 0.15s ease, transform 0.1s ease, opacity 0.1s ease; width: 100px; justify-content: center; text-decoration: none; white-space: nowrap; } .doc-open-btn i { font-size: 12px; } .doc-open-btn:hover { transform: scale(1.02); } .doc-open-btn:active { transform: scale(0.98); } .doc-open-report { background: rgba(0, 168, 132, 0.16); color: #0f7a62; border-color: rgba(0, 168, 132, 0.35); } .doc-open-report:hover { background: rgba(0, 168, 132, 0.24); } .doc-open-quote { background: rgba(59, 130, 246, 0.16); color: #2c5ea8; border-color: rgba(59, 130, 246, 0.35); } .doc-open-quote:hover { background: rgba(59, 130, 246, 0.24); } .doc-open-review { background: rgba(245, 158, 11, 0.18); color: #9a5d00; border-color: rgba(245, 158, 11, 0.45); padding: 6px 10px; min-width: 92px; text-decoration: none; } .doc-open-review:hover { background: rgba(245, 158, 11, 0.28); } .doc-open-analisi { background: rgba(139, 92, 246, 0.14); color: #6d28d9; border-color: rgba(139, 92, 246, 0.35); } .doc-open-analisi:hover { background: rgba(139, 92, 246, 0.22); } .doc-open-disabled { background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border-color); opacity: 0.55; cursor: not-allowed; } .doc-delete-btn { border: 1px solid rgba(241, 92, 109, 0.45); background: rgba(241, 92, 109, 0.14); color: #b02a3b; } .doc-delete-btn:hover { background: rgba(241, 92, 109, 0.22); transform: scale(1.02); } .doc-accept-btn { border: 1px solid rgba(0, 168, 132, 0.45); background: rgba(0, 168, 132, 0.14); color: #0f7a62; } .doc-accept-btn:hover { background: rgba(0, 168, 132, 0.22); transform: scale(1.02); } .doc-accept-done { border-color: rgba(15, 122, 98, 0.45); background: rgba(15, 122, 98, 0.2); color: #0c644f; } .doc-accept-status { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 12px; font-weight: 700; border: none; background: transparent; color: #0c644f; min-width: 0; justify-content: center; cursor: default; } .modal-overlay.modal-nested { z-index: 1400; } .crm-opp-quotes-card { max-width: min(920px, 96vw); max-height: min(86vh, 900px); display: flex; flex-direction: column; } /* Dettaglio preventivo CRM (azienda-dettaglio): card più stretta della modale documenti */ .az-quote-modal-head .az-quote-modal-head-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; } .az-quote-modal-head h3 { margin: 0; } .az-quote-modal-status-slot { display: inline-flex; align-items: center; } .az-quote-detail-hero { padding-bottom: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 12px; } .az-quote-detail-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .az-quote-detail-hero-left { flex: 1; min-width: 0; } .az-quote-detail-hero-right { flex-shrink: 0; text-align: right; max-width: 48%; } .az-quote-detail-hero-num { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); text-transform: uppercase; } .az-quote-detail-hero-opp-id { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .az-quote-detail-hero-title { font-size: 1.35rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); margin: 8px 0 0; } .az-quote-detail-hero-oppname { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.35; } .az-quote-detail-dates { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-bottom: 16px; font-size: 14px; } .az-quote-detail-dates .az-q-date-block { min-width: 0; } .az-quote-detail-dates .az-q-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; } .az-quote-detail-dates .az-q-date-val { font-weight: 600; color: var(--text-primary); } .az-quote-detail-pay { margin-bottom: 16px; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 10px; } .az-quote-detail-pay-lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 6px; } .az-quote-detail-pay-val { font-size: 13px; color: var(--text-primary); line-height: 1.45; word-break: break-word; } .az-quote-detail-opp-line { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } .az-quote-detail-opp-line strong { color: var(--text-primary); font-weight: 600; } .az-quote-detail-modal-card { width: min(960px, 100%); max-height: min(90vh, 920px); } /* Evita doppia scrollbar nella modale dettaglio preventivo: lo scroll deve essere gestito solo dal contenitore interno. */ .az-quote-detail-modal-card .modal-content { overflow: hidden; } .az-quote-detail-root { display: flex; flex-direction: column; gap: 16px; max-height: calc(90vh - 120px); overflow: auto; } .az-quote-detail-delete-bar { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .az-quote-detail-delete-hint { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.45; max-width: 52rem; } .az-quote-detail-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 8px; } .az-quote-totals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px 18px; font-size: 14px; } .az-quote-totals-grid .az-q-label { color: var(--text-secondary); font-size: 11px; display: block; margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .az-quote-totals-grid .az-q-val { font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--text-primary); font-variant-numeric: tabular-nums; } .az-quote-rows-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; } .az-quote-rows-table { width: 100%; border-collapse: collapse; font-size: 12px; } .az-quote-rows-table th, .az-quote-rows-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-color); vertical-align: top; } .az-quote-rows-table th { background: var(--bg-tertiary); font-weight: 600; color: var(--text-secondary); white-space: nowrap; } .az-quote-rows-table tr:last-child td { border-bottom: none; } .az-quote-rows-table .az-col-num { text-align: right; white-space: nowrap; } .az-quote-cell-unit .az-quote-row-list-hint { font-size: 10px; font-weight: 500; color: var(--text-secondary); margin-top: 4px; line-height: 1.25; } .az-quote-rows-sum-row td { border-top: 2px solid var(--border-color); background: var(--bg-tertiary); font-weight: 700; } .az-quote-rows-sum-label { text-align: right; padding-right: 12px !important; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .az-quote-rows-sum-val { font-size: 1.05rem; font-variant-numeric: tabular-nums; } #crmOppQuotesModalContent { overflow: auto; max-height: calc(86vh - 120px); } .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1200; } .modal-overlay.hidden { display: none !important; } .modal-card { width: min(1100px, 100%); max-height: 85vh; background: var(--grad-surface); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; } .week-companies-card { width: min(900px, 100%); } .week-company-table th:nth-child(2), .week-company-table td:nth-child(2) { text-align: center; width: 140px; } .week-company-table th:nth-child(3), .week-company-table td:nth-child(3) { text-align: center; width: 90px; } .week-company-table th:nth-child(4), .week-company-table td:nth-child(4) { text-align: center; width: 140px; } .week-company-table th:nth-child(5), .week-company-table td:nth-child(5) { text-align: center; width: 140px; } .week-company-table th:nth-child(6), .week-company-table td:nth-child(6) { width: 170px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-color); } .modal-head h3 { margin: 0; font-size: 16px; } .week-loading-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin-left: auto; margin-right: 8px; } .week-loading-hint.hidden { display: none !important; } .modal-head-actions { display: flex; align-items: center; gap: 8px; } .modal-inline-status { font-size: 12px; color: var(--text-secondary); max-width: 360px; text-align: right; } .modal-dvr-info { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); background: #f0f4f8; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 10px; max-width: 280px; overflow: hidden; } .modal-dvr-info.hidden { display: none !important; } .modal-dvr-info .dvr-info-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .modal-dvr-info.dvr-info-loading { color: #718096; } .modal-dvr-info.dvr-info-found { color: #065f46; background: #f0fdf4; border-color: #bbf7d0; } .modal-dvr-info.dvr-info-notfound { color: #92400e; background: #fffbeb; border-color: #fde68a; } .modal-inline-status.success { color: #00a884; } .modal-inline-status.error { color: #f15c6d; } #modalSendReportBtn { display: inline-flex; align-items: center; gap: 6px; } #modalSendReportBtn.hidden { display: none !important; } #modalSendReportBtn:disabled { opacity: 0.65; cursor: wait; } #modalEditQuoteBtn { text-decoration: none; } #modalEditQuoteBtn.hidden { display: none !important; } .modal-content { margin: 0; padding: 14px; overflow: auto; color: var(--text-primary); font-size: 13px; line-height: 1.45; white-space: normal; word-break: break-word; } .modal-dvr-panel { margin-top: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); } .modal-dvr-panel.hidden { display: none !important; } .doc-view { display: grid; gap: 12px; } .doc-block { border: 1px solid var(--border-color); background: var(--bg-tertiary); border-radius: 10px; padding: 10px; } .doc-block h4 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); } .doc-kv { display: grid; grid-template-columns: 190px 1fr; gap: 6px 10px; } .doc-k { color: var(--text-secondary); font-size: 12px; } .doc-v { color: var(--text-primary); } .doc-table { width: 100%; border-collapse: collapse; } .doc-table th, .doc-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--border-color); font-size: 12px; } .doc-table th { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.2px; } .doc-table-quote { table-layout: fixed; } .doc-table-report { table-layout: fixed; } .doc-table-report th:nth-child(2), .doc-table-report td:nth-child(2) { text-align: center; } .doc-table-quote th:nth-child(3), .doc-table-quote td:nth-child(3) { text-align: right; white-space: nowrap; } .doc-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 11px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); } .doc-status-counters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .doc-status-regolare { background: rgba(0, 168, 132, 0.18); border-color: rgba(0, 168, 132, 0.4); color: var(--st-ok); } .doc-status-risolto { background: rgba(0, 168, 132, 0.16); border-color: rgba(0, 168, 132, 0.36); color: var(--st-ok); } .doc-status-in-scadenza { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.42); color: var(--st-warn); } .doc-status-scaduto { background: rgba(241, 92, 109, 0.18); border-color: rgba(241, 92, 109, 0.42); color: var(--st-danger); } .doc-status-da-regolare { background: rgba(134, 150, 160, 0.2); border-color: rgba(134, 150, 160, 0.4); color: var(--st-neutral); } .doc-status-in-lavorazione { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.4); color: var(--st-info); } .doc-status-default { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } .az-draft-notice { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.45; border: 1px solid var(--border-color); } .az-draft-notice--info { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.25); } .az-draft-notice--warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.35); } /* ── Modale bozza preventivo post-call ── */ .az-draft-modal-card { width: min(1200px, 96vw); max-height: 90vh; } #azCallAnalysisModal .az-draft-modal-body { display: flex; flex-direction: column; gap: 14px; overflow: auto; background: var(--az-draft-canvas, var(--bg-primary)); padding: 16px 18px; } body.light-theme #azCallAnalysisModal { --az-draft-canvas: #eef1f5; --az-draft-field-bg: #ffffff; --az-draft-panel-bg: #f4f6f8; } :root #azCallAnalysisModal, body:not(.light-theme) #azCallAnalysisModal { --az-draft-canvas: var(--bg-primary); --az-draft-field-bg: var(--bg-secondary); --az-draft-panel-bg: var(--bg-tertiary); } #azCallAnalysisModal .az-draft-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px; margin-bottom: 0; } #azCallAnalysisModal .az-draft-section-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } #azCallAnalysisModal .az-draft-section-hint { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); } #azCallAnalysisModal .az-draft-payment-heading { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } #azCallAnalysisModal .az-draft-delta-box { background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--text-primary); } body.light-theme #azCallAnalysisModal .az-draft-delta-box { background: #fffaf0; border-color: #ead9b8; } #azCallAnalysisModal .az-draft-form-surface { background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; } #azCallAnalysisModal .az-draft-field-grid { display: grid; grid-template-columns: 1fr 1fr 180px; gap: 10px; } #azCallAnalysisModal .az-draft-email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } #azCallAnalysisModal .az-draft-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } #azCallAnalysisModal .az-draft-field-label--inline { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); } #azCallAnalysisModal .msg-input, #azCallAnalysisModal select.msg-input { background: var(--az-draft-field-bg); border-color: var(--border-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } body.light-theme #azCallAnalysisModal .msg-input, body.light-theme #azCallAnalysisModal select.msg-input { border-color: #d4dbe3; } #azCallAnalysisModal .msg-input:focus, #azCallAnalysisModal select.msg-input:focus { box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.18), 0 1px 2px rgba(0, 0, 0, 0.05); } #azCallAnalysisModal .az-draft-add-line { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--border-color); border-radius: 10px; background: var(--az-draft-panel-bg); } #azCallAnalysisModal .az-draft-add-line-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; } #azCallAnalysisModal .az-draft-add-line-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 120px 180px; gap: 10px; align-items: end; } #azCallAnalysisModal .az-draft-add-product-label { min-width: 0; } #azCallAnalysisModal .az-draft-product-search { position: relative; margin-top: 4px; } #azCallAnalysisModal .az-draft-product-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); max-height: 240px; overflow: auto; } #azCallAnalysisModal .az-draft-product-dropdown-item { display: block; width: 100%; border: none; border-bottom: 1px solid var(--border-color); background: transparent; text-align: left; padding: 10px 12px; cursor: pointer; color: inherit; } #azCallAnalysisModal .az-draft-product-dropdown-item:last-child { border-bottom: none; } #azCallAnalysisModal .az-draft-product-dropdown-item:hover, #azCallAnalysisModal .az-draft-product-dropdown-item:focus-visible { background: var(--bg-hover); outline: none; } #azCallAnalysisModal .az-draft-product-dropdown-empty { padding: 10px 12px; font-size: 12px; color: var(--text-secondary); } #azCallAnalysisModal .az-draft-product-search--invalid { border-color: #dc2626 !important; background: rgba(220, 38, 38, .08) !important; } #azCallAnalysisModal #azDraftAddLineBtn:disabled { opacity: 0.55; cursor: not-allowed; } #azCallAnalysisModal .az-draft-diagnostics { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); } #azCallAnalysisModal .az-draft-diagnostics summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary); } #azCallAnalysisModal .az-draft-diagnostics-hint { margin: 8px 0 6px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); } #azCallAnalysisModal .az-draft-diagnostics-body { margin-top: 6px; font-size: 12px; line-height: 1.45; } .az-training-assist-box { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-tertiary, #f4f6f8); } .az-training-assist-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; } .az-training-assist-hint { margin: 0 0 8px; font-size: 11px; color: var(--text-secondary); line-height: 1.4; } .az-training-assist-list { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .az-training-assist-row { padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary, #fff); } .az-training-assist-row--done { opacity: 0.65; } .az-training-assist-row-head { margin-bottom: 6px; line-height: 1.4; } .az-training-assist-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 4px; background: #fef3c7; color: #92400e; margin-right: 4px; } .az-training-assist-badge--warn { background: #fee2e2; color: #991b1b; } .az-training-assist-count { font-weight: 600; color: var(--text-secondary); } .az-training-assist-pick { width: 100%; margin-top: 2px; } .az-training-assist-fallback, .az-training-assist-candidates { font-size: 11px; color: var(--text-secondary); } #azCallAnalysisModal .az-draft-lines-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--az-draft-field-bg); padding: 6px; } #azCallAnalysisModal .az-draft-lines-wrap .company-table { margin: 0; } #azCallAnalysisModal .az-draft-lines-wrap .company-table td { padding: 10px 8px; vertical-align: top; } #azCallAnalysisModal .az-draft-input-num { text-align: right; } #azCallAnalysisModal .az-draft-lines-table { table-layout: auto; width: 100%; } #azCallAnalysisModal .az-draft-lines-table th:nth-child(2), #azCallAnalysisModal .az-draft-lines-table td:nth-child(2) { width: 72px; min-width: 72px; } #azCallAnalysisModal .az-draft-lines-table th:nth-child(3), #azCallAnalysisModal .az-draft-lines-table td:nth-child(3) { width: 120px; min-width: 120px; } #azCallAnalysisModal .az-draft-lines-table th:nth-child(4), #azCallAnalysisModal .az-draft-lines-table td:nth-child(4) { width: 130px; min-width: 130px; } #azCallAnalysisModal .az-draft-lines-table th:nth-child(5), #azCallAnalysisModal .az-draft-lines-table td:nth-child(5) { width: 120px; min-width: 120px; } #azCallAnalysisModal .az-draft-line-qty { width: 100%; min-width: 56px; text-align: center; } #azCallAnalysisModal .az-draft-line-price, #azCallAnalysisModal .az-draft-line-discount, #azCallAnalysisModal .az-draft-discount-expr, #azCallAnalysisModal .az-draft-global-amount { width: 100%; min-width: 96px; } #azCallAnalysisModal .az-draft-discount-expr { min-width: 120px; } #azCallAnalysisModal .az-draft-discount-expr--error, #azCallAnalysisModal .az-draft-global-amount--error { border-color: #dc2626 !important; background: rgba(220, 38, 38, .08) !important; color: #dc2626 !important; } #azCallAnalysisModal .az-draft-line-meta { margin-top: 6px; color: var(--text-secondary); font-size: 12px; line-height: 1.35; } #azCallAnalysisModal .az-draft-notes-panel { margin-top: 12px; } #azCallAnalysisModal .az-draft-notes-box { white-space: pre-wrap; overflow: visible; max-height: none; min-height: 72px; padding: 10px 12px; border-radius: 8px; background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); font-size: 13px; line-height: 1.45; color: var(--text-primary); } #azCallAnalysisModal .az-draft-internal-notes-panel .az-draft-field-label { color: #b9770e; } #azCallAnalysisModal .az-draft-internal-notes-box { background: rgba(187, 131, 0, .08); border-color: rgba(187, 131, 0, .35); } #azCallAnalysisModal .az-draft-totals { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); } #azCallAnalysisModal .az-draft-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); } #azCallAnalysisModal .az-draft-footer-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 768px) { #azCallAnalysisModal .az-draft-field-grid, #azCallAnalysisModal .az-draft-email-grid, #azCallAnalysisModal .az-draft-add-line-grid { grid-template-columns: 1fr; } } .doc-empty { color: var(--text-secondary); font-style: italic; } .doc-json { margin: 0; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .doc-quote-hero { border: 1px solid var(--border-color); background: var(--bg-secondary); border-radius: 10px; padding: 12px; } .doc-quote-hero-title { margin: 0 0 8px; font-size: 16px; color: var(--text-primary); } .doc-quote-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .doc-quote-summary-item { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); padding: 8px; } .doc-quote-summary-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.2px; } .doc-quote-summary-value { font-size: 14px; font-weight: 700; color: var(--text-primary); } .doc-note { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); padding: 10px; font-size: 13px; color: var(--text-primary); } .doc-variation-box { border: 1px solid #e4c95f; border-radius: 8px; background: #fff8dc; padding: 10px; } .doc-variation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .doc-variation-title { font-size: 12px; font-weight: 800; color: #735400; text-transform: uppercase; letter-spacing: 0.2px; } .doc-variation-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .doc-var-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; } .doc-var-new-hire { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; } .doc-var-role-change { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; } .doc-var-termination { background: #fee2e2; border-color: #fca5a5; color: #991b1b; } .doc-var-renewal { background: #fef3c7; border-color: #fcd34d; color: #92400e; } .doc-var-compliance { background: #dcfce7; border-color: #86efac; color: #166534; } .doc-var-generic { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; } .doc-variation-text { font-size: 13px; line-height: 1.5; color: #3f2f00; white-space: pre-wrap; } .doc-worker-card { border: 1px solid var(--border-color); border-radius: 10px; background: var(--grad-surface); margin-bottom: 10px; } .doc-worker-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); border-radius: 10px 10px 0 0; } .doc-worker-hero-main { flex: 1; min-width: 200px; } .doc-worker-hero-side { flex: 1; min-width: 220px; display: flex; justify-content: flex-end; } .doc-worker-meta-row { font-size: 13px; color: var(--text-primary); margin-top: 4px; line-height: 1.35; } .doc-worker-meta-row.doc-worker-meta-count { margin-top: 8px; font-size: 12px; color: var(--text-secondary); } .doc-worker-meta-k { display: inline-block; min-width: 108px; font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .doc-worker-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .doc-worker-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; max-width: 100%; } .doc-worker-pill--ok { background: rgba(0, 168, 132, 0.15); border-color: rgba(0, 168, 132, 0.35); color: var(--st-ok); } .doc-worker-pill--bad { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.45); color: var(--st-warn); } .doc-worker-pill--neutral { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); font-weight: 600; } .doc-worker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border-color); } .doc-worker-name { font-size: 14px; font-weight: 700; color: var(--text-primary); } .doc-worker-role { font-size: 12px; color: var(--text-secondary); } .doc-worker-subtotal { font-size: 13px; font-weight: 700; color: var(--text-primary); } /* Report account: adempimenti con icona tipo (visita / formazione) */ .doc-ademp-row { display: flex; align-items: flex-start; gap: 10px; } .doc-ademp-icon { flex-shrink: 0; margin-top: 2px; font-size: 15px; } .doc-ademp-icon--med { color: #0ea5e9; } .doc-ademp-icon--course { color: #059669; } .doc-ademp-icon--dpi { color: #d97706; } .doc-ademp-icon--other { color: var(--text-secondary); } .doc-ademp-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); margin-bottom: 2px; } .doc-ademp-desc { font-size: 13px; line-height: 1.35; color: var(--text-primary); } /* Scheda azienda: colonna tipologia lavoratore */ .az-comp-kind { display: inline-flex; align-items: center; gap: 6px; } .az-comp-kind-icon { font-size: 13px; } .az-sub-type .az-comp-kind-icon.fa-stethoscope { color: #0ea5e9; } .az-sub-type .az-comp-kind-icon.fa-graduation-cap { color: #059669; } .az-sub-type .az-comp-kind-icon.fa-clipboard-check { color: var(--text-secondary); } .doc-total-box { border: 1px solid rgba(0, 168, 132, 0.35); background: rgba(0, 168, 132, 0.12); border-radius: 10px; padding: 12px; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; } .doc-total-left { flex: 1; min-width: 0; display: grid; gap: 8px; } .doc-total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .doc-total-right { min-width: 220px; border-left: 1px solid rgba(0, 168, 132, 0.35); padding-left: 12px; display: flex; flex-direction: column; justify-content: center; } .doc-total-label { font-size: 12px; color: var(--text-secondary); } .doc-total-value { font-size: 24px; line-height: 1.1; font-weight: 800; color: var(--text-primary); } @media (max-width: 900px) and (min-width: 769px) { .kpi-grid { grid-template-columns: 1fr; } .dashboard-head { flex-direction: column; align-items: flex-start; } .dashboard-head-center { width: 100%; max-width: none; margin: 0; } .dashboard-head-tools { flex-direction: column; align-items: stretch; gap: 8px; } .company-search { flex: 1 1 auto; max-width: none; } .week-select-wrap { min-width: 0; } .dashboard-head-actions { align-self: flex-end; } .date-filter-group { flex-direction: column; align-items: flex-start; } .preset-buttons { flex-wrap: wrap; margin-left: 0; } .doc-quote-summary { grid-template-columns: 1fr 1fr; } .doc-total-box { flex-direction: column; } .doc-total-right { min-width: 0; border-left: none; border-top: 1px solid rgba(0, 168, 132, 0.35); padding-left: 0; padding-top: 10px; } } .btn { border: none; border-radius: 8px; padding: 10px 14px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; } /* Bianco su --brand misura 3,03:1; l'etichetta e 14px bold, quindi testo normale per WCAG e richiede 4,5:1. --brand-strong porta a 5,28:1 in tema chiaro; in tema scuro i due valori coincidono e nulla cambia. */ .btn-primary { background: var(--brand-strong); color: #fff; } .btn-primary:hover { background: var(--brand-strong-hover); } /* Elenco nuovi assunti / lavoratori in pratica */ .btn-new-hires { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #16866d 0%, var(--brand-strong) 55%, #0b6350 100%); color: #fff; border: 1px solid #008f70; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 168, 132, 0.32); } .btn-new-hires:hover:not(:disabled) { filter: brightness(1.07); color: #fff; box-shadow: 0 4px 14px rgba(0, 168, 132, 0.4); } .btn-new-hires:focus-visible { outline: 2px solid rgba(0, 168, 132, 0.55); outline-offset: 2px; } .btn-new-hires .az-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 1; background: rgba(255, 255, 255, 0.24); color: #fff; border-color: rgba(255, 255, 255, 0.38); font-weight: 700; } .btn-new-hires .az-count-badge.hidden { display: none; } /* ── Sub-navigazione tra pagine ── */ .app-subnav { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 0 20px; display: flex; gap: 4px; margin-top: -18px; /* compensa margin-bottom di .dashboard-head */ margin-bottom: 18px; } .app-subnav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .app-subnav-link:hover { color: var(--text-primary); } .app-subnav-link.active { color: var(--brand); border-bottom-color: var(--brand); } .app-subnav-link i { font-size: 12px; } /* ── Sidebar dinamica ── */ .sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; } .sidebar-link i { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; } .sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-link.active { background: rgba(0, 168, 132, 0.12); color: var(--brand); font-weight: 600; } .sidebar-group { margin-bottom: 2px; } .sidebar-group-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s; } .sidebar-group-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } .sidebar-group-toggle i:first-child { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; } .sidebar-group-chevron { margin-left: auto; font-size: 11px; transition: transform 0.15s ease; } .sidebar-group.is-open .sidebar-group-chevron { transform: rotate(180deg); } .sidebar-group-children { display: none; flex-direction: column; gap: 2px; padding-left: 8px; margin-bottom: 4px; } .sidebar-group.is-open .sidebar-group-children { display: flex; } .sidebar-link--child { padding-left: 20px; font-size: 12px; } .sidebar-error { font-size: 12px; color: var(--text-secondary); padding: 12px; } /* ── Widget utente header ── */ .user-info-widget { display: flex; align-items: center; gap: 8px; } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-strong); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: default; user-select: none; } .user-avatar.is-impersonation { background: #f59e0b; } .user-avatar.has-photo { background: var(--bg-tertiary); overflow: hidden; padding: 0; } .user-avatar.has-photo.is-impersonation { box-shadow: 0 0 0 2px #f59e0b; } .user-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .user-meta { display: flex; flex-direction: column; line-height: 1.2; } .user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .user-role { font-size: 11px; color: var(--text-secondary); } /* ── Footer app ── */ .app-footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; flex-shrink: 0; } /* Deve essere figlio di .dashboard-shell, NON di .dashboard-main: main ha overflow-y:auto e in molti browser ancorerebbe il fixed alla zona scroll invece che al viewport. */ .app-footer-fixed { position: fixed; bottom: 0; right: 0; left: 220px; z-index: 50; box-sizing: border-box; padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); } .footer-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .footer-right { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; max-width: 70%; } /* Spazio per pulsante segnalazioni fisso in basso a destra (non sovrapporre impersonificazione) */ .app-footer-fixed.app-footer--feedback-reserved .footer-right { padding-right: 58px; } .footer-brand { font-weight: 600; color: var(--text-primary); font-size: 12px; white-space: nowrap; } .footer-sep { color: var(--text-secondary); opacity: 0.7; } .app-version { color: var(--text-secondary); font-size: 11px; white-space: nowrap; } /* ── Sync LED (footer) ─────────────────────────────────────────────────────── */ .sync-led-wrap { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; min-width: 0; max-width: 260px; overflow: hidden; } .sync-led { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-secondary); opacity: 0.4; transition: background 0.3s, opacity 0.3s; } .sync-led--idle { background: var(--text-secondary); opacity: 0.35; } .sync-led--running { background: #3b82f6; opacity: 1; animation: led-pulse 1.4s ease-in-out infinite; } .sync-led--running-manual { background: #22c55e; opacity: 1; animation: led-pulse 1.4s ease-in-out infinite; } .sync-led--stalled { background: #f59e0b; opacity: 1; animation: led-pulse 1.4s ease-in-out infinite; } .sync-led--done { background: #22c55e; opacity: 1; animation: led-fade-out 5s ease-out forwards; } .sync-led--failed { background: #ef4444; opacity: 1; } .sync-led-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @keyframes led-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } @keyframes led-fade-out { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0.35; } } /* Toolbar pagina elenco (titolo sx, Nuovo dx) */ .page-toolbar, .admin-page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .page-toolbar h1, .page-toolbar .admin-page-title, .admin-page-header h1, .admin-page-header .admin-page-title { margin: 0; } .admin-page-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-primary); line-height: 1.25; } .page-toolbar-spacer { flex: 1; min-width: 8px; } .page-toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Barra azioni in basso (torna elenco sx, azioni item dx) */ .page-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border-color); } .page-bottom-bar .page-bottom-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 1; } /* Modale conferma (app-shell.js) */ .erp-confirm-card { max-width: 420px; } .erp-confirm-body { padding: 0 20px 20px; } .erp-confirm-message { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text-primary); } .erp-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } /* Avviso aggiornamento imminente (app-shell.js) */ /* Conto alla rovescia: pannello flottante senza sfondo, in basso a destra come le notifiche. Non copre barre dei comandi ne' piedi delle modali, e non intercetta i click fuori da se': l'utente deve poter salvare mentre lo legge. */ .erp-maint-notice { position: fixed; right: 18px; bottom: 18px; z-index: 1300; width: min(440px, calc(100vw - 24px)); padding: 14px 18px 16px; border: 1px solid color-mix(in oklab, var(--st-warn), transparent 40%); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); } .erp-maint-notice.hidden { display: none; } .erp-maint-notice-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .erp-maint-notice-head h3 { margin: 0; font-size: 15px; font-weight: 700; } .erp-maint-notice-head h3 i, .erp-maint-card .modal-head h3 i { color: var(--st-warn); margin-right: 6px; } .erp-maint-message { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--text-primary); } .erp-maint-countdown { display: flex; align-items: center; gap: 8px; } .erp-maint-seconds { font-size: 34px; font-weight: 800; line-height: 1; color: var(--st-warn); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; } .erp-maint-seconds-label { font-size: 14px; color: var(--text-secondary); margin-right: auto; } /* Aggiornamento in corso: modale, l'API e' ferma. */ .erp-maint-card { max-width: 460px; } .erp-maint-body { padding: 0 20px 20px; } /* Versione ridotta: striscia fissa in alto, il conto alla rovescia resta in vista. */ .erp-maint-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1300; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 14px; border: 1px solid color-mix(in oklab, var(--st-warn), transparent 45%); border-top: 0; border-radius: 0 0 10px 10px; background: color-mix(in oklab, var(--st-warn), var(--bg-secondary) 84%); color: var(--text-primary); font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } .erp-maint-banner i { color: var(--st-warn); } .erp-maint-banner.hidden { display: none; } /* ── Impersonation banner ── */ .impersonation-banner { display: flex; align-items: center; gap: 8px; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 6px; padding: 5px 10px; font-size: 12px; color: #f59e0b; } .impersonation-banner i { font-size: 13px; } .impersonation-banner strong { color: var(--text-primary); } /* ── Impersonate widget ── */ .impersonate-widget { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .impersonate-widget select { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; padding: 3px 6px; max-width: 200px; } /* ── Bottoni small ── */ .btn-sm { padding: 6px 10px !important; font-size: 11px !important; } .btn-warning { background: var(--st-warn-bg); border: 1px solid var(--st-warn-bd); color: var(--st-warn); border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; transition: background 0.12s; } .btn-warning:hover { background: color-mix(in oklab, var(--st-warn), transparent 78%); } /* ── Paginazione ── */ .pagination-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 10px 4px; font-size: 13px; color: var(--text-secondary); } .pagination-bar .pagination-info, .pagination-bar .page-info { font-size: 12px; flex: 0 0 100%; text-align: center; } .pagination-bar .pagination-btns { display: flex; gap: 4px; align-items: center; justify-content: center; } .page-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--grad-raised); color: var(--text-primary); font-size: 12px; cursor: pointer; } .page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .page-btn:disabled { opacity: 0.35; cursor: default; } .page-btn.active { background: var(--brand-strong); color: #fff; border-color: var(--brand); } /* ── Label stato sincronizzazione sorgenti ── */ .sync-labels { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sync-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .sync-label.safee { background: rgba(0, 168, 132, 0.15); color: var(--brand); border-color: rgba(0, 168, 132, 0.35); } .sync-label.crm { background: rgba(59, 130, 246, 0.14); color: var(--src-crm-ink); border-color: rgba(59, 130, 246, 0.32); } .sync-label.missing { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } .sync-label.serena { background: rgba(14, 165, 233, 0.14); color: var(--src-safee-ink); border-color: rgba(14, 165, 233, 0.32); } /* Stato azienda (coerente tra elenco e dettaglio) */ .company-status-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; } .company-status-pill.active { background: rgba(34, 197, 94, 0.16); color: var(--st-ok); border-color: rgba(34, 197, 94, 0.34); } .company-status-pill.inactive { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* Elenco aziende: tabella master (larghezze colonna stabili) */ .company-table.aziende-master-table { table-layout: fixed; } .company-table.aziende-master-table .aziende-th-actions, .company-table.aziende-master-table .aziende-td-actions { width: 42px; min-width: 42px; max-width: 42px; padding: 10px 1px 10px 0; text-align: center; vertical-align: middle; } .company-table.aziende-master-table .aziende-btn-detail { padding: 6px 8px; min-width: 0; } .company-table.aziende-master-table .aziende-th-city, .company-table.aziende-master-table .aziende-td-city { width: 190px; min-width: 190px; max-width: 190px; vertical-align: middle; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; font-size: 12px; } .company-table.aziende-master-table .aziende-th-sources, .company-table.aziende-master-table .aziende-td-sources { width: 150px; min-width: 150px; max-width: 150px; vertical-align: middle; padding-left: 6px; padding-right: 4px; overflow: hidden; } .company-table.aziende-master-table .aziende-th-sync, .company-table.aziende-master-table .aziende-td-sync { width: 92px; min-width: 92px; max-width: 92px; vertical-align: middle; padding-left: 4px; padding-right: 4px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .company-table.aziende-master-table .aziende-th-sync.sortable-th { padding-right: 14px; } .company-table.aziende-master-table .aziende-td-sync { color: var(--text-secondary); } .company-table.aziende-master-table .aziende-th-state, .company-table.aziende-master-table .aziende-td-state { width: 66px; min-width: 66px; max-width: 66px; text-align: center; vertical-align: middle; padding: 10px 3px; } .company-table.aziende-master-table .aziende-td-state .company-status-pill { padding: 2px 5px; font-size: 10px; letter-spacing: 0; max-width: 100%; box-sizing: border-box; } .company-table.aziende-master-table .aziende-th-pec, .company-table.aziende-master-table .aziende-td-pec, .company-table.aziende-master-table .aziende-th-ref, .company-table.aziende-master-table .aziende-td-ref { width: 44px; min-width: 44px; max-width: 44px; text-align: center; vertical-align: middle; padding: 4px 2px; } .company-table.aziende-master-table .aziende-th-rif, .company-table.aziende-master-table .aziende-td-rif { width: 64px; min-width: 64px; max-width: 64px; text-align: center; vertical-align: middle; padding: 5px 4px; overflow: visible; } .company-table.aziende-master-table .aziende-th-rif { font-size: 11px; white-space: nowrap; } .company-table.aziende-master-table .sync-labels { flex-wrap: nowrap; gap: 3px; max-width: 100%; } .company-table.aziende-master-table .sync-label { flex-shrink: 0; font-size: 10px; padding: 2px 5px; } /* Elenco aziende: PEC e referenti ERP */ .company-pec-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid transparent; font-size: 13px; line-height: 1; box-sizing: border-box; } .company-pec-badge.is-on { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.38); color: var(--st-ok); } .company-pec-badge.is-off { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); opacity: 0.55; } .company-referent-card { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 3px 4px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-tertiary); box-sizing: border-box; max-width: 100%; transition: border-color 0.15s ease, background 0.15s ease; } .company-referent-card--compact { min-width: 0; } .company-referent-card--compact .company-referent-channel-dot { width: 20px; height: 20px; } .company-referent-card--compact .company-referent-channel { font-size: 10px; } /* Rif. amministrativo — Serena (azzurro) */ .company-referent-card--serena.is-complete { border-color: rgba(14, 165, 233, 0.44); background: rgba(14, 165, 233, 0.14); } .company-referent-card--serena.is-partial { border-color: rgba(14, 165, 233, 0.36); background: rgba(14, 165, 233, 0.08); } .company-referent-card--serena.is-empty { border-style: dashed; border-color: rgba(14, 165, 233, 0.28); background: rgba(14, 165, 233, 0.05); opacity: 0.95; } .company-referent-card--serena .company-referent-channel-dot.is-on { background: transparent; border-color: rgba(14, 165, 233, 0.38); } .company-referent-card--serena .company-referent-channel-dot.is-on .company-referent-channel:not(.fa-whatsapp) { color: #0ea5e9; } body.light-theme .company-referent-card--serena .company-referent-channel-dot.is-on .company-referent-channel:not(.fa-whatsapp) { color: #0284c7; } .company-referent-card--serena .company-referent-channel-dot.is-off { background: #ffffff; border-color: rgba(14, 165, 233, 0.22); } /* Rif. formazione — Didattiko (violetto) */ .company-referent-card--didattiko.is-complete { border-color: color-mix(in oklab, var(--src-didattiko), transparent 52%); background: color-mix(in oklab, var(--src-didattiko), transparent 88%); } .company-referent-card--didattiko.is-partial { border-color: color-mix(in oklab, var(--src-didattiko), transparent 62%); background: color-mix(in oklab, var(--src-didattiko), transparent 93%); } .company-referent-card--didattiko.is-empty { border-style: dashed; border-color: color-mix(in oklab, var(--src-didattiko), transparent 72%); background: color-mix(in oklab, var(--src-didattiko), transparent 95%); opacity: 0.95; } .company-referent-card--didattiko .company-referent-channel-dot.is-on { background: transparent; border-color: color-mix(in oklab, var(--src-didattiko), transparent 62%); } .company-referent-card--didattiko .company-referent-channel-dot.is-on .company-referent-channel:not(.fa-whatsapp) { color: var(--src-didattiko); } body.light-theme .company-referent-card--didattiko .company-referent-channel-dot.is-on .company-referent-channel:not(.fa-whatsapp) { color: #6d28d9; } .company-referent-card--didattiko .company-referent-channel-dot.is-off { background: #ffffff; border-color: color-mix(in oklab, var(--src-didattiko), transparent 78%); } .company-referent-channel-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; box-sizing: border-box; } .company-referent-channel-dot.is-on { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); } .company-referent-channel-dot.is-off { background: var(--bg-secondary); border-color: var(--border-color); } .company-referent-channel { font-size: 11px; line-height: 1; } .company-referent-channel-dot.is-on .company-referent-channel.fa-whatsapp { color: #25d366; } .company-referent-channel-dot.is-off .company-referent-channel { color: var(--text-secondary); opacity: 0.45; } .company-referent-card .company-referent-channel-dot.is-off .company-referent-channel { color: #94a3b8; opacity: 1; } .company-referent-card.is-partial .company-referent-channel-dot.is-off .company-referent-channel { color: #d97706; opacity: 1; } .company-table.aziende-master-table .company-completeness-td { width: 274px; min-width: 274px; max-width: 274px; vertical-align: middle; padding: 4px 2px 4px 2px; overflow: hidden; } /* Elenco aziende: completezza dati minimi (verde / giallo) */ .company-completeness-td { vertical-align: middle; } .company-completeness { display: grid; /* Cinque colonne della stessa larghezza (minima comune) */ grid-template-columns: repeat(5, 50px); column-gap: 5px; align-items: stretch; width: fit-content; max-width: 100%; box-sizing: border-box; } /* Chip con icona + testo (label non associata a input: solo presentazione) */ label.company-completeness-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; width: 100%; min-width: 0; padding: 3px 1px 4px; border-radius: 7px; border: 1px solid transparent; cursor: default; min-height: 0; box-sizing: border-box; font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; transition: background 0.15s ease, border-color 0.15s ease; } label.company-completeness-chip i { font-size: 14px; line-height: 1; flex-shrink: 0; opacity: 0.95; } label.company-completeness-chip.ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.32); color: var(--st-ok); } label.company-completeness-chip.warn { background: rgba(202, 138, 4, 0.11); border-color: rgba(202, 138, 4, 0.38); color: var(--st-warn); } .company-completeness-chip-text { display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Sort headers ── */ .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } .sortable-th:hover { color: var(--brand); } .sort-icon { font-size: 10px; margin-left: 4px; opacity: 0.4; } .sortable-th.sort-asc .sort-icon, .sortable-th.sort-desc .sort-icon { opacity: 1; color: var(--brand); } /* ── Detail card ── */ .detail-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; margin-bottom: 20px; } .detail-card-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .detail-field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; } .detail-field .detail-value { font-size: 14px; color: var(--text-primary); font-weight: 500; } /* ── Action bar dettaglio ── */ .detail-action-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; } .detail-action-bar .spacer { flex: 1; } /* ── Sezione record collegati ── */ .related-section { margin-top: 24px; } .related-section-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); border-top: 1px solid var(--border-color); padding-top: 20px; } /* ── Utility ── */ .hidden { display: none !important; } /* ════════════════════════════════════════════════════ SCHEDA AZIENDA — layout sorgenti Safè / CRM ════════════════════════════════════════════════════ */ /* Stato caricamento iniziale */ .az-loading-state { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } /* ── Header azienda ── */ .az-header { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .az-header-main { display: flex; align-items: center; gap: 16px; /* Senza min-width:0 un blocco flex non puo' restringersi sotto la larghezza del suo contenuto: con un nome azienda lungo cresceva fino a 1322px e mandava a capo tutto il blocco azioni. Ora il nome va a capo dentro la sua colonna e le azioni restano a destra. */ flex: 1 1 320px; min-width: 0; } .az-header-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(0, 168, 132, 0.12); border: 1px solid rgba(0, 168, 132, 0.25); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--brand); flex-shrink: 0; } .az-header-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .az-company-name { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.25; min-width: 0; overflow-wrap: break-word; } .az-header-title-row .az-header-status-slot { display: flex; align-items: center; flex-shrink: 0; } .az-header-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .az-sep { opacity: 0.4; } .az-header-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; } .az-sync-badges { display: flex; gap: 6px; flex-wrap: wrap; } /* ── Layout due card ── */ .az-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; } @media (max-width: 900px) { .az-source-grid { grid-template-columns: 1fr; } } /* ── Card sorgente ── */ .az-source-card { background: var(--grad-surface); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; } .az-source-card--safee { border-top: 3px solid rgba(0, 168, 132, 0.6); } /* Dentro una scheda la provenienza l'ha gia' dichiarata la scheda stessa, con la sua striscia colorata in alto: ripeterla sulla card sottostante raddoppia lo stesso segnale a due centimetri di distanza. Le due card in cima alla pagina, che non stanno in nessuna scheda, la mantengono: li' la striscia e' l'unico modo per sapere da dove arriva il dato. */ .az-tab-panel .az-source-card { border-top: 1px solid var(--border-color); } .az-source-card--crm { border-top: 3px solid rgba(59, 130, 246, 0.6); } .az-source-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--border-color); } .az-source-label { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px; } .az-source-label--safee { color: var(--brand); } .az-source-label--crm { color: #2563eb; } body.light-theme .az-source-label--crm { color: #1d4ed8; } .az-live-status { display: flex; align-items: center; font-size: 12px; } .az-id-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); } .az-live-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .az-live-pill--ok { background: rgba(0, 168, 132, 0.12); color: var(--brand); } .az-live-pill--err { background: rgba(239, 68, 68, 0.12); color: var(--st-danger); } .az-live-pill--off { background: var(--bg-tertiary); color: var(--text-secondary); } .az-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-left: 4px; vertical-align: middle; animation: az-pulse 2s infinite; } .az-live-dot--crm { background: #2563eb; } @keyframes az-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Sezioni interne alla card ── */ .az-source-section { padding: 14px 18px; border-bottom: 1px solid var(--border-color); } .az-source-section:last-child { border-bottom: none; } .az-source-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .az-count-badge { background: var(--bg-tertiary); color: var(--text-secondary); font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-color); } /* Dettaglio azienda: pulsante Accesso Cliente evidenziato se almeno un accesso è attivo */ .az-header-access-btn.az-header-access-btn--active { background: linear-gradient(180deg, #1a5ec4 0%, #1565d8 100%); color: #fff; border-color: #0f4ea8; } .az-header-access-btn.az-header-access-btn--active:hover { filter: brightness(1.06); color: #fff; } .az-header-access-btn.az-header-access-btn--active .az-count-badge { background: rgba(255, 255, 255, 0.22); color: #fff; border-color: rgba(255, 255, 255, 0.35); } /* ── Field list ── */ .az-field-list { display: flex; flex-direction: column; gap: 8px; } .az-field { display: flex; align-items: baseline; gap: 8px; font-size: 13px; } .az-field-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); min-width: 90px; flex-shrink: 0; } .az-field-value { color: var(--text-primary); font-weight: 500; word-break: break-word; } .az-sync-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .az-field-value--mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; color: var(--text-secondary); } /* ── Contatti ── */ .az-contact-list { display: flex; flex-direction: column; gap: 10px; } .az-contact-item { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; } .az-contact-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; } .az-contact-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .az-contact-type { font-size: 11px; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; } .az-contact-source { margin-left: auto; font-size: 11px; padding: 2px 6px; border-radius: 999px; font-weight: 600; } .az-contact-source.safee { background: rgba(0,168,132,0.12); color: var(--brand); } .az-contact-source.crm { background: rgba(59,130,246,0.12); color: #2563eb; } .az-contact-row { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin-top: 3px; } .az-contact-row i { width: 13px; text-align: center; opacity: 0.7; } .az-contact-row a { color: inherit; text-decoration: none; } .az-contact-row a:hover { text-decoration: underline; } .az-contact-notif-on { color: var(--brand); } /* ── Adempimenti — tabella e filtro ── */ .az-source-section-title-actions { margin-left: auto; } .az-filter-select { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 12px; padding: 3px 8px; cursor: pointer; outline: none; } .az-inline-loading { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; padding: 6px 0; } .az-registry-verify-intro { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.45; } .az-registry-verify-table td, .az-registry-verify-table th { vertical-align: top; } .az-registry-verify-status { text-align: center; font-size: 15px; } .az-registry-verify-status--ok { color: var(--success, #16a34a); } .az-registry-verify-status--ko { color: var(--danger, #dc2626); } .az-registry-verify-row--ko td:not(.az-registry-verify-status) { background: color-mix(in srgb, var(--danger, #dc2626) 6%, transparent); } /* Sintesi DVR: loader evidente durante analisi n8n in background */ .az-dvr-analysis-loading { min-height: 120px; width: 100%; box-sizing: border-box; justify-content: center; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 24px 16px; margin: 8px 0 0; border-radius: 10px; border: 1px dashed rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.06); color: var(--text-primary); font-size: 14px; font-weight: 600; line-height: 1.4; } .az-dvr-analysis-loading .fa-spinner { font-size: 28px; color: rgba(217, 119, 6, 0.95); } .az-dvr-analysis-loading span { max-width: 320px; } .az-inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .az-inline-status { display: inline-flex; align-items: center; } .az-task-counters { display: flex; gap: 6px; flex-wrap: wrap; margin-left: 4px; } .az-task-counter { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; } .az-task-counter--expired { background: rgba(239,68,68,0.12); color: var(--st-danger); } .az-task-counter--expiring { background: rgba(234,179,8,0.12); color: var(--st-warn); } .az-task-counter--ok { background: rgba(0,168,132,0.12); color: var(--brand); } .az-task-table { font-size: 13px; } .az-task-table td { vertical-align: top; padding: 8px 10px; } .az-task-code { font-size: 11px; font-family: "SFMono-Regular", Consolas, monospace; color: var(--text-secondary); background: var(--bg-tertiary); border-radius: 3px; padding: 1px 4px; } .az-task-opstat { font-size: 11px; color: var(--text-secondary); margin-top: 3px; } .az-col-date { white-space: nowrap; font-size: 12px; color: var(--text-secondary); } .az-date-overdue { color: #dc2626 !important; font-weight: 600; } .az-row-expired td { background: rgba(239,68,68,0.04); } .az-row-expiring td { background: rgba(234,179,8,0.04); } /* ── Dettaglio azienda: tab (Safè verde, CRM blu, ERP ambra) ── */ .az-detail-tabs-shell { margin-top: 20px; } .az-office-tabs-block { margin-top: 12px; padding: 0 2px; } .az-office-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-left: 3px solid rgba(0, 168, 132, 0.85); border-radius: 8px; } .az-office-picker-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0; white-space: nowrap; } .az-office-picker-label .fa-building { color: rgba(0, 168, 132, 0.95); } .az-office-select { flex: 1 1 220px; min-width: 180px; max-width: 480px; font-size: 13px; font-weight: 500; padding: 6px 10px; } .az-account-report-office-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; padding: 8px 10px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-left: 3px solid rgba(0, 168, 132, 0.85); border-radius: 8px; } .az-arp-office-label { font-size: 14px; font-weight: 600; color: rgba(0, 168, 132, 0.95); } .az-arp-office-banner { margin: 0 0 16px; padding: 14px 16px; background: var(--panel-bg); /* il riempimento dice lo stato, non la sorgente: la provenienza resta nel bordo sinistro verde Safe'. */ border: 1px solid rgba(0, 168, 132, 0.35); border-left: 4px solid rgba(0, 168, 132, 0.9); border-radius: 10px; } .az-arp-office-banner-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 168, 132, 0.95); } .az-arp-office-banner-name { margin: 8px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--text-primary); } .az-arp-office-banner-name i { margin-right: 8px; color: rgba(0, 168, 132, 0.95); } .az-arp-office-banner-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary); } .az-office-child-tabs-nav { margin-top: 0; margin-bottom: 4px; padding-left: 4px; border-left: 3px solid rgba(0, 168, 132, 0.35); } .az-detail-tabs-shell.az-multi-office-mode .az-tabs-nav > .az-tab-btn-mono-only { display: none !important; } .az-detail-tabs-shell.az-multi-office-mode .az-tabs-nav > .az-tab-multi-only { display: inline-flex !important; } .az-offices-panel-shell { margin-top: 4px; } .az-office-content-host { margin-top: 8px; } .az-office-content-host > .az-office-inner-panel { margin-top: 0; } .az-office-content-host > .az-office-inner-panel[hidden] { display: none !important; } .az-office-content-host > .az-office-inner-panel:not([hidden]) { display: block; } .az-tabs-nav { display: flex; flex-wrap: wrap; /* 10 schede: spazi e padding compatti perché a 1440px con sidebar stiano su una riga. */ gap: 4px; align-items: flex-end; /* Niente rientro: le schede devono allinearsi al bordo del pannello, altrimenti il pannello sporge di 2px e si vede uno scalino. */ padding: 0; } .az-tab-btn { appearance: none; border: 1px solid var(--border-color); border-radius: 10px 10px 0 0; padding: 9px 9px; cursor: pointer; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; background: var(--grad-raised); color: var(--text-secondary); margin-bottom: -1px; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; max-width: 100%; } .az-tab-btn-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; } @media (min-width: 900px) { .az-tab-btn-text { max-width: 200px; } } .az-tab-btn--safee { border-top: 3px solid rgba(0, 168, 132, 0.9); } .az-tab-btn--crm { border-top: 3px solid rgba(59, 130, 246, 0.95); } .az-tab-btn--erp { border-top: 3px solid rgba(217, 119, 6, 0.95); } .az-tab-btn[aria-selected="true"] { background: var(--bg-secondary); color: var(--text-primary); /* Il bordo inferiore prende il colore del pannello e ne copre la linea: con "transparent" il bordo del pannello passava sotto la scheda attiva. */ border-bottom-color: var(--bg-secondary); z-index: 2; position: relative; } .az-tab-btn:not([aria-selected="true"]):hover { background: var(--bg-hover); color: var(--text-primary); } .az-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--bg-primary); color: var(--text-secondary); } .az-tab-btn--safee[aria-selected="true"] .az-tab-count { background: rgba(0, 168, 132, 0.22); color: var(--text-primary); } .az-tab-btn--crm[aria-selected="true"] .az-tab-count { background: rgba(59, 130, 246, 0.22); color: var(--text-primary); } .az-tab-btn--erp[aria-selected="true"] .az-tab-count { background: rgba(217, 119, 6, 0.22); color: var(--text-primary); } .az-tabs-panels { border: 1px solid var(--border-color); border-radius: 0 12px 12px 12px; background: var(--bg-secondary); overflow: hidden; } .az-tab-panel .az-wide-section { margin-top: 0; } /* Titolo duplicato nel tab: nascondi label+count nel box (resta toolbar filtri ecc.) */ .az-tab-panel .az-source-card-header .az-source-label { display: none; } .az-tab-panel .az-source-card-header { justify-content: flex-end; min-height: 0; } .az-tab-panel .az-source-card-header:not(:has(.az-source-section-title-actions)) { display: none; } body.light-theme .az-tab-btn[aria-selected="true"] { box-shadow: none; } .az-source-card--erp { border-top: 3px solid rgba(217, 119, 6, 0.75); } .az-source-label--erp { color: var(--text-primary); } .az-tab-panel .az-company-msg-header { justify-content: space-between; gap: 12px; } .az-company-msg-active-title { margin: 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--text-primary); flex: 0 1 auto; min-width: 0; } .az-company-msg-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 0 0 auto; margin-left: auto; } .az-company-msg-nav-btn { display: inline-flex; align-items: center; gap: 6px; } .az-company-msg-nav-btn.active { border-color: rgba(217, 119, 6, 0.65); background: rgba(217, 119, 6, 0.12); color: var(--text-primary); } .az-company-msg-blocks { padding: 4px 0 12px; } .az-company-msg-block-empty { margin: 0 14px 8px; padding: 12px 14px; font-size: 13px; } .az-company-msg-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px; } .az-doc-file-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ── Compact upload bar ── */ .az-doc-upload-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-tertiary); margin-bottom: 14px; flex-wrap: wrap; } .az-doc-upload-bar-name { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 0; } .az-doc-upload-bar-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; } .az-doc-upload-name-input { flex: 1 1 auto; min-width: 0; } .az-doc-pick-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .az-doc-pick-btn.has-file { border-color: var(--brand); color: var(--brand); } .az-doc-submit-btn { flex: 0 0 auto; } .az-doc-upload-bar-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary); } .az-doc-upload-bar-switch-text { font-size: 12px; color: var(--text-secondary); font-weight: 600; } .az-doc-actions { display: inline-flex; gap: 6px; align-items: center; } .az-doc-chip { font-size: 11px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); border-radius: 999px; padding: 2px 8px; } /* ── Document list cards ── */ .az-doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .az-doc-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); transition: border-color 0.15s, background 0.15s; } .az-doc-row:hover { border-color: color-mix(in srgb, var(--brand) 50%, transparent); background: var(--bg-tertiary); } .az-doc-row-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .az-doc-icon--pdf { background: #fee2e2; color: #dc2626; } .az-doc-icon--word { background: #dbeafe; color: #2563eb; } .az-doc-icon--img { background: #fef3c7; color: #d97706; } .az-doc-icon--generic { background: var(--bg-tertiary); color: var(--text-secondary); } .az-doc-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .az-doc-row-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .az-doc-dvr-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--st-ok); background: rgba(20, 184, 166, 0.15); border: 1px solid rgba(20, 184, 166, 0.35); border-radius: 999px; padding: 2px 8px; } .az-doc-dvr-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-size: 12px; } .az-doc-dvr-state-icon.is-ok { color: var(--st-ok); background: rgba(16, 185, 129, 0.16); } .az-doc-dvr-state-icon.is-empty { color: var(--text-secondary); background: rgba(107, 114, 128, 0.12); } .az-doc-row-meta { font-size: 12px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; } .az-doc-row-meta-sep { opacity: 0.5; } .az-doc-row-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; } @media (max-width: 480px) { .az-doc-row { flex-wrap: wrap; gap: 10px; } .az-doc-row-actions { width: 100%; } .az-doc-upload-bar { flex-direction: column; align-items: stretch; gap: 8px; } .az-doc-pick-btn { max-width: none; } } .az-company-msg-item { border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; background: var(--bg-tertiary); cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; } .az-company-msg-item:hover { border-color: rgba(217, 119, 6, 0.45); background: var(--bg-hover); } .az-company-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 12px; } .az-company-msg-from { font-weight: 600; color: var(--text-primary); } .az-company-msg-time { color: var(--text-secondary); font-size: 11px; margin-left: auto; } .az-company-msg-preview { font-size: 13px; color: var(--text-primary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Ruoli da corsi (scheda azienda) ── */ .az-muted { color: var(--text-secondary); font-weight: normal; } .az-worker-roles-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; } .az-worker-roles-list { display: flex; flex-direction: column; gap: 14px; } .az-worker-roles-office-block { border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; } .az-worker-roles-office-block + .az-worker-roles-office-block { margin-top: 4px; } .az-worker-roles-office-header { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 12px 14px; background: rgba(0, 168, 132, 0.1); border-bottom: 1px solid rgba(0, 168, 132, 0.18); } .az-worker-roles-office-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .az-worker-roles-office-cards { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; } .az-worker-roles-office-empty, .az-worker-roles-office-error { margin: 0; padding: 12px 14px 14px; font-size: 13px; color: var(--text-secondary); } .az-worker-roles-office-block--error .az-worker-roles-office-header { background: rgba(220, 38, 38, 0.08); border-bottom-color: rgba(220, 38, 38, 0.2); } .az-worker-role-card { border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); border-radius: 8px; background: var(--bg-secondary); overflow: hidden; } .az-worker-role-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 10px 14px; font-weight: 600; font-size: 13px; color: var(--text-primary); background: rgba(0, 168, 132, 0.08); border-bottom: 1px solid rgba(0, 168, 132, 0.15); } .az-worker-role-card-title { flex: 1 1 auto; min-width: 0; } .az-worker-role-zip-btn { flex-shrink: 0; } .az-worker-role-holders { list-style: none; margin: 0; padding: 8px 14px 12px; } .az-worker-role-holder { margin: 0 0 10px; padding: 0; } .az-worker-role-holder:last-child { margin-bottom: 0; } .az-worker-role-holder-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .az-worker-role-holder-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .az-worker-role-attestati { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .az-worker-role-attestati .az-safee-doc-download-btn, .az-worker-role-attestati .az-safee-doc-slot-empty { flex-shrink: 0; } .az-worker-role-courses { list-style: none; margin: 4px 0 0 12px; padding: 0; font-size: 12px; color: var(--text-secondary); } .az-worker-role-courses li { margin: 2px 0; line-height: 1.4; } .az-worker-role-holders-table { width: 100%; border-collapse: collapse; font-size: 12px; } .az-worker-role-table-wrap { width: 100%; } .az-worker-role-holders-table thead th { font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 8px 14px; border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); text-align: left; } .az-worker-role-holders-table tbody td { padding: 10px 14px; vertical-align: top; border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.06)); } .az-worker-role-holders-table tbody tr:last-child td { border-bottom: none; } .az-worker-role-holders-table th.az-col-templates, .az-worker-role-holders-table td.az-col-templates-cell, .az-worker-role-holders-table th.az-col-attestati, .az-worker-role-holders-table td.az-col-attestati-cell { width: 56px; min-width: 56px; max-width: 120px; padding-left: 8px; padding-right: 8px; text-align: center; vertical-align: middle; } .az-worker-role-holders-table td.az-col-attestati-cell { max-width: 140px; } .az-worker-role-holders-table .az-worker-role-attestati { justify-content: center; } .az-worker-role-holders-table .az-worker-role-holder-name { font-weight: 600; font-size: 13px; } .az-worker-role-training-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; } .az-worker-role-training-badge--ok { color: var(--st-ok); background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); } .az-worker-role-training-badge--warn { color: var(--st-warn); background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.3); } .az-worker-role-holders-table .az-worker-role-courses { margin: 0; padding-left: 14px; } /* ── Lavoratori ── */ .az-wide-section { margin-top: 20px; } .az-detail-tabs-shell .az-wide-section { margin-top: 0; } .az-worker-table td { vertical-align: top; font-size: 12px; } .az-worker-main-row td { background: rgba(0, 168, 132, 0.05); border-top: 1px solid rgba(0, 168, 132, 0.25); } .az-worker-main-sep { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; } .az-worker-subrow td { background: var(--bg-secondary); } .az-worker-subrow td:first-child { font-weight: 600; color: var(--text-primary); } .az-sub-detail { color: var(--text-primary); } .az-worker-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .az-worker-moodle-icon { color: var(--src-didattiko); font-size: 13px; margin-left: 4px; vertical-align: baseline; } body.light-theme .az-worker-moodle-icon { color: #6d28d9; } .worker-safee-photo-badge { position: relative; display: inline-block; box-sizing: border-box; width: 22px; height: 22px; margin-left: 4px; border: 1px solid rgba(34, 197, 94, 0.35); border-radius: 50%; color: var(--st-ok); background: rgba(34, 197, 94, 0.16); vertical-align: middle; flex-shrink: 0; } .worker-safee-photo-badge i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; line-height: 1; display: block; width: 1em; height: 1em; text-align: center; } .worker-safee-photo-badge i::before { display: block; line-height: 1; } .lavoratori-safee-photo-badge, .az-worker-safee-photo-badge, .formazione-safee-photo-badge { margin-left: 4px; vertical-align: middle; } .az-worker-id { margin-top: 2px; font-size: 11px; color: var(--text-secondary); font-family: "SFMono-Regular", Consolas, monospace; } .az-worker-contact { font-size: 12px; color: var(--text-secondary); } .az-worker-contact i { width: 13px; text-align: center; opacity: 0.7; } .az-worker-contact a { color: inherit; text-decoration: none; } .az-worker-contact a:hover { text-decoration: underline; } /* Lavoratori scheda: un box per dipendente + sotto-tabelle visite / corsi */ .az-workers-list-wrap { overflow-x: auto; overflow-y: auto; max-height: min(72vh, 780px); } .az-workers-box-list .az-worker-box.is-collapsed .az-worker-box-head { border-bottom: none; } .az-workers-box-list .az-worker-box.is-collapsed .az-worker-box-body { display: none !important; } .az-workers-box-list .az-worker-box.is-expanded .az-worker-box-body { display: flex; flex-direction: column; gap: 16px; } .az-workers-box-list .az-worker-accordion-trigger { cursor: pointer; user-select: none; } .az-workers-box-list .az-worker-accordion-trigger:hover { background: rgba(0, 168, 132, 0.12); } .az-workers-box-list .az-worker-accordion-trigger:focus-visible { outline: 2px solid rgba(0, 168, 132, 0.55); outline-offset: -2px; } .az-workers-box-list .az-worker-accordion-chevron { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--text-secondary); } .az-workers-box-list .az-worker-accordion-chevron i { transition: transform 0.18s ease; } .az-workers-box-list .az-worker-box.is-expanded .az-worker-accordion-chevron i { transform: rotate(180deg); } .az-workers-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .az-workers-sync-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; } .az-workers-filter-input { min-width: 200px; max-width: 320px; flex: 1 1 200px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; } .az-workers-filter-input:focus { outline: none; border-color: rgba(0, 168, 132, 0.55); box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.15); } .az-workers-box-list { display: flex; flex-direction: column; gap: 14px; } .az-worker-box { border: 1px solid rgba(0, 168, 132, 0.28); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; } .az-worker-box-head { padding: 12px 14px; background: rgba(0, 168, 132, 0.08); border-bottom: 1px solid rgba(0, 168, 132, 0.2); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .az-worker-head-left { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; } .az-worker-head-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .az-worker-inline-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.45; } .az-worker-inline-meta strong { font-weight: 600; color: var(--text-primary); margin-right: 4px; } .az-worker-overall-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; } .az-worker-overall-badge--ok { color: var(--st-ok); background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); } .az-worker-overall-badge--warn { color: var(--st-warn); background: rgba(250, 204, 21, 0.2); border-color: rgba(250, 204, 21, 0.45); } .az-worker-overall-badge--bad { color: var(--st-danger); background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.35); } .az-worker-box-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 16px; } .az-worker-subtable-block { min-width: 0; } .az-worker-subtable-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .az-worker-subtable-title i { opacity: 0.85; font-size: 12px; } .az-worker-inner-table { width: 100%; margin: 0; font-size: 12px; table-layout: fixed; min-width: 900px; } /* Stesse larghezze tra tabella visite e tabella corsi (stesso box, colonne allineate). */ .az-worker-inner-table col.az-worker-col-templates { width: 44px; } .az-worker-inner-table col.az-worker-col-detail { width: 32%; } .az-worker-inner-table col.az-worker-col-date { width: 14%; } .az-worker-inner-table col.az-worker-col-status { width: 14%; } .az-worker-inner-table col.az-worker-col-periodicity { width: 16%; } .az-worker-inner-table col.az-worker-col-opstatus { width: 19%; } .az-worker-inner-table col.az-worker-col-doc { width: 58px; } .az-worker-inner-table th.az-col-templates { width: 44px; min-width: 44px; max-width: 88px; padding: 8px 4px; border-bottom: 1px solid var(--border-color, #e5e7eb); } .az-worker-inner-table td.az-col-templates-cell { width: 44px; min-width: 44px; max-width: 88px; padding: 6px 4px; vertical-align: middle; white-space: nowrap; } .az-template-doc-actions { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px; min-height: 34px; } .az-template-doc-actions--empty { display: block; min-height: 0; } .az-worker-inner-table thead th { font-size: 11px; color: var(--text-secondary); font-weight: 600; padding: 8px 10px; } .az-worker-inner-table tbody td { vertical-align: middle; padding: 8px 10px; } .az-worker-inner-table .az-sub-detail { word-wrap: break-word; overflow-wrap: break-word; } .az-safee-doc-download-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.45); background: linear-gradient(180deg, #10b981 0%, #059669 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(5, 150, 105, 0.26); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-safee-doc-download-btn i { font-size: 16px; } .az-safee-doc-download-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(5, 150, 105, 0.35); filter: brightness(1.04); } .az-safee-doc-download-btn:focus-visible { outline: 2px solid rgba(16, 185, 129, 0.65); outline-offset: 2px; } .az-doc-actions { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .az-verbale-art36-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-verbale-art36-btn i { font-size: 15px; } .az-verbale-art36-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-verbale-art36-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-verbale-art36-btn--inline { flex-shrink: 0; } .az-incarico-rspp-btn--inline { flex-shrink: 0; } .az-incarico-rls-btn--inline { flex-shrink: 0; } .az-incarico-preposto-btn--inline { flex-shrink: 0; } .az-incarico-ps-btn--inline, .az-incarico-gea-btn--inline { flex-shrink: 0; } .az-incarico-gea-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-incarico-gea-btn i { font-size: 15px; } .az-incarico-gea-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-incarico-gea-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-incarico-ps-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-incarico-ps-btn i { font-size: 15px; } .az-incarico-ps-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-incarico-ps-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-incarico-preposto-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-incarico-preposto-btn i { font-size: 15px; } .az-incarico-preposto-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-incarico-preposto-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-incarico-rls-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-incarico-rls-btn i { font-size: 15px; } .az-incarico-rls-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-incarico-rls-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-incarico-rspp-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(30, 77, 123, 0.45); background: linear-gradient(180deg, #3b6ea8 0%, #1e4d7b 100%); color: #ffffff; cursor: pointer; box-shadow: 0 3px 10px rgba(30, 77, 123, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .az-incarico-rspp-btn i { font-size: 15px; } .az-incarico-rspp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30, 77, 123, 0.32); filter: brightness(1.05); } .az-incarico-rspp-btn:focus-visible { outline: 2px solid rgba(30, 77, 123, 0.65); outline-offset: 2px; } .az-worker-doc-actions { display: inline-flex; align-items: center; gap: 6px; } .az-detail-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .az-detail-cell--verbale { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; } .az-detail-cell--verbale .az-detail-text { flex: 1 1 auto; min-width: 120px; } /* Pulsante icona organigramma in intestazione azienda */ .az-header-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 6px 10px; line-height: 1; } .az-header-icon-btn i { margin: 0; font-size: 14px; } /* Modali documenti tecnici (verbale art. 36, incarichi, organigramma) */ .verbale-info36-generate-overlay, .incarico-rspp-generate-overlay, .incarico-ps-generate-overlay, .incarico-gea-generate-overlay, .incarico-preposto-generate-overlay, .incarico-rls-generate-overlay, .organigramma-generate-overlay { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: stretch; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); box-sizing: border-box; } .verbale-info36-generate-overlay.hidden, .incarico-rspp-generate-overlay.hidden, .incarico-ps-generate-overlay.hidden, .incarico-gea-generate-overlay.hidden, .incarico-preposto-generate-overlay.hidden, .incarico-rls-generate-overlay.hidden, .organigramma-generate-overlay.hidden { display: none; } .verbale-info36-generate-panel, .incarico-rspp-generate-panel, .incarico-rls-generate-panel, .incarico-ps-generate-panel, .incarico-gea-generate-panel, .incarico-preposto-generate-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(980px, 100%); height: min(92vh, 900px); max-height: min(92vh, 900px); background: var(--bg-primary, #fff); border: 1px solid var(--border-color, #d1d5db); border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28); overflow: hidden; } /* Flex: footer sempre visibile (grid 5 righe spingeva i pulsanti fuori viewport) */ .organigramma-generate-panel { display: flex; flex-direction: column; width: min(980px, 100%); height: min(92vh, 900px); max-height: min(92vh, 900px); background: var(--bg-primary, #fff); border: 1px solid var(--border-color, #d1d5db); border-radius: 12px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28); overflow: hidden; } .organigramma-generate-head, .organigramma-office-toolbar, .organigramma-generate-form, .organigramma-generate-actions { flex-shrink: 0; } .verbale-info36-generate-head, .incarico-rspp-generate-head, .incarico-rls-generate-head, .incarico-ps-generate-head, .incarico-gea-generate-head, .incarico-preposto-generate-head, .organigramma-generate-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-color, #d1d5db); background: var(--bg-secondary, #f8fafc); } .verbale-info36-generate-close-x, .incarico-rspp-generate-close-x, .incarico-rls-generate-close-x, .incarico-ps-generate-close-x, .incarico-gea-generate-close-x, .incarico-preposto-generate-close-x, .organigramma-generate-close-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary, #64748b); cursor: pointer; } .verbale-info36-generate-close-x:hover, .incarico-rspp-generate-close-x:hover, .incarico-rls-generate-close-x:hover, .incarico-ps-generate-close-x:hover, .incarico-gea-generate-close-x:hover, .incarico-preposto-generate-close-x:hover, .organigramma-generate-close-x:hover { background: rgba(15, 23, 42, 0.06); } .organigramma-office-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid var(--border-color, #d1d5db); background: rgba(0, 168, 132, 0.06); flex-shrink: 0; } .organigramma-office-toolbar.hidden { display: none; } .organigramma-field--office { flex: 0 0 auto; width: min(100%, 260px); min-width: 180px; margin: 0; } .organigramma-field--office select, #organigrammaOfficeSelect { width: 100%; height: 32px; min-height: 32px; max-height: 32px; padding: 4px 8px; line-height: 1.25; box-sizing: border-box; } .organigramma-office-hint { flex: 1 1 180px; margin: 0; font-size: 12px; color: var(--text-secondary, #64748b); line-height: 1.35; } .organigramma-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid var(--border-color, #d1d5db); align-items: end; flex-shrink: 0; min-height: 0; } .organigramma-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .organigramma-field span { font-size: 11px; font-weight: 600; color: var(--text-secondary, #64748b); } .organigramma-field input[type="email"], .organigramma-field input[type="date"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; font-size: 13px; background: var(--bg-primary, #fff); color: var(--text-primary, #111); } .organigramma-field input[type="date"] { height: 36px; min-height: 36px; max-height: 36px; } .organigramma-hint { margin: 0; font-size: 11px; color: var(--text-secondary, #64748b); line-height: 1.45; grid-column: 1 / -1; } .organigramma-status { margin: 0; font-size: 12px; line-height: 1.4; grid-column: 1 / -1; padding: 6px 8px; border-radius: 8px; } .organigramma-status--error { color: var(--st-danger); background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.35); } .organigramma-status--ok { color: var(--st-ok); background: rgba(22, 163, 74, 0.12); border: 1px solid rgba(22, 163, 74, 0.45); } .organigramma-preview-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 14px; background: #e8ecef; } .organigramma-preview-wrap.hidden { display: none; } .organigramma-preview-frame { display: block; width: 100%; min-height: 200px; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; background: #fff; } .organigramma-generate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-color, #d1d5db); background: var(--bg-secondary, #f8fafc); } .verbale-info36-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px 4px; } .incarico-rspp-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px 4px; } .incarico-rls-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px 4px; } .incarico-ps-generate-form, .incarico-gea-generate-form, .incarico-preposto-generate-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px 4px; } .verbale-info36-field, .incarico-rspp-field, .incarico-rls-field, .incarico-ps-field, .incarico-gea-field, .incarico-preposto-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .verbale-info36-field span, .incarico-rspp-field span, .incarico-rls-field span, .incarico-ps-field span, .incarico-gea-field span, .incarico-preposto-field span { font-weight: 600; color: var(--text-secondary, #64748b); } .verbale-info36-field input, .incarico-rspp-field input, .incarico-rls-field input, .incarico-ps-field input, .incarico-gea-field input, .incarico-preposto-field input { width: 100%; padding: 7px 10px; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; background: #ffffff; color: #111827; box-sizing: border-box; } .verbale-info36-field input::placeholder, .incarico-rspp-field input::placeholder, .incarico-rls-field input::placeholder, .incarico-ps-field input::placeholder, .incarico-gea-field input::placeholder, .incarico-preposto-field input::placeholder { color: #9ca3af; } .verbale-info36-hint, .incarico-rspp-hint, .incarico-rls-hint, .incarico-ps-hint, .incarico-gea-hint, .incarico-preposto-hint { grid-column: 1 / -1; margin: 0; font-size: 11px; color: var(--text-secondary, #64748b); line-height: 1.35; } .verbale-info36-status, .incarico-rspp-status, .incarico-rls-status, .incarico-ps-status, .incarico-gea-status, .incarico-preposto-status { grid-column: 1 / -1; margin: 0; font-size: 12px; padding: 6px 8px; border-radius: 8px; } .verbale-info36-status--error, .incarico-rspp-status--error, .incarico-rls-status--error, .incarico-ps-status--error, .incarico-gea-status--error, .incarico-preposto-status--error { background: rgba(220, 38, 38, 0.1); color: var(--st-danger); } .verbale-info36-status--ok, .incarico-rspp-status--ok, .incarico-rls-status--ok, .incarico-ps-status--ok, .incarico-gea-status--ok, .incarico-preposto-status--ok { background: rgba(22, 163, 74, 0.12); color: var(--st-ok); } .verbale-info36-preview-wrap, .incarico-rspp-preview-wrap, .incarico-rls-preview-wrap, .incarico-ps-preview-wrap, .incarico-gea-preview-wrap, .incarico-preposto-preview-wrap { min-height: 0; overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--border-color, #d1d5db); background: #f8fafc; } .verbale-info36-preview-wrap.hidden, .incarico-rspp-preview-wrap.hidden, .incarico-rls-preview-wrap.hidden, .incarico-ps-preview-wrap.hidden, .incarico-gea-preview-wrap.hidden, .incarico-preposto-preview-wrap.hidden { display: none; } .verbale-info36-preview-frame, .incarico-rspp-preview-frame, .incarico-rls-preview-frame, .incarico-ps-preview-frame, .incarico-gea-preview-frame, .incarico-preposto-preview-frame { display: block; width: 100%; height: auto; min-height: 0; border: 0; background: #fff; } .verbale-info36-generate-actions, .incarico-rspp-generate-actions, .incarico-rls-generate-actions, .incarico-ps-generate-actions, .incarico-gea-generate-actions, .incarico-preposto-generate-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid var(--border-color, #d1d5db); background: var(--bg-primary, #fff); } @media (max-width: 520px) { .verbale-info36-generate-actions, .incarico-rspp-generate-actions, .incarico-rls-generate-actions { flex-wrap: wrap; } } @media (max-width: 640px) { .verbale-info36-generate-form, .incarico-rspp-generate-form, .incarico-rls-generate-form, .incarico-ps-generate-form, .incarico-gea-generate-form, .incarico-preposto-generate-form, .organigramma-generate-form { grid-template-columns: 1fr; } } /* Slot documento senza file su Safè: stessa sagoma del pulsante download, aspetto "vuoto" (non interattivo) */ .az-safee-doc-slot-empty { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(107, 114, 128, 0.38); background: linear-gradient(180deg, rgba(249, 250, 251, 0.98) 0%, rgba(229, 231, 235, 0.95) 100%); color: rgba(75, 85, 99, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.07); cursor: default; vertical-align: middle; user-select: none; } .az-safee-doc-slot-empty i { font-size: 16px; opacity: 0.88; } /* Badge compatta documenti Safè (presenti/totali) + modale elenco — verde Safè */ .az-safee-docs-badge-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; max-width: 100%; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; flex-shrink: 0; line-height: 1; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease; } .az-safee-docs-badge-btn--compact { min-height: 28px; padding: 3px 7px; font-size: 11px; gap: 4px; } .az-safee-docs-badge-btn--compact .az-safee-docs-badge-icon { font-size: 12px; } .az-safee-docs-badge-icon { font-size: 13px; opacity: 0.92; } .az-safee-docs-badge-count { letter-spacing: 0.02em; white-space: nowrap; } /* Tutti presenti — verde Safè (come pulsante download singolo) */ .az-safee-docs-badge-btn--full { border: 1px solid rgba(16, 185, 129, 0.45); background: linear-gradient(180deg, #10b981 0%, #059669 100%); color: #ffffff; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22); } .az-safee-docs-badge-btn--full:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.32); filter: brightness(1.04); } .az-safee-docs-badge-btn--full:focus-visible { outline: 2px solid rgba(16, 185, 129, 0.65); outline-offset: 2px; } /* Parziale — bordo giallo/ambra */ .az-safee-docs-badge-btn--partial { border: 2px solid rgba(245, 166, 35, 0.85); background: linear-gradient(180deg, rgba(236, 253, 245, 0.98) 0%, rgba(209, 250, 229, 0.92) 100%); color: #047857; box-shadow: 0 1px 4px rgba(245, 166, 35, 0.18); } .az-safee-docs-badge-btn--partial:hover { background: linear-gradient(180deg, rgba(220, 252, 231, 0.98) 0%, rgba(187, 247, 208, 0.95) 100%); border-color: rgba(217, 119, 6, 0.9); } .az-safee-docs-badge-btn--partial:focus-visible { outline: 2px solid rgba(245, 166, 35, 0.55); outline-offset: 2px; } /* 0/N — spento ma cliccabile per aprire elenco slot */ .az-safee-docs-badge-btn--empty { border: 1px solid rgba(107, 114, 128, 0.38); background: linear-gradient(180deg, rgba(249, 250, 251, 0.98) 0%, rgba(229, 231, 235, 0.95) 100%); color: rgba(75, 85, 99, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 2px rgba(15, 23, 42, 0.06); cursor: pointer; } .az-safee-docs-badge-btn--empty:hover { background: linear-gradient(180deg, rgba(243, 244, 246, 0.98) 0%, rgba(209, 213, 219, 0.92) 100%); color: rgba(55, 65, 81, 0.95); } .az-safee-docs-badge-btn--empty:focus-visible { outline: 2px solid rgba(107, 114, 128, 0.45); outline-offset: 2px; } /* Nessuno slot in ERP — pill spenta (non cliccabile), allineata al badge multi-doc */ .az-safee-docs-badge-btn--none { border: 1px solid rgba(107, 114, 128, 0.32); background: linear-gradient(180deg, rgba(249, 250, 251, 0.92) 0%, rgba(229, 231, 235, 0.88) 100%); color: rgba(107, 114, 128, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); cursor: default; pointer-events: none; opacity: 0.88; } .az-safee-docs-badge-btn--none .az-safee-docs-badge-count { opacity: 0.75; } .erp-safee-docs-modal-card { --erp-safee-doc-panel-bg: #f4f6f8; --erp-safee-doc-panel-border: #d4dbe3; max-width: 520px; width: min(520px, calc(100vw - 24px)); } [data-theme="dark"] .erp-safee-docs-modal-card { --erp-safee-doc-panel-bg: var(--bg-tertiary); --erp-safee-doc-panel-border: var(--border-color); } .erp-safee-docs-modal-head h3 { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; } .erp-safee-docs-head-text { font-weight: 400; } .erp-safee-docs-head-icon { color: #059669; font-size: 1.05em; } .erp-safee-docs-body { padding-top: 2px; } .erp-safee-docs-summary { margin: 0 0 12px; font-size: 13px; } .erp-safee-docs-list { display: flex; flex-direction: column; gap: 10px; } .erp-safee-doc-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--erp-safee-doc-panel-border); border-radius: 10px; background: var(--erp-safee-doc-panel-bg); } .erp-safee-doc-group--partial, .erp-safee-doc-group--missing { border-color: rgba(245, 166, 35, 0.45); } .erp-safee-doc-group--present { border-color: rgba(16, 185, 129, 0.28); } .erp-safee-doc-row-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; } .erp-safee-doc-row-text { min-width: 0; } .erp-safee-doc-label { font-weight: 600; font-size: 13px; line-height: 1.35; word-break: break-word; } .erp-safee-doc-status { margin-top: 2px; font-size: 12px; } .erp-safee-doc-slot-empty { flex-shrink: 0; } [data-theme="dark"] .az-safee-docs-badge-btn--full { border-color: rgba(52, 211, 153, 0.45); background: linear-gradient(180deg, #059669 0%, #047857 100%); color: #ecfdf5; } [data-theme="dark"] .az-safee-docs-badge-btn--partial { border-color: rgba(251, 191, 36, 0.75); background: rgba(6, 78, 59, 0.35); color: #a7f3d0; } [data-theme="dark"] .az-safee-docs-badge-btn--partial:hover { background: rgba(6, 95, 70, 0.45); } [data-theme="dark"] .az-safee-docs-badge-btn--empty { border-color: rgba(148, 163, 184, 0.35); background: linear-gradient(180deg, rgba(51, 65, 85, 0.55) 0%, rgba(30, 41, 59, 0.72) 100%); color: rgba(203, 213, 225, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .az-safee-docs-badge-btn--empty:hover { background: linear-gradient(180deg, rgba(71, 85, 105, 0.55) 0%, rgba(51, 65, 85, 0.78) 100%); color: #e2e8f0; } [data-theme="dark"] .az-safee-docs-badge-btn--none { border-color: rgba(148, 163, 184, 0.28); background: linear-gradient(180deg, rgba(51, 65, 85, 0.42) 0%, rgba(30, 41, 59, 0.58) 100%); color: rgba(148, 163, 184, 0.78); opacity: 0.9; } [data-theme="dark"] .az-safee-doc-slot-empty { border-color: rgba(148, 163, 184, 0.35); background: linear-gradient(180deg, rgba(51, 65, 85, 0.55) 0%, rgba(30, 41, 59, 0.72) 100%); color: rgba(203, 213, 225, 0.82); } [data-theme="dark"] .erp-safee-docs-head-icon { color: #34d399; } .az-worker-inner-table th.az-col-doc, .az-worker-inner-table td.az-col-doc-cell { text-align: right; white-space: nowrap; width: 58px; min-width: 58px; max-width: 58px; overflow: hidden; padding: 6px 4px; } .az-worker-inner-table .az-doc-actions { justify-content: flex-end; max-width: 100%; } .az-worker-inner-empty td { .az-workers-toolbar { width: 100%; flex-direction: column; align-items: stretch; } .az-workers-filter-input { max-width: none; width: 100%; } .az-workers-toolbar .btn-new-hires { width: 100%; justify-content: center; } } .az-worker-inner-table .az-col-date { white-space: normal; } .az-worker-inner-table td:last-child { text-align: right; white-space: nowrap; } .az-worker-inner-empty td { color: var(--text-secondary); font-style: italic; } .az-worker-status-label { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.35; border: 1px solid transparent; white-space: nowrap; } /* Speculare a .state-pill: qui l'inchiostro era tarato sul tema scuro e in tema chiaro scendeva a 2,6–4,0:1 su testo da 11px. Stessi token, stessa correzione. */ .az-worker-status-label--expired { background: var(--st-danger-bg); color: var(--st-danger); border-color: var(--st-danger-bd); } .az-worker-status-label--expiring { background: var(--st-warn-bg); color: var(--st-warn); border-color: var(--st-warn-bd); } /* Regolare e risolto: stesso verde (esito positivo / chiuso). */ .az-worker-status-label--regular, .az-worker-status-label--resolved { background: var(--st-ok-bg); color: var(--st-ok); border-color: var(--st-ok-bd); } .az-worker-status-label--unknown { background: var(--st-neutral-bg); color: var(--st-neutral); border-color: var(--st-neutral-bd); } /* Badge colori aggiuntivi */ .badge-red { background: var(--st-danger-bg); color: var(--st-danger); } .badge-yellow { background: var(--st-warn-bg); color: var(--st-warn); } /* ── Pill di stato canonica ────────────────────────────────────────────── Componente unico per il codice nuovo. Le classi storiche qui sopra restano valide come alias, cosi nessun file JavaScript va toccato. */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 600; line-height: 1.35; border: 1px solid transparent; white-space: nowrap; } .pill--ok { background: var(--st-ok-bg); color: var(--st-ok); border-color: var(--st-ok-bd); } .pill--warn { background: var(--st-warn-bg); color: var(--st-warn); border-color: var(--st-warn-bd); } .pill--danger { background: var(--st-danger-bg); color: var(--st-danger); border-color: var(--st-danger-bd); } .pill--info { background: var(--st-info-bg); color: var(--st-info); border-color: var(--st-info-bd); } .pill--accent { background: var(--st-accent-bg); color: var(--st-accent); border-color: var(--st-accent-bd); } .pill--neutral { background: var(--st-neutral-bg); color: var(--st-neutral); border-color: var(--st-neutral-bd); } button.pill { cursor: pointer; font-family: inherit; transition: box-shadow var(--dur); } button.pill[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; } button.pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ── Etichetta di provenienza del dato ───────────────────────────────── */ [data-src="crm"] { --src: var(--src-crm); --src-ink: var(--src-crm-ink); } [data-src="safee"] { --src: var(--src-safee); --src-ink: var(--src-safee-ink); } [data-src="didattiko"] { --src: var(--src-didattiko); --src-ink: var(--src-didattiko-ink); } [data-src="erp"] { --src: var(--src-erp); --src-ink: var(--src-erp-ink); } .src-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--src-ink); white-space: nowrap; } .src-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--src); flex-shrink: 0; } .az-op-status { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; line-height: 1.3; white-space: nowrap; } .az-op-status--ok { background: rgba(0, 168, 132, 0.14); color: var(--brand); border-color: rgba(0, 168, 132, 0.28); } .az-op-status--critical { background: rgba(239, 68, 68, 0.12); color: var(--st-danger); border-color: rgba(239, 68, 68, 0.28); } .az-op-status--pending { background: rgba(234, 179, 8, 0.14); color: var(--st-warn); border-color: rgba(234, 179, 8, 0.28); } .az-op-status--progress { background: rgba(59, 130, 246, 0.12); color: var(--st-info); border-color: rgba(59, 130, 246, 0.28); } .az-op-status--neutral { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* Scala stati operativi consolidata (0..8): blu -> verde, con eccezione 0 rosso chiaro */ .az-op-status.az-op-step-0 { color: #6b7280; background: #fee4e2; border-color: #fecaca; } .az-op-status.az-op-step-1 { color: #0b4a6f; background: #e0f2fe; border-color: #bae6fd; } .az-op-status.az-op-step-2 { color: #0c4a6e; background: #bae6fd; border-color: #7dd3fc; } .az-op-status.az-op-step-3 { color: #1e3a8a; background: #bfdbfe; border-color: #93c5fd; } .az-op-status.az-op-step-4 { color: #1d4ed8; background: #93c5fd; border-color: #60a5fa; } .az-op-status.az-op-step-5 { color: #ffffff; background: #3b82f6; border-color: #2563eb; } .az-op-status.az-op-step-6 { color: #ffffff; background: #14b8a6; border-color: #0d9488; } .az-op-status.az-op-step-7 { color: #ffffff; background: #22c55e; border-color: #16a34a; } .az-op-status.az-op-step-8 { color: #ffffff; background: #15803d; border-color: #166534; } .az-probe { margin-bottom: 8px; font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-color); color: var(--text-secondary); background: var(--bg-secondary); } .az-probe-ok { color: var(--brand); border-color: rgba(0, 168, 132, 0.30); background: rgba(0, 168, 132, 0.08); } .az-probe-empty { color: var(--text-secondary); } .az-probe-error { color: #dc2626; border-color: rgba(239, 68, 68, 0.30); background: rgba(239, 68, 68, 0.08); } /* ── Badge match CRM ── */ .crm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .crm-badge.alta { background: rgba(0,168,132,0.14); color: var(--brand); border-color: rgba(0,168,132,0.30); } .crm-badge.media { background: rgba(234,179,8,0.13); color: var(--st-warn); border-color: rgba(234,179,8,0.30); } .crm-badge.bassa { background: rgba(239,68,68,0.12); color: var(--st-danger); border-color: rgba(239,68,68,0.28); } .crm-badge.none { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } /* ── Candidati CRM (ricerca corrispondenze) ── */ .crm-candidate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); margin-bottom: 6px; } .crm-candidate-row:last-child { margin-bottom: 0; } .crm-candidate-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .crm-candidate-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm-candidate-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .crm-candidate-vat { font-size: 12px; color: var(--text-secondary); } /* ── Placeholder CRM non collegata ── */ .az-source-empty { padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; text-align: center; } .az-source-empty i { font-size: 22px; opacity: 0.5; } /* Dettaglio preventivo CRM (modale) */ .az-detail-dl { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 8px 16px; margin: 0; font-size: 13px; } .az-detail-dl dt { margin: 0; color: var(--text-secondary); font-weight: 500; } .az-detail-dl dd { margin: 0; color: var(--text-primary); word-break: break-word; } /* Preventivi CRM: etichette stato */ .az-quote-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .az-quote-badge i { font-size: 11px; opacity: 0.95; } .az-quote-open { background: rgba(59, 130, 246, 0.18); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.35); } .az-quote-confirmed { background: rgba(34, 197, 94, 0.2); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.4); } .az-quote-lost { background: rgba(239, 68, 68, 0.16); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.35); } .az-quote-neutral { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); } /* Stadio / fase listino (testo libero) */ .az-label-pill { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; line-height: 1.3; background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-color); max-width: 100%; } .az-label-pill--stage { word-break: break-word; } .az-label-pill--stage-negotiation { background: #e0f2fe; color: #0b4a6f; border-color: #bae6fd; } .az-label-pill--stage-won { background: rgba(34, 197, 94, 0.16); color: var(--st-ok); border-color: rgba(34, 197, 94, 0.34); } .az-label-pill--stage-lost { background: rgba(239, 68, 68, 0.14); color: var(--st-danger); border-color: rgba(239, 68, 68, 0.32); } .az-label-pill--stage-draft { background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); } .az-label-pill-meta { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; } /* ── Responsive: mobile sidebar collassata ── */ @media (max-width: 768px) { .dashboard-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; } .app-sidebar { display: flex; position: fixed; top: 0; left: 0; width: min(84vw, 320px); height: 100vh; z-index: 1201; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 8px 0 22px rgba(0, 0, 0, 0.35); padding-top: 54px; } body.sidebar-open .app-sidebar { transform: translateX(0); } .mobile-sidebar-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } body.sidebar-open .mobile-sidebar-backdrop { opacity: 1; pointer-events: auto; } .mobile-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); cursor: pointer; margin-right: 10px; } .mobile-sidebar-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dashboard-head-left { display: flex; align-items: center; } .app-footer-fixed { left: 0; } .footer-right { max-width: 100%; } .app-footer-fixed.app-footer--feedback-reserved .footer-right { padding-right: 52px; } /* Header mobile: riga 1 = menu + logo + icone; riga 2 = ricerca */ .dashboard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head-left head-actions" "head-center head-center"; align-items: center; gap: 8px 4px; flex-direction: row; } .dashboard-head-left { grid-area: head-left; min-width: 0; } .dashboard-head-center { grid-area: head-center; width: 100%; max-width: none; min-width: 0; margin: 0; } .dashboard-head-tools { flex-direction: row; align-items: center; width: 100%; } .company-search { flex: 1 1 auto; max-width: none; width: 100%; } .dashboard-head-actions { grid-area: head-actions; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; max-width: 100%; align-self: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dashboard-head-actions::-webkit-scrollbar { display: none; } /* Tema: solo nel menu panino (spostato via JS) */ .dashboard-head-actions > .theme-toggle { display: none !important; } #personalCalendarQuickLink { order: 1; } #messagingQuickLinks { order: 2; gap: 2px; } .user-info-widget { order: 3; flex-shrink: 0; gap: 4px; } .user-meta { display: none; } .notif-badge-wrap-icon { width: 32px; height: 32px; } .notif-badge { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; } .notif-bell { font-size: 15px; } .mobile-sidebar-toggle { margin-right: 8px; flex-shrink: 0; } .dashboard-logo { height: 30px; } .app-sidebar { flex-direction: column; } .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .sidebar-theme-footer { margin-top: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 18px; border-top: 1px solid var(--border-color); } .sidebar-theme-footer-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .sidebar-theme-footer .theme-toggle { display: flex !important; align-items: center; gap: 8px; margin-right: 0; flex-shrink: 0; } .sidebar-theme-footer .theme-switch { display: block; flex-shrink: 0; } .sidebar-theme-footer .theme-icon { display: inline-block; font-size: 13px; } } @media (min-width: 769px) { .mobile-sidebar-toggle, .mobile-sidebar-close, .mobile-sidebar-backdrop, .sidebar-theme-footer { display: none !important; } } /* ── Dashboard (cruscotto generale per ufficio) ─────────────────────────────── */ /* Cruscotto dashboard: larghezza piena (padding laterale sul contenitore) */ .dash-page { max-width: none; width: 100%; margin: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 28px; box-sizing: border-box; } @media (min-width: 1200px) { .dash-page { padding-left: 28px; padding-right: 28px; } } /* Riga superiore: filtri + task + promemoria (KPI stesso formato) */ .dash-cruscotto-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) minmax(180px, 220px); gap: 14px; align-items: stretch; margin-top: 12px; margin-bottom: 28px; } .dash-filter-card { min-width: 0; height: 100%; } .dash-filter-card .period-filter-bar { height: 100%; min-height: 52px; margin: 0; align-items: center; } .dash-kpi-card--messages-cruscotto { min-height: 52px; align-self: stretch; } .dash-kpi-card--messages-cruscotto .dash-kpi-card-messages-hit { flex: 1; justify-content: space-between; align-items: center; min-height: 100%; box-sizing: border-box; gap: 12px; flex-direction: row; } .dash-kpi-label--inline { margin: 0; } .dash-kpi-value--inline { margin-left: auto; text-align: right; white-space: nowrap; } .dash-app-meta-main { margin-top: 20px; } .dash-whats-new { margin: 0 0 14px; padding: 14px 16px; border: 2px dashed color-mix(in srgb, var(--brand) 42%, var(--border-color)); border-radius: 14px; background: var(--bg-secondary); box-shadow: 0 2px 10px color-mix(in srgb, var(--text-primary) 7%, transparent); } .dash-whats-new.hidden { display: none; } .dash-whats-new-title { margin: 0 0 10px; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; color: var(--text-primary); } .dash-whats-new-title .dash-whats-new-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font-size: 14px; } .dash-whats-new-list { display: flex; flex-direction: column; gap: 0; } .dash-whats-new-list--multi .dash-whats-new-item:not(:last-child) { border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin-bottom: 6px; } .dash-whats-new-item { position: relative; min-width: 0; } .dash-whats-new-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--text-primary); } .dash-whats-new-date { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .dash-whats-new-date::before { content: "\f133"; font-family: "Font Awesome 6 Free"; font-weight: 400; opacity: 0.7; } .dash-whats-new-date::after { content: " - "; font-weight: 400; color: var(--text-secondary); text-transform: none; letter-spacing: normal; } .dash-whats-new-cat { flex-shrink: 0; font-weight: 700; color: var(--brand); white-space: nowrap; } .dash-whats-new-desc { flex: 1; min-width: 0; word-break: break-word; color: var(--text-primary); } .dash-whats-new-delete { flex-shrink: 0; align-self: center; padding: 2px 8px; line-height: 1; } @media (max-width: 768px) { .dash-whats-new-row { flex-wrap: wrap; align-items: flex-start; row-gap: 6px; } .dash-whats-new-cat { white-space: normal; flex: 1 1 auto; min-width: 0; } .dash-whats-new-desc { flex: 0 0 100%; width: 100%; order: 3; } .dash-whats-new-delete { order: 2; margin-left: auto; align-self: flex-start; } } .dash-page-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; line-height: 1.25; } .dash-page-subtitle { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); max-width: 760px; } .dash-office { margin-bottom: 36px; } .dash-office-head { margin-bottom: 16px; } .dash-office-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; } .dash-office-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 168, 132, 0.1); color: var(--brand); font-size: 14px; } .dash-office-desc { margin: 0; font-size: 13px; color: var(--text-secondary); } .dash-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; } .dash-kpi-grid--2 { grid-template-columns: repeat(2, 1fr); } .dash-kpi-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .dash-kpi-grid--4 { grid-template-columns: repeat(2, 1fr); } .dash-cruscotto-row { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(200px, 260px); } } @media (max-width: 720px) { .dash-kpi-grid, .dash-kpi-grid--4, .dash-kpi-grid--2 { grid-template-columns: 1fr; } .dash-cruscotto-row { grid-template-columns: 1fr; } .dash-kpi-card--messages-cruscotto .dash-kpi-card-messages-hit { min-height: 88px; } .dash-kpi-card--promemoria-cruscotto .dash-kpi-card-messages-hit { min-height: 88px; } } .dash-kpi-card { background: var(--grad-surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 88px; } /* Un riquadro che e' anche un collegamento resta un riquadro: senza questo reset il browser lo dipinge blu e sottolineato. Prima stava solo nella variante --didattiko, quindi ogni nuovo riquadro cliccabile ripartiva sbagliato; qui vale per tutti. */ a.dash-kpi-card { text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } /* Solo il sollevamento: il colore del bordo appartiene alla variante (--didattiko ha il suo viola) e questa regola, piu' specifica, lo coprirebbe. */ a.dash-kpi-card:hover { transform: translateY(-1px); } .dash-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .dash-kpi-value { font-size: 28px; font-weight: 800; color: var(--brand); line-height: 1.1; } .dash-kpi-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.35; } .dash-kpi-hint em { font-style: normal; font-weight: 600; color: var(--text-secondary); opacity: 0.9; } .dash-kpi-source { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; color: var(--text-secondary); line-height: 1.35; opacity: 0.9; } /* KPI card: bordo per provenienza dati (CRM = azzurro, Safè = verde) */ .dash-kpi-card--crm { border-color: rgba(14, 165, 233, 0.55); box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.12); } body.light-theme .dash-kpi-card--crm { border-color: rgba(2, 132, 199, 0.45); box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.1); } .dash-kpi-card--safee { border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12); } body.light-theme .dash-kpi-card--safee { border-color: rgba(22, 163, 74, 0.45); box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.1); } .dash-kpi-card--didattiko { border-color: color-mix(in oklab, var(--src-didattiko), transparent 45%); box-shadow: 0 0 0 1px color-mix(in oklab, var(--src-didattiko), transparent 88%); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .dash-kpi-card--didattiko:hover { border-color: color-mix(in oklab, var(--src-didattiko), transparent 15%); transform: translateY(-1px); } body.light-theme .dash-kpi-card--didattiko { border-color: rgba(109, 40, 217, 0.45); box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.1); } .dash-kpi-grid--didattiko { margin-bottom: 12px; } /* KPI: link verso Messaggi (task aperti) — card = div, hit area interna */ .dash-kpi-card--messages { padding: 0; overflow: hidden; border-color: rgba(168, 85, 247, 0.45); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.1); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .dash-kpi-card-messages-hit { text-decoration: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 4px 14px; min-height: 52px; box-sizing: border-box; outline: none; } .dash-kpi-card--messages:hover { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15); transform: translateY(-1px); } .dash-kpi-card-messages-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } /* Override finale: compatta realmente la riga filtri+task */ .dash-kpi-card.dash-kpi-card--messages-cruscotto { min-height: 52px; } .dash-kpi-card.dash-kpi-card--messages-cruscotto .dash-kpi-card-messages-hit { min-height: 52px; padding-top: 4px; padding-bottom: 4px; } /* KPI promemoria: stessa riga dei task (label sx / numero / meta dx) */ .dash-kpi-card.dash-kpi-card--promemoria-cruscotto { min-height: 52px; align-self: stretch; } .dash-kpi-card--promemoria-cruscotto .dash-kpi-card-messages-hit { /* eredita row + space-between del box task */ flex: 1; min-height: 100%; box-sizing: border-box; } .dash-pr-kpi-label { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; } .dash-kpi-card--promemoria-cruscotto .dash-kpi-value { color: var(--brand); line-height: 1; } .dash-pr-kpi-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; min-width: 0; } .dash-kpi-card--promemoria-cruscotto .dash-kpi-hint { margin: 0; white-space: nowrap; } body.light-theme .dash-kpi-card--messages { border-color: rgba(147, 51, 234, 0.4); box-shadow: 0 0 0 1px rgba(147, 51, 234, 0.08); } .dash-kpi-spinner { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--brand); border-radius: 50%; animation: dash-kpi-spin 0.75s linear infinite; } @keyframes dash-kpi-spin { to { transform: rotate(360deg); } } .dash-kpi-crm-inner { min-height: 100px; } .dash-kpi-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 88px; padding: 8px 0; font-size: 12px; color: var(--text-secondary); } .dash-kpi-main--open { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .dash-kpi-count-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .dash-kpi-count-line #dashAccountOpenCount { font-size: 15px; font-weight: 700; color: var(--text-primary); } .dash-kpi-count-lbl { font-size: 12px; font-weight: 500; color: var(--text-secondary); } .dash-kpi-total-open { font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: #2563eb; line-height: 1.05; letter-spacing: -0.02em; } body.light-theme .dash-kpi-total-open { color: #1d4ed8; } .dash-kpi-total-closed { font-size: clamp(26px, 4vw, 34px); font-weight: 800; color: #22c55e; line-height: 1.05; letter-spacing: -0.02em; } body.light-theme .dash-kpi-total-closed { color: #16a34a; } .dash-kpi-sub--open { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .dash-kpi-foot { margin: 10px 0 0; font-size: 11px; color: var(--text-secondary); line-height: 1.4; } .dash-kpi-foot em { font-style: normal; font-weight: 700; color: var(--text-primary); } .dash-chart-panel--crm { border-style: solid; border-color: rgba(14, 165, 233, 0.45); } body.light-theme .dash-chart-panel--crm { border-color: rgba(2, 132, 199, 0.4); } .dash-charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .dash-charts-row--single { grid-template-columns: 1fr; } @media (max-width: 900px) { .dash-charts-row { grid-template-columns: 1fr; } } .dash-chart-panel { background: var(--bg-tertiary); border: 1px dashed var(--border-color); border-radius: 10px; overflow: hidden; min-height: 140px; } .dash-chart-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } .dash-chart-title { font-size: 13px; font-weight: 600; color: var(--text-primary); } .dash-badge-todo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary); white-space: nowrap; } .dash-chart-panel-body { padding: 20px 16px; min-height: 100px; } .dash-chart-canvas-wrap { position: relative; min-height: 220px; } .dash-chart-canvas-wrap canvas { width: 100% !important; height: 220px !important; } .dash-source-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.5rem; border-radius: 6px; } .dash-source-pill--crm { background: rgba(59, 130, 246, 0.2); color: var(--src-crm-ink); } body.light-theme .dash-source-pill--crm { background: rgba(37, 99, 235, 0.12); color: var(--src-crm-ink); } .dash-placeholder-text { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.45; } /* ── Badge notifiche messaggi ──────────────────────────────────────────────── */ .messaging-quick-links { display: inline-flex; align-items: center; gap: 6px; } .notif-badge-wrap { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; flex-shrink: 0; color: var(--text-secondary); position: relative; } .notif-badge-wrap-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: var(--bg-tertiary); flex-shrink: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; } body.light-theme .notif-badge-wrap-icon { background: rgba(0, 0, 0, 0.06); } .notif-badge-wrap:hover .notif-badge-wrap-icon { border-color: var(--border-color); background: var(--bg-hover); color: var(--text-primary); } body.light-theme .notif-badge-wrap:hover .notif-badge-wrap-icon { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.18); } .notif-badge-wrap--active .notif-badge-wrap-icon { border-color: var(--border-color); background: var(--bg-hover); color: var(--text-primary); } body.light-theme .notif-badge-wrap--active .notif-badge-wrap-icon { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.22); } .notif-bell { font-size: 16px; } .notif-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand-strong); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; text-align: center; pointer-events: none; flex-shrink: 0; position: absolute; top: -3px; right: -2px; z-index: 2; box-shadow: 0 0 0 2px var(--bg-primary); } body.light-theme .notif-badge { background: var(--brand-strong); color: #fff; } .notif-badge.hidden { display: none; } /* ── Pulsante abilita push notification ──────────────────────────────────── */ .push-enable-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 15px; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .push-enable-btn:hover { background: var(--bg-hover); color: var(--accent); } .push-enable-btn:disabled { opacity: 0.5; cursor: default; } /* ── Messaggi: layout ─────────────────────────────────────────────────────── */ .msg-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .msg-filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--grad-raised); color: var(--text-secondary); cursor: pointer; font-size: 13px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .msg-filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .msg-filter-btn.active { background: var(--brand-strong); color: #fff; border-color: var(--brand); } /* Conteggio non letti: etichetta grigia sempre ben visibile */ .msg-type-unread-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; padding: 2px 8px; margin-left: 6px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; vertical-align: middle; flex-shrink: 0; background: #3d4d56; color: #f0f4f8; border: 1px solid #55656e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* Su filtro non selezionato (sfondo scuro) */ .msg-filter-btn:not(.active) .msg-type-unread-count { background: #4a5a63; color: #f7fafc; border-color: #5f717b; } /* Su filtro attivo (brand verde): chip grigio chiaro + testo scuro */ .msg-filter-btn.active .msg-type-unread-count { background: #e8ecef; color: #1a1d21; border-color: #cfd6db; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } body.light-theme .msg-type-unread-count { background: #d1d8de; color: #111827; border-color: #b0bac3; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } body.light-theme .msg-filter-btn:not(.active) .msg-type-unread-count { background: #c5cdd6; color: #111827; border-color: #a8b4bf; } body.light-theme .msg-filter-btn.active .msg-type-unread-count { background: #eef1f4; color: #0f172a; border-color: #d1d9e0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .msg-type-unread-count.hidden { display: none !important; } .msg-filter-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; margin-left: 8px; } .msg-loader, .msg-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; color: var(--text-secondary); font-size: 15px; } .msg-empty i { font-size: 32px; opacity: 0.4; } /* ── Messaggi: card lista ─────────────────────────────────────────────────── */ .msg-list { display: flex; flex-direction: column; gap: 8px; } .msg-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: 10px; padding: 14px 16px; padding-right: 42px; position: relative; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .msg-card:hover { background: var(--bg-hover); border-color: var(--brand); } .msg-delete-btn { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8; transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s; } .msg-card:hover .msg-delete-btn, .msg-delete-btn:focus-visible { opacity: 1; } .msg-delete-btn.is-busy { opacity: 0.7; cursor: wait; pointer-events: none; } .msg-delete-btn:hover { color: #fff; border-color: #dc2626; background: #dc2626; } .msg-card--unread { border-left: 5px solid var(--brand); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35), 0 8px 20px rgba(0, 0, 0, 0.08); } .msg-card--unread .msg-unread-dot { position: absolute; top: 12px; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--bg-secondary, #fff); } .msg-card--task.msg-card--unread, .msg-card--uniform.msg-card--unread, .msg-card.msg-card--unread { position: relative; padding-left: 28px; } .msg-card-body--unread { font-weight: 700; color: var(--text-primary); } .msg-reply-row--unread, .task-footer.msg-reply-row--unread { font-weight: 600; color: var(--text-primary); } .msg-reply-new-chip { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; background: rgba(16, 185, 129, 0.15); color: var(--brand); vertical-align: middle; } .msg-card--level-normal { border-left-color: #2e7d32; } .msg-card--level-urgent { border-left-color: #ef6c00; } .msg-card--level-critical { border-left-color: #c62828; } .msg-card--received { width: calc(100% - 50px); margin-left: 0; margin-right: 50px; min-width: 0; } .msg-card--sent { width: calc(100% - 50px); margin-left: 50px; margin-right: 0; min-width: 0; border-right: 3px solid rgba(29, 78, 216, 0.35); } .msg-card--task { padding: 0; border-left-width: 0; overflow: hidden; } .task-top { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .task-top--normal { background: #f6f7f8; color: #1f2937; } .task-top--urgent { background: #facc15; color: #78350f; } .task-top--critical { background: #b91c1c; color: #ffffff; } .task-top--closed { background: #d9f5df; color: #14532d; } .task-top-urgency { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .task-top-urgency--sent { flex-direction: row; } .task-top-urgency--received { flex-direction: row; } .task-top-urgency i { font-size: 12px; } .task-top-actions { display: inline-flex; align-items: center; gap: 6px; } .task-closed-check { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #4d7c0f; color: #3f6212; background: rgba(255, 255, 255, 0.65); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .task-age-label { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid currentColor; padding: 1px 8px; font-size: 11px; font-weight: 700; line-height: 1.3; } .task-age-label--open { color: #1f2937; background: rgba(255, 255, 255, 0.45); } .task-age-label--closed { color: #166534; background: rgba(22, 163, 74, 0.12); } .task-top-urgency-text--normal { color: #4b5563; } .task-top-urgency-text--urgent { color: #78350f; } .task-top-urgency-text--critical { color: #ffffff; } .task-top--closed .task-top-urgency-text--urgent { color: #78350f; } .task-top--closed .task-top-urgency-text--critical { color: #b91c1c; } .task-delete-btn { position: static; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; opacity: 1; } .task-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; font-size: 13px; color: var(--text-primary); } .task-row--sender { align-items: center; } .task-row--recipients { align-items: flex-start; padding-top: 8px; } .task-row-label { color: var(--text-secondary); font-weight: 600; flex-shrink: 0; } .task-sender-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 400; } .task-time { margin-left: auto; font-size: 11px; color: var(--text-secondary); white-space: nowrap; } .task-recipients { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .task-company-row { margin: 10px 16px 0; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); padding: 8px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; } .task-company-name { font-weight: 600; color: var(--text-primary); } .task-body { padding: 10px 16px 0; font-size: 14px; color: var(--text-primary); line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .task-separator { margin: 10px 16px 0; border-top: 1px solid #d1d5db; } .task-footer { padding: 10px 16px 12px; font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; } .msg-card--uniform { width: 100%; margin-left: 0; margin-right: 0; } .msg-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px 0; font-size: 13px; color: var(--text-primary); } .msg-row--recipients, .msg-row--client { align-items: flex-start; padding-top: 8px; } .msg-row-label { color: var(--text-secondary); font-weight: 600; flex-shrink: 0; } .msg-direction-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .msg-direction-icon--sent { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; } .msg-direction-icon--received { background: #e6fffa; color: #0f766e; border: 1px solid #99f6e4; } .msg-sender-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; border: 1px solid #d1d5db; background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 400; } .msg-recipients { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .msg-company-row { margin: 10px 14px 0; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-tertiary); padding: 8px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; } .msg-company-name { font-weight: 600; color: var(--text-primary); } .msg-separator { margin: 10px 14px 0; border-top: 1px solid #d1d5db; } .msg-reply-row { padding: 10px 14px 12px; font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; } .msg-urgency-inline { display: inline-flex; align-items: center; } .msg-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } .msg-from { font-size: 13px; font-weight: 600; color: var(--text-primary); } .msg-company-tag { font-size: 12px; color: var(--text-secondary); background: var(--bg-tertiary); border-radius: 4px; padding: 2px 6px; } .msg-time { font-size: 11px; color: var(--text-secondary); } .msg-card-body { font-size: 14px; color: var(--text-primary); margin-bottom: 10px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .msg-card-footer { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .msg-recipients-label { font-weight: 500; } .msg-reply-count { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } /* ── Pager ────────────────────────────────────────────────────────────────── */ .msg-pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; } .msg-pager-label { font-size: 13px; color: var(--text-secondary); min-width: 80px; text-align: center; } /* ── Badge urgenza ────────────────────────────────────────────────────────── */ .urgency-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; border: 1px solid transparent; } .urgency-badge--gray { background: #5f6368; color: #ffffff; border-color: #767b82; } .urgency-badge--orange { background: #ef6c00; color: #ffffff; border-color: #ff8a1f; } .urgency-badge--red { background: #a32323; color: #ffffff; border-color: #cf3131; } /* ── Badge msg ────────────────────────────────────────────────────────────── */ .msg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; } .msg-badge--resolved { background: #1f6b31; color: #ffffff; } .msg-badge--message { background: #475569; color: #ffffff; } .msg-badge--open { background: #0f4ea8; color: #ffffff; } .msg-badge--task-open { background: #0f4ea8; color: #ffffff; border: 1px solid #2f6fc9; } .msg-badge--task-closed { background: #e5e7eb; color: #4b5563; border: 1px solid #d1d5db; } .msg-badge--client { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; } .msg-badge--client-sender { background: #1d4ed8; color: #ffffff; border: 1px solid #1e40af; } .msg-badge--new-hire { background: #0ea5e9; color: #ffffff; border: 1px solid #0284c7; } .msg-badge--feedback { background: rgba(220,53,69,0.14); color: var(--st-danger); border: 1px solid rgba(220,53,69,0.35); } .msg-card--new-hire { box-shadow: inset 3px 0 0 #0ea5e9; } .task-top--new-hire { background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%); color: #f0f9ff; border-bottom: 1px solid rgba(14, 165, 233, 0.45); } body.light-theme .task-top--new-hire { background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%); color: #075985; border-bottom: 1px solid #7dd3fc; } .task-top-type-text--new-hire { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .task-top-type-text--new-hire i { font-size: 12px; } .task-top--new-hire .task-age-label--open { color: #0c4a6e; background: rgba(255, 255, 255, 0.55); border-color: rgba(3, 105, 161, 0.35); } body.light-theme .task-top--new-hire .task-age-label--open { color: #075985; background: rgba(255, 255, 255, 0.72); } .task-top--new-hire.task-top--resolved { filter: saturate(0.92); } .task-top--new-hire .task-closed-check { border-color: #0369a1; color: #0c4a6e; background: rgba(255, 255, 255, 0.65); } body.light-theme .task-top--new-hire .task-closed-check { border-color: #0284c7; color: #075985; } .task-top--new-hire .task-age-label--closed { color: #0c4a6e; background: rgba(255, 255, 255, 0.55); border-color: rgba(3, 105, 161, 0.35); } body.light-theme .task-top--new-hire .task-age-label--closed { color: #075985; background: rgba(255, 255, 255, 0.72); border-color: #7dd3fc; } /* Modale nuovo assunto (task interni) */ .new-hire-modal .modal-content { display: flex; flex-direction: column; gap: 4px; background: var(--bg-primary); border-top: 1px solid var(--border-color); } .new-hire-modal-intro { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; line-height: 1.45; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } body:not(.light-theme) .new-hire-modal-intro { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .new-hire-modal .msg-input, .new-hire-modal .msg-textarea, .new-hire-modal select.msg-input { background: var(--bg-secondary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } body:not(.light-theme) .new-hire-modal .msg-input, body:not(.light-theme) .new-hire-modal .msg-textarea, body:not(.light-theme) .new-hire-modal select.msg-input { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); } .new-hire-modal .msg-company-search-line, .new-hire-modal .msg-company-selected-line, .new-hire-modal .msg-urgency-seg, .new-hire-modal .new-hire-place-search { background: var(--bg-secondary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } body:not(.light-theme) .new-hire-modal .msg-company-search-line, body:not(.light-theme) .new-hire-modal .msg-company-selected-line, body:not(.light-theme) .new-hire-modal .msg-urgency-seg, body:not(.light-theme) .new-hire-modal .new-hire-place-search { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); } .new-hire-modal .msg-company-input-wrap .msg-input { box-shadow: none; background: transparent; } .new-hire-section { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-color); } .new-hire-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 8px; } .new-hire-section-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; } .new-hire-section-title i { color: var(--brand); font-size: 14px; } .form-row-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 560px) { .form-row-2col { grid-template-columns: 1fr; } } .new-hire-fiscal-panel { margin-top: 10px; } .new-hire-fiscal-seg .msg-urgency-seg__opt { flex: 1 1 160px; } .new-hire-fiscal-seg__opt--manual input:checked + .msg-urgency-seg__face, .new-hire-fiscal-seg__opt--calc input:checked + .msg-urgency-seg__face { background: #0b7a61; border-color: #16a085; color: #ffffff; } body.light-theme .new-hire-fiscal-seg__opt--manual input:checked + .msg-urgency-seg__face, body.light-theme .new-hire-fiscal-seg__opt--calc input:checked + .msg-urgency-seg__face { background: rgba(0, 136, 104, 0.92); color: #fff; } .new-hire-cf-input { text-transform: uppercase; letter-spacing: 0.06em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; } .new-hire-place-search { margin-top: 0; } .new-hire-foreign-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-secondary, #f8fafc); } .new-hire-foreign-copy .form-label-hint { margin: 4px 0 0; font-size: 12px; color: var(--text-secondary, #64748b); line-height: 1.35; } .new-hire-birth-scope-seg { margin-top: 4px; } .new-hire-modal .msg-company-box + .form-row { margin-top: 12px; } .new-hire-field-hint { margin: 6px 0 0; font-size: 12px; color: var(--text-secondary, #64748b); line-height: 1.4; } .new-hire-field-hint--ok { color: #16a34a; } .new-hire-field-hint--warn { color: #b45309; } .new-hire-field-hint--err { color: #dc2626; } .new-hire-checklist { list-style: none; margin: 14px 0 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); display: flex; flex-direction: column; gap: 6px; } .new-hire-checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.35; color: var(--text-secondary); } .new-hire-checklist-item i { margin-top: 2px; width: 14px; text-align: center; flex-shrink: 0; } .new-hire-checklist-item--done { color: var(--text-primary); } .new-hire-checklist-item--done i { color: #16a34a; } .new-hire-checklist-item--pending i { color: #94a3b8; } .new-hire-checklist-item--warn i { color: #d97706; } .new-hire-checklist-detail { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 2px; } .new-hire-modal .msg-input.new-hire-input--warn, .new-hire-modal select.msg-input.new-hire-input--warn { border-color: #d97706; box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25); } /* ── Tag destinatari ──────────────────────────────────────────────────────── */ .recipient-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 700; } .recipient-tag--user { background: var(--bg-tertiary); color: var(--text-primary); } .recipient-tag--office { background: #0f4ea8; color: #ffffff; border: 1px solid #2f6fc9; font-weight: 600; } .recipient-tag.removable { padding-right: 4px; } .tag-remove-btn { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; opacity: 0.7; } .tag-remove-btn:hover { opacity: 1; } .msg-no-rec { color: var(--text-secondary); font-size: 12px; } /* ── Dettaglio messaggio (modale) ─────────────────────────────────────────── */ .modal-card-lg { max-width: 700px; width: 100%; } .msg-detail-header { background: var(--bg-tertiary); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .msg-detail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .msg-detail-label { color: var(--text-secondary); font-weight: 500; flex-shrink: 0; } /* Link interni app (scheda azienda, elenchi, messaggi) — alias storici: .preventivi-erp-link, .msg-company-link */ .erp-brand-link, .erp-company-link, .preventivi-erp-link, .msg-company-link { color: var(--brand); font-weight: 700; text-decoration: none; } .erp-brand-link:hover, .erp-company-link:hover, .preventivi-erp-link:hover, .msg-company-link:hover { text-decoration: underline; } .erp-company-link strong, .msg-company-link strong, .preventivi-erp-link strong { font-weight: inherit; } .erp-company-name { font-weight: 700; color: var(--text-primary); } .msg-resolved-info { color: #22c55e; font-size: 13px; font-weight: 600; } .msg-resolved-info i { color: #16a34a; } body.light-theme .msg-resolved-info { color: #15803d; } body.light-theme .msg-resolved-info i { color: #166534; } .msg-detail-text { font-size: 15px; color: var(--text-primary); line-height: 1.6; margin-bottom: 20px; white-space: pre-wrap; word-break: break-word; } /* ── Risposte ─────────────────────────────────────────────────────────────── */ .msg-replies-section { margin-top: 8px; } .msg-replies-inline-block { margin-top: 16px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 10px; } .msg-replies-block-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 2px; } .msg-replies-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; } .msg-replies-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .msg-reply-item { background: var(--bg-tertiary); border-radius: 8px; padding: 10px 14px; } .msg-reply-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .msg-reply-author { font-size: 13px; font-weight: 600; color: var(--text-primary); } .msg-reply-body { font-size: 14px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .msg-no-replies { font-size: 13px; color: var(--text-secondary); margin: 0; } /* ── Form risposta ────────────────────────────────────────────────────────── */ .msg-reply-form { border-top: 1px solid var(--border-color); padding-top: 14px; margin-top: 8px; } .msg-reply-form .form-label { margin-bottom: 8px; } .btn.is-busy { opacity: 0.85; cursor: wait; pointer-events: none; } .msg-reply-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } /* ── Form nuovo messaggio / messaggi (coerenza con login + search) ─────────── */ .form-row { margin-bottom: 18px; } .form-row-inline { display: flex; align-items: center; gap: 10px; } .form-row-task-toggle { justify-content: space-between; flex-wrap: nowrap; } .form-row-task-urgency { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-left: auto; } .form-row-task-urgency .form-label-inline { font-weight: 600; color: var(--text-secondary); } .form-row-task-urgency .msg-urgency-seg { flex-wrap: nowrap; max-width: none; } .form-row-task-urgency .msg-urgency-seg__opt { flex: 0 0 auto; } .form-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.01em; } .form-label-hint { font-weight: 500; color: var(--text-secondary); opacity: 0.85; font-size: 12px; } .form-label-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; } .msg-field-hint { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.4; } /* Input e textarea tema dashboard */ .msg-input, .msg-textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; line-height: 1.5; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .msg-input::placeholder, .msg-textarea::placeholder { color: var(--text-secondary); opacity: 0.75; } .msg-input:focus, .msg-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.22); } .msg-textarea { min-height: 120px; resize: vertical; padding: 12px 14px; } .msg-textarea--reply { min-height: 88px; } .msg-input--compact { padding: 8px 12px; font-size: 13px; border-radius: 8px; } .tags-wrap { border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; background: var(--bg-tertiary); } .tags-wrap--offices { padding: 12px 14px; } .tags-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0; } .tag-input-row { position: relative; } .tag-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); max-height: 220px; overflow-y: auto; } .tag-dropdown-item { padding: 10px 14px; font-size: 14px; cursor: pointer; transition: background 0.12s; } .tag-dropdown-item:hover { background: var(--bg-hover); } .tag-dropdown-item--empty { cursor: default; color: var(--text-secondary); font-size: 13px; } .tag-dropdown-item--empty:hover { background: transparent; } .msg-co-suggest-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .msg-co-suggest-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* Uffici: pill selezionabili (stile filtri messaggi) */ .msg-office-pills { display: flex; flex-wrap: wrap; gap: 8px; } .msg-office-pill { position: relative; cursor: pointer; margin: 0; } .msg-office-pill input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .msg-office-pill span { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-weight: 700; transition: background 0.15s, color 0.15s, border-color 0.15s; } .msg-office-pill:hover span { border-color: var(--brand); color: var(--text-primary); } .msg-office-pill input:checked + span { background: #0b7a61; border-color: #16a085; color: #ffffff; } body.light-theme .msg-office-pill input:checked + span { background: #0b7a61; border-color: #16a085; color: #ffffff; } /* Azienda: una sola, chip + ricerca */ .msg-company-box { position: relative; } .msg-company-search-line { display: flex; align-items: stretch; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); transition: border-color 0.15s, box-shadow 0.15s; } .msg-company-search-line:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.2); } .msg-company-line-icon { color: var(--text-secondary); font-size: 16px; align-self: center; flex-shrink: 0; } .msg-company-input-wrap { position: relative; flex: 1; min-width: 0; } .msg-company-input-wrap .msg-input { border: none; background: transparent; padding: 4px 0; box-shadow: none; } .msg-company-input-wrap .msg-input:focus { box-shadow: none; } .msg-company-input-wrap .tag-dropdown { left: 0; right: 0; min-width: 280px; } .msg-company-selected-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); } .msg-company-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 168, 132, 0.2); border: 1px solid rgba(0, 168, 132, 0.45); color: var(--text-primary); font-size: 14px; font-weight: 600; } body.light-theme .msg-company-chip { background: rgba(0, 168, 132, 0.12); border-color: rgba(0, 136, 104, 0.35); } /* Priorità task: segmenti (no radio “brutti”) */ .msg-urgency-seg { display: flex; flex-wrap: wrap; gap: 0; max-width: 100%; border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; background: var(--bg-secondary); } .msg-urgency-seg__opt { flex: 1 1 120px; margin: 0; cursor: pointer; position: relative; } .msg-urgency-seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .msg-urgency-seg__face { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-right: 1px solid var(--border-color); transition: background 0.15s, color 0.15s; min-height: 44px; } .msg-urgency-seg__opt:last-child .msg-urgency-seg__face { border-right: none; } .msg-urgency-seg__face i { font-size: 14px; opacity: 0.85; } .msg-urgency-seg__opt input:focus-visible + .msg-urgency-seg__face { outline: 2px solid var(--brand); outline-offset: -2px; } .msg-urgency-seg__opt--low input:checked + .msg-urgency-seg__face { background: rgba(76, 175, 80, 0.18); color: #a5d6a7; } .msg-urgency-seg__opt--med input:checked + .msg-urgency-seg__face { background: rgba(255, 193, 7, 0.2); color: #ffe082; } .msg-urgency-seg__opt--high input:checked + .msg-urgency-seg__face { background: rgba(239, 83, 80, 0.22); color: #ef9a9a; } body.light-theme .msg-urgency-seg__opt--low input:checked + .msg-urgency-seg__face { background: rgba(46, 125, 50, 0.15); color: #2e7d32; } body.light-theme .msg-urgency-seg__opt--med input:checked + .msg-urgency-seg__face { background: rgba(245, 124, 0, 0.18); color: #e65100; } body.light-theme .msg-urgency-seg__opt--high input:checked + .msg-urgency-seg__face { background: rgba(211, 47, 47, 0.15); color: #c62828; } @media (max-width: 520px) { .msg-urgency-seg__face { flex-direction: column; gap: 4px; padding: 10px 8px; font-size: 12px; } } /* ── Switch toggle ────────────────────────────────────────────────────────── */ .switch-wrap { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════════════ RESPONSIVE MOBILE — breakpoint principale: 480px Obiettivo: fruibilità su smartphone. Il layout desktop resta invariato. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* ── Header / Shell ── */ .dashboard-head { padding: 8px 12px; gap: 8px; } .dashboard-logo { height: 30px; } .dashboard-title { font-size: 16px; gap: 8px; } /* Widget utente: nascondi testo, mostra solo avatar */ .user-meta { display: none; } /* Impersonation: riduce il select */ .impersonate-widget { font-size: 11px; gap: 4px; } .impersonate-widget select { max-width: 130px; font-size: 11px; } /* ── Sub-navigazione (tab orizzontali) ── */ .app-subnav { overflow-x: auto; padding: 0 8px; gap: 0; scrollbar-width: none; -ms-overflow-style: none; } .app-subnav::-webkit-scrollbar { display: none; } .app-subnav-link { padding: 8px 10px; font-size: 12px; white-space: nowrap; } /* ── Content padding ── */ .dash-page { padding-left: 12px; padding-right: 12px; padding-bottom: 60px; } /* ── Filtri periodo ── */ .period-filter-bar { flex-wrap: wrap; gap: 8px; } .date-filter-group { flex-wrap: wrap; gap: 6px; } .date-filter-item { flex-wrap: wrap; gap: 4px; } .date-filter-item input { width: 100%; min-width: 0; } .preset-buttons { flex-wrap: wrap; overflow: visible; margin-left: 0; gap: 4px; } .preset-btn { font-size: 10px; padding: 3px 7px; } /* ── KPI griglia (account.html) ── */ .kpi-grid { grid-template-columns: 1fr 1fr; } /* ── Tabelle: assicura scroll orizzontale ── */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Modal: bottom-sheet su mobile ── */ .modal-overlay { padding: 0; align-items: flex-end; } .modal-card { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; } .modal-card-lg { max-width: 100%; border-radius: 16px 16px 0 0; } .crm-opp-quotes-card, .az-quote-detail-modal-card, .week-companies-card, .erp-confirm-card { max-width: 100%; border-radius: 16px 16px 0 0; } .modal-head { padding: 10px 12px; } .modal-head h3 { font-size: 14px; } .modal-head-actions { gap: 6px; } .modal-inline-status { display: none; } /* ── doc-kv: chiave/valore in colonna su mobile ── */ .doc-kv { grid-template-columns: 1fr; gap: 3px 0; } .doc-k { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; } /* ── doc-quote-summary: 2 colonne invece di 4 ── */ .doc-quote-summary { grid-template-columns: 1fr 1fr; } /* ── Dettaglio preventivo CRM: hero top in colonna ── */ .az-quote-detail-hero-top { flex-direction: column; gap: 8px; } .az-quote-detail-hero-right { text-align: left; max-width: none; } /* ── Dettaglio azienda: definition list in colonna ── */ .az-detail-dl { grid-template-columns: 1fr; gap: 3px 0; } .az-detail-dl dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 8px; } .az-detail-dl dt:first-child { margin-top: 0; } /* ── Azienda header: riduce padding e font ── */ .az-header { padding: 14px 16px; } .az-company-name { font-size: 18px; } /* ── Header buttons: solo icona su mobile stretto ── */ .dashboard-head-actions { gap: 4px; } .header-button { padding: 6px 10px; font-size: 11px; } /* ── Footer fisso: altezza compatta ── */ .app-footer-fixed { padding: 6px 12px; } .footer-brand, .app-version, .footer-sep { display: none; } .footer-right { max-width: 100%; } .app-footer-fixed.app-footer--feedback-reserved .footer-right { padding-right: 52px; } /* ── Form messaggi: task toggle wrappabile ── */ .form-row-task-toggle { flex-wrap: wrap; gap: 8px; } .form-row-task-urgency { flex-wrap: wrap; margin-left: 0; width: 100%; } /* ── Messaggi: filtri in righe ── */ .msg-filters { gap: 6px; } .msg-filter-btn { font-size: 12px; padding: 5px 10px; } .msg-filter-check { margin-left: 0; font-size: 12px; } /* ── Dashboard cruscotto: padding ridotto ── */ .dash-cruscotto-row { gap: 10px; } /* ── Candidati CRM: flex in colonna su mobile stretto ── */ .crm-candidate-row { flex-direction: column; align-items: flex-start; gap: 8px; } /* ── Page toolbar ── */ .page-toolbar, .admin-page-header { gap: 8px; margin-bottom: 14px; } .page-toolbar h1, .page-toolbar .admin-page-title, .admin-page-header h1, .admin-page-header .admin-page-title { font-size: 18px; } /* ── Bottom bar ── */ .page-bottom-bar { flex-direction: column; align-items: stretch; gap: 8px; } .page-bottom-bar .page-bottom-actions { justify-content: stretch; } .page-bottom-bar .page-bottom-actions .btn, .page-bottom-bar .page-bottom-actions button { flex: 1; } /* ── Detail card ── */ .detail-card { padding: 14px; } /* ── Impersonation banner: testo breve ── */ .impersonation-banner { font-size: 11px; padding: 4px 8px; } /* ── Barre ricerca inline (globale + ricerca azienda) ── */ .company-search { flex: 1 1 100%; max-width: none; } /* ── Login: riduce padding su schermi molto stretti ── */ .login-box { padding: 20px 16px; } /* ── Scheda azienda: tab scroll orizzontale ── */ .az-tabs-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 4px; padding-bottom: 2px; } .az-tabs-nav::-webkit-scrollbar { display: none; } .az-tab-btn { flex-shrink: 0; padding: 7px 10px; font-size: 11px; } .az-tab-btn-text { max-width: 90px; } /* ── Lavoratori scheda azienda: scroll orizzontale ── */ .az-worker-subtable-block { overflow-x: auto; -webkit-overflow-scrolling: touch; } .az-worker-role-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .az-worker-role-holders-table { min-width: 560px; } /* ── Sync label: abbrevia ── */ .sync-labels { gap: 4px; } .sync-label { font-size: 10px; padding: 1px 6px; } /* ── Paginazione ── */ .pagination-bar .pagination-btns { flex-wrap: wrap; justify-content: center; } .page-btn { padding: 4px 8px; font-size: 11px; } } /* fine @media (max-width: 480px) */ .switch-input { opacity: 0; width: 0; height: 0; position: absolute; } .switch-slider { position: absolute; inset: 0; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 22px; cursor: pointer; transition: background 0.2s; } .switch-slider::before { content: ""; position: absolute; width: 16px; height: 16px; background: var(--text-secondary); border-radius: 50%; top: 2px; left: 2px; transition: transform 0.2s, background 0.2s; } .switch-input:checked + .switch-slider { background: var(--brand); border-color: var(--brand); } .switch-input:checked + .switch-slider::before { transform: translateX(16px); background: #fff; } /* ── Sintesi DVR (estrazione): stack full-width come lavoratori / messaggi ── */ .az-dvr-summary-grid { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; width: 100%; } .az-dvr-box { width: 100%; box-sizing: border-box; border: 1px solid rgba(217, 119, 6, 0.28); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .az-dvr-box-head { padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid rgba(217, 119, 6, 0.22); background: rgba(217, 119, 6, 0.08); color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .az-dvr-box-head i { color: rgba(217, 119, 6, 0.95); font-size: 14px; } .az-dvr-box-body { padding: 0; overflow-x: auto; flex: 1; width: 100%; } .az-dvr-box-body .table-wrap { margin: 0; } .az-dvr-box-body table { font-size: 12px; } .az-dvr-box-empty { padding: 14px 12px; font-size: 12px; color: var(--text-secondary); } .az-dvr-box .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .az-dvr-conformita { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .az-dvr-conformita-verde .fa-circle { color: #22c55e; font-size: 0.75rem; } .az-dvr-conformita-rosso .fa-circle { color: #ef4444; font-size: 0.75rem; } .az-dvr-conformita-neutro { color: var(--text-secondary); font-size: 12px; } /* ── Dashboard: Ufficio commerciale (riuso su account.html) ── */ .dash-kpi-user-pie-wrap { display: grid; grid-template-columns: 25% 25% 50%; gap: 10px; align-items: stretch; min-height: 130px; width: 100%; padding-right: 15px; box-sizing: border-box; } .dash-kpi-user-pie-canvas { min-height: 120px; position: relative; min-width: 0; width: 100%; } .dash-kpi-user-legend { margin: 0; padding: 0 10px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 170px; overflow: auto; min-width: 0; width: 100%; box-sizing: border-box; } .dash-kpi-user-legend li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.25; } .dash-kpi-user-legend-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; margin-right: 8px; flex: 0 0 auto; } .dash-kpi-user-legend-main { display: flex; align-items: center; min-width: 0; flex: 1; } .dash-kpi-user-legend-name { min-width: 0; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; } .dash-kpi-user-legend-val { font-weight: 400; color: var(--text-primary); white-space: normal; font-variant-numeric: tabular-nums; font-size: 12px; text-align: right; max-width: 70%; } .dash-kpi-grid--account { display: grid; grid-template-columns: 1fr 1fr 3fr; gap: 12px; } .dash-kpi-card--account-wide { grid-column: span 1; } @media (max-width: 1100px) { .dash-kpi-grid--account { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-kpi-card--account-wide { grid-column: span 2; } } @media (max-width: 700px) { .dash-kpi-grid--account { grid-template-columns: 1fr; } .dash-kpi-card--account-wide { grid-column: span 1; } .dash-kpi-user-pie-wrap { grid-template-columns: 1fr; } } /* ── Coerenza UI: tema chiaro su badge ufficio (messaggi/task) ─────────────── */ body.light-theme .recipient-tag--office { background: #1d4ed8; color: #fff; border-color: #3b82f6; } body.light-theme .msg-direction-pill--received { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; } body.light-theme .msg-direction-pill--sent { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } body.light-theme .msg-badge--task-closed { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; } @media (max-width: 768px) { .msg-card--sent, .msg-card--received { width: calc(100% - 50px); } .msg-card { padding: 10px 10px; padding-right: 34px; } .msg-card--task { padding: 0; } .msg-card.msg-card--task { padding: 0 !important; } .msg-card.msg-card--task > .task-top { margin: 0 !important; } .msg-card-body { margin-bottom: 0; padding-top: 0; } .msg-card--sent { border-right: none; } .task-row, .task-body, .task-footer { padding-left: 10px; padding-right: 10px; } .task-row { padding-top: 6px; } .task-row--recipients { padding-top: 4px; } .task-body { padding-top: 6px; } .task-footer { padding-top: 8px; padding-bottom: 8px; } .task-separator, .msg-separator { margin-left: 10px; margin-right: 10px; margin-top: 8px; } .task-row--sender { flex-wrap: wrap; } .task-time { margin-left: auto; } .task-company-row { margin-left: 10px; margin-right: 10px; margin-top: 6px; padding: 6px 12px; align-items: flex-start; flex-wrap: wrap; } .msg-row, .msg-card-body, .msg-reply-row { padding-left: 8px; padding-right: 8px; } .msg-row--sender { flex-wrap: wrap; } .msg-company-row { margin-left: 8px; margin-right: 8px; margin-top: 6px; padding: 6px 12px; align-items: flex-start; flex-wrap: wrap; } .task-top { padding: 4px 10px; min-height: 28px; } } /* Pulsanti nelle celle tabella: formato compatto (toolbar / CTA restano .btn standard) */ table.company-table td .btn, .table-wrap table td .btn, table.data-table td .btn { padding: 6px 10px; font-size: 12px; font-weight: 600; border-radius: 7px; } /* Modale smistamento preventivo accettato (pipeline commerciale) */ body.light-theme #quoteAcceptanceDispatchModal { --az-draft-field-bg: #ffffff; --az-draft-panel-bg: #f4f6f8; } :root #quoteAcceptanceDispatchModal, body:not(.light-theme) #quoteAcceptanceDispatchModal, body:not(.light-theme) #preventiviQuoteDispatchModal { --az-draft-field-bg: var(--bg-secondary); --az-draft-panel-bg: var(--bg-tertiary); } body.quote-accept-dispatch-open #quoteAcceptanceDispatchModal, body.quote-accept-dispatch-open #preventiviQuoteDispatchModal { z-index: 1250; } #quoteAcceptanceDispatchModal .modal-card, #preventiviQuoteDispatchModal .modal-card { max-height: min(92vh, 920px); } .quote-accept-dispatch-card { width: min(1180px, 96vw); max-width: 96vw; } .quote-accept-dispatch-content { display: flex; flex-direction: column; gap: 14px; max-height: min(72vh, 680px); overflow: auto; padding: 16px 18px; background: var(--bg-primary); } body.light-theme #quoteAcceptanceDispatchModal .quote-accept-dispatch-content, body.light-theme #preventiviQuoteDispatchModal .quote-accept-dispatch-content { background: #eef1f5; } .quote-accept-dispatch-intro { margin: 0; padding: 12px 14px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; } .quote-accept-dispatch-groups { display: flex; flex-direction: column; gap: 14px; } #quoteAcceptanceDispatchModal .quote-accept-office-block.az-draft-section, #preventiviQuoteDispatchModal .quote-accept-office-block.az-draft-section { margin-bottom: 0; padding: 0; overflow: hidden; } #quoteAcceptanceDispatchModal .quote-accept-dispatch-emails.az-draft-section, #preventiviQuoteDispatchModal .quote-accept-dispatch-emails.az-draft-section { margin-bottom: 0; padding: 16px 18px; } #quoteAcceptanceDispatchModal .az-draft-section-title, #preventiviQuoteDispatchModal .az-draft-section-title { margin-bottom: 8px; } .quote-accept-office-head { padding: 12px 14px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); } .quote-accept-office-head-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .quote-accept-office-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; } .quote-accept-office-pill--medical { color: #0f766e; background: rgba(20, 184, 166, 0.14); border-color: rgba(20, 184, 166, 0.35); } .quote-accept-office-pill--training { color: #1d4ed8; background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.35); } .quote-accept-office-pill--technical { color: #b45309; background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.38); } .quote-accept-office-pill--default { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--border-color); } .quote-accept-office-meta { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .quote-accept-table-wrap { margin: 0; border: none; border-radius: 0; overflow-x: auto; } .quote-accept-table-wrap .company-table.quote-accept-office-table { min-width: 0; } .quote-accept-office-table { width: 100%; table-layout: fixed; font-size: 13px; } .quote-accept-office-table th, .quote-accept-office-table td { padding: 10px 12px; vertical-align: top; word-wrap: break-word; } .quote-accept-office-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); font-weight: 700; background: var(--bg-secondary); } .quote-accept-office-table .col-code { width: 12%; } .quote-accept-office-table .col-service { width: 58%; } .quote-accept-office-table .col-qty { width: 10%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .quote-accept-office-table .col-amount { width: 20%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; } /* Variante pagina Preventivi: colonna Lavoratore */ .quote-accept-office-table.quote-accept-office-table--with-worker .col-code { width: 11%; } .quote-accept-office-table.quote-accept-office-table--with-worker .col-service { width: 32%; word-break: break-word; overflow-wrap: anywhere; } .quote-accept-office-table.quote-accept-office-table--with-worker .col-worker { width: 30%; vertical-align: middle; } .quote-accept-office-table.quote-accept-office-table--with-worker .col-qty { width: 9%; } .quote-accept-office-table.quote-accept-office-table--with-worker .col-amount { width: 18%; } .quote-accept-office-table .preventivi-dispatch-worker-select { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; min-height: 38px; padding: 8px 10px; font-size: 13px; line-height: 1.35; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); } body.light-theme .quote-accept-office-table .preventivi-dispatch-worker-select { background: #fff; border-color: #d4dbe3; } .quote-accept-office-table .preventivi-dispatch-worker-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.2); } .quote-dispatch-unit-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle; color: var(--st-accent); background: color-mix(in oklab, var(--src-didattiko), transparent 86%); border: 1px solid color-mix(in oklab, var(--src-didattiko), transparent 75%); } body.light-theme .quote-dispatch-unit-badge { color: var(--st-accent); background: rgba(109, 40, 217, 0.08); } .quote-dispatch-na { display: inline-block; color: var(--text-secondary); font-size: 12px; padding-top: 2px; } .quote-accept-service-code { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; } .quote-accept-service-title { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.35; margin-bottom: 2px; } .quote-accept-worker-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .quote-accept-worker-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.35; } .quote-accept-worker-list li i { width: 14px; text-align: center; color: var(--brand); font-size: 11px; flex-shrink: 0; } .quote-accept-dispatch-emails-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; } #quoteAcceptanceDispatchModal .quote-accept-email-grid.az-draft-form-surface, #preventiviQuoteDispatchModal .quote-accept-email-grid.az-draft-form-surface { margin-top: 4px; background: var(--az-draft-panel-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 16px; } body.light-theme #quoteAcceptanceDispatchModal .quote-accept-email-grid.az-draft-form-surface, body.light-theme #preventiviQuoteDispatchModal .quote-accept-email-grid.az-draft-form-surface { border-color: #d4dbe3; } .quote-accept-email-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .quote-accept-email-field { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0; } #quoteAcceptanceDispatchModal .quote-accept-email-field .az-draft-field-label, #preventiviQuoteDispatchModal .quote-accept-email-field .az-draft-field-label { display: block; margin-bottom: 6px; } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input { width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px 12px; font-size: 14px; line-height: 1.4; border-radius: 10px; border: 1px solid var(--border-color); background: var(--az-draft-field-bg); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.light-theme #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input, body.light-theme #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input { border-color: #d4dbe3; } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input::placeholder, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input::placeholder { color: var(--text-secondary); opacity: 0.8; } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input:hover, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border-color)); } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input:focus, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(0, 168, 132, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input:disabled, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input:disabled { opacity: 1; cursor: not-allowed; background: var(--bg-tertiary); color: var(--text-secondary); border-color: var(--border-color); box-shadow: none; } #quoteAcceptanceDispatchModal .quote-accept-email-field .msg-input:disabled:hover, #preventiviQuoteDispatchModal .quote-accept-email-field .msg-input:disabled:hover { border-color: var(--border-color); } #quoteAcceptanceDispatchModal .quote-accept-email-field--inactive .az-draft-field-label::after, #preventiviQuoteDispatchModal .quote-accept-email-field--inactive .az-draft-field-label::after { content: " — non richiesto"; font-weight: 500; color: var(--text-secondary); } #quoteAcceptanceDispatchModal .quote-accept-email-field--inactive .msg-input::placeholder, #preventiviQuoteDispatchModal .quote-accept-email-field--inactive .msg-input::placeholder { color: transparent; } .quote-accept-dispatch-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-color); } @media (max-width: 900px) { .quote-accept-dispatch-card { width: 100%; } .quote-accept-email-grid { grid-template-columns: 1fr; } .quote-accept-office-table { table-layout: auto; } .quote-accept-office-table .col-code, .quote-accept-office-table .col-service, .quote-accept-office-table .col-worker, .quote-accept-office-table .col-qty, .quote-accept-office-table .col-amount { width: auto; } .quote-accept-office-table .preventivi-dispatch-worker-select { min-width: 160px; } } .modal-card .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.25)); flex-shrink: 0; } /* Modale ritaglio foto profilo (profilo.html) */ .profile-photo-crop-modal { width: min(440px, calc(100vw - 32px)); max-height: min(90vh, 720px); } .profile-photo-crop-modal .modal-content { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; } .profile-photo-crop-hint { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .profile-photo-crop-stage { display: flex; justify-content: center; padding: 4px 0 2px; } .profile-photo-crop-viewport { position: relative; width: 280px; height: 280px; --crop-circle: 228px; overflow: hidden; border-radius: 12px; background: #0f1419; touch-action: none; cursor: grab; border: 1px solid var(--border-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); } .profile-photo-crop-viewport.is-dragging { cursor: grabbing; } .profile-photo-crop-viewport img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; pointer-events: none; } .profile-photo-crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 12px; background: radial-gradient( circle calc(var(--crop-circle, 228px) / 2) at center, transparent calc(var(--crop-circle, 228px) / 2), rgba(0, 0, 0, 0.48) calc(var(--crop-circle, 228px) / 2 + 1px) ); } .profile-photo-crop-mask::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--crop-circle, 228px); height: var(--crop-circle, 228px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 1px rgba(15, 20, 25, 0.45); } .profile-photo-crop-zoom { display: flex; align-items: center; gap: 12px; padding: 0 2px; } .profile-photo-crop-zoom label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; min-width: 42px; } .profile-photo-crop-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand); } @media (max-width: 640px) { .profile-photo-crop-modal .modal-content { padding: 14px 14px 16px; } .profile-photo-crop-viewport { width: min(280px, calc(100vw - 72px)); height: min(280px, calc(100vw - 72px)); } } @media (max-width: 640px) { .quote-accept-email-row { grid-template-columns: 1fr; } } /* Riscontro autore su task risolti */ .msg-task-feedback-block { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-color, rgba(148, 163, 184, 0.35)); background: var(--bg-tertiary, rgba(148, 163, 184, 0.08)); font-size: 14px; line-height: 1.5; } .msg-task-feedback-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px; padding: 2px 10px; border-radius: 999px; font-weight: 600; color: var(--fb-color, var(--text-primary)); background: color-mix(in srgb, var(--fb-color, #64748b) 14%, transparent); } .msg-task-feedback-time { display: block; margin-top: 6px; font-size: 12px; color: var(--text-secondary); } .msg-task-feedback-pending { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #d97706; } .msg-task-feedback-list-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--fb-color, var(--text-secondary)); } .msg-row--feedback-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .msg-task-feedback-prompt { margin-top: 16px; padding: 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, #6366f1 25%, transparent); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #6366f1 12%, transparent) 0%, transparent 55%), radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #d97706 12%, transparent) 0%, transparent 55%), var(--card-bg, #fff); box-shadow: 0 10px 30px -18px rgba(79, 70, 229, 0.55); } .msg-task-feedback-prompt-hero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; } .msg-task-feedback-prompt-emoji { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; color: #fff; background: linear-gradient(135deg, #6366f1, #d97706); box-shadow: 0 8px 18px -8px rgba(99, 102, 241, 0.7); } .msg-task-feedback-prompt-title { margin: 2px 0 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); } .task-author-feedback-subtitle { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); } .task-author-feedback-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .task-author-feedback-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-height: 104px; padding: 14px 8px 12px; border: 1.5px solid var(--border-color, #d0d7de); border-radius: 14px; background: var(--card-bg, #fff); cursor: pointer; text-align: center; transition: border-color 0.16s, background 0.16s, transform 0.12s, box-shadow 0.16s; } .task-author-feedback-opt__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; color: var(--fb-color, #64748b); background: color-mix(in srgb, var(--fb-color, #64748b) 14%, transparent); transition: transform 0.16s, background 0.16s, color 0.16s; } .task-author-feedback-opt__lbl { font-size: 11px; line-height: 1.25; font-weight: 600; color: var(--text-primary); } .task-author-feedback-opt__check { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; color: #fff; background: var(--fb-color, #3b82f6); opacity: 0; transform: scale(0.5); transition: opacity 0.16s, transform 0.16s; } .task-author-feedback-opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--fb-color, #3b82f6) 55%, var(--border-color, #d0d7de)); box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--fb-color, #3b82f6) 90%, transparent); } .task-author-feedback-opt:hover .task-author-feedback-opt__ico { transform: scale(1.08); } .task-author-feedback-opt.is-selected { border-color: var(--fb-color, #3b82f6); background: color-mix(in srgb, var(--fb-color, #3b82f6) 10%, var(--card-bg, #fff)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fb-color, #3b82f6) 40%, transparent); } .task-author-feedback-opt.is-selected .task-author-feedback-opt__ico { color: #fff; background: var(--fb-color, #3b82f6); } .task-author-feedback-opt.is-selected .task-author-feedback-opt__check { opacity: 1; transform: scale(1); } .msg-task-feedback-prompt-actions { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .msg-task-feedback-prompt-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .msg-task-feedback-prompt-hint.is-chosen { color: #15803d; } .task-author-feedback-confirm { display: inline-flex; align-items: center; gap: 8px; transition: background 0.16s, box-shadow 0.16s, transform 0.12s; } .task-author-feedback-confirm.has-choice:not(:disabled) { background: var(--fb-color, var(--primary, #3b82f6)); border-color: var(--fb-color, var(--primary, #3b82f6)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--fb-color, #3b82f6) 90%, transparent); } .task-author-feedback-confirm:not(:disabled):hover { transform: translateY(-1px); } @media (max-width: 640px) { .task-author-feedback-options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .task-author-feedback-opt { min-height: 0; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; } .task-author-feedback-opt__ico { width: 38px; height: 38px; font-size: 18px; } .task-author-feedback-opt__lbl { display: none; } .task-author-feedback-opt__check { top: 5px; right: 5px; width: 15px; height: 15px; font-size: 8px; } .msg-task-feedback-prompt-actions { flex-direction: column-reverse; align-items: stretch; } .task-author-feedback-confirm { justify-content: center; } .msg-task-feedback-prompt-hint { justify-content: center; } } /* Icone saldata / non saldata fatture (cerchietto) */ .erp-invoice-paid-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; flex-shrink: 0; } .erp-invoice-paid-icon i { font-size: 12px; line-height: 1; } .erp-invoice-paid-icon--yes { background: rgba(22, 163, 74, 0.16); color: #15803d; border: 1px solid rgba(22, 163, 74, 0.28); } .erp-invoice-paid-icon--no { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.24); } /* Fattura chiusa da una nota di credito: non e' un incasso, quindi non e' verde. */ .erp-invoice-paid-icon--credited { background: rgba(139, 92, 246, 0.14); color: #6d28d9; border: 1px solid rgba(139, 92, 246, 0.32); } /* Importo stornato accanto al totale in elenco fatture. */ .erp-invoice-nc-chip { display: inline-block; margin-top: 2px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; background: rgba(139, 92, 246, 0.14); color: #6d28d9; border: 1px solid rgba(139, 92, 246, 0.32); } /* Etichette stato partita fattura (estratto conto) */ .erp-invoice-state-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .erp-invoice-state-badge--paid { background: rgba(22, 163, 74, 0.16); color: var(--st-ok); border: 1px solid rgba(22, 163, 74, 0.3); } .erp-invoice-state-badge--open { background: rgba(234, 179, 8, 0.2); color: var(--st-warn); border: 1px solid rgba(234, 179, 8, 0.38); } .erp-invoice-state-badge--credited { background: rgba(139, 92, 246, 0.16); color: #5b21b6; border: 1px solid rgba(139, 92, 246, 0.35); } /* Estratto conto: importi a credito verso il cliente (note di credito, saldi negativi). */ .az-estratto-residual--credit { color: #6d28d9; } .az-estratto-nc-num { font-size: 10px; opacity: .75; white-space: nowrap; } .erp-invoice-state-badge--due { background: rgba(220, 38, 38, 0.12); color: var(--st-danger); border: 1px solid rgba(220, 38, 38, 0.28); } .az-admin-contact-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid rgba(22, 163, 74, 0.45); border-radius: 8px; background: var(--surface-2, #f8fafc); color: var(--text-primary, #111827); cursor: pointer; text-align: left; font-size: 13px; transition: border-color 0.15s ease, background 0.15s ease; } .az-admin-contact-btn:hover { border-color: #16a34a; background: rgba(22, 163, 74, 0.06); } .az-admin-contact-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .az-admin-contact-channels { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .az-channel-icon { font-size: 15px; opacity: 0.28; color: var(--text-secondary, #6b7280); } .az-channel-icon--on { opacity: 1; } .az-channel-icon--on.fa-envelope { color: #2563eb; } .az-channel-icon--on.fa-whatsapp { color: #25d366; } .az-admin-contact-email-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; } .az-admin-contact-email-row .az-doc-upload-bar-switch { margin: 0; white-space: nowrap; } .az-admin-contact-email-remove { border: none; background: transparent; color: var(--text-secondary, #6b7280); cursor: pointer; padding: 6px; border-radius: 6px; } .az-admin-contact-email-remove:hover { color: #dc2626; background: rgba(220, 38, 38, 0.08); } .az-admin-contact-mobile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; } .az-admin-contact-mobile-row .az-doc-upload-bar-switch { margin: 0; white-space: nowrap; } .az-admin-contact-external-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 2px; } .az-admin-contact-external-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-color, #d1d5db); border-radius: 8px; background: var(--surface-2, #f8fafc); } .az-admin-contact-external-meta { min-width: 0; } .az-admin-contact-external-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .az-admin-contact-external-name { font-weight: 600; font-size: 13px; } .az-admin-contact-external-source { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.4; } .az-admin-contact-external-source--safee { background: rgba(22, 163, 74, 0.12); color: #15803d; } .az-admin-contact-external-source--crm { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; } .az-admin-contact-external-details { font-size: 12px; color: var(--text-secondary, #6b7280); line-height: 1.45; } .az-admin-contact-external-empty { font-size: 12px; color: var(--text-secondary, #6b7280); padding: 8px 0; } /* Didattiko — badge stato corso (sintesi; % solo in dettaglio lezioni) */ .didattiko-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; } .didattiko-status-badge i { font-size: 11px; } .didattiko-status-badge--done { background: rgba(5, 150, 105, 0.14); color: var(--st-ok); border: 1px solid rgba(5, 150, 105, 0.28); } .didattiko-status-badge--running { background: color-mix(in oklab, var(--src-didattiko), transparent 88%); color: var(--st-accent); border: 1px solid color-mix(in oklab, var(--src-didattiko), transparent 72%); } body.light-theme .didattiko-status-badge--running { color: #6d28d9; } .didattiko-status-badge--na { background: var(--bg-tertiary, #e8e8e8); color: var(--text-secondary, #6b7280); border: 1px solid var(--border-color, #d4dbe3); min-width: 28px; justify-content: center; } .didattiko-status-with-pct { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .didattiko-status-pct { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--src-didattiko); line-height: 1.2; } body.light-theme .didattiko-status-pct { color: #6d28d9; } .moodle-activity-summary-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; } /* ── Promemoria personali ── */ :root { --pr-overdue: #dc2626; --pr-overdue-bg: rgba(220, 38, 38, 0.08); --pr-today: #2563eb; --pr-today-bg: rgba(37, 99, 235, 0.08); --pr-panel: #f4f6f8; --pr-field: #ffffff; --pr-panel-border: #d4dbe3; } html[data-theme="dark"] { --pr-overdue-bg: rgba(220, 38, 38, 0.16); --pr-today-bg: rgba(37, 99, 235, 0.16); --pr-panel: var(--bg-tertiary); --pr-field: var(--bg-secondary); --pr-panel-border: var(--border-color); } .dash-promemoria-card.pr-dash-card { min-height: 52px; max-height: 320px; overflow: auto; } .pr-dash-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 14px; } .pr-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .pr-dash-title { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .pr-dash-title i { color: var(--brand); } .pr-dash-link { font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; cursor: pointer; background: none; border: none; font-family: inherit; } .pr-dash-section { margin-bottom: 10px; } .pr-dash-section:last-child { margin-bottom: 0; } .pr-dash-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .pr-dash-section-label.is-overdue { color: var(--pr-overdue); } .pr-dash-section-label.is-today { color: var(--pr-today); } .pr-count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--bg-tertiary); color: var(--text-primary); } .pr-count-pill.is-overdue { background: var(--pr-overdue); color: #fff; } .pr-count-pill.is-today { background: var(--pr-today); color: #fff; } .pr-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); margin-bottom: 6px; } .pr-row:last-child { margin-bottom: 0; } .pr-row.is-overdue { border-left: 3px solid var(--pr-overdue); background: var(--pr-overdue-bg); } .pr-row.is-today { border-left: 3px solid var(--pr-today); } .pr-row-main { flex: 1; min-width: 0; cursor: pointer; } .pr-row-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pr-row-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pr-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-secondary); } .pr-chip.is-assignee { background: rgba(37, 99, 235, 0.12); color: var(--st-info); } html[data-theme="dark"] .pr-chip.is-assignee { color: #93c5fd; } .pr-chip.is-company { background: rgba(0, 168, 132, 0.12); color: var(--st-ok); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="dark"] .pr-chip.is-company { color: #6ee7b7; } .pr-chip.is-company.is-link { cursor: pointer; text-decoration: none; } .pr-chip.is-company.is-link:hover { text-decoration: underline; } .pr-row-actions { display: flex; gap: 2px; flex-shrink: 0; } .pr-empty { font-size: 12px; color: var(--text-secondary); padding: 6px 2px; font-style: italic; } .pr-reschedule-menu { position: fixed; z-index: 1200; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 4px; min-width: 180px; } .pr-reschedule-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; font-family: inherit; } .pr-reschedule-menu button:hover { background: var(--bg-tertiary); } .pr-reassign-menu { max-height: 320px; overflow-y: auto; } .pr-reassign-head { padding: 6px 10px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); } .pr-reassign-menu button i { width: 14px; margin-right: 6px; } .pr-reassign-note { padding: 8px 10px; font-size: 12px; color: var(--text-secondary); font-style: italic; } .pr-reschedule-pick { padding: 8px 10px; border-top: 1px solid var(--border-color); margin-top: 4px; } .pr-reschedule-pick input[type="date"] { width: 100%; box-sizing: border-box; margin-top: 4px; } .pr-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .pr-filter { border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; } .pr-filter.is-active { background: rgba(0, 168, 132, 0.12); border-color: var(--brand); color: var(--brand); } .pr-day-block { margin-bottom: 18px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .pr-day-head { padding: 10px 14px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; background: var(--pr-panel); } .pr-day-head.is-overdue { color: var(--pr-overdue); background: var(--pr-overdue-bg); } .pr-day-head.is-today { color: var(--pr-today); background: var(--pr-today-bg); } .pr-day-body { padding: 8px; } .pr-agenda-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; border: 1px solid transparent; } .pr-agenda-row:hover { background: var(--bg-primary); border-color: var(--border-color); } .pr-agenda-row.is-overdue { border-left: 3px solid var(--pr-overdue); background: var(--pr-overdue-bg); } .pr-time { font-size: 12px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .pr-time.is-allday { font-size: 11px; font-weight: 600; } .pr-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 1100; padding: 16px; } .pr-modal-overlay.is-open { display: flex; } .pr-modal-card { width: min(520px, 100%); /* Niente overflow sulla SCHEDA: cosi' scorrevano via anche testa e piede. L'altezza massima e lo scorrimento del solo corpo li da' il design system (.modal-card in colonna, .modal-content che scorre). */ background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); } .pr-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .pr-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; } .pr-detail-group { background: var(--pr-panel); border: 1px solid var(--pr-panel-border); border-radius: 10px; padding: 12px; margin-bottom: 10px; } .pr-detail-group-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 0 0 10px; } .pr-field { margin-bottom: 10px; } .pr-field:last-child { margin-bottom: 0; } .pr-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--text-secondary); } .pr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 520px) { .pr-field-row { grid-template-columns: 1fr; } } .pr-company-picker { position: relative; } .pr-company-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.12); max-height: 200px; overflow: auto; } .pr-company-dropdown button { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text-primary); } .pr-company-dropdown button:hover { background: var(--bg-tertiary); } .pr-attach-list { display: flex; flex-direction: column; gap: 6px; } .pr-attach-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--pr-field); border: 1px solid var(--pr-panel-border); font-size: 12px; font-weight: 600; } .pr-attach-item .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .sidebar-link-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pr-overdue); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .sidebar-link-badge.hidden { display: none !important; } .pr-toast { position: fixed; bottom: 24px; right: 24px; background: #111827; color: #fff; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 1300; opacity: 0; transform: translateY(8px); transition: 0.2s; pointer-events: none; } .pr-toast.is-show { opacity: 1; transform: none; } /* ══════════════════════════════════════════════════════════════════════════ NORMALIZZAZIONE PULSANTI — passo 5 del piano (docs/design-system.html §10) Nel gestionale convivono 61 classi di pulsante, 25 delle quali con geometria propria: 4 altezze, 6 arrotondamenti, 5 corpi di testo. Nessuno di questi scarti significa qualcosa, ed e' la causa principale della sensazione di disordine. Qui la geometria viene riportata a due misure. I COLORI di ciascuna classe restano intatti: cambia forma e dimensione, non semantica. ESCLUSIONE: "Arena dei Task" (task-clima.html, body.page-arena-task) ha una grafica volutamente diversa e resta fuori da tutte le regole seguenti. Blocco in coda al file: si disattiva commentandolo, senza toccare altro. ══════════════════════════════════════════════════════════════════════════ */ /* ── Misura normale: azioni di toolbar, form, modali ── */ body:not(.page-arena-task) .btn, body:not(.page-arena-task) .login-link-btn, body:not(.page-arena-task) .az-admin-contact-btn, body:not(.page-arena-task) .push-enable-btn { padding: 8px 14px; border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 600; line-height: 1.25; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } /* ── Misura compatta: barre dense, celle di tabella, filtri ── */ body:not(.page-arena-task) .btn-sm, body:not(.page-arena-task) .preset-btn, body:not(.page-arena-task) .btn-warning, body:not(.page-arena-task) .page-btn, body:not(.page-arena-task) .doc-accept-btn, body:not(.page-arena-task) .az-header-icon-btn, body:not(.page-arena-task) .az-safee-docs-badge-btn, body:not(.page-arena-task) .msg-filter-btn, body:not(.page-arena-task) .header-button, body:not(.page-arena-task) .btn-new-hires { padding: 6px 11px !important; border-radius: var(--r-sm) !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; line-height: 1.25; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } body:not(.page-arena-task) .az-safee-docs-badge-btn--compact { padding: 4px 9px !important; } /* ── Chip di filtro: pillola, non un raggio a caso da 20px ── */ body:not(.page-arena-task) .msg-filter-btn { border-radius: var(--r-pill) !important; } /* ── Controlli circolari: unica eccezione al raggio ── */ body:not(.page-arena-task) .modal-close-circle-btn, body:not(.page-arena-task) .msg-delete-btn, body:not(.page-arena-task) .task-delete-btn { border-radius: var(--r-pill) !important; min-height: 0; } /* ── .btn-danger NON ERA DEFINITO in nessun foglio di stile: il pulsante che elimina ereditava il fondo predefinito del browser, cioe' grigio. Un'azione distruttiva indistinguibile da una neutra. ── */ body:not(.page-arena-task) .btn-danger { background: transparent; color: var(--st-danger); border: 1px solid var(--st-danger-bd); } body:not(.page-arena-task) .btn-danger:hover:not(:disabled) { background: var(--st-danger-bg); } /* ── Stessa causa: nessun fondo dichiarato, quindi fondo di sistema ── */ body:not(.page-arena-task) .header-button { background: var(--grad-raised); color: var(--text-primary); border: 1px solid var(--border-color); } /* ── Era l'unico pulsante senza arrotondamento, a 13,33px (misura di sistema) e in grassetto pieno: saltava all'occhio come corpo estraneo ── */ body:not(.page-arena-task) .btn-new-hires { border-radius: var(--r-sm) !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; } /* ── Il filtro periodo inattivo usava --text-secondary e sembrava disabilitato accanto al pulsante secondario ── */ body:not(.page-arena-task) .preset-btn { color: var(--text-primary) !important; } /* ── Pulsanti dentro le celle di tabella: erano a 7px, fuori scala ── */ body:not(.page-arena-task) table .btn, body:not(.page-arena-task) table .btn-sm { border-radius: var(--r-sm) !important; } /* ── Fuoco visibile e identico su ogni pulsante del gestionale ── */ body:not(.page-arena-task) .btn:focus-visible, body:not(.page-arena-task) .preset-btn:focus-visible, body:not(.page-arena-task) .page-btn:focus-visible, body:not(.page-arena-task) .btn-warning:focus-visible, body:not(.page-arena-task) .msg-filter-btn:focus-visible, body:not(.page-arena-task) .az-tab-btn:focus-visible, body:not(.page-arena-task) .header-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* ══════════════════════════════════════════════════════════════════════════ ALLINEAMENTO AL DESIGN SYSTEM — divergenze misurate confrontando i valori calcolati dell'app con quelli di docs/design-system.html. ══════════════════════════════════════════════════════════════════════════ */ /* body non aveva ALCUNA dimensione di testo: rendeva a 16px, il default del browser, contro i 13px del sistema. Tutto il testo senza misura esplicita era piu' grande di tre punti. E' la divergenza che si nota di piu'. */ body:not(.page-arena-task) { font-size: var(--fs-base); line-height: 1.6; } /* Intestazioni di tabella: non avevano fondo, quindi sotto una testata appiccicosa il testo scorreva sopra. E 12px contro gli 11 del sistema. */ body:not(.page-arena-task) .company-table th { background: var(--bg-tertiary); padding: 8px 10px; font-size: var(--fs-micro); letter-spacing: 0.05em; } body:not(.page-arena-task) .company-table td { padding: 9px 10px; } /* .state-pill era maiuscola e in grassetto pieno, .az-worker-status-label no: due famiglie di pill con due voci diverse. Il sistema dice 11px/600, tondo. */ body:not(.page-arena-task) .state-pill { padding: 3px 10px; font-weight: 600; text-transform: none; letter-spacing: normal; } /* La paginazione torna al raggio minore previsto dal sistema. */ body:not(.page-arena-task) .page-btn { border-radius: var(--r-xs) !important; } body:not(.page-arena-task) .admin-page-title { letter-spacing: -0.01em; } /* ══════════════════════════════════════════════════════════════════════════ COMPONENTI DEL DESIGN SYSTEM — attivi SOLO dentro Alcuni nomi (.panel, .kpi-value, .table-wrap, .empty) esistono gia' nel gestionale con significati diversi: lo scoping evita ogni collisione. Nessuna pagina esistente e' toccata da questo blocco. Riferimento: docs/design-system.html ══════════════════════════════════════════════════════════════════════════ */ .ds-page .toolbar { display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6); } .ds-page .toolbar-title { margin:0; font-size:var(--fs-title); font-weight:700; display:flex; align-items:center; gap:var(--sp-3); letter-spacing:-.01em; } .ds-page .toolbar-actions { margin-left:auto; display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; } .ds-page .panel { background:var(--grad-surface); border:1px solid var(--border-color); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--sp-6); } .ds-page .panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:9px var(--sp-5); border-bottom:1px solid var(--border-color); flex-wrap:wrap; } .ds-page .panel-title { margin:0; font-size:var(--fs-base); font-weight:700; display:flex; align-items:center; gap:7px; } .ds-page .panel-body { padding:var(--sp-6); } .ds-page .panel-body--flush { padding:0; } .ds-page .filters { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border-color); background:var(--grad-raised); } .ds-page .filters-label { font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); } .ds-page .kpi { position:relative; background:var(--grad-surface); border:1px solid var(--border-color); border-radius:var(--r-md); padding:var(--sp-6); overflow:hidden; text-decoration:none; color:inherit; display:block; transition:border-color var(--dur), transform var(--dur) var(--ease); } .ds-page a.kpi:hover { border-color:var(--src,var(--text-secondary)); transform:translateY(-1px); } .ds-page .kpi--src::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--src); } .ds-page .kpi--src .src-tag { margin-bottom:7px; } .ds-page .kpi-label { display:block; font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:5px; } .ds-page .kpi-value { display:block; font-size:var(--fs-kpi); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.15; color:var(--text-primary); } .ds-page .kpi-note { display:block; margin-top:5px; font-size:var(--fs-micro); color:var(--text-secondary); } .ds-page .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); } .ds-page .table-wrap { overflow:auto; } .ds-page .table { width:100%; border-collapse:collapse; font-size:var(--fs-base); } .ds-page .table th { text-align:left; padding:8px var(--sp-4); white-space:nowrap; color:var(--text-secondary); font-size:var(--fs-micro); font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--bg-tertiary); border-bottom:1px solid var(--border-color); position:sticky; top:0; z-index:1; } .ds-page .table td { padding:9px var(--sp-4); border-bottom:1px solid var(--border-color); color:var(--text-primary); } .ds-page .table tbody tr:last-child td { border-bottom:none; } .ds-page .table tbody tr:hover td { background:var(--bg-hover); } .ds-page .table th.is-sortable { cursor:pointer; user-select:none; position:relative; padding-right:22px; } .ds-page .table th.is-sortable::after { content:"\2195"; position:absolute; right:8px; opacity:.4; } .ds-page .table th[data-sort="asc"]::after { content:"\2191"; opacity:.95; } .ds-page .table th[data-sort="desc"]::after { content:"\2193"; opacity:.95; } .ds-page .table .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .ds-page .table .actions { width:1%; white-space:nowrap; text-align:right; } .ds-page .pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--sp-1); padding:var(--sp-4); font-size:var(--fs-sm); color:var(--text-secondary); border-top:1px solid var(--border-color); } .ds-page .pager-info { flex:0 0 100%; text-align:center; margin-bottom:var(--sp-2); } .ds-page .empty { text-align:center; padding:var(--sp-8) var(--sp-6); color:var(--text-secondary); font-style:normal; } .ds-page .empty-title { display:block; font-size:var(--fs-md); font-weight:600; color:var(--text-primary); margin-bottom:5px; } .ds-page .empty-text { display:block; max-width:46ch; margin:0 auto var(--sp-5); font-size:var(--fs-base); } .ds-page .skel { background:var(--bg-tertiary); border-radius:var(--r-xs); position:relative; overflow:hidden; } .ds-page .skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:ds-skel 1.4s ease-in-out infinite; } body.light-theme .ds-page .skel::after, .ds-page.light-theme .skel::after { background:linear-gradient(90deg,transparent,rgba(0,0,0,.045),transparent); } @keyframes ds-skel { 100% { transform:translateX(100%); } } .ds-page .search { display:flex; align-items:center; gap:7px; min-width:220px; background:var(--field-bg); border:1px solid var(--field-border); border-radius:var(--r-md); padding:7px 11px; transition:border-color var(--dur), box-shadow var(--dur); } .ds-page .search:focus-within { border-color:var(--brand); box-shadow:var(--sh-focus); } .ds-page .search input { flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text-primary); font-size:var(--fs-base); font-family:inherit; } .ds-page .search .ico { color:var(--text-secondary); } .ds-page .ico { width:1em; height:1em; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.125em; } /* ══════════════════════════════════════════════════════════════════════════ AGGANCIO STRUTTURALE — GLOBALE, su tutta l'applicazione Gli stili del design system applicati alle classi REALI del gestionale. Nessuna classe viene rinominata: il JavaScript continua a fare presa sugli stessi selettori. Cambia solo come sono disegnate. Escluso: "Arena dei Task" (body.page-arena-task), grafica volutamente sua. NOTA: i nomi nuovi del design system (.panel, .kpi, .table, .empty...) restano sotto .ds-page perche' collidono con classi gia' esistenti: .panel e' usato da 23 pagine, .empty da 31, .table-wrap da 37, con significati diversi. Quelli valgono solo per markup nuovo. ══════════════════════════════════════════════════════════════════════════ */ /* ── Barra strumenti di pagina (49 pagine) ── */ body:not(.page-arena-task) .page-toolbar { gap: var(--sp-5); margin-bottom: var(--sp-6); } body:not(.page-arena-task) .admin-page-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: -.01em; gap: var(--sp-3); } body:not(.page-arena-task) .wa-toolbar-actions, body:not(.page-arena-task) .page-toolbar-actions { margin-left: auto; gap: var(--sp-3); } /* ── Ricerca inline: e' un campo, non un chip (11 pagine) ── */ body:not(.page-arena-task) .search-inline-wrap { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--r-md); padding: 7px 11px; gap: 7px; transition: border-color var(--dur), box-shadow var(--dur); } body:not(.page-arena-task) .search-inline-wrap:focus-within { border-color: var(--brand); box-shadow: var(--sh-focus); } /* ── Testo di aiuto ── */ body:not(.page-arena-task) .wa-help-text { font-size: var(--fs-base); max-width: 78ch; } /* ── Tabella e paginazione: un pannello unico invece di blocchi staccati ── */ body:not(.page-arena-task) .data-table-wrapper { background: var(--grad-surface); border: 1px solid var(--border-color); border-radius: var(--r-md); overflow: hidden; } body:not(.page-arena-task) .scadenze-page .data-table-container { padding: 0; } body:not(.page-arena-task) .scadenze-page .data-table th { background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 8px var(--sp-4); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1; } body:not(.page-arena-task) .scadenze-page .data-table td { padding: 9px var(--sp-4); } body:not(.page-arena-task) .scadenze-page .data-table tbody tr:hover td { background: var(--bg-hover); } /* ── Le tabelle aziende: stesse regole delle intestazioni ── */ body:not(.page-arena-task) .company-table th { background: var(--bg-tertiary); font-size: var(--fs-micro); letter-spacing: .05em; padding: 8px var(--sp-4); } body:not(.page-arena-task) .company-table td { padding: 9px var(--sp-4); } /* ── Paginazione dentro il pannello, non staccata (13 pagine) ── */ body:not(.page-arena-task) .pagination-bar { border-top: 1px solid var(--border-color); margin-top: 0; padding: var(--sp-4); background: transparent; } /* ── Attesa e vuoto ── */ body:not(.page-arena-task) #listLoading { font-size: var(--fs-base); color: var(--text-secondary); } body:not(.page-arena-task) .doc-empty { font-style: normal; } /* ══════════════════════════════════════════════════════════════════════════ RIPRISTINO E CHIUSURA — blocco finale, solo in aggiunta. Le riscritture precedenti tagliavano dal marcatore a fine file e hanno cancellato due blocchi gia' applicati. Qui vengono rimessi, insieme ai difetti rimasti. Da qui in avanti si aggiunge soltanto, non si taglia. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. BARRA FILTRI SU UNA RIGA (era andata persa) ────────────────────── .wa-filter-row nasce come griglia a 5 colonne con i figli a larghezza piena: in flex andavano ognuno a capo. */ body:not(.page-arena-task) .wa-filter-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border-color); border-radius: var(--r-md); background: var(--grad-raised); } body:not(.page-arena-task) .wa-filter-row > select, body:not(.page-arena-task) .wa-filter-row > input, body:not(.page-arena-task) .wa-filter-row > label { width: auto; flex: 0 1 auto; margin: 0; } body:not(.page-arena-task) .wa-filter-row > select { min-width: 190px; } body:not(.page-arena-task) .wa-filter-row > input[type="date"] { min-width: 148px; } body:not(.page-arena-task) .wa-filter-row > input[type="text"] { min-width: 220px; flex: 1 1 220px; } body:not(.page-arena-task) .wa-filter-row > label { display: inline-flex; align-items: center; gap: var(--sp-3); white-space: nowrap; } /* ── 2. LA REGOLA DEL BORDO (era andata persa) ─────────────────────────── Solo cio' che si puo' cliccare ha un bordo. dichiara uno stato,