/* ===================================================================== MASTER RULE — DESIGN SYSTEM UFFICIALE (Gestionale Immobiliare v2) Greenfield: nessun !important, nessuna dipendenza legacy/Bootstrap. Distillato dai test su HOME (dashboard) e CONTRATTO (form a sezioni). Uso: + classi mr-*. Archetipi body: arch-form · arch-dash · arch-list · arch-tools ===================================================================== */ @property --mrx{syntax:"";initial-value:0deg;inherits:false} @keyframes mrxspin{to{--mrx:360deg}} /* ============ TOKEN ============ */ :root{ /* superfici */ --mr-bg:#eaf1ff; --mr-bg-grad: linear-gradient(90deg, #c2e0fc 0%, #a2cef9 40%, #86bef6 75%, #6fb0f2 100%); --mr-card:#fff; --mr-card-bd:#dfe3ef; --mr-grey:#e9ecf4; --mr-grey-bd:#d9dde9; --mr-field:#fff; --mr-field-bd:#d4d8ea; --mr-line:#e4e8f0; --mr-panel2:#f4f6fc; /* gradiente firma blu→turchese (MAI viola) */ --mr-grad:linear-gradient(135deg,#4f46e5,#06b6d4); --mr-blue:#4f46e5; --mr-cyan:#06b6d4; --mr-acc:#4f46e5; --mr-acc-soft:#eef0ff; --mr-acc-ink:#1d2a8a; /* testo */ --mr-ink:#1a2233; --mr-ink2:#2a3142; --mr-mut:#6b7587; --mr-mut2:#9aa3b2; --mr-divider:#1e3a8a; /* AI = arancione */ --mr-ai:#ea7317; --mr-ai-dark:#c75f0f; --mr-ai-cream:#fff7ef; --mr-ai-bd:#f0a868; --mr-ai-ink:#c2691f; /* ricerca = giallo */ --mr-search:#fffad6; --mr-search-bd:#ecd25e; --mr-search-ink:#5c4a08; /* stati */ --mr-ok:#16a34a; --mr-ok-soft:#dcfce7; --mr-warn:#d97706; --mr-warn-soft:#fef3c7; --mr-danger:#dc2626; --mr-danger-soft:#fee2e2; --mr-viol-soft:#ede9fe; /* forma */ --mr-r-card:13px; --mr-r-box:10px; --mr-r-field:9px; --mr-r-btn:10px; --mr-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 24px rgba(31,28,70,.08); --mr-shadow-pop:0 18px 44px rgba(31,28,70,.20),0 2px 8px rgba(31,28,70,.08); --mr-ring:0 0 0 3px rgba(79,70,229,.14); /* tipografia */ --mr-font:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; --mr-fz:14px; --mr-fz-field:13.5px; --mr-fz-label:12.5px; } /* ============ RESET / BASE ============ */ *,*::before,*::after{box-sizing:border-box} body.mr{margin:0;background:var(--mr-bg);color:var(--mr-ink);font-family:var(--mr-font);font-size:var(--mr-fz);line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh} body.mr::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--mr-bg-grad);will-change:transform;pointer-events:none} .mr a{color:var(--mr-acc);text-decoration:none} .mr a:hover{text-decoration:underline} .mr .mr-muted{color:var(--mr-mut)} .mr h1,.mr h2,.mr h3,.mr h4{margin:0;color:var(--mr-ink);font-weight:750} /* intestazione pagina */ .mr .mr-pagehead{display:flex;align-items:center;gap:12px;margin:0 0 16px} .mr .mr-pagehead .mr-ph-ic{width:40px;height:40px;border-radius:11px;background:var(--mr-grad);color:#fff;display:grid;place-items:center;font-size:20px;flex-shrink:0} .mr .mr-pagehead h1{font-size:21px} .mr .mr-pagehead .mr-sub{font-size:14.5px;color:var(--mr-mut);margin-top:2px} .mr .mr-pagehead .mr-acts{margin-left:auto;display:flex;gap:8px} /* ============ CARD / SEZIONE + HEADER GRADIENTE + COLLASSABILE ============ */ .mr .mr-card{background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:var(--mr-r-card);box-shadow:var(--mr-shadow);overflow:hidden;margin:0 0 16px} .mr .mr-head{display:flex;align-items:center;gap:.55rem;padding:12px 14px;background:var(--mr-grad);color:#fff;font-size:14px;font-weight:750;cursor:default;user-select:none} .mr .mr-head .mr-head-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.20);color:#fff;flex-shrink:0;font-size:15px} .mr .mr-body{padding:14px} /* collassabile: aggiungi .is-collapsible alla card; .is-collapsed la chiude */ .mr .mr-card.is-collapsible>.mr-head{cursor:pointer} .mr .mr-head .mr-chevron{margin-left:auto;font-size:14px;opacity:.92;transition:transform .2s} .mr .mr-card.is-collapsed>.mr-head{border-radius:var(--mr-r-card)} .mr .mr-card.is-collapsed>.mr-head .mr-chevron{transform:rotate(-90deg)} .mr .mr-card.is-collapsed>*:not(.mr-head){display:none} /* ============ SOTTO-SEZIONE (GREYBOX) + DIVISORI ============ */ .mr .mr-sub{background:var(--mr-grey);border:1px solid var(--mr-grey-bd);border-radius:var(--mr-r-box);padding:11px 12px 12px;margin:0 0 12px} .mr .mr-sub:last-child{margin-bottom:0} .mr .mr-sub-title{display:flex;align-items:center;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; color:transparent;background:var(--mr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* divisore nudo: solo riga blu, nessun box */ .mr .mr-divider{display:flex;align-items:center;gap:.5rem;margin:.6rem 0;color:var(--mr-divider);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase} .mr .mr-divider::before,.mr .mr-divider::after{content:"";flex:1;height:1px;background:#c8cfde} /* ============ CAMPI FORM ============ */ .mr .mr-label{display:block;font-size:var(--mr-fz-label);font-weight:600;color:var(--mr-ink2);margin-bottom:3px} /* campi testo: copre anche gli senza attributo type (default text) ed esclude controlli non-testo */ .mr .mr-field, .mr input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), .mr select,.mr textarea{ width:100%;background:var(--mr-field);border:1px solid var(--mr-field-bd);border-radius:var(--mr-r-field); padding:8px 11px;font-size:var(--mr-fz-field);font-family:inherit;color:var(--mr-ink);line-height:1.4;min-height:38px} .mr textarea{min-height:84px;resize:vertical} .mr .mr-field:hover, .mr input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):hover, .mr select:hover,.mr textarea:hover{background:#fbfcff;border-color:#c3c9da} .mr .mr-field:focus, .mr input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):focus, .mr select:focus,.mr textarea:focus{outline:0;background:#fff;border-color:var(--mr-blue);box-shadow:var(--mr-ring)} .mr ::placeholder{color:var(--mr-mut2)} /* input-group (€/icone): bordo unico, niente doppio bordo */ .mr .mr-input-group{display:flex} .mr .mr-input-group>.mr-addon{display:flex;align-items:center;padding:0 11px;background:var(--mr-panel2);border:1px solid var(--mr-field-bd);border-right:0;border-radius:var(--mr-r-field) 0 0 var(--mr-r-field);color:var(--mr-mut);font-size:var(--mr-fz-field)} .mr .mr-input-group>.mr-field{border-radius:0 var(--mr-r-field) var(--mr-r-field) 0;border-left:0} /* griglia campi densa */ .mr .mr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 12px;align-items:start} .mr .mr-grid .mr-full{grid-column:1/-1} /* ---- Riga upload AI: dropzone 90 / bottone 10 (identica in ogni blocco, indipendente dal testo) ---- */ .mr .mr-uprow{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;margin:0 0 10px} .mr .mr-uprow .mr-dropzone{flex:9 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; background:var(--mr-field);border:1.5px dashed var(--mr-blue);border-radius:var(--mr-r-box);padding:16px 12px;color:var(--mr-mut);cursor:pointer;text-align:center;font-size:var(--mr-fz-field)} .mr .mr-uprow .mr-dropzone:hover{background:#fbfcff} .mr .mr-uprow .mr-dropzone .bi{font-size:1.5rem;color:var(--mr-blue)} .mr .mr-uprow .mr-ai-btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap; border:0;border-radius:var(--mr-r-box);padding:0 10px;color:#fff;font-weight:700;cursor:pointer; background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%)} .mr .mr-uprow .mr-ai-btn:hover{filter:brightness(1.05)} .mr .mr-uprow .mr-ai-btn:disabled{opacity:.5;cursor:default} /* ============ RICERCA = GIALLO ============ NB: la regola campo generica usa una catena :not()×9 ad alta specificità (0,10,1). Per vincere, la ricerca replica la stessa catena + .mr-search. */ .mr .mr-search input,.mr input.mr-search{ background:var(--mr-search) !important;border:1px solid var(--mr-search-bd) !important;color:var(--mr-search-ink) !important} .mr .mr-search input::placeholder,.mr input.mr-search::placeholder{color:#a98f3a} .mr .mr-search input:focus,.mr input.mr-search:focus{background:#fffef0;border-color:#dcbb3e;box-shadow:0 0 0 3px rgba(236,210,94,.35)} .mr .mr-search .mr-addon{background:var(--mr-search);border-color:var(--mr-search-bd);color:#8a6d12} /* ============ BOTTONI ============ */ .mr .mr-btn,.mr .mr-btn--action,.mr .mr-btn--ai{ position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem; font-family:inherit;font-size:var(--mr-fz);font-weight:650;border-radius:var(--mr-r-btn);padding:9px 16px;cursor:pointer;border:1px solid transparent; transition:transform .18s,filter .18s,background .18s,border-color .18s,color .18s,box-shadow .18s} .mr .mr-btn{background:#fff;border-color:var(--mr-field-bd);color:var(--mr-ink2);box-shadow:0 1px 2px rgba(16,24,40,.04)} .mr .mr-btn:hover{background:#f4f6fc;border-color:#c3c9da;color:var(--mr-ink)} .mr .mr-btn--action{background:var(--mr-grad);color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(79,70,229,.22)} .mr .mr-btn--action:hover{filter:brightness(1.06)} .mr .mr-btn--ai{background:var(--mr-ai);border-color:var(--mr-ai);color:#fff;box-shadow:0 4px 12px rgba(234,115,23,.22)} .mr .mr-btn--ai:hover{background:var(--mr-ai-dark);border-color:var(--mr-ai-dark);box-shadow:0 6px 20px rgba(234,115,23,.5)} .mr .mr-btn:disabled,.mr .mr-btn--action:disabled,.mr .mr-btn--ai:disabled{opacity:.6;cursor:not-allowed;box-shadow:none} .mr .mr-btn--ai:disabled{opacity:.78} /* anello rotante su hover + micro-lift */ .mr .mr-btn::after,.mr .mr-btn--action::after,.mr .mr-btn--ai::after{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#0ea5e9,#22d3ee,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr .mr-btn--ai::after{padding:3px;background:conic-gradient(from var(--mrx),#5c1a02,#c2410c,#ff9a4d,#fff7ed,#ff9a4d,#c2410c,#5c1a02)} .mr .mr-btn:not(:disabled):hover::after,.mr .mr-btn--action:not(:disabled):hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr .mr-btn--ai:hover::after{opacity:1;animation:mrxspin 2.2s linear infinite} .mr .mr-btn:not(:disabled):hover,.mr .mr-btn--action:not(:disabled):hover{transform:translateY(-1px)} /* ============ UPLOAD / DROPZONE AI (grafica unica) ============ */ .mr .mr-upload{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:0 0 12px} .mr .mr-drop{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.35rem; border:1.5px dashed var(--mr-ai-bd);background:var(--mr-ai-cream);color:var(--mr-ai-ink);border-radius:var(--mr-r-box);padding:1.35rem 1rem;min-height:112px;font-size:.85rem;font-weight:600;cursor:pointer} .mr .mr-drop:hover,.mr .mr-drop.is-over{border-color:var(--mr-ai);background:#feeede;color:var(--mr-ai-dark)} .mr .mr-drop .mr-drop-ic{font-size:1.9rem;line-height:1;color:#e67e22} .mr .mr-upload .mr-btn--ai{flex:0 0 auto !important;align-self:stretch !important;height:auto !important;min-height:112px !important;padding-left:18px;padding-right:18px;border-radius:var(--mr-r-box)} .mr .mr-upload>*{min-height:112px} .mr .mr-drop::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.4px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#5c1a02,#c2410c,#ff9a4d,#fff7ed,#ff9a4d,#c2410c,#5c1a02); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr .mr-drop:hover::after,.mr .mr-drop.is-over::after{opacity:1;animation:mrxspin 2.2s linear infinite} /* ============ LISTE PIATTE / CHIP / BADGE ============ */ .mr .mr-row-flat{display:flex;align-items:center;gap:.6rem;padding:8px 2px;border-bottom:1px solid #d7dbe6} .mr .mr-row-flat:last-child{border-bottom:0} .mr .mr-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:7px;font-size:12.5px;font-weight:700;white-space:nowrap} .mr .mr-chip.is-ok{background:var(--mr-ok-soft);color:#166534} .mr .mr-chip.is-wip{background:var(--mr-warn-soft);color:#854d0e} .mr .mr-chip.is-err{background:var(--mr-danger-soft);color:#991b1b} .mr .mr-chip.is-draft{background:#eef1f7;color:#475569} .mr .mr-badge{background:var(--mr-acc);color:#fff;font-size:13px;font-weight:700;padding:1px 7px;border-radius:10px} /* utility anello su qualsiasi box */ .mr .mr-ring{position:relative} .mr .mr-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#22d3ee,#0ea5e9,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr .mr-ring:hover::after{opacity:1;animation:mrxspin 2.2s linear infinite} /* ===================================================================== ARCHETIPO A — FORM A SEZIONI NUMERATE (.arch-form) layout 3 colonne: nav stepper · form · riepilogo ===================================================================== */ .mr.arch-form .mr-3col{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(360px,1.04fr);gap:14px;align-items:start} @media(max-width:1200px){.mr.arch-form .mr-3col{grid-template-columns:230px minmax(0,1fr)}} @media(max-width:900px){.mr.arch-form .mr-3col{grid-template-columns:1fr}} .mr.arch-form .mr-nav{position:sticky;top:14px;align-self:start} .mr.arch-form .mr-aside{position:sticky;top:14px;align-self:start} .mr.arch-form .mr-nav .mr-nav-card{background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:var(--mr-r-card);box-shadow:var(--mr-shadow);overflow:hidden} .mr.arch-form .mr-nav .mr-nav-h{padding:11px 13px;border-bottom:1px solid var(--mr-line);font-size:12px;font-weight:700;color:var(--mr-mut);text-transform:uppercase;letter-spacing:.04em} .mr.arch-form .mr-step{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .15s} .mr.arch-form .mr-step:hover{background:var(--mr-line)} .mr.arch-form .mr-step.is-active{background:var(--mr-acc-soft)} .mr.arch-form .mr-step-n{width:25px;height:25px;flex:0 0 25px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:#e2e6f2;color:var(--mr-mut)} .mr.arch-form .mr-step.is-active .mr-step-n,.mr.arch-form .mr-step.is-filled .mr-step-n{background:var(--mr-grad);color:#fff} .mr.arch-form .mr-step.is-done .mr-step-n{background:var(--mr-ok);color:#fff} .mr.arch-form .mr-step-label{font-size:13.5px;font-weight:600;color:var(--mr-ink)} .mr.arch-form .mr-step.is-active .mr-step-label{color:var(--mr-acc-ink)} /* ===================================================================== ARCHETIPO B — DASHBOARD (.arch-dash) [regole della HOME] ===================================================================== */ .mr.arch-dash .mr-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px} @media(max-width:1200px){.mr.arch-dash .mr-kpis{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.mr.arch-dash .mr-kpis{grid-template-columns:repeat(2,1fr)}} .mr.arch-dash .mr-kpi{position:relative;background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:12px;padding:11px 13px;box-shadow:var(--mr-shadow);cursor:pointer;transition:.12s} .mr.arch-dash .mr-kpi:hover{border-color:#c4c9e4;box-shadow:0 10px 26px rgba(31,28,70,.16);transform:translateY(-2px)} .mr.arch-dash .mr-kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#22d3ee,#0ea5e9,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr.arch-dash .mr-kpi:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr.arch-dash .mr-kpi .mr-kpi-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:18px;margin-bottom:7px;background:var(--mr-acc-soft);color:var(--mr-acc)} .mr.arch-dash .mr-kpi .mr-kpi-v{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1} .mr.arch-dash .mr-kpi .mr-kpi-l{font-size:13.5px;color:var(--mr-mut);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:3px} .mr.arch-dash .mr-kpi.k-green .mr-kpi-ic{background:var(--mr-ok-soft);color:#15803d} .mr.arch-dash .mr-kpi.k-red .mr-kpi-ic{background:var(--mr-danger-soft);color:var(--mr-danger)} .mr.arch-dash .mr-kpi.k-amber .mr-kpi-ic{background:var(--mr-warn-soft);color:#b45309} .mr.arch-dash .mr-kpi.k-cyan .mr-kpi-ic{background:#cffafe;color:#0e7490} .mr.arch-dash .mr-dash-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start} @media(max-width:1100px){.mr.arch-dash .mr-dash-cols{grid-template-columns:1fr 1fr}} @media(max-width:720px){.mr.arch-dash .mr-dash-cols{grid-template-columns:1fr}} .mr.arch-dash .mr-dcol{display:flex;flex-direction:column;gap:12px;min-width:0} /* card dashboard: header LEGGERO (non banda gradiente) */ .mr.arch-dash .mr-card-light>.mr-head{background:var(--mr-grad);color:#fff} .mr.arch-dash .mr-card-light>.mr-head .mr-head-ic{background:rgba(255,255,255,.20);color:#fff} .mr.arch-dash .mr-card-light>.mr-head .mr-more{margin-left:auto;font-size:13.5px;font-weight:650;color:#fff;opacity:.92;cursor:pointer} .mr.arch-dash .mr-card-light>.mr-head .count-badge{background:rgba(255,255,255,.22);color:#fff} /* pill filtro (con anello) */ .mr.arch-dash .mr-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px} .mr.arch-dash .mr-pill{position:relative;background:#eef0f8;border:1px solid var(--mr-field-bd);border-radius:9px;padding:8px 14px;font-size:14.5px;font-weight:650;color:#1f2937;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;transition:background .16s,border-color .16s,color .16s} .mr.arch-dash .mr-pill:hover{border-color:#c4c9e4;background:#e4e7f3;color:var(--mr-acc)} .mr.arch-dash .mr-pill.is-active{background:var(--mr-acc);border-color:var(--mr-acc);color:#fff} .mr.arch-dash .mr-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.1px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#22d3ee,#0ea5e9,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr.arch-dash .mr-pill:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} /* riga lista (scadenza/agenda/mini) con anello */ .mr.arch-dash .mr-list{display:flex;flex-direction:column;gap:6px} .mr.arch-dash .mr-list-row{position:relative;display:flex;align-items:center;gap:10px;background:#edeef7;border:1px solid var(--mr-line);border-radius:9px;padding:8px 10px;cursor:pointer;transition:background .22s,border-color .22s} .mr.arch-dash .mr-list-row:hover{border-color:#c2c8dc;background:#dde1ee} /* sfondo riga per STATO (tenue) — default grigio = senza data */ .mr.arch-dash .mr-list-row.is-ok{background:#e7f7ed;border-color:#bbf0cb} .mr.arch-dash .mr-list-row.is-ok:hover{background:#d8f1e1} .mr.arch-dash .mr-list-row.is-warn{background:#fef6e0;border-color:#fae3a6;border-left:3px solid var(--mr-warn)} .mr.arch-dash .mr-list-row.is-warn:hover{background:#fdeecb} .mr.arch-dash .mr-list-row.is-urgent{background:#fdeaea;border-color:#f8c9c9;border-left:3px solid var(--mr-danger)} .mr.arch-dash .mr-list-row.is-urgent:hover{background:#fadada} /* PILL interna più scura (solida) con testo in contrasto */ .mr.arch-dash .mr-list-row.is-ok .mr-chip{background:var(--mr-ok);color:#fff} .mr.arch-dash .mr-list-row.is-warn .mr-chip{background:var(--mr-warn);color:#fff} .mr.arch-dash .mr-list-row.is-urgent .mr-chip{background:var(--mr-danger);color:#fff} .mr.arch-dash .mr-list-row::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#0ea5e9,#22d3ee,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr.arch-dash .mr-list-row:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr.arch-dash .mr-list-row .mr-lr-ic{width:28px;height:28px;border-radius:7px;background:var(--mr-acc-soft);color:var(--mr-acc);display:grid;place-items:center;font-size:16px;flex-shrink:0} .mr.arch-dash .mr-list-row .mr-lr-b{flex:1;min-width:0} .mr.arch-dash .mr-list-row .mr-lr-t{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mr.arch-dash .mr-list-row .mr-lr-s{font-size:13px;color:var(--mr-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* azioni rapide */ .mr.arch-dash .mr-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px} .mr.arch-dash .mr-quick{position:relative;display:flex;align-items:center;gap:9px;background:#edeef7;border:1px solid var(--mr-line);border-radius:9px;padding:9px 10px;cursor:pointer;color:var(--mr-ink);font-family:inherit;text-align:left;width:100%;transition:background .22s,border-color .22s,color .22s} .mr.arch-dash .mr-quick:hover{background:#dde1ee;border-color:#c2c8dc;color:var(--mr-acc-ink)} .mr.arch-dash .mr-quick::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#0ea5e9,#22d3ee,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr.arch-dash .mr-quick:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr.arch-dash .mr-quick .mr-q-ic{width:30px;height:30px;border-radius:8px;background:var(--mr-acc-soft);color:var(--mr-acc);display:grid;place-items:center;font-size:17px;flex-shrink:0} .mr.arch-dash .mr-quick .mr-q-t{font-size:14.5px;font-weight:700} /* ===================================================================== ARCHETIPO C — LISTE / TABELLE (.arch-list) ===================================================================== */ .mr.arch-list .mr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .mr.arch-list .mr-table-wrap{background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:var(--mr-r-card);box-shadow:var(--mr-shadow);overflow:hidden} .mr.arch-list table.mr-table{width:100%;border-collapse:collapse} .mr.arch-list .mr-table thead{background:var(--mr-grad)} .mr.arch-list .mr-table thead th{background:transparent;color:#fff;font-size:12.5px;font-weight:750;text-transform:uppercase;letter-spacing:.03em;padding:11px 12px;border-bottom:0;text-align:left} .mr.arch-list .mr-table tbody td{padding:10px 12px;border-bottom:1px solid var(--mr-line);font-size:14px} .mr.arch-list .mr-table tbody tr{cursor:pointer;transition:background .15s} .mr.arch-list .mr-table tbody tr:hover{background:#f5f8ff} .mr.arch-list .mr-table tbody tr:last-child td{border-bottom:0} /* azioni di riga (edit/elimina a fine riga) */ .mr.arch-list .mr-table td.mr-actions{text-align:right;white-space:nowrap;width:1%} .mr .mr-row-actions{display:inline-flex;gap:6px;justify-content:flex-end;align-items:center} .mr .mr-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--mr-field-bd);background:var(--mr-acc-soft);color:var(--mr-acc);cursor:pointer;font-size:15px;line-height:1;transition:background .15s,color .15s,border-color .15s;text-decoration:none} .mr .mr-icon-btn:hover{background:var(--mr-acc);color:#fff;border-color:var(--mr-acc)} .mr .mr-icon-btn.is-danger{background:var(--mr-danger-soft);color:var(--mr-danger);border-color:#f3c9c9} .mr .mr-icon-btn.is-danger:hover{background:var(--mr-danger);color:#fff;border-color:var(--mr-danger)} .mr .mr-icon-btn.is-ok{background:var(--mr-ok-soft);color:#15803d;border-color:#bbf0cb} .mr .mr-icon-btn.is-ok:hover{background:var(--mr-ok);color:#fff;border-color:var(--mr-ok)} /* ===================================================================== ARCHETIPO D — STRUMENTI / ICONE (.arch-tools) ===================================================================== */ .mr.arch-tools .mr-tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .mr.arch-tools .mr-tool{position:relative;background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:var(--mr-r-card);box-shadow:var(--mr-shadow);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s} .mr.arch-tools .mr-tool:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(31,28,70,.12)} .mr.arch-tools .mr-tool::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.7px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#0ea5e9,#22d3ee,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr.arch-tools .mr-tool:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr.arch-tools .mr-tool .mr-tool-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:var(--mr-grad);color:#fff} .mr.arch-tools .mr-tool .mr-tool-t{font-size:15.5px;font-weight:750} .mr.arch-tools .mr-tool .mr-tool-d{font-size:13px;color:var(--mr-mut)} /* layout pagina generico */ .mr .mr-wrap{max-width:1500px;margin:0 auto;padding:18px 20px 48px} /* ===================================================================== APP SHELL (sidebar + topbar + content) + LOGIN ===================================================================== */ .mr .mr-app{display:grid;grid-template-columns:240px 1fr;min-height:100vh} .mr .mr-sidebar{background:#fff;border-right:1px solid var(--mr-card-bd);padding:14px 12px;display:flex;flex-direction:column;gap:4px} .mr .mr-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:800;font-size:16px} .mr .mr-brand .mr-brand-ic{width:32px;height:32px;border-radius:9px;background:var(--mr-grad);color:#fff;display:grid;place-items:center;font-size:17px} .mr .mr-nav-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mr-mut2);margin:12px 8px 4px} .mr .mr-nav-link{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--mr-ink);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s} .mr .mr-nav-link:hover{background:var(--mr-line);text-decoration:none} .mr .mr-nav-link.active{background:var(--mr-acc-soft);color:var(--mr-acc-ink)} .mr .mr-nav-link .bi{width:20px;text-align:center;font-size:16px} .mr .mr-sidebar-foot{margin-top:auto;font-size:12px;color:var(--mr-mut);padding:10px 8px 2px;border-top:1px solid var(--mr-line)} .mr .mr-main{display:flex;flex-direction:column;min-width:0} .mr .mr-topbar{height:54px;background:#fff;border-bottom:1px solid var(--mr-card-bd);display:flex;align-items:center;gap:12px;padding:0 18px;position:sticky;top:0;z-index:10} .mr .mr-topbar .mr-tb-title{font-weight:750} .mr .mr-topbar .mr-tb-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mr-mut)} .mr .mr-content{padding:18px 20px 48px;overflow:auto} /* login */ .mr-login{min-height:100vh;display:grid;place-items:center;background:var(--mr-bg)} .mr-login .mr-card{width:380px;max-width:92vw;margin:0} .mr-login .mr-login-head{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:6px} .mr-login .mr-login-ic{width:48px;height:48px;border-radius:13px;background:var(--mr-grad);color:#fff;display:grid;place-items:center;font-size:24px} .mr-login .mr-err{background:var(--mr-danger-soft);color:#991b1b;border-radius:8px;padding:8px 11px;font-size:13.5px;margin-bottom:10px} /* ===================================================================== MENU HEADER — componente .mr-topnav (sezioni + dropdown a cascata) Selettori SENZA prefisso .mr: usabile anche fuori da body.mr (shell). ===================================================================== */ .mr-topnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;overflow:visible;background:var(--mr-bg-grad,#fff);border-bottom:1px solid var(--mr-card-bd);box-shadow:0 2px 6px rgba(31,28,70,.05);padding:.45rem 1.2rem;position:relative;z-index:1200;min-height:58px;font-family:var(--mr-font)} .mr-topnav .mr-tn-brand{display:flex;align-items:center;margin-right:.9rem;flex-shrink:0} .mr-topnav .mr-tn-brand img{height:30px} .mr-topnav-sec{position:relative;flex-shrink:0} .mr-topnav-sec>button{position:relative;display:flex;align-items:center;gap:.45rem;background:transparent;border:1px solid transparent;padding:.6rem 1.05rem;border-radius:10px;font-weight:700;font-size:.96rem;color:var(--mr-ink2);cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s,color .15s,border-color .15s,box-shadow .15s} .mr-topnav-sec>button .bi-chevron-down{font-size:.65rem;opacity:.6;transition:transform .18s} .mr-topnav-sec.open>button .bi-chevron-down{transform:rotate(180deg)} .mr-topnav-sec>button:hover{background:var(--mr-acc-soft);color:var(--mr-acc-ink);border-color:#c9cdf3} .mr-topnav-sec.open>button{background:var(--mr-acc-soft);color:var(--mr-acc-ink);border-color:var(--mr-acc)} /* sezione SELEZIONATA bene in vista: pillola gradiente */ .mr-topnav-sec.is-active>button{background:var(--mr-grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(79,70,229,.28)} .mr-topnav-sec.is-active>button:hover{filter:brightness(1.06);color:#fff} .mr-topnav-sec.is-active>button .bi-chevron-down{opacity:.85} .mr-topnav-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:248px;background:var(--mr-card);border:1px solid var(--mr-card-bd);border-radius:12px;box-shadow:var(--mr-shadow-pop);padding:6px;display:none;z-index:1000} .mr-topnav-sec.open .mr-topnav-menu{display:block;animation:mrTnIn .14s ease} @keyframes mrTnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .mr-topnav-menu a{position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--mr-ink);font-size:.86rem;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .14s,color .14s} .mr-topnav-menu a .bi{width:18px;text-align:center;color:var(--mr-acc);font-size:1rem} .mr-topnav-menu a:hover{background:var(--mr-acc-soft);color:var(--mr-acc-ink)} /* anello rotante hover sulle voci del dropdown */ .mr-topnav-menu a::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;opacity:0;pointer-events:none;z-index:2;transition:opacity .25s; background:conic-gradient(from var(--mrx),#4f46e5,#06b6d4,#22d3ee,#0ea5e9,#06b6d4,#4f46e5); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .mr-topnav-menu a:hover::after{opacity:1;animation:mrxspin 2.4s linear infinite} .mr-topnav-menu a.active{background:var(--mr-acc-soft);color:var(--mr-acc-ink);font-weight:750;padding-left:14px} .mr-topnav-menu a.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--mr-grad)} .mr-topnav-menu a.dev{opacity:.5;cursor:default} .mr-topnav-menu .mr-tn-soon{margin-left:auto;font-size:.62rem;background:#e2e6f3;color:#64748b;padding:1px .4rem;border-radius:6px;font-weight:700} .mr-topnav-menu .mr-tn-testing{margin-left:auto;font-size:.62rem;background:var(--mr-warn-soft);color:#854d0e;padding:1px .4rem;border-radius:6px;font-weight:700} .mr-topnav .mr-tn-right{margin-left:auto;display:flex;align-items:center;gap:.7rem;flex-shrink:0;padding-left:.9rem;background:var(--mr-grey);border:1px solid var(--mr-grey-bd);border-radius:11px;padding:.3rem .35rem .3rem .9rem} .mr-topnav .mr-tn-user{display:flex;flex-direction:column;line-height:1.1;text-align:right} .mr-topnav .mr-tn-user b{font-size:.86rem;color:var(--mr-ink);font-weight:800} .mr-topnav .mr-tn-user small{font-size:.7rem;color:var(--mr-mut);font-weight:600} .mr-topnav .mr-tn-gear{display:grid;place-items:center;width:38px;height:38px;background:#fff;border:1px solid var(--mr-field-bd);color:var(--mr-acc);cursor:pointer;font-size:1.05rem;border-radius:9px;transition:background .15s,color .15s,border-color .15s} .mr-topnav .mr-tn-gear:hover{background:var(--mr-acc);color:#fff;border-color:var(--mr-acc)} .mr-topnav .mr-tn-logout{display:grid;place-items:center;width:38px;height:38px;background:var(--mr-danger);border:0;color:#fff;cursor:pointer;font-size:1.1rem;border-radius:9px;box-shadow:0 3px 9px rgba(220,38,38,.28);transition:filter .15s,transform .15s} .mr-topnav .mr-tn-logout:hover{filter:brightness(1.08);transform:translateY(-1px)} @media(max-width:1200px){.mr-topnav-sec>button{padding:.5rem .75rem;font-size:.88rem}.mr-topnav{gap:2px}} @media(max-width:980px){.mr-topnav-sec>button{padding:.45rem .6rem;font-size:.82rem;gap:.3rem}.mr-topnav-sec>button .bi-chevron-down{display:none}} @media(max-width:760px){.mr-topnav .mr-tn-user{display:none}.mr-topnav .mr-tn-brand img{height:24px}.mr-topnav{padding:.4rem .6rem}}