/* ===================================================================== iPersonal Cloud — FOGLIO DI STILE UNICO (style.css) Consolidamento di: design system (ex ipc-theme.css) + bridge per le classi legacy (ex ipc-legacy-bridge.css) + tema chiaro/scuro commutabile a livello utente. Incluso da TUTTE le pagine JSP. Sostituisce style1.css/style2.css. ===================================================================== */ /* ===================================================================== iPersonal Cloud — Tema condiviso (ipc-theme.css) Design system unico, estratto da dashboard.jsp. Tutte le pagine includono questo file per garantire coerenza visiva. Font: Sora (titoli) + Outfit (testo). Caricarli nella di ogni pagina: ===================================================================== */ :root{ --bg:#0e1525; --bg-soft:#141d33; --panel:#16203a; --panel-2:#1b2747; --line:#243456; --line-soft:#1d2a49; --txt:#e8edf9; --txt-dim:#94a3c4; --txt-mute:#64719a; --brand:#4f8cff; --brand-2:#7b6bff; --brand-soft:rgba(79,140,255,.14); --accent:#28d8a8; --danger:#ff5d6c; --warn:#ffb13c; --shadow:0 12px 40px rgba(0,0,0,.45); --radius:16px; --grad:linear-gradient(135deg,#4f8cff 0%,#7b6bff 55%,#28d8a8 130%); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:'Outfit',system-ui,sans-serif;color:var(--txt); background: radial-gradient(1200px 600px at 80% -10%,rgba(123,107,255,.16),transparent 60%), radial-gradient(900px 500px at -10% 110%,rgba(40,216,168,.12),transparent 55%), var(--bg); min-height:100vh;overflow-x:hidden; } a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:#2e4170} /* ---------- Top bar ---------- */ .topbar{ position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px; padding:14px 26px;background:rgba(14,21,37,.82);backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } .brand{display:flex;align-items:center;gap:12px;font-family:'Sora';font-weight:700;font-size:20px;letter-spacing:.2px} .brand .mark{ width:38px;height:38px;border-radius:11px;background:var(--grad); display:grid;place-items:center;box-shadow:0 6px 18px rgba(79,140,255,.4); } .brand .mark svg{width:21px;height:21px;fill:#fff} .brand span b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .search{flex:1;max-width:640px;margin:0 auto;position:relative} .search input{ width:100%;padding:12px 16px 12px 44px;border-radius:12px;border:1px solid var(--line); background:var(--bg-soft);color:var(--txt);font-size:15px;transition:.2s; } .search input:focus{outline:none;border-color:var(--brand);background:var(--panel);box-shadow:0 0 0 4px var(--brand-soft)} .search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;fill:var(--txt-mute)} .topbar-actions{display:flex;align-items:center;gap:10px} .icon-btn{ width:42px;height:42px;border-radius:11px;background:var(--bg-soft);border:1px solid var(--line); display:grid;place-items:center;transition:.18s;position:relative; } .icon-btn:hover{background:var(--panel-2);border-color:var(--brand);transform:translateY(-1px)} .icon-btn svg{width:20px;height:20px;fill:var(--txt-dim)} .icon-btn:hover svg{fill:var(--txt)} .avatar{ width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center; font-weight:600;color:#fff;cursor:pointer;border:2px solid var(--line);font-size:16px;text-transform:uppercase; } /* ---------- Layout shell ---------- */ .shell{display:flex;min-height:calc(100vh - 71px)} .sidebar{ width:264px;flex-shrink:0;padding:22px 16px;border-right:1px solid var(--line-soft); display:flex;flex-direction:column;gap:6px;position:sticky;top:71px;height:calc(100vh - 71px);overflow-y:auto; } .new-btn{ display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px; background:var(--panel);border:1px solid var(--line);font-weight:600;font-size:15px;margin-bottom:14px; box-shadow:var(--shadow);transition:.18s;width:100%; } .new-btn:hover{border-color:var(--brand);transform:translateY(-2px)} .new-btn .plus{width:26px;height:26px;border-radius:8px;background:var(--grad);display:grid;place-items:center} .new-btn .plus svg{width:15px;height:15px;fill:#fff} .nav-item{ display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:11px; color:var(--txt-dim);font-weight:500;font-size:15px;transition:.15s;cursor:pointer; } .nav-item svg{width:20px;height:20px;fill:currentColor;flex-shrink:0} .nav-item:hover{background:var(--bg-soft);color:var(--txt)} .nav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:600} .nav-sep{height:1px;background:var(--line-soft);margin:10px 8px} .nav-label{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--txt-mute);padding:6px 16px 4px;font-weight:600} .storage-card{margin-top:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px} .storage-card .bar{height:7px;border-radius:6px;background:var(--bg);overflow:hidden;margin:10px 0 8px} .storage-card .bar i{display:block;height:100%;width:38%;background:var(--grad);border-radius:6px} .storage-card small{color:var(--txt-mute);font-size:12px} .main{flex:1;padding:26px 32px;min-width:0} .crumbs{display:flex;align-items:center;gap:8px;font-size:22px;font-family:'Sora';font-weight:600;margin-bottom:4px} .crumbs .seg{cursor:pointer;color:var(--txt)} .crumbs .seg.dim{color:var(--txt-mute)} .crumbs .sep{color:var(--txt-mute);font-size:18px} .page-title{font-family:'Sora';font-weight:600;font-size:24px;margin-bottom:4px;display:flex;align-items:center;gap:12px} .page-title svg{width:26px;height:26px;fill:var(--brand)} .sub{color:var(--txt-dim);font-size:14px;margin-bottom:22px} /* ---------- Buttons ---------- */ .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px} .btn{ display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px; background:var(--bg-soft);border:1px solid var(--line);font-weight:500;font-size:14px;transition:.16s;color:var(--txt); } .btn svg{width:17px;height:17px;fill:currentColor} .btn:hover{background:var(--panel-2);border-color:var(--brand);transform:translateY(-1px)} .btn.primary{background:var(--grad);border:none;color:#fff;box-shadow:0 6px 18px rgba(79,140,255,.35)} .btn.primary:hover{filter:brightness(1.08)} .btn.ghost{background:transparent} .btn.danger{color:var(--danger)} .btn.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(255,93,108,.08)} .btn.block{width:100%;justify-content:center} .spacer{flex:1} /* ---------- Cards / panels ---------- */ .card-panel{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); padding:24px;box-shadow:var(--shadow); } .section-h{font-family:'Sora';font-size:14px;color:var(--txt-dim);font-weight:600;margin:16px 0 12px;text-transform:uppercase;letter-spacing:.6px} /* ---------- Forms ---------- */ .field{margin-bottom:16px} .field label,label.lbl{display:block;font-size:13px;color:var(--txt-dim);margin:0 0 6px;font-weight:500} .input,input.input,select.input,textarea.input, .field input,.field select,.field textarea{ width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line); background:var(--bg-soft);color:var(--txt);font-size:14px;font-family:inherit;transition:.16s; } .input:focus,.field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft) } /* ---------- Tables ---------- */ .tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th{ text-align:left;padding:12px 14px;background:var(--bg-soft);color:var(--txt-mute); font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:600;border-bottom:1px solid var(--line) } .tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);color:var(--txt)} .tbl tr:hover td{background:var(--bg-soft)} .tbl .row-actions{display:flex;gap:8px} /* ---------- Badges ---------- */ .badge{font-size:11px;font-weight:600;text-transform:uppercase;padding:3px 9px;border-radius:6px;background:var(--bg);color:var(--txt-dim);letter-spacing:.4px} .badge.ok{background:rgba(40,216,168,.15);color:var(--accent)} .badge.off{background:rgba(255,93,108,.15);color:var(--danger)} .badge.warn{background:rgba(255,177,60,.15);color:var(--warn)} /* ---------- Modals / overlay ---------- */ .overlay{position:fixed;inset:0;background:rgba(6,10,20,.66);backdrop-filter:blur(4px);z-index:90;display:none;align-items:center;justify-content:center;padding:20px} .overlay.show{display:flex} .modal{ background:var(--panel);border:1px solid var(--line);border-radius:18px;width:100%;max-width:440px; box-shadow:var(--shadow);overflow:hidden;animation:pop .2s ease; } .modal.wide{max-width:620px} @keyframes pop{from{transform:scale(.96) translateY(8px);opacity:0}to{transform:none;opacity:1}} .modal h3{font-family:'Sora';font-size:18px;padding:20px 22px 0;display:flex;align-items:center;gap:10px} .modal h3 svg{width:21px;height:21px;fill:var(--brand)} .modal .body{padding:18px 22px 22px} .modal label{display:block;font-size:13px;color:var(--txt-dim);margin:14px 0 6px;font-weight:500} .modal input,.modal select,.modal textarea{ width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft);color:var(--txt);font-size:14px;font-family:inherit; } .modal input:focus,.modal select:focus,.modal textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} /* ---------- Toast ---------- */ .toast{ position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120px); background:var(--panel-2);border:1px solid var(--line);padding:14px 22px;border-radius:12px; box-shadow:var(--shadow);z-index:120;font-weight:500;transition:.3s;display:flex;align-items:center;gap:10px; } .toast.show{transform:translateX(-50%)} .toast.ok{border-color:var(--accent)} .toast.err{border-color:var(--danger)} .toast svg{width:19px;height:19px} /* ---------- Drop zone ---------- */ .drop{ border:2px dashed var(--line);border-radius:14px;padding:34px 20px;text-align:center;color:var(--txt-mute); transition:.16s;cursor:pointer;background:var(--bg-soft); } .drop.hov{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)} .drop svg{width:46px;height:46px;fill:currentColor;margin-bottom:10px} /* ---------- AI / chat floating (Milo + Chat) ---------- */ .fab{position:fixed;right:26px;bottom:26px;z-index:70;display:flex;flex-direction:column;gap:12px} .fab button{ width:56px;height:56px;border-radius:50%;background:var(--grad);box-shadow:0 8px 24px rgba(79,140,255,.45); display:grid;place-items:center;transition:.18s; } .fab button:hover{transform:scale(1.08)} .fab button svg{width:25px;height:25px;fill:#fff} .fab button.chat{background:linear-gradient(135deg,#28d8a8,#4f8cff)} .panel-pop{ position:fixed;right:26px;bottom:96px;width:380px;height:560px;max-height:78vh;z-index:75; background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow); display:none;flex-direction:column;overflow:hidden; } .panel-pop.show{display:flex} .panel-pop .ph{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)} .panel-pop .ph b{font-family:'Sora';font-size:15px} .panel-pop iframe{flex:1;border:none;width:100%;background:var(--bg)} .panel-pop .pc{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--panel)} .panel-pop .pc svg{width:16px;height:16px;fill:var(--txt-dim)} /* ---------- Auth / centered pages (login, 2fa, activation) ---------- */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px} .auth-card{ width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line); border-radius:20px;box-shadow:var(--shadow);padding:36px 32px;animation:pop .25s ease; } .auth-card .brand{justify-content:center;margin-bottom:8px} .auth-card h1{font-family:'Sora';font-size:22px;text-align:center;margin-bottom:6px} .auth-card .sub{text-align:center;margin-bottom:26px} .auth-card .field{margin-bottom:18px} /* ---------- OTP boxes (2FA) ---------- */ .otp-inputs{display:flex;gap:10px;justify-content:center;margin:8px 0 22px} .otp-box{ width:48px;height:56px;text-align:center;font-size:24px;font-weight:600;font-family:'Sora'; border-radius:12px;border:1px solid var(--line);background:var(--bg-soft);color:var(--txt);transition:.16s; } .otp-box:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--panel)} .qr-frame{background:#fff;padding:14px;border-radius:14px;display:inline-block;margin:0 auto 20px} .qr-frame img{display:block;width:190px;height:190px} /* ---------- Empty state ---------- */ .empty{text-align:center;padding:60px 20px;color:var(--txt-mute)} .empty svg{width:64px;height:64px;fill:var(--line);margin-bottom:14px} .empty h3{font-family:'Sora';color:var(--txt-dim);font-weight:600;margin-bottom:6px} @media(max-width:880px){.sidebar{display:none}.main{padding:18px}.search{max-width:none}} /* ============ BRIDGE CLASSI LEGACY (ex ipc-legacy-bridge.css) ============ */ /* ===================================================================== iPersonal Cloud — Bridge di tema (ipc-legacy-bridge.css) Reskinna le classi legacy (menu-dropdown, container, popup, tabelle, widget Milo, chat) verso il design system dark di dashboard.jsp. Va incluso DOPO ipc-theme.css e SOSTITUISCE style1.css/style2.css nelle pagine funzionali pesanti (search, trash, create, create-sheet, chat, userpanel) dove non è pratico riscrivere tutto il markup. ===================================================================== */ /* ---- Base page ---- */ body{ font-family:'Outfit',system-ui,sans-serif !important;color:var(--txt) !important; background: radial-gradient(1200px 600px at 80% -10%,rgba(123,107,255,.16),transparent 60%), radial-gradient(900px 500px at -10% 110%,rgba(40,216,168,.12),transparent 55%), var(--bg) !important; } .video-background{display:none !important;} /* niente video di sfondo nel tema dark */ /* ---- Barra di navigazione legacy (.menu-dropdown) -> topbar dark ---- */ .menu-dropdown{ position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:14px 26px !important;background:rgba(14,21,37,.92) !important;backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft) !important;margin:0 !important; } .nav-brand{font-family:'Sora' !important;font-weight:700 !important;font-size:19px !important;color:var(--txt) !important;display:flex;align-items:center;gap:10px;} .nav-logo{width:34px;height:34px;border-radius:9px;} .menu-btn{ padding:9px 16px !important;border-radius:11px !important;background:var(--bg-soft) !important; border:1px solid var(--line) !important;color:var(--txt) !important;font-weight:500 !important;cursor:pointer;transition:.16s; } .menu-btn:hover{background:var(--panel-2) !important;border-color:var(--brand) !important;} .nav-menu-wrap{position:relative;display:inline-block;} .menu-dropdown-content{ display:none;position:absolute;top:100%;left:0;min-width:200px;z-index:7000;margin-top:6px; background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:12px !important; box-shadow:var(--shadow) !important;overflow:hidden; } /* Apertura a tendina: hover sul wrap, o classe .open aggiunta via JS (click) */ .nav-menu-wrap:hover .menu-dropdown-content, .nav-menu-wrap.open .menu-dropdown-content, .menu-dropdown-content:hover{display:block;} .menu-dropdown-content a{display:block;color:var(--txt-dim) !important;padding:11px 16px !important;transition:.14s;text-decoration:none;white-space:nowrap;} .menu-dropdown-content a:hover{background:var(--bg-soft) !important;color:var(--txt) !important;} .nav-user-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;} .nav-page-label{color:var(--txt-mute) !important;font-size:13px;font-weight:500;} .nav-user-name{color:var(--txt-dim) !important;font-weight:500;} .nav-user-photo{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);} /* ---- Contenitore principale ---- */ .container,.table-container{ background:transparent !important;box-shadow:none !important;border:none !important; max-width:1180px;margin:26px auto !important;padding:0 32px !important;color:var(--txt) !important; } h1,h2,h3{font-family:'Sora',sans-serif !important;color:var(--txt) !important;} label{color:var(--txt-dim) !important;} /* ---- Tabelle ---- */ table{width:100%;border-collapse:collapse;background:var(--panel) !important;border-radius:var(--radius);overflow:hidden;} table th{ background:var(--bg-soft) !important;color:var(--txt-mute) !important;text-align:left;padding:12px 14px !important; font-size:11.5px !important;text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--line) !important; } table td{padding:11px 14px !important;border-bottom:1px solid var(--line-soft) !important;color:var(--txt) !important;} table tr:hover td{background:var(--bg-soft) !important;} /* ---- Form e input ---- */ input[type=text],input[type=password],input[type=email],input[type=search],input[type=number], select,textarea{ background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt) !important; border-radius:10px !important;padding:11px 14px !important;font-family:inherit !important;transition:.16s; } input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--brand) !important;box-shadow:0 0 0 3px var(--brand-soft) !important;} input::placeholder,textarea::placeholder{color:var(--txt-mute) !important;} /* ---- Bottoni ---- */ button:not(.menu-btn):not(.close-btn), .button-container button,input[type=submit]{ background:var(--bg-soft);border:1px solid var(--line);color:var(--txt); border-radius:11px;padding:10px 16px;font-weight:500;font-size:14px;cursor:pointer;transition:.16s;font-family:inherit; } button:not(.menu-btn):not(.close-btn):hover{background:var(--panel-2);border-color:var(--brand);transform:translateY(-1px);} .button-container button,input[type=submit]{background:var(--grad) !important;border:none !important;color:#fff !important;box-shadow:0 6px 18px rgba(79,140,255,.35);} /* ---- Popup legacy (.popup, .countdown-popup, .delete-user-popup) ---- */ .overlay{position:fixed;inset:0;background:rgba(6,10,20,.66) !important;backdrop-filter:blur(4px);z-index:90;display:none;} .overlay.show{display:flex !important;} .popup,.countdown-popup,.delete-user-popup{ display:none; background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:18px !important; box-shadow:var(--shadow) !important;color:var(--txt) !important;padding:22px !important; position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1001;max-width:460px;width:92%; } .popup h2,.popup h3,.countdown-popup h2{color:var(--txt) !important;font-family:'Sora' !important;} .popup p,.countdown-popup p{color:var(--txt-dim) !important;} .close-btn{background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt-dim) !important;border-radius:8px;width:30px;height:30px;cursor:pointer;} .confirm-buttons,.two-factor-buttons,.cancel-button{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;} .error-message,.success-message{border-radius:10px;padding:12px 14px;margin-top:14px;font-size:14px;} .error-message{background:rgba(255,93,108,.12) !important;color:var(--danger) !important;border:1px solid var(--danger);} .success-message{background:rgba(40,216,168,.12) !important;color:var(--accent) !important;border:1px solid var(--accent);} /* ---- Credits footer ---- */ .credits,.app-version{color:var(--txt-mute) !important;text-align:center;font-size:12px;padding:16px;background:transparent !important;} /* ==================================================================== WIDGET MILO (#aiWidget / #aiPopup) — popup IA in tema dark ==================================================================== */ #aiPopup{ width:380px !important;max-height:78vh !important;background:var(--panel) !important; border:1px solid var(--line) !important;border-radius:18px !important;box-shadow:var(--shadow) !important; position:absolute;bottom:96px;left:0; } #aiPopup .header{ background:var(--bg-soft) !important;color:var(--txt) !important;padding:15px 18px !important; border-bottom:1px solid var(--line-soft) !important;font-family:'Sora' !important;font-weight:600 !important; border-radius:18px 18px 0 0; } #aiPopup .header button{background:none !important;border:none !important;color:var(--txt-dim) !important;font-size:20px !important;cursor:pointer;padding:0 !important;} #aiChatBox{background:var(--bg) !important;color:var(--txt) !important;padding:14px !important;overflow-y:auto;flex:1;min-height:180px;} #aiChatBox .user-msg,#aiChatBox .ai-msg{border-radius:12px;padding:9px 13px;margin:7px 0;font-size:14px;line-height:1.45;} #aiChatBox .user-msg{background:var(--brand-soft) !important;color:var(--txt) !important;margin-left:auto;max-width:85%;} #aiChatBox .ai-msg{background:var(--panel-2) !important;color:var(--txt) !important;max-width:90%;} #miloSelectedBar{background:var(--brand-soft) !important;border-bottom:1px solid var(--line) !important;} #miloSelectedBar #miloSelectedName{color:var(--brand) !important;} #aiPopup .ai-toggle{display:flex;align-items:center;gap:8px;padding:4px 14px;color:var(--txt-dim) !important;font-size:13px;} #aiPopup .ai-actions{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;} #aiPopup .ai-actions button{background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt-dim) !important;font-size:12px !important;padding:6px 10px !important;border-radius:8px;} #aiInput{background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt) !important;} #aiForm button[type=submit]{background:var(--grad) !important;color:#fff !important;border:none !important;border-radius:9px !important;padding:8px 14px !important;} #miloPdfPanel{background:var(--panel) !important;} #miloPdfPanel > div:first-child{background:var(--bg-soft) !important;border-bottom:1px solid var(--line-soft) !important;} #miloPdfPanel strong{color:var(--txt) !important;} #miloPdfTree{color:var(--txt-dim) !important;} #miloPdfTree a,#miloPdfTree .milo-file{color:var(--txt) !important;} #miloPdfTree .milo-file:hover{background:var(--bg-soft) !important;} #miloGif{box-shadow:0 8px 24px rgba(79,140,255,.45) !important;} progress#aiProgressBar{width:calc(100% - 28px);margin:0 14px;height:5px;accent-color:var(--brand);} /* ==================================================================== CHAT popup (#chatPopupOverlay / #chatPopupBox) ==================================================================== */ #chatPopupOverlay{background:rgba(6,10,20,.7) !important;backdrop-filter:blur(4px);} #chatPopupBox{ background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:18px !important; box-shadow:var(--shadow) !important;overflow:hidden; } #chatUnreadCount{background:var(--danger) !important;color:#fff !important;} /* ---- Profile popup (#userProfilePopup) — layout stile PDF Manager ---- */ #userProfilePopup{width:min(470px,calc(100vw - 32px)) !important;max-width:none !important;max-height:calc(100vh - 80px);overflow-y:auto;} .profile-photo-section{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px;padding:12px;background:var(--bg-soft) !important;border:1px solid var(--line) !important;border-radius:12px;} .profile-photo-large{width:84px !important;height:84px !important;border-radius:50% !important;object-fit:cover !important;border:3px solid var(--line) !important;box-shadow:var(--shadow);display:block;} .profile-photo-upload-label{cursor:pointer;background:var(--brand-soft) !important;color:var(--brand) !important;border:1px solid var(--brand-soft) !important;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-block;} .profile-info-block{background:var(--bg-soft) !important;border:1px solid var(--line) !important;border-radius:12px;overflow:hidden;margin-bottom:4px;} .profile-info-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line-soft);gap:10px;font-size:12px;} .profile-info-row:last-child{border-bottom:none;} .profile-info-label{font-weight:700;color:var(--txt-mute) !important;min-width:70px;font-size:10px;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;} .profile-info-value{color:var(--txt) !important;font-weight:500;word-break:break-all;text-align:right;} .profile-save-btn,.profile-pwd-btn{width:100%;margin-top:3px;margin-bottom:0; background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt) !important;border-radius:10px;padding:9px 14px;cursor:pointer;} .profile-pwd-btn{background:linear-gradient(180deg,#2d9b6b 0%,var(--accent) 100%) !important;border-color:rgba(35,86,57,.45) !important;color:#fff !important;} .profile-logout-btn{width:100%;margin:0;background:var(--danger) !important;border:1px solid var(--danger) !important;color:#fff !important;border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:600;} .profile-logout-btn:hover{filter:brightness(1.08);} .profile-section-divider{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:14px;} .profile-section-divider h3{color:var(--txt) !important;margin-bottom:9px;} /* Reset password: campi impilati in colonna (label sopra, input a tutta larghezza) */ .pwd-field{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-bottom:10px;width:100%;} .pwd-field label{display:block;width:100%;margin:0;font-size:12px;font-weight:600;color:var(--txt-dim) !important;text-align:left;} .pwd-field input{display:block;width:100%;box-sizing:border-box;margin:0;} /* ---- Pagination ---- */ .pagination{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0;} .pagination button,.pagination a{background:var(--bg-soft) !important;border:1px solid var(--line) !important;color:var(--txt-dim) !important;border-radius:8px;padding:6px 11px;} .pagination .active{background:var(--brand) !important;color:#fff !important;border-color:var(--brand) !important;} /* ===================================================================== TEMA CHIARO — override attivato da I valori di default in :root restano il tema scuro. Quando l'utente sceglie il tema chiaro, questi token sostituiscono quelli scuri. La scelta è persistita su DB (colonna users.theme_preference) e ripristinata a ogni login tramite la sessione. ===================================================================== */ html[data-theme="light"]{ --bg:#f4f6fb; --bg-soft:#eef1f8; --panel:#ffffff; --panel-2:#f7f9fd; --line:#d9e0ee; --line-soft:#e7ecf6; --txt:#1a2238; --txt-dim:#4a566f; --txt-mute:#7a86a0; --brand:#3a6fd8; --brand-2:#6a5bd6; --brand-soft:rgba(58,111,216,.12); --accent:#13b48a; --danger:#e23a4c; --warn:#e0941f; --shadow:0 12px 40px rgba(40,60,110,.16); --radius:16px; --grad:linear-gradient(135deg,#3a6fd8 0%,#6a5bd6 55%,#13b48a 130%); } html[data-theme="light"] body{ background: radial-gradient(1200px 600px at 80% -10%,rgba(106,91,214,.10),transparent 60%), radial-gradient(900px 500px at -10% 110%,rgba(19,180,138,.08),transparent 55%), var(--bg) !important; } html[data-theme="light"] .topbar{background:rgba(255,255,255,.82) !important;} html[data-theme="light"] .menu-dropdown{background:rgba(255,255,255,.92) !important;} html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#c4cee0;} html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#a9b6cf;} /* Selettore tema (toggle nel popup profilo / topbar) */ .theme-toggle{display:flex;align-items:center;gap:10px;} .theme-switch{position:relative;width:52px;height:28px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);cursor:pointer;transition:.2s;flex:none;} .theme-switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--grad);transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.25);} .theme-switch[data-on="true"] .knob{left:26px;} html[data-theme="light"] .theme-switch .knob{left:26px;} .theme-switch-label{color:var(--txt-dim);font-size:13px;} /* ===================================================================== COMPATIBILITÀ TOKEN LEGACY (create-sheet.jsp, create.jsp e altre pagine) Mappa i nomi di variabile usati dalle pagine "foglio/documento" sui token canonici del tema, così tutte le pagine usano un solo style.css e seguono correttamente tema scuro/chiaro (risolve testo celle bianco in tema chiaro). ===================================================================== */ :root{ --surface:var(--panel); --surface-alt:var(--bg-soft); --border:var(--line); --border-strong:var(--line); --primary:var(--brand); --primary-light:var(--brand-2); --text:var(--txt); --text-soft:var(--txt-dim); --text-muted:var(--txt-mute); --bg-2:var(--bg-soft); --success:var(--accent); --accent-soft:var(--brand-soft); --radius-xs:8px; --radius-sm:10px; --radius-md:12px; --radius-xl:18px; --shadow-sm:0 4px 14px rgba(0,0,0,.25); --shadow-md:0 8px 26px rgba(0,0,0,.32); --shadow-lg:var(--shadow); --shadow-popup:var(--shadow); --nav-height:64px; --z-overlay:1000; --z-spinner:1200; --font-ui:'Outfit',system-ui,sans-serif; --font-display:'Sora','Outfit',sans-serif; } html[data-theme="light"]{ --shadow-sm:0 4px 14px rgba(40,60,110,.10); --shadow-md:0 8px 26px rgba(40,60,110,.14); } /* Foglio di calcolo: la griglia è sempre su "carta" chiara, quindi il testo delle celle resta scuro e leggibile in entrambi i temi. */ #luckysheet .luckysheet-cell-main, .luckysheet-cell-main{ color:#1a2238; } #grid .cv, #grid .cell, .cv{ color:#1c1917 !important; } #ce, #fxin{ color:#1c1917 !important; } #cref{ color:var(--brand) !important; }