/* ============================================================ AREA RISERVATA — guscio, menu laterale, dashboard Lo stato "menu compresso" vive su (classe nz-side-collapsed) così è già applicato al primo paint, senza sfarfallii. ============================================================ */ .shell { display: grid; grid-template-columns: 262px 1fr; min-height: 100vh; transition: grid-template-columns .28s cubic-bezier(.2, .8, .3, 1); } .nz-side-collapsed .shell { grid-template-columns: 78px 1fr; } /* ---------- menu laterale ---------- */ .side { display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; overflow: hidden; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 55%, transparent); backdrop-filter: blur(20px); position: sticky; top: 0; height: 100vh; } .side-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .nz-side-collapsed .side-h { justify-content: center; } .nz-side-collapsed .side-h .brand span:not(.mark) { display: none; } .s-tog { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-soft); flex: none; transition: color .2s ease, border-color .2s ease; } .s-tog:hover { color: var(--accent-text); border-color: var(--accent-line); } .nz-side-collapsed .s-tog.wide { display: none; } .s-tog.narrow { display: none; margin: 0 auto 10px; } .nz-side-collapsed .s-tog.narrow { display: flex; } .n-grp { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin: 18px 12px 8px; } .nz-side-collapsed .n-grp { height: 0; margin: 10px 0 0; opacity: 0; overflow: hidden; } .n-item { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: 13px; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--text-muted); position: relative; white-space: nowrap; transition: color .2s ease, background .2s ease; } .n-item .ico { flex: none; color: var(--text-soft); transition: color .2s ease; } .n-item:hover { background: var(--panel); color: var(--text); } /* NavLink aggiunge "active" alla voce corrispondente all'URL */ .n-item.active { color: var(--accent-text); background: var(--accent-wash); border: 1px solid var(--accent-line); padding: 10px 11px; } .n-item.active .ico { color: var(--accent-text); } .n-item.active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); box-shadow: var(--glow-s); } .nz-side-collapsed .n-item .lbl { display: none; } .nz-side-collapsed .n-item { justify-content: center; } .side-f { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } .s-user { display: flex; align-items: center; gap: 11px; padding: 9px 7px; border-radius: 13px; cursor: pointer; transition: background .2s ease; } .s-user:hover { background: var(--panel); } .s-user-i { overflow: hidden; } .nz-side-collapsed .s-user-i { display: none; } .s-user-i strong { display: block; font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-user-i span { font-size: .6875rem; color: var(--text-soft); } /* ---------- barra superiore ---------- */ .main { min-width: 0; display: flex; flex-direction: column; } .top { display: flex; align-items: center; gap: 12px; padding: 14px 26px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px); } .srch { flex: 1; max-width: 400px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 13px; background: var(--panel); border: 1px solid var(--line); color: var(--text-soft); font-size: .875rem; cursor: text; transition: border-color .2s ease; } .srch:hover { border-color: var(--line-2); } .srch kbd { margin-left: auto; font-family: var(--f-mono); font-size: .6875rem; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-soft); } .top-act { display: flex; align-items: center; gap: 8px; margin-left: auto; } .ibtn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); position: relative; flex: none; transition: color .2s ease, border-color .2s ease, transform .16s ease; } .ibtn:hover { color: var(--accent-text); border-color: var(--accent-line); transform: translateY(-1px); } .pop { position: relative; } .pop-menu { position: absolute; top: 48px; right: 0; width: 238px; padding: 16px; border-radius: var(--r-m); z-index: 40; background: color-mix(in srgb, var(--panel-solid) 96%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(22px); box-shadow: var(--shadow); } .pop-menu h5 { margin: 0 0 12px; font-size: .625rem; text-transform: uppercase; letter-spacing: .14em; color: var(--text-soft); font-weight: 700; } .pop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; } .pop-grid button { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 11px; cursor: pointer; border: 1px solid var(--line); font-size: .75rem; font-weight: 600; transition: border-color .2s ease, background .2s ease; } .pop-grid button:hover { background: var(--panel); } .pop-grid button.on { border-color: var(--tc1); background: var(--panel); } .pop-orb { width: 20px; height: 20px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--tc1), var(--tc2)); } /* ---------- contenuto ---------- */ .cont { padding: 26px 26px 60px; flex: 1; } .cont-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .cont-h h1 { font-size: 1.85rem; font-weight: 700; } .cont-h p { color: var(--text-muted); font-size: .875rem; margin-top: 8px; } .cont-h-act { display: flex; gap: 8px; flex-wrap: wrap; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; } .kpi { padding: 20px; } .kpi-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .kpi-h .ico { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--accent-text); } .dlt { font-size: .6875rem; font-family: var(--f-mono); font-weight: 500; padding: 3px 9px; border-radius: 999px; } .dlt.up { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .dlt.dn { color: var(--crit); background: color-mix(in srgb, var(--crit) 14%, transparent); } .dlt.nu { color: var(--text-soft); background: var(--panel); } .kpi b { font-family: var(--f-mono); font-size: 2rem; font-weight: 500; letter-spacing: -.045em; display: block; line-height: 1.1; } .kpi span { font-size: .75rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .07em; } .kpi svg { margin-top: 12px; display: block; } .d-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-bottom: 14px; align-items: start; } .card { padding: 22px; } .card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .card-h h3 { font-size: 1rem; font-family: var(--f-body); font-weight: 600; letter-spacing: -.01em; } .card-h a { font-size: .8125rem; font-weight: 600; color: var(--accent-text); } .ap { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .ap:last-child { border-bottom: none; padding-bottom: 0; } .ap-t { font-family: var(--f-mono); font-size: .8125rem; color: var(--text-muted); width: 48px; flex: none; } .ap-b { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); flex: none; opacity: .75; } .ap-i { flex: 1; min-width: 0; } .ap-i strong { display: block; font-size: .875rem; font-weight: 600; } .ap-i span { font-size: .75rem; color: var(--text-soft); } .pl { font-size: .6875rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .pl-on { background: var(--accent-wash); color: var(--accent-text); border: 1px solid var(--accent-line); } .pl-st { background: var(--panel); color: var(--text-muted); border: 1px solid var(--line); } .ins { padding: 20px; display: flex; gap: 15px; align-items: flex-start; margin-bottom: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 11%, var(--panel-solid)), color-mix(in srgb, var(--accent-2) 7%, var(--panel-solid))); border: 1px solid var(--accent-line); border-radius: var(--r-l); } .ins .ico { width: 38px; height: 38px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: var(--glow-s); } .ins .ico svg { width: 18px; height: 18px; } .ins strong { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 4px; } .ins p { font-size: .8438rem; color: var(--text-muted); } .chart-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .chart-cap { font-size: .75rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; } .chart-val { font-size: 1.5rem; font-weight: 500; letter-spacing: -.04em; } .chart-foot { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .875rem; } .kv:last-child { border-bottom: none; } .kv span { color: var(--text-soft); } .kv b { font-weight: 600; text-align: right; } .tbl-w { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 640px; } table.tbl th { text-align: left; font-size: .625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-soft); padding: 0 12px 12px; font-weight: 700; } table.tbl td { padding: 13px 12px; border-top: 1px solid var(--line); } table.tbl tbody tr { transition: background .2s ease; } table.tbl tbody tr:hover td { background: var(--panel); } .pt { display: flex; align-items: center; gap: 11px; font-weight: 500; } .bar { display: block; width: 88px; height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); animation: nz-grow 1s cubic-bezier(.2, .8, .3, 1) both; transform-origin: left; } @keyframes nz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .st { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 500; } .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d, var(--ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d, var(--ok)) 20%, transparent); } /* ---------- segnaposto sezioni non ancora sviluppate ---------- */ .placeholder { padding: 56px 32px; text-align: center; max-width: 560px; margin: 0 auto; } .placeholder-ico { display: flex; justify-content: center; color: var(--accent-text); margin-bottom: 18px; } .placeholder-ico svg { width: 34px; height: 34px; } .placeholder h3 { font-size: 1.25rem; margin-bottom: 12px; } .placeholder p { color: var(--text-muted); font-size: .9375rem; } @media (max-width: 1080px) { .d-grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, 1fr); } /* Su schermi stretti il menu resta sempre a icone */ .shell { grid-template-columns: 78px 1fr; } .side .n-grp { height: 0; margin: 10px 0 0; opacity: 0; overflow: hidden; } .side-h .brand span:not(.mark), .n-item .lbl, .s-user-i { display: none; } .side-h { justify-content: center; } .n-item { justify-content: center; } .s-tog.wide { display: none; } .s-tog.narrow { display: flex; } } @media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } .cont { padding: 18px 18px 48px; } .srch kbd { display: none; } }