/* ============================================================================ Argos — Design System "console operativa" Punto UNICO di verità per token e componenti. Tutte le pagine pescano da qui. Caricato dopo app.css: durante la migrazione convive con gli stili legacy; a fine migrazione le regole legacy di app.css verranno rimosse. ============================================================================ */ /* ============================================================================ TEMI: 4 accent (indigo/slate/forest/sunset) × 2 modalità (dark/light). Il riceve due classi: theme-{nome} + mode-{dark|light}. - Token indipendenti dal tema (raggi, font, semantici) → :root - Neutri (bg/panel/border/text) → per MODALITÀ (.mode-dark/.mode-light) - Accent (accent/hover/muted) → per TEMA×MODALITÀ (.theme-x.mode-y) Doppio set di nomi mantenuto per retrocompatibilità: --bg-base/--bg, --panel/--panel-2, --border(+subtle/input), --text(+primary/body/muted/faint), --muted, --accent(+hover/muted-bg/ muted-text, alias --accent-bg/--accent-text). ============================================================================ */ :root { /* Raggi */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius: 8px; /* Tipografia — in rem (= px a 100%): la "Dimensione testo" scala il font-size di , così cresce il testo SENZA rompere i layout in vh. */ --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 0.6875rem; --fs-sm: 0.75rem; --fs-base: 0.8125rem; --fs-lg: 0.9375rem; --fs-xl: 1.125rem; /* Colori semantici — STABILI su ogni tema/modalità (significato costante) */ --danger: #EF4444; --ok: #22C55E; --warn: #F59E0B; --info: #3B82F6; /* Default = theme-indigo + mode-dark: garantisce un fallback completo per pagine senza classi sul e per il primo paint. */ --bg-base: #0E0F11; --bg: #0E0F11; --bg-surface: #0B0C0E; --bg-input: #1A1B1F; --panel: #15171B; --panel-2: #1E2127; --border: #2A2D33; --border-subtle: #232529; --border-input: #2D2F36; --text: #E4E4E7; --text-primary: #FAFAFA; --text-body: #E4E4E7; --text-muted: #A1A1AA; --muted: #A1A1AA; --text-faint: #71717A; --accent: #7F77DD; --accent-hover: #6F66D0; --accent-muted-bg: #26215C; --accent-muted-text: #CECBF6; --accent-bg: #26215C; --accent-text: #CECBF6; /* Pillole semantiche (default dark) */ --pill-neutral-bg:#202227; --pill-neutral-text:#A1A1AA; --pill-info-bg:#16263D; --pill-info-text:#7DB3F5; --pill-warning-bg:#2A2410; --pill-warning-text:#E0B341; --pill-danger-bg:#2E1416; --pill-danger-text:#F08C8C; --pill-success-bg:#11291C; --pill-success-text:#6FD08C; --pill-violet-bg:#1E1A33; --pill-violet-text:#A78BFA; } /* ---- Neutri per MODALITÀ (comuni a tutti i temi accent) ---- */ .mode-dark { --bg-base: #0E0F11; --bg: #0E0F11; --bg-surface: #0B0C0E; --bg-input: #1A1B1F; --panel: #15171B; --panel-2: #1E2127; --border: #2A2D33; --border-subtle: #232529; --border-input: #2D2F36; --text: #E4E4E7; --text-primary: #FAFAFA; --text-body: #E4E4E7; --text-muted: #A1A1AA; --muted: #A1A1AA; --text-faint: #71717A; --pill-neutral-bg:#202227; --pill-neutral-text:#A1A1AA; --pill-info-bg:#16263D; --pill-info-text:#7DB3F5; --pill-warning-bg:#2A2410; --pill-warning-text:#E0B341; --pill-danger-bg:#2E1416; --pill-danger-text:#F08C8C; --pill-success-bg:#11291C; --pill-success-text:#6FD08C; --pill-violet-bg:#1E1A33; --pill-violet-text:#A78BFA; color-scheme: dark; } .mode-light { --bg-base: #F6F7F9; --bg: #F6F7F9; --bg-surface: #FFFFFF; --bg-input: #FFFFFF; --panel: #FFFFFF; --panel-2: #F1F3F5; --border: #E3E6EB; --border-subtle: #ECEEF2; --border-input: #D4D9E0; --text: #1A1D21; --text-primary: #0B0C0E; --text-body: #1A1D21; --text-muted: #5B616B; --muted: #5B616B; --text-faint: #8A909A; --pill-neutral-bg:#EDEFF2; --pill-neutral-text:#5B616B; --pill-info-bg:#E3F0FB; --pill-info-text:#1D6FB8; --pill-warning-bg:#FBF0D5; --pill-warning-text:#946608; --pill-danger-bg:#FBE3E3; --pill-danger-text:#C23B3B; --pill-success-bg:#DCF3E4; --pill-success-text:#1E8A4E; --pill-violet-bg:#ECE7FB; --pill-violet-text:#6D4BD0; color-scheme: light; } /* ---- Accent per TEMA × MODALITÀ ---- */ /* Indigo (predefinito) */ .theme-indigo.mode-dark { --accent:#7F77DD; --accent-hover:#6F66D0; --accent-muted-bg:#26215C; --accent-muted-text:#CECBF6; --accent-bg:#26215C; --accent-text:#CECBF6; } .theme-indigo.mode-light { --accent:#7F77DD; --accent-hover:#6F66D0; --accent-muted-bg:#E7E5FA; --accent-muted-text:#3A348A; --accent-bg:#E7E5FA; --accent-text:#3A348A; } /* Slate (blu acciaio) */ .theme-slate.mode-dark { --accent:#378ADD; --accent-hover:#2D78C8; --accent-muted-bg:#0C447C; --accent-muted-text:#BBD7F5; --accent-bg:#0C447C; --accent-text:#BBD7F5; } .theme-slate.mode-light { --accent:#378ADD; --accent-hover:#2D78C8; --accent-muted-bg:#DCEAFB; --accent-muted-text:#0C447C; --accent-bg:#DCEAFB; --accent-text:#0C447C; } /* Forest (verde discreto) */ .theme-forest.mode-dark { --accent:#1D9E75; --accent-hover:#178A65; --accent-muted-bg:#085041; --accent-muted-text:#A7E8D0; --accent-bg:#085041; --accent-text:#A7E8D0; } .theme-forest.mode-light { --accent:#1D9E75; --accent-hover:#178A65; --accent-muted-bg:#D6F2E7; --accent-muted-text:#085041; --accent-bg:#D6F2E7; --accent-text:#085041; } /* Sunset (ambra caldo — brand Codiva) */ .theme-sunset.mode-dark { --accent:#FF6600; --accent-hover:#E65C00; --accent-muted-bg:#5C2400; --accent-muted-text:#FFD4B8; --accent-bg:#5C2400; --accent-text:#FFD4B8; } .theme-sunset.mode-light { --accent:#FF6600; --accent-hover:#E65C00; --accent-muted-bg:#FFE5D1; --accent-muted-text:#5C2400; --accent-bg:#FFE5D1; --accent-text:#5C2400; } /* ---- Selettore tema (pagina design) ---- */ .theme-switcher { margin-bottom: 18px; } .theme-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .theme-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); cursor: pointer; min-width: 96px; } .theme-card:hover { border-color: var(--accent); } .theme-swatches { display: flex; gap: 3px; } .theme-swatches .sw { width: 18px; height: 18px; border-radius: 4px; } .theme-swatches .sw-bg { background: var(--bg-base); border: 1px solid var(--border); } .theme-card-name { font-size: var(--fs-sm); color: var(--text-body); } .mode-toggle { display: inline-flex; gap: 6px; } /* ---- Pillole (stato / priorità / tag): sfondo scuro saturo + testo chiaro ---- */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; } .pill--neutral { background: var(--pill-neutral-bg); color: var(--pill-neutral-text); } .pill--info { background: var(--pill-info-bg); color: var(--pill-info-text); } .pill--warning { background: var(--pill-warning-bg); color: var(--pill-warning-text); } .pill--danger { background: var(--pill-danger-bg); color: var(--pill-danger-text); } .pill--success { background: var(--pill-success-bg); color: var(--pill-success-text); } .pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); } /* ---- Header pagina compatto ---- */ .page-header { margin-bottom: 18px; } .page-header-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 20px; } .breadcrumb { font-size: var(--fs-xs); color: var(--text-faint); display: flex; gap: 6px; align-items: center; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--text-body); text-decoration: none; } .breadcrumb .sep { color: var(--border-input); } .page-header-actions { display: flex; gap: 8px; align-items: center; } .page-title { font-size: var(--fs-xl); font-weight: 500; color: var(--text-primary); margin: 8px 0 0; line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .metabar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: var(--fs-base); color: var(--text-muted); } .metabar .meta { display: inline-flex; align-items: center; gap: 5px; } .metabar .meta svg { width: 13px; height: 13px; opacity: 0.7; flex-shrink: 0; } .metabar .meta strong { color: var(--text-body); font-weight: 500; } /* ---- Etichetta di sezione minuscola uppercase ---- */ .section-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 20px 0 10px; } /* ---- Layout a due colonne (dettaglio entità) ---- */ .detail-layout { display: grid; grid-template-columns: 1fr 240px; gap: 0; } .detail-main { padding-right: 24px; min-width: 0; } .detail-aside { padding-left: 20px; border-left: 0.5px solid var(--border-subtle); } .detail-prose { font-size: var(--fs-base); color: var(--text-body); line-height: 1.6; } @media (max-width: 860px) { .detail-layout { grid-template-columns: 1fr; } .detail-main { padding-right: 0; } .detail-aside { border-left: none; padding-left: 0; margin-top: 18px; padding-top: 16px; border-top: 0.5px solid var(--border-subtle); } } /* ---- Pannello laterale (sidebar metadati/azioni) ---- */ .side-section { margin-bottom: 16px; } .side-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 6px; } .side-section .side-value { font-size: var(--fs-base); color: var(--text-body); } .side-section select, .side-section input { width: 100%; } .side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } /* ---- Tabella compatta ---- */ .dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .dtable thead th { text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); font-weight: 500; padding: 6px 10px; border-bottom: 0.5px solid var(--border-subtle); } .dtable tbody td { padding: 0 10px; height: 38px; border-bottom: 0.5px solid var(--border-subtle); color: var(--text-body); vertical-align: middle; } .dtable tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } .dtable tbody tr:last-child td { border-bottom: none; } .dtable a { color: var(--text-body); } .dtable a:hover { color: var(--text-primary); } .dtable .col-actions { text-align: right; } .dtable .muted { color: var(--text-muted); } /* ---- Timeline conversazionale ---- */ .timeline { display: flex; flex-direction: column; } .tl-item { display: flex; gap: 10px; padding: 9px 0; } .tl-avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--bg-input); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; flex-shrink: 0; } .tl-icon { width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; } .tl-icon svg { width: 13px; height: 13px; } .tl-body { flex: 1; min-width: 0; } .tl-head { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); } .tl-head .who { color: var(--text-body); font-weight: 500; } .tl-head .when { color: var(--text-faint); } .tl-note { font-size: var(--fs-base); color: var(--text-body); line-height: 1.6; margin-top: 2px; } .tl-note.internal { border-left: 2px solid #E0B341; padding-left: 8px; } .tl-event { font-size: var(--fs-base); color: var(--text-muted); line-height: 1.5; padding-top: 3px; } /* Input "aggiungi nota" inline in fondo allo stream */ .tl-compose { display: flex; gap: 10px; padding-top: 12px; margin-top: 4px; border-top: 0.5px solid var(--border-subtle); } .tl-compose-body { flex: 1; } .tl-compose textarea { width: 100%; background: var(--bg-input); border: 0.5px solid var(--border-input); border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-base); padding: 8px 10px; min-height: 64px; resize: vertical; font-family: inherit; } .tl-compose textarea:focus { outline: none; border-color: var(--accent); } .tl-compose-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .tl-compose-controls label { color: var(--text-muted); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 5px; } /* ---- Pannello generico (superficie) ---- */ .panel { background: var(--bg-surface); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; } /* ---- Metriche compatte (dashboard) ---- */ .metrics-row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; } .metric-c .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .metric-c .value { font-size: 22px; font-weight: 500; color: var(--text-primary); line-height: 1.25; } /* ---- Bottoni outline / block (azioni sidebar) ---- */ .btn-outline { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 6px 11px; background: transparent; border: 0.5px solid var(--border-input); color: var(--text-body); border-radius: var(--radius-sm); font-size: var(--fs-base); cursor: pointer; line-height: 1.3; } .btn-outline:hover { background: var(--bg-input); color: var(--text-primary); text-decoration: none; } .btn-outline svg { width: 13px; height: 13px; } .btn-outline.danger:hover { border-color: #5a3333; color: #F08C8C; } .btn-block { width: 100%; } /* ---- Allineamento modale al design system (niente shadow, bordo 0.5px) ---- */ .modal-dialog { background: var(--bg-surface); border: 0.5px solid var(--border-subtle); box-shadow: none; } .modal-head { border-bottom: 0.5px solid var(--border-subtle); } .modal-head h2 { font-size: var(--fs-lg); font-weight: 500; } /* ---- Tabella con barra integrata: ricerca + filtri nella STESSA barra ---- Un solo bordo attorno a (barra strumenti + tabella): leggono come un'unità. */ .table-frame { border: 0.5px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } .table-tools { display: flex; align-items: stretch; height: 42px; border-bottom: 0.5px solid var(--border-subtle); background: var(--bg-surface); } .tt-search { display: flex; align-items: center; gap: 7px; flex: 1; padding: 0 12px; color: var(--text-faint); } .tt-search svg { width: 14px; height: 14px; flex-shrink: 0; } .tt-search input { flex: 1; background: transparent; border: none; color: var(--text-body); font-size: var(--fs-base); padding: 0; height: 100%; } .tt-search input:focus { outline: none; } .tt-search input::placeholder { color: var(--text-faint); } .tt-filters { display: flex; align-items: stretch; } .tt-filters select { background: transparent; border: none; border-left: 0.5px solid var(--border-subtle); color: var(--text-muted); font-size: var(--fs-sm); padding: 0 30px 0 12px; cursor: pointer; } .tt-filters select:hover { color: var(--text-body); } .tt-filters select:focus { outline: none; color: var(--text-body); } /* Select standalone in stile console */ .ds-select { background: var(--bg-input); border: 0.5px solid var(--border-input); border-radius: var(--radius-sm); color: var(--text-body); font-size: var(--fs-sm); padding: 5px 10px; } .ds-select:focus { outline: none; border-color: var(--accent); } /* Tabella dentro la frame: niente bordo proprio, intestazione a filo della barra */ .table-frame .dtable { border-collapse: collapse; } .table-frame .dtable thead th:first-child, .table-frame .dtable tbody td:first-child { padding-left: 12px; } .table-frame .dtable thead th:last-child, .table-frame .dtable tbody td:last-child { padding-right: 12px; } /* Bottone "dettagli" a fine riga task */ .row-detail { color: var(--text-faint); display: inline-flex; padding: 6px; } .row-detail:hover { color: var(--text-body); text-decoration: none; } /* ---- Mobile: lista task semplificata (solo titolo + dettagli) ---- */ @media (max-width: 720px) { .col-hide-mobile { display: none; } } /* ---- PWA: modalità installata (focus task a tutto schermo) ---- */ @media all and (display-mode: standalone) { /* App focalizzata: niente barra menu, niente sidebar. */ .mobile-topbar { display: none; } .sidebar { display: none; } html, body { height: 100%; overflow: hidden; } .layout { display: block; height: 100%; } .col-hide-mobile { display: none; } .page-header { margin-bottom: 10px; } .page-header .breadcrumb { display: none; } /* La pagina riempie lo schermo; scrolla SOLO la lista dei task. */ .content { height: 100%; max-width: none; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0) + 12px) 12px 0; overflow: hidden; } #tasks-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tasks-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px); } /* Nascondi filtri e sezione ticket. */ .tasks-filters, .tasks-tickets { display: none; } .dtable tbody td { height: 46px; } /* "Aggiungi" e "Dettagli": solo icona (nascondi la label, dimensione invariata). */ .task-quickadd { padding: 8px 10px; margin-bottom: 10px; } .task-quickadd .btn-label { display: none; } .task-quickadd .btn, .task-quickadd .btn-outline { padding: 9px 12px; } /* Placeholder del campo nuovo task: sparisce appena selezionato. */ .task-quickadd input:focus::placeholder { color: transparent; } /* "Risolti oggi": sul mobile è un menu a compressione. */ .resolved-desktop { display: none; } .resolved-mobile { display: block; } } /* Menu a compressione "Risolti oggi" (visibile solo in modalità app). */ .resolved-mobile { display: none; } .resolved-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin: 14px 0 0; padding: 4px 0; } .resolved-summary::-webkit-details-marker { display: none; } .resolved-mobile[open] .resolved-summary { color: var(--text-muted); } /* ============================================================ Impersonation ("vedi come" — solo global_admin) ============================================================ */ /* Barra globale di avviso quando l'impersonation è attiva. */ .impersonation-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, #7c3aed, #9333ea); color: #fff; padding: 7px 16px; font-size: var(--fs-sm, 0.85rem); } .impersonation-bar strong { font-weight: 700; } .impersonation-bar button { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; } .impersonation-bar button:hover { background: rgba(255, 255, 255, 0.3); } /* Blocco utente in fondo alla sidebar: cliccabile per admin/impersonation. */ .sidebar-user.user-switch { position: relative; } .user-trigger { display: block; width: 100%; text-align: left; cursor: pointer; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 8px; padding: 0.55rem 0.7rem; color: inherit; margin-bottom: 0.6rem; } .user-trigger:hover { border-color: var(--accent, #3b82f6); } .user-trigger .email { color: var(--text, #e8eaed); word-break: break-all; font-size: 0.85rem; } .user-trigger .role { display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.5rem; background: var(--panel, #131517); border-radius: 999px; font-size: 0.72rem; color: var(--muted, #9aa0a6); } .user-trigger .switch-hint { display: block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--accent, #3b82f6); } /* Stato "sto impersonando" nella sidebar. */ .sidebar-user.impersonating .user-trigger { border-color: #9333ea; } .imp-flag { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #c084fc; margin-bottom: 0.2rem; } .imp-back { display: block; margin-top: 0.45rem; font-size: 0.76rem; color: #c084fc; font-weight: 600; } /* Tendina di scelta utente (si apre verso l'alto, sopra il trigger). */ .imp-panel { display: none; } .user-switch.open .imp-panel { display: block; position: absolute; bottom: 100%; left: 0; right: 0; z-index: 50; margin-bottom: 6px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); overflow: hidden; } .imp-head { padding: 0.6rem; border-bottom: 1px solid var(--border, #2a2d31); } .imp-title { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted, #9aa0a6); margin-bottom: 0.4rem; } .imp-head input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.55rem; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text, #e8eaed); font-size: 0.85rem; } .imp-list { list-style: none; margin: 0; padding: 0.3rem; max-height: 320px; overflow-y: auto; } .imp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: 6px; padding: 0.45rem 0.5rem; color: inherit; } .imp-item:hover { background: var(--panel-2, #1a1c1f); } .imp-item-text { display: flex; flex-direction: column; min-width: 0; } .imp-item-name { color: var(--text, #e8eaed); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imp-item-email { color: var(--muted, #9aa0a6); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .imp-item-role { flex-shrink: 0; font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--panel-2, #1a1c1f); color: var(--muted, #9aa0a6); text-transform: capitalize; } .imp-item-role.role-global_admin { background: rgba(147, 51, 234, 0.18); color: #c084fc; } .imp-item-role.role-support_agent { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .imp-item-role.role-client_user { background: rgba(34, 197, 94, 0.16); color: #86efac; } .imp-empty { padding: 0.7rem; color: var(--muted, #9aa0a6); font-size: 0.82rem; text-align: center; } /* ============================================================ Notifiche (badge in sidebar + centro notifiche) ============================================================ */ .nav-notif { display: flex; align-items: center; justify-content: space-between; } .nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; text-align: center; font-size: 0.7rem; font-weight: 700; border-radius: 999px; background: #ef4444; color: #fff; } .notif-list { display: flex; flex-direction: column; gap: 6px; } .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border, #2a2d31); border-radius: 10px; background: var(--panel, #131517); color: inherit; text-decoration: none; } .notif-item:hover { border-color: var(--accent, #3b82f6); text-decoration: none; } .notif-item.unread { background: var(--panel-2, #1a1c1f); border-color: rgba(59, 130, 246, 0.4); } .notif-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; background: transparent; } .notif-item.unread .notif-dot { background: var(--accent, #3b82f6); } .notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .notif-subject { color: var(--text, #e8eaed); font-weight: 600; font-size: 0.9rem; } .notif-body { color: var(--muted, #9aa0a6); font-size: 0.82rem; } .notif-when { color: var(--text-faint, #6b7178); font-size: 0.72rem; white-space: nowrap; flex-shrink: 0; } .notif-empty { padding: 2rem; text-align: center; color: var(--muted, #9aa0a6); } /* ============================================================ Configurazione (form integrazioni) + flash ============================================================ */ .flash { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-size: 0.88rem; } .flash--ok { background: rgba(34, 197, 94, 0.14); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.35); } .flash--err { background: rgba(239, 68, 68, 0.14); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.35); } .config-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin-top: 1rem; } .config-form > label { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--text-muted, #c4c8cd); } .config-form input[type="text"], .config-form input[type="password"] { width: 100%; box-sizing: border-box; padding: 9px 11px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font-size: 0.9rem; } .config-form input:focus { outline: none; border-color: var(--accent, #3b82f6); } .config-form .config-check { flex-direction: row; align-items: center; gap: 8px; } .config-form .config-check input { width: auto; } .config-actions { margin-top: 4px; } /* ============================================================ Treenotes — due pannelli a tutto schermo + albero ridimensionabile ============================================================ */ .content--full { max-width: none; padding: 0; height: 100vh; overflow: hidden; } .tn-app { display: flex; height: 100%; min-height: 0; background: var(--bg-base, #0E0F11); } /* Pannello sinistro (albero) */ .tn-side { width: 300px; min-width: 180px; max-width: 640px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; background: var(--panel, #131517); } .tn-side-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; border-bottom: 1px solid var(--border, #2a2d31); } .tn-side-title { font-weight: 700; font-size: .95rem; color: var(--text, #e8eaed); } .tn-add > summary.tn-add-btn { list-style: none; cursor: pointer; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text-muted, #c4c8cd); } .tn-add > summary.tn-add-btn::-webkit-details-marker { display: none; } .tn-add > summary.tn-add-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); } .tn-add-form { position: absolute; top: calc(100% - 2px); right: 8px; z-index: 30; width: 250px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31); border-radius: 10px; padding: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } .tn-add-form label { display: block; font-size: .72rem; color: var(--muted, #9aa0a6); margin-bottom: 4px; } .tn-add-form select, .tn-add-form input { width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 8px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text, #e8eaed); font-size: .85rem; } .tn-add-actions { display: flex; gap: 6px; } .tn-tree-scroll { flex: 1; overflow-y: auto; padding: 8px 6px 24px; min-height: 0; } .tn-tree { list-style: none; margin: 0; padding-left: 0; } .tn-tree .tn-tree { padding-left: 14px; } .tn-tree li { margin: 1px 0; } .tn-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; color: var(--text-muted, #c4c8cd); font-size: .88rem; user-select: none; } .tn-row:hover { background: var(--panel-2, #1a1c1f); } summary.tn-row { list-style: none; } summary.tn-row::-webkit-details-marker { display: none; } .tn-link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; color: inherit; text-decoration: none; } .tn-link:hover { text-decoration: none; } .tn-caret { display: inline-flex; flex-shrink: 0; color: var(--text-faint, #6b7178); transition: transform .12s ease; } .tn-folder[open] > summary .tn-caret { transform: rotate(90deg); } .tn-caret--leaf { width: 13px; } .tn-ico { display: inline-flex; flex-shrink: 0; color: var(--text-faint, #6b7178); } .tn-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tn-note.sel { background: var(--accent, #3b82f6); } .tn-note.sel .tn-link, .tn-note.sel .tn-ico, .tn-note.sel .tn-caret { color: #fff; } .tn-del { display: inline-flex; margin-left: auto; } .tn-del button { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px; color: var(--text-faint, #6b7178); opacity: 0; display: inline-flex; } .tn-row:hover .tn-del button { opacity: .7; } .tn-del button:hover { opacity: 1; color: #fca5a5; } /* Maniglia di ridimensionamento */ .tn-resizer { width: 6px; flex-shrink: 0; cursor: col-resize; } .tn-resizer::before { content: ""; display: block; width: 1px; height: 100%; margin: 0 auto; background: var(--border, #2a2d31); transition: background .12s, width .12s; } .tn-resizer:hover::before { width: 3px; background: var(--accent, #3b82f6); } /* Pannello destro (editor): a tutto schermo, sfondo di sistema (scuro) */ .tn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } .tn-doc { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 22px 30px 0; } .tn-title { width: 100%; border: none; background: transparent; color: var(--text, #e8eaed); font-size: 1.9rem; font-weight: 700; padding: 2px 0; outline: none; } .tn-title::placeholder { color: var(--text-faint, #6b7178); } .tn-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-faint, #6b7178); font-size: .8rem; margin: 8px 0 14px; } .tn-save { margin-left: auto; } /* Editor Quill riempie l'altezza e usa il fondo scuro dell'app */ #editor.tn-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 0 0 8px 8px; } #editor .ql-editor { flex: 1; min-height: 0; overflow-y: auto; color: var(--text, #e8eaed); } .ql-editor.ql-blank::before { color: var(--text-faint, #6b7178); font-style: normal; } /* Barra comandi CHIARA (stacca sul fondo nero); icone scure, selezione in accento */ .ql-toolbar.ql-snow { background: #eef0f3; border-color: var(--border, #2a2d31); border-radius: 8px 8px 0 0; } .ql-container.ql-snow { border-color: var(--border, #2a2d31); background: var(--bg-base, #0E0F11); } .ql-snow.ql-toolbar .ql-stroke { stroke: #41464d; } .ql-snow.ql-toolbar .ql-fill, .ql-snow.ql-toolbar .ql-stroke.ql-fill { fill: #41464d; } .ql-snow.ql-toolbar .ql-picker { color: #41464d; } .ql-snow .ql-picker-options { background: #fff; border-color: #d1d5db; color: #41464d; } /* Hover + attivo/selezionato → colore accento */ .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-picker-item:hover .ql-stroke { stroke: var(--accent, #3b82f6); } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--accent, #3b82f6); } .ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-picker-label:hover, .ql-snow .ql-picker-label.ql-active, .ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--accent, #3b82f6); } .ql-snow a { color: var(--accent, #3b82f6); } .ql-editor blockquote { border-left-color: var(--border, #2a2d31); color: var(--text-muted, #c4c8cd); } .ql-editor pre.ql-syntax { background: #0a0b0d; color: #e8eaed; border: 1px solid var(--border, #2a2d31); } /* Bottoni custom: tabella (▦) e cattura schermo (📷) */ .ql-snow.ql-toolbar button.ql-table::after { content: "\25A6"; font-size: 15px; line-height: 1; color: #41464d; } .ql-snow.ql-toolbar button.ql-table:hover::after { color: var(--accent, #3b82f6); } .ql-snow.ql-toolbar button.ql-screenshot::after { content: "\1F4F7"; font-size: 14px; line-height: 1; } .ql-snow.ql-toolbar button.ql-screenshot:hover { filter: brightness(1.15); } /* Overlay di selezione area per la cattura schermo */ .tn-cap-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; } .tn-cap-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--panel, #131517); border-bottom: 1px solid var(--border, #2a2d31); color: var(--text-muted, #c4c8cd); font-size: .85rem; } .tn-cap-bar span { margin-right: auto; } .tn-cap-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; } .tn-cap-imgwrap { position: relative; display: inline-block; line-height: 0; cursor: crosshair; } .tn-cap-img { max-width: 95vw; max-height: 80vh; display: block; user-select: none; -webkit-user-drag: none; } .tn-cap-sel { position: absolute; border: 2px dashed var(--accent, #3b82f6); background: rgba(59, 130, 246, 0.18); pointer-events: none; } /* ============================================================ Treenotes v2 — albero (proprietà, condivisione, drag & drop) ============================================================ */ .tn-add-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border, #2a2d31); border-radius: 6px; background: none; cursor: pointer; color: var(--text-muted, #c4c8cd); } .tn-add-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); } .tn-search { position: relative; padding: 8px 10px; border-bottom: 1px solid var(--border, #2a2d31); } .tn-search-ico { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); color: var(--text-faint, #6b7178); display: inline-flex; } .tn-search input { width: 100%; box-sizing: border-box; padding: 7px 9px 7px 30px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font-size: .85rem; } .tn-search input:focus { border-color: var(--accent, #3b82f6); outline: none; } .tn-children { list-style: none; margin: 0; padding-left: 14px; } .tn-item.tn-collapsed > .tn-children { display: none; } .tn-item[data-kind="folder"]:not(.tn-collapsed) > .tn-row .tn-caret { transform: rotate(90deg); } .tn-row .tn-caret { cursor: pointer; } .tn-ico--shared { color: var(--accent, #3b82f6); } .tn-acts { display: inline-flex; gap: 2px; margin-left: auto; } .tn-act { background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px; color: var(--text-faint, #6b7178); opacity: 0; display: inline-flex; } .tn-row:hover .tn-act { opacity: .7; } .tn-act:hover { opacity: 1; color: var(--text, #e8eaed); background: var(--panel-2, #1a1c1f); } .tn-act--del:hover { color: #fca5a5; } .tn-rename { flex: 1; min-width: 0; background: var(--panel-2, #1a1c1f); border: 1px solid var(--accent, #3b82f6); border-radius: 5px; color: var(--text, #e8eaed); font: inherit; font-size: .88rem; padding: 2px 6px; outline: none; } .tn-empty-msg { color: var(--text-faint, #6b7178); font-size: .84rem; padding: 12px; } /* Drag & drop: separatori virtuali */ .tn-item.tn-dragging > .tn-row { opacity: .45; } .tn-item.tn-dl-before > .tn-row { box-shadow: inset 0 2px 0 0 var(--accent, #3b82f6); } .tn-item.tn-dl-after > .tn-row { box-shadow: inset 0 -2px 0 0 var(--accent, #3b82f6); } .tn-item.tn-dl-into > .tn-row { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: 6px; background: rgba(59, 130, 246, 0.12); } /* Menù contestuale "+" */ .tn-menu { position: fixed; z-index: 1200; min-width: 160px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31); border-radius: 8px; padding: 5px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .tn-menu-item { display: flex; gap: 8px; align-items: center; width: 100%; background: none; border: none; color: var(--text-muted, #c4c8cd); padding: 7px 10px; border-radius: 6px; font: inherit; font-size: .85rem; cursor: pointer; text-align: left; } .tn-menu-item:hover { background: var(--panel-2, #1a1c1f); color: var(--text, #e8eaed); } /* Modale condivisione */ .tn-share-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin-bottom: 8px; } .tn-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px; } .tn-share-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .tn-share-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: var(--text-muted, #c4c8cd); flex-shrink: 0; } .tn-share-name { color: var(--text, #e8eaed); font-size: .86rem; } .tn-share-role { font-size: .72rem; } /* ---- Editor: barra ridisegnata (font, paragrafo, data, incolla) ---- */ /* Font di default dell'editor = font dell'app (sovrascrive il default di Quill) */ .ql-editor, .tn-title { font-family: var(--font); } .ql-editor .ql-font-sans { font-family: var(--font); } .ql-editor .ql-font-serif { font-family: Georgia, "Times New Roman", serif; } .ql-editor .ql-font-mono { font-family: "Courier New", monospace; } .ql-editor .ql-font-arial { font-family: Arial, Helvetica, sans-serif; } .ql-editor .ql-font-georgia { font-family: Georgia, serif; } .ql-editor .ql-font-times { font-family: "Times New Roman", Times, serif; } .ql-snow .ql-picker.ql-font { width: 92px; } .ql-snow .ql-picker.ql-font .ql-picker-label::before { content: "Carattere"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans"]::before { content: "Sans"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "Serif"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="mono"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="mono"]::before { content: "Mono"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: "Arial"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: "Georgia"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before { content: "Times"; } /* dimensione, interlinea, spaziatura: etichetta = valore (data-value) */ .ql-snow .ql-picker.ql-size { width: 64px; } .ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "Dim."; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before { content: attr(data-value); } .ql-snow .ql-picker.ql-lineheight, .ql-snow .ql-picker.ql-spacebefore, .ql-snow .ql-picker.ql-spaceafter { width: 84px; } .ql-snow .ql-picker.ql-lineheight .ql-picker-label::before { content: "Interlinea"; } .ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]::before { content: "↕ " attr(data-value); } .ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value]::before { content: attr(data-value); } .ql-snow .ql-picker.ql-spacebefore .ql-picker-label::before { content: "Sp. sopra"; } .ql-snow .ql-picker.ql-spacebefore .ql-picker-label[data-value]::before { content: "⤒ " attr(data-value); } .ql-snow .ql-picker.ql-spacebefore .ql-picker-item[data-value]::before { content: attr(data-value); } .ql-snow .ql-picker.ql-spaceafter .ql-picker-label::before { content: "Sp. sotto"; } .ql-snow .ql-picker.ql-spaceafter .ql-picker-label[data-value]::before { content: "⤓ " attr(data-value); } .ql-snow .ql-picker.ql-spaceafter .ql-picker-item[data-value]::before { content: attr(data-value); } .ql-snow.ql-toolbar button.ql-insertdate::after { content: "\1F4C5"; font-size: 14px; line-height: 1; } .ql-snow.ql-toolbar button.ql-pasteformatted::after { content: "\1F4CB"; font-size: 14px; line-height: 1; } .ql-snow.ql-toolbar button.ql-insertdate:hover, .ql-snow.ql-toolbar button.ql-pasteformatted:hover { filter: brightness(1.15); } .tn-paste-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent, #3b82f6); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3000; } .tn-paste-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ Campanella + centro notifiche ============================================================ */ .sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 1.3rem; } .sidebar-top .brand { margin-bottom: 0; } .bell { position: relative; } .bell-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--text-muted, #c4c8cd); padding: 5px; border-radius: 7px; display: inline-flex; } .bell-btn:hover { color: var(--text, #e8eaed); background: var(--panel-2, #1a1c1f); } .bell-badge { position: absolute; top: -3px; right: -3px; } .bell-badge .nav-badge { font-size: .62rem; min-width: 15px; height: 15px; line-height: 15px; padding: 0 4px; } .bell-panel { display: none; } .bell.open .bell-panel { display: block; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 300px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31); border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); overflow: hidden; } .bell-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border, #2a2d31); font-weight: 700; font-size: .85rem; color: var(--text, #e8eaed); } .bell-readall { background: none; border: none; color: var(--accent, #3b82f6); font-size: .74rem; cursor: pointer; } .bell-list { max-height: 360px; overflow-y: auto; } .bell-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--border, #2a2d31); color: inherit; text-decoration: none; } .bell-item:hover { background: var(--panel-2, #1a1c1f); text-decoration: none; } .bell-item.unread { background: rgba(59, 130, 246, 0.09); } .bell-subject { color: var(--text, #e8eaed); font-weight: 600; font-size: .82rem; } .bell-body { color: var(--muted, #9aa0a6); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bell-when { color: var(--text-faint, #6b7178); font-size: .68rem; } .bell-empty { padding: 18px; text-align: center; color: var(--muted, #9aa0a6); font-size: .82rem; } .bell-all { display: block; text-align: center; padding: 9px; font-size: .8rem; color: var(--accent, #3b82f6); text-decoration: none; } .bell-all:hover { background: var(--panel-2, #1a1c1f); text-decoration: none; } /* Profilo + risposte predefinite (form) */ .profile-form, .canned-form { display: flex; flex-direction: column; gap: 12px; max-width: 620px; } .profile-form label, .canned-form label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--text-muted, #c4c8cd); } .profile-form textarea, .canned-form textarea, .canned-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 11px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font: inherit; } .tg-status { padding: 8px 12px; border-radius: 8px; font-size: .85rem; display: inline-block; } .tg-status.ok { background: rgba(34, 197, 94, 0.14); color: #86efac; } .tg-status.ko { background: var(--panel-2, #1a1c1f); color: var(--muted, #9aa0a6); } .canned-pick { margin-bottom: 6px; max-width: 340px; padding: 6px 9px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text-muted, #c4c8cd); font-size: .82rem; } /* Numero ticket + allegati */ .ticket-num { color: var(--text-faint, #6b7178); font-weight: 700; } .att-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; font-size: .84rem; } .att-row a { display: inline-flex; align-items: center; gap: 5px; word-break: break-all; } .att-del { background: none; border: none; color: var(--text-faint, #6b7178); cursor: pointer; padding: 2px; display: inline-flex; } .att-del:hover { color: #fca5a5; } .att-upload { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .att-upload input[type="file"], .note-files { font-size: .78rem; color: var(--text-muted, #c4c8cd); } .note-files { display: block; margin-top: 6px; } .link-add { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .link-add select, .link-add input { width: 100%; box-sizing: border-box; } /* Etichette (tag) */ .tag-list { margin-bottom: 8px; } .tag-pill { display: inline-flex; align-items: center; gap: 5px; margin: 0 4px 4px 0; padding: 2px 9px; border-radius: 999px; font-size: .76rem; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); color: var(--text-muted, #c4c8cd); } .tag-pill form, .tag-pill button { display: inline; } .tag-pill button { background: none; border: none; color: var(--text-faint, #6b7178); cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; } .tag-pill button:hover { color: #fca5a5; } .tag-pill-sm { display: inline-block; margin: 0 3px 2px 0; padding: 1px 7px; border-radius: 999px; font-size: .7rem; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); color: var(--text-muted, #c4c8cd); } /* Barra azioni massive */ .bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border, #2a2d31); background: var(--panel-2, #1a1c1f); } .bulk-count { font-size: .78rem; color: var(--text-faint, #6b7178); margin-right: auto; } .bulk-bar select, .bulk-bar input { padding: 5px 8px; background: var(--panel, #131517); border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text, #e8eaed); font-size: .82rem; } /* Campi personalizzati (form nel dettaglio) */ .cf-form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; margin-bottom: 18px; } .cf-row { display: flex; flex-direction: column; gap: 3px; } .cf-label { font-size: .8rem; color: var(--text-muted, #c4c8cd); } .cf-form input[type="text"], .cf-form input[type="number"], .cf-form input[type="date"], .cf-form select, .cf-form textarea { padding: 6px 9px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 6px; color: var(--text, #e8eaed); font: inherit; max-width: 360px; } /* Tabelle nel contenuto su tema scuro */ .ql-editor table { border-collapse: collapse; } .ql-editor td, .ql-editor th { border: 1px solid var(--border, #2a2d31); padding: 5px 9px; min-width: 44px; } .tn-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; } .tn-empty svg { width: 30px; height: 30px; opacity: .35; margin-bottom: 8px; } /* ============================================================================ NAVIGAZIONE v2 — sidebar 3 sezioni, compressa/espansa, flyout, identità+popover ============================================================================ */ .layout { display: flex; min-height: 100vh; background: var(--bg-base); } .sidebar { width: 240px; flex-shrink: 0; box-sizing: border-box; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 0; transition: width .14s ease; } body.sidebar-collapsed .sidebar { width: 60px; } .sb-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 12px 10px; } .sb-brand { font-weight: 700; font-size: 1.25rem; color: var(--text); white-space: nowrap; text-decoration: none; } .sb-brand span { color: var(--accent); } .sb-head-actions { display: flex; align-items: center; gap: 4px; } .sb-collapse, .bell-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 5px; border-radius: 7px; display: inline-flex; } .sb-collapse:hover, .bell-btn:hover { color: var(--text); background: var(--panel-2); } body.sidebar-collapsed .sb-brand span { display: none; } body.sidebar-collapsed .sb-collapse { display: none; } body.sidebar-collapsed .sb-head { justify-content: center; padding: 14px 0 10px; } body.sidebar-collapsed .sb-head-actions { flex-direction: column; } .sb-nav { flex: 1; overflow-y: auto; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; } .sb-section { display: flex; flex-direction: column; } .sb-section + .sb-section { margin-top: 6px; padding-top: 6px; } .sb-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 6px 10px 4px; font-weight: 600; } .sb-microtitle { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 8px 10px 2px; opacity: .8; } .sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; color: var(--text-muted); font-size: var(--fs-base); text-decoration: none; position: relative; white-space: nowrap; } .sb-item:hover { background: var(--panel-2); color: var(--text); text-decoration: none; } .sb-item.is-active { background: var(--accent-muted-bg); color: var(--accent-muted-text); } .sb-item.is-active .sb-ic { color: var(--accent); } .sb-ic { display: inline-flex; flex-shrink: 0; color: var(--text-faint); } .sb-item:hover .sb-ic { color: currentColor; } .sb-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; } .sb-section-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 6px 10px 4px; color: var(--text-faint); } .sb-section-toggle:hover { color: var(--text-muted); } .sb-section-toggle .sb-section-label { padding: 0; flex: 1; text-align: left; } .sb-group-ic { display: none; flex-shrink: 0; } .sb-chevron { display: inline-flex; transition: transform .12s; } .sb-collapsible.is-closed:not(.force-open) .sb-chevron { transform: rotate(-90deg); } .sb-collapsible.is-closed:not(.force-open) .sb-section-items { display: none; } .sb-section-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); } .sb-badge-slot { margin-left: auto; } .nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; height: 18px; line-height: 18px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-text); } .nav-badge.is-urgent { background: var(--danger); color: #fff; } body.sidebar-collapsed .sb-section-label, body.sidebar-collapsed .sb-microtitle, body.sidebar-collapsed .sb-lbl, body.sidebar-collapsed .sb-chevron, body.sidebar-collapsed .sb-section-items, body.sidebar-collapsed .sb-user-meta, body.sidebar-collapsed .sb-user-chevron { display: none; } body.sidebar-collapsed .sb-item { justify-content: center; padding: 8px; } body.sidebar-collapsed .sb-badge-slot { position: absolute; top: 3px; right: 7px; margin: 0; } body.sidebar-collapsed .sb-badge-slot .nav-badge { width: 7px; height: 7px; min-width: 0; padding: 0; font-size: 0; color: transparent; } body.sidebar-collapsed .sb-section + .sb-section { border-top: 1px solid var(--border); } body.sidebar-collapsed .sb-section-toggle { justify-content: center; padding: 8px; } body.sidebar-collapsed .sb-group-ic { display: inline-flex; color: var(--text-faint); } body.sidebar-collapsed .sb-section-toggle .sb-section-label { display: none; } body.sidebar-collapsed .sb-section-dot { position: absolute; top: 4px; right: 12px; } .sb-flyout { display: none; } body.sidebar-collapsed .sb-collapsible { position: relative; } body.sidebar-collapsed .sb-collapsible.flyout-open .sb-flyout { display: flex; flex-direction: column; gap: 2px; position: absolute; left: 100%; top: 0; z-index: 80; min-width: 210px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.4); padding: 8px; margin-left: 4px; } .sb-flyout .sb-item { color: var(--text-muted); } .sb-flyout-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 4px 8px 2px; } .sb-user { position: relative; border-top: 1px solid var(--border); padding: 8px; } .sb-user-btn { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 9px; color: inherit; text-align: left; } .sb-user-btn:hover { background: var(--panel-2); } .sb-avatar { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-muted-bg); color: var(--accent-muted-text); font-size: 12px; font-weight: 600; } .sb-avatar img { width: 100%; height: 100%; object-fit: cover; } .sb-avatar-lg { width: 40px; height: 40px; font-size: 14px; } .sb-user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sb-user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-user-role { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-user-chevron { color: var(--text-faint); flex-shrink: 0; } body.sidebar-collapsed .sb-user-btn { justify-content: center; padding: 6px; } .sb-intro-dot { display: none; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 999px; background: var(--accent); animation: sb-pulse 1.6s infinite; } .sb-user.has-intro .sb-intro-dot { display: block; } @keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(127,119,221,.5); } 70% { box-shadow: 0 0 0 8px rgba(127,119,221,0); } 100% { box-shadow: 0 0 0 0 rgba(127,119,221,0); } } .sb-popover { position: absolute; bottom: calc(100% + 6px); left: 8px; right: 8px; z-index: 90; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); padding: 8px; min-width: 240px; } body.sidebar-collapsed .sb-popover { left: 8px; right: auto; width: 250px; } .sb-pop-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .sb-pop-name { font-size: 13px; font-weight: 600; color: var(--text); } .sb-pop-email { font-size: 11px; color: var(--text-muted); } .sb-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 7px; color: var(--text-body); font-size: 13px; text-decoration: none; text-align: left; } .sb-pop-item:hover { background: var(--panel-2); text-decoration: none; } .sb-pop-item.danger { color: #fca5a5; } .sb-pop-item.highlight { color: var(--accent-muted-text); background: var(--accent-muted-bg); } .sb-pop-sep { height: 1px; background: var(--border); margin: 6px 0; } .sb-pop-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; } .sb-pop-swatches { display: flex; gap: 6px; } .sb-pop-sw { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; } .sb-pop-sw.is-active { border-color: var(--text); } .sb-pop-sw.sw-indigo { background: #7F77DD; } .sb-pop-sw.sw-slate { background: #378ADD; } .sb-pop-sw.sw-forest { background: #1D9E75; } .sb-pop-sw.sw-sunset { background: #FF6600; } .sb-pop-modetoggle { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; color: var(--text-muted); font-size: 11px; cursor: pointer; } .sb-imp-panel:not(:empty) { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; max-height: 280px; overflow-y: auto; } .mobile-topbar { display: none; } .sb-backdrop { display: none; } @media (max-width: 1023px) { .mobile-topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 70; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border); } .mobile-topbar .brand { font-weight: 700; font-size: 1.1rem; color: var(--text); flex: 1; text-decoration: none; } .mobile-topbar .brand span { color: var(--accent); } .mt-menu, .mt-bell { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: inline-flex; position: relative; } .layout { display: block; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 95; width: 260px; transform: translateX(-100%); transition: transform .18s ease; } body.sidebar-collapsed .sidebar { width: 260px; } body.sidebar-open .sidebar { transform: translateX(0); } body.sidebar-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; } body.sidebar-collapsed .sb-lbl, body.sidebar-collapsed .sb-section-label, body.sidebar-collapsed .sb-section-items, body.sidebar-collapsed .sb-user-meta, body.sidebar-collapsed .sb-user-chevron, body.sidebar-collapsed .sb-chevron { display: revert; } body.sidebar-collapsed .sb-item { justify-content: flex-start; padding: 7px 10px; } .content { padding: 1.25rem 1rem; } } .density-compatta .content { padding: 1.4rem 1.6rem; } .density-compatta .sb-item { padding: 5px 10px; } .density-compatta .dtable tbody td { height: 38px; } .density-compatta .page-header { margin-bottom: 12px; } /* ---- Pagina profilo ---- */ .prof-layout { display: flex; gap: 24px; align-items: flex-start; } .prof-nav { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 1rem; } .prof-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 7px; color: var(--text-muted); font-size: var(--fs-base); } .prof-nav-item:hover { background: var(--panel-2); color: var(--text); } .prof-nav-item.is-active { background: var(--accent-muted-bg); color: var(--accent-muted-text); } .prof-nav-item.danger { color: var(--text-faint); } .prof-content { flex: 1; min-width: 0; max-width: 640px; } .prof-content h2 { font-size: 1rem; margin: 1.4rem 0 .6rem; } .prof-content h2:first-child { margin-top: 0; } .prof-avatar-row { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; } .prof-avatar-lg { width: 96px; height: 96px; font-size: 30px; } .prof-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .prof-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: .82rem; padding: 0; } .prof-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .prof-toggle { flex-direction: row !important; align-items: center; gap: 8px; } .prof-toggle input { width: auto; } .prof-info-box { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-size: .85rem; } .prof-segment { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .prof-segment button { background: var(--panel); border: none; padding: 7px 16px; cursor: pointer; color: var(--text-muted); font-size: .85rem; border-right: 1px solid var(--border); } .prof-segment button:last-child { border-right: none; } .prof-segment button.is-active { background: var(--accent); color: #fff; } .prof-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 460px; } .prof-theme-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: var(--panel); border: 2px solid var(--border); border-radius: 10px; cursor: pointer; font-size: .8rem; color: var(--text-muted); } .prof-theme-card.is-active { border-color: var(--accent); color: var(--text); } .prof-danger-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); } @media (max-width: 720px) { .prof-layout { flex-direction: column; } .prof-nav { width: 100%; flex-direction: row; overflow-x: auto; position: static; } .prof-grid2 { grid-template-columns: 1fr; } } /* ===== Progetti & board kanban ===== */ .proj-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .proj-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .proj-actions { display: flex; gap: 10px; align-items: center; } .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .view-toggle a { padding: 5px 12px; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; } .view-toggle a.active { background: var(--accent-muted-bg); color: var(--accent-muted-text); } .board-layout { display: flex; gap: 16px; align-items: flex-start; } .board-main { flex: 1; min-width: 0; } .kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; } .kb-col { flex: 1 0 280px; max-width: 360px; background: var(--panel-2, var(--panel)); border: 1px solid var(--border); border-radius: 12px; padding: 8px; } .kb-col-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); padding: 4px 6px 8px; display: flex; gap: 6px; align-items: center; } .kb-count { background: var(--border); color: var(--text-muted); border-radius: 10px; padding: 0 7px; font-size: .72rem; } .kb-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 24px; } .kb-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; cursor: grab; } .kb-card:active { cursor: grabbing; } .kb-ghost { opacity: .4; } .kb-card-title, .kb-card a.kb-card-title { display: block; font-weight: 600; color: var(--text); text-decoration: none; margin-bottom: 6px; } .kb-meta { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: 4px; } .kb-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); } .macro-card.is-done { opacity: .6; } .macro-card.is-done .kb-card-title { color: var(--text-muted); } .done-check { color: var(--ok, #1d9e75); margin-right: 4px; } .progress-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin: 4px 0; } .progress-bar.mini { display: inline-block; width: 80px; vertical-align: middle; margin: 0 6px 0 0; } .progress-bar > span { display: block; height: 100%; background: var(--accent); } .checklist { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .checklist li, .checklist-more > div { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); } .checklist li.is-done > span, .checklist-more > div.is-done > span { text-decoration: line-through; color: var(--text-faint); } .checklist input[type=checkbox] { width: auto; } .checklist-add input, .kb-add-macro input { width: 100%; margin-top: 6px; font-size: var(--fs-sm); padding: 5px 8px; } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: var(--fs-sm); padding: 0; } .proj-tag { font-size: .7rem; color: var(--accent); text-decoration: none; margin-left: 6px; white-space: nowrap; } .assignees { display: inline-flex; gap: 2px; } .mini-avatar { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-muted-bg); color: var(--accent-muted-text); font-size: .62rem; font-weight: 600; } @media (max-width: 900px) { .board-layout { flex-direction: column; } .board-layout .detail-aside { width: 100%; } } /* Board a tutta larghezza: 3 colonne 1fr, niente scroll orizzontale a desktop */ .kanban.kanban--board { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; align-items: start; } .kanban.kanban--board .kb-col { flex: initial; max-width: none; } @media (max-width: 760px) { .kanban.kanban--board { grid-template-columns: 1fr; } } /* Informazioni vitali (riquadri di sola lettura sotto l'header del cliente) */ .vital-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; } .vital-c { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .vital-c .vital-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .vital-c .vital-value { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 2px; } .vital-c a { color: inherit; text-decoration: none; } .vital-c .vital-sub { font-size: var(--fs-sm); color: var(--text-muted); } @media (max-width: 760px) { .vital-row { grid-template-columns: 1fr; } } /* Avatar membri sovrapposti nell'header */ .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack .mini-avatar { margin-left: -6px; border: 2px solid var(--panel); } .avatar-stack .mini-avatar:first-child { margin-left: 0; } /* ===== Drawer metadati (componente condiviso) ===== */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 90; opacity: 0; transition: opacity .2s ease; } .drawer-overlay.is-open { opacity: 1; } .drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 384px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--border); z-index: 91; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease; box-shadow: -10px 0 28px rgba(0,0,0,.22); } .drawer.is-open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .drawer-title { font-size: 1rem; font-weight: 600; margin: 0; } .drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; } .drawer-close:hover { background: var(--accent-muted-bg); color: var(--text); } .drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; } .drawer-body .field { margin-bottom: 12px; } .drawer-group { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 12px 0; } .drawer-group > .drawer-group-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; } .drawer-foot { margin-top: 14px; } .drawer-danger { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 14px 16px; } .drawer-danger .drawer-danger-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 6px; } body.drawer-lock { overflow: hidden; } @media (max-width: 640px) { .drawer { width: 100vw; max-width: 100vw; } } /* ============================================================ Comunicazioni — drawer lettura + risposta ============================================================ */ #comm-drawer { width: 680px; } .comm-row:hover td { background: var(--panel-2, #1a1c1f); } .comm-subject { font-size: 1.15rem; font-weight: 700; color: var(--text, #e8eaed); line-height: 1.3; } .comm-imgbar { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted, #c4c8cd); background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px; padding: 7px 10px; margin-bottom: 10px; } .comm-mail-frame { width: 100%; height: 58vh; min-height: 360px; border: 1px solid var(--border, #2a2d31); border-radius: 8px; background: #fff; } .comm-gen-msg { color: #fca5a5; font-size: var(--fs-sm); margin-top: 8px; } .comm-reply { margin-top: 16px; border-top: 1px solid var(--border, #2a2d31); padding-top: 14px; } .comm-reply-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted, #c4c8cd); margin-bottom: 10px; } .comm-gen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; } .comm-reply-body { width: 100%; box-sizing: border-box; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 7px; color: var(--text, #e8eaed); font: inherit; font-size: .9rem; padding: 10px 11px; resize: vertical; } .comm-reply-body:focus { border-color: var(--accent, #3b82f6); outline: none; } .comm-reply-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .comm-sent { padding: 4px 0; } /* Maniglia di ridimensionamento del drawer Comunicazioni (bordo sinistro) */ .comm-drawer-resize { position: absolute; left: 0; top: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 3; } .comm-drawer-resize::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: transparent; transition: background .12s; } .comm-drawer-resize:hover::before { background: var(--accent, #3b82f6); } /* Profilo: controllo dimensione testo */ .prof-fs { display: flex; align-items: center; gap: 12px; max-width: 380px; margin-top: 4px; } .prof-fs input[type="range"] { flex: 1; } .prof-fs #pref-fs-val { min-width: 46px; color: var(--text-muted, #c4c8cd); font-size: var(--fs-sm); } /* Profilo: configurazione barra laterale (riordino + visibilità) */ .prof-navcfg { list-style: none; margin: 4px 0 0; padding: 0; max-width: 380px; display: flex; flex-direction: column; gap: 4px; } .prof-navcfg-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2, #1a1c1f); border: 1px solid var(--border, #2a2d31); border-radius: 8px; cursor: grab; } .prof-navcfg-row.dragging { opacity: .5; } .prof-navcfg-grip, .prof-navcfg-ic { color: var(--text-faint, #6b7178); display: inline-flex; } .prof-navcfg-lbl { flex: 1; color: var(--text, #e8eaed); font-size: var(--fs-sm); } .prof-navcfg-vis { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted, #c4c8cd); font-size: var(--fs-xs); } .prof-navcfg-vis input { width: auto; } /* ============================================================ Comunicazioni v2 — tab di sezione, tabella fluida, azioni riga ============================================================ */ .comm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border, #2a2d31); } .comm-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: var(--fs-base); color: var(--text-faint, #6b7178); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .comm-tab.is-active { color: var(--text, #e8eaed); border-bottom-color: var(--accent, #3b82f6); font-weight: 600; } .comm-tab.is-disabled { cursor: default; } .comm-tab:not(.is-disabled):not(.is-active):hover { color: var(--text-muted, #c4c8cd); } .comm-table { table-layout: fixed; width: 100%; } .comm-table th, .comm-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .comm-table col.cc-data { width: 96px; } .comm-table col.cc-dir { width: 54px; } .comm-table col.cc-casella { width: 150px; } .comm-table col.cc-esito { width: 112px; } .comm-do { min-width: 0; } .comm-from, .comm-subj { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comm-from { color: var(--text, #e8eaed); } .comm-subj { color: var(--text-muted, #c4c8cd); font-size: var(--fs-sm); margin-top: 1px; } .comm-row { position: relative; cursor: pointer; } .comm-table td.comm-esito { overflow: visible; } .comm-actions { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); gap: 3px; align-items: center; padding: 4px; border: 1px solid var(--border, #2a2d31); border-radius: 9px; background: var(--panel, #131517); } .comm-row:hover .comm-actions { display: flex; } .comm-row:hover .comm-esito-badge { visibility: hidden; } .comm-act { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 7px; cursor: pointer; color: var(--text-muted, #c4c8cd); padding: 0; } .comm-act svg { width: 21px; height: 21px; } .comm-act:hover { background: var(--panel-2, #1a1c1f); } .comm-act:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent, #3b82f6); } .comm-act.act-del { color: var(--danger, #ef4444); } .comm-act.act-task { color: var(--ok, #22c55e); } .comm-act.act-ticket { color: var(--info, #3b82f6); } .comm-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel, #131517); color: var(--text, #e8eaed); border: 1px solid var(--border, #2a2d31); border-radius: 8px; padding: 9px 14px; font-size: var(--fs-sm); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 3000; } .comm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------------- Minuta (Assistente Meeting) ---------------- */ .minuta-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; } .minuta-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 900px) { .minuta-layout { grid-template-columns: 1fr; } } .minuta-form { display: flex; flex-direction: column; gap: 12px; } .minuta-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); } .minuta-field--grow { flex: 1; min-width: 0; } .minuta-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .minuta-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 2px 0 0; } .minuta-spin { color: var(--accent); font-size: var(--fs-sm); } .minuta-prompt summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-body); display: flex; align-items: center; gap: 8px; } .minuta-prompt summary svg { width: 14px; height: 14px; } .minuta-prompt-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); line-height: 1.5; } .minuta-prompt-saved { color: var(--ok); font-size: var(--fs-sm); } .minuta-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); background: var(--bg-input); color: var(--text-muted); border: 0.5px solid var(--border-subtle); } .minuta-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .minuta-card-title { margin: 0; font-size: var(--fs-lg); color: var(--text-primary); } .minuta-summary { margin: 0 0 12px; } .minuta-summary h2, .minuta-summary h3 { font-size: var(--fs-base); color: var(--text-primary); margin: 14px 0 6px; } .minuta-actions-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs-base); color: var(--text-primary); margin: 14px 0 6px; } .minuta-actions-title svg { width: 14px; height: 14px; color: var(--ok); } .minuta-actions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-sm); color: var(--text-body); } .minuta-card-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 0.5px solid var(--border-subtle); } .minuta-saved { color: var(--ok); font-size: var(--fs-sm); } .minuta-error { display: flex; align-items: center; gap: 8px; color: var(--danger); font-size: var(--fs-sm); } .minuta-error svg { width: 16px; height: 16px; flex-shrink: 0; } .minuta-side-title { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .minuta-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .minuta-recent-item { display: flex; flex-direction: column; gap: 2px; } .minuta-recent-title { font-size: var(--fs-sm); color: var(--text-body); } .minuta-recent-meta { font-size: var(--fs-xs); color: var(--text-faint); } /* ---------------- MFA (verifica in due passaggi) ---------------- */ .mfa-wrap { max-width: 420px; } .mfa-title { font-size: var(--fs-lg); color: var(--text-primary); margin: 14px 0 6px; } .mfa-lead { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 16px; line-height: 1.55; } .mfa-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 10px 0 0; } .mfa-form { margin-top: 14px; } .mfa-form input#code { letter-spacing: 0.35em; font-size: var(--fs-lg); text-align: center; } .mfa-key-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-input); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0; } .mfa-key-label { width: 100%; font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; } .mfa-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base); color: var(--text-primary); letter-spacing: 0.08em; flex: 1; min-width: 0; word-break: break-all; } .mfa-copy { background: transparent; border: 0.5px solid var(--border-subtle); color: var(--text-muted); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-xs); cursor: pointer; } .mfa-copy:hover { color: var(--text-primary); border-color: var(--accent); } .user-danger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ---------------- MFA: QR enrollment + codici di backup ---------------- */ .mfa-qr { display: flex; justify-content: center; margin: 4px 0 14px; } .mfa-qr-svg { width: 210px; height: 210px; background: #fff; padding: 10px; border-radius: var(--radius-sm); } .mfa-manual { margin: 0 0 6px; } .mfa-manual summary { cursor: pointer; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 10px; } .mfa-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 14px 0; } .mfa-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base); color: var(--text-primary); letter-spacing: 0.06em; background: var(--bg-input); border: 0.5px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; } .mfa-codes-warn { background: var(--bg-input); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); color: var(--text-body); margin: 4px 0 14px; }