/* Portale 7dcloud: regole aggiuntive sul kit condiviso (form, elenchi, dettagli). */
.pf-form label { display: block; font-size: .78rem; color: var(--slate-400); margin: .2rem 0 .3rem; }
.pf-form input[type=text], .pf-form input[type=email], .pf-form input[type=password], .pf-form input[type=number], .pf-form input[type=url], .pf-form input[type=date], .pf-form input[type=time], .pf-form select, .pf-form textarea { width: 100%; margin-bottom: .8rem; box-sizing: border-box; }
.pf-form .pf-check { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .9rem; font-size: .85rem; color: var(--slate-200); }
.pf-form .pf-check input { margin: 0; }
.pf-form .pf-help { display: block; font-size: .72rem; color: var(--slate-500); margin: -.5rem 0 .8rem; }
.pf-form .pf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .3rem .8rem; margin-bottom: .8rem; }
.pf-form .pf-list label { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--slate-200); font-size: .82rem; }
.pf-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .6rem; padding-top: .8rem; border-top: 1px solid var(--slate-700); }
.pf-actions form { margin: 0; }
.pf-inline { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.pf-inline > div { flex: 1 1 160px; }
.pf-inline input, .pf-inline select { margin-bottom: 0 !important; }
.ld-muted { color: var(--slate-500); }
.cs-off td { opacity: .55; }
td.act { white-space: nowrap; }
td.act form { display: inline-flex; margin: 0; }
td.act .btn, td.act button { padding: .2rem .5rem; font-size: .75rem; margin-left: .25rem; }
.st-table td.num, .st-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-logo { height: 34px; max-width: 160px; object-fit: contain; }
.sb-res { font-size: .72rem; color: var(--slate-500); margin-left: auto; }
.sb-res-menu { margin-left: .9rem; border-left: 1px solid var(--slate-700); }
.sb-res-menu .sidebar-sublink { font-size: .78rem; padding-top: .25rem; padding-bottom: .25rem; }
.sb-tenant-logo { padding: .4rem 1rem .2rem; } .sb-tenant-logo img { max-width: 160px; max-height: 44px; object-fit: contain; display: block; }
/* Blocchi impilati: sempre almeno 12px tra un pannello e l'altro (anche dentro le griglie). */
.content > .st-panel, .content > .st-grid, .content > .st-kpis, .content > .ld-boxes, .content > .st-insight, .content > .panel-msg { margin-top: 0 !important; margin-bottom: 16px !important; }
.st-grid { gap: 16px; }
.ld-cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .8rem; } @media (max-width: 1200px) { .ld-cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ld-cols4 { grid-template-columns: 1fr; } }
/* L'ultimo pannello della pagina si allunga fino in fondo alla finestra (elenchi, anagrafiche). */
.content { display: flex; flex-direction: column; }
.content > * { flex-shrink: 0; }
.content > .st-panel:last-of-type:not(:has(~ div)) { flex-grow: 1; margin-bottom: 0 !important; }
/* Se contiene una tabella, il pannello resta alto quanto la finestra e la tabella scorre al suo interno fino all'ultima riga (intestazione fissa). */
.content > .st-panel:last-of-type:not(:has(~ div)):has(> .st-table-wrap) { flex: 1 1 0; min-height: 360px; display: flex; flex-direction: column; box-sizing: border-box; }
.content > .st-panel:last-of-type:not(:has(~ div)):has(> .st-table-wrap) > * { flex-shrink: 0; }
.content > .st-panel:last-of-type:not(:has(~ div)) > .st-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
.st-grid > .st-panel { margin: 0; }
.st-kpis, .ld-boxes { gap: 16px; }
/* Icona e titolo sempre staccati */
.st-panel h2 > span > i, .ig-sub > i, .page-header h1 > i, .st-kpi-label > i { margin-right: .55rem; }
.st-panel h2 > span { display: inline-flex; align-items: center; }
/* Pannelli affiancati: sempre della stessa altezza */
.st-grid { align-items: stretch; }
.st-grid > .st-panel { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.st-grid > .st-panel > .pf-actions:last-child { margin-top: auto; }
.ld-boxes { align-items: stretch; } .ld-boxes > .ld-box { height: 100%; box-sizing: border-box; }
/* Finestra sopra la pagina (al posto di pagine separate per i moduli brevi) */
dialog.pf-modal { width: min(1000px, 96vw); max-width: none; max-height: 92vh; padding: 1rem 1.1rem; border: 1px solid var(--slate-700); border-radius: 14px; background: var(--slate-950); color: var(--slate-200); overflow: auto; }
dialog.pf-modal::backdrop { background: rgba(0,0,0,.6); }
dialog.pf-modal .md-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 12px; }
dialog.pf-modal .md-head h2 { margin: 0; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .55rem; }
dialog.pf-modal .md-close { padding: .25rem .55rem; }
dialog.pf-modal label { display: block; }
dialog.pf-modal .pf-list label { display: flex; }
dialog.pf-modal .pf-check { display: flex; }
dialog.pf-modal input[type=checkbox] { width: auto; margin: 0; }
/* Andamento utilizzo 30 giorni */
.ut-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.ut-card { background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 12px; padding: .8rem .9rem .7rem; display: flex; flex-direction: column; gap: .4rem; }
.ut-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.ut-label { font-weight: 600; color: var(--slate-100); font-size: .9rem; }
.ut-sub { display: block; font-size: .72rem; color: var(--slate-500); }
.ut-now { text-align: right; } .ut-big { font-size: 1.45rem; font-weight: 700; color: var(--slate-100); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ut-plot { width: 100%; } .ut-plot svg { display: block; width: 100%; height: auto; }
.ut-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.ut-grid { stroke: var(--slate-800); stroke-width: 1; } .ut-quota { stroke: var(--slate-500); stroke-width: 1; }
.ut-axis { fill: var(--slate-500); font-size: 10px; font-variant-numeric: tabular-nums; }
.ut-area { fill: var(--blue-400); fill-opacity: .12; stroke: none; }
.ut-line { fill: none; stroke: var(--blue-400); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ut-end { fill: var(--blue-400); stroke: var(--slate-900); stroke-width: 2; }
.ut-endlabel { fill: var(--slate-200); font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--slate-900); stroke-width: 3px; }
.ut-over { fill: var(--amber-400); stroke: var(--slate-900); stroke-width: 2; }
.ut-overzone { opacity: .5; } .ut-hatch { stroke: var(--amber-600); stroke-width: 1; opacity: .35; }
.ut-cross { stroke: var(--slate-500); stroke-width: 1; }
.ut-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--slate-950); border: 1px solid var(--slate-700); border-radius: 8px; padding: .5rem .65rem; font-size: .76rem; color: var(--slate-300); box-shadow: 0 6px 20px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: .15rem; min-width: 160px; }
.ut-tip strong { color: var(--slate-100); font-size: .8rem; margin-bottom: .15rem; } .ut-tip b { color: var(--slate-100); font-variant-numeric: tabular-nums; }
.ut-tip-row { display: flex; align-items: center; gap: .4rem; } .ut-key { display: inline-block; width: 12px; height: 2px; background: var(--blue-400); border-radius: 1px; }
.ut-tip-warn { color: var(--slate-100); } .ut-tip-warn i { color: var(--amber-400); }
.ut-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--slate-400); margin: 0 0 .7rem; }
.ut-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.ut-sw-line { width: 14px; height: 2px; background: var(--blue-400); border-radius: 1px; } .ut-sw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber-400); }
.ut-sw-zone { width: 14px; height: 10px; background: repeating-linear-gradient(45deg, var(--amber-600) 0 1px, transparent 1px 4px); opacity: .6; border: 1px solid var(--slate-600); }
/* Uptime 30 giorni (quadratini): forma + colore, mai il solo colore */
.up-strip { display: inline-flex; gap: 2px; vertical-align: middle; margin-top: .3rem; }
.up-d { display: inline-block; width: 7px; height: 12px; border-radius: 2px; box-sizing: border-box; }
.up-strip--big .up-d { width: 11px; height: 20px; border-radius: 3px; gap: 3px; }
.up-strip--big { gap: 3px; }
.up-d--up { background: var(--green-500); }
.up-d--down { background: var(--red-500); background-image: linear-gradient(to bottom, transparent 40%, var(--slate-950) 40%, var(--slate-950) 60%, transparent 60%); }
.up-d--unknown { border: 1px solid var(--slate-600); background: transparent; }
.up-d--none { background: transparent; border: 1px dashed var(--slate-800); }
.up-sum { display: block; font-size: .7rem; color: var(--slate-500); margin-top: .15rem; }
.up-sum i { color: var(--amber-400); }
.up-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .72rem; color: var(--slate-400); margin: 0 0 .6rem; }
.up-legend span { display: inline-flex; align-items: center; gap: .35rem; }
/* Editor regole firewall */
.fw-rules td { vertical-align: middle; }
.fw-rules input, .fw-rules select { margin: 0 !important; width: 100%; box-sizing: border-box; }
.fw-rules td.act button { margin: 0; }

/* Logo 7dCloud nella barra e nel login */
.sb-logo { display: block; padding: .35rem .9rem .25rem; }
.sb-logo img { display: block; width: 100%; max-width: 190px; height: auto; }
.sb-logo--login { padding: 0 0 1rem; } .sb-logo--login img { max-width: 240px; margin: 0 auto; }
.sidebar-brand { padding-top: .6rem; padding-bottom: .4rem; }

/* Voce di menu presente ma disattivata (funzione opzionale non abilitata) */
.sidebar-sublink.sb-off { opacity: .45; cursor: not-allowed; } .sidebar-sublink.sb-off small { font-size: .65rem; margin-left: .3rem; }
/* Mappa del mondo in dashboard */
.wm-wrap { position: relative; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--blue-700) 18%, transparent), transparent 70%); border-radius: 12px; overflow: hidden; }
.wm-wrap svg { display: block; width: 100%; height: auto; }
.wm-land circle { fill: var(--slate-600); opacity: .55; }
.wm-site { cursor: pointer; outline: none; }
.wm-site .wm-dot { fill: var(--blue-400); stroke: var(--slate-950); stroke-width: 1.5; }
.wm-site--off .wm-dot { fill: var(--slate-500); opacity: .7; }
.wm-site--warn .wm-dot { fill: var(--amber-400); }
.wm-site .wm-mark { fill: var(--slate-950); font-size: 8px; font-weight: 800; pointer-events: none; }
.wm-site .wm-label { fill: var(--slate-200); font-size: 9.5px; font-weight: 600; paint-order: stroke; stroke: var(--slate-950); stroke-width: 3px; pointer-events: none; }
.wm-site--off .wm-label { fill: var(--slate-500); font-weight: 500; }
.wm-site:hover .wm-dot, .wm-site:focus .wm-dot { stroke: var(--blue-200); }
.wm-pulse { fill: none; stroke: var(--blue-400); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wm-pulse 3s ease-out infinite; }
.wm-pulse--2 { animation-delay: 1.5s; }
.wm-site--warn .wm-pulse { stroke: var(--amber-400); }
@keyframes wm-pulse { 0% { transform: scale(.25); opacity: .9; } 70% { opacity: .15; } 100% { transform: scale(1.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wm-pulse { animation: none; opacity: .25; transform: scale(.6); } }
.wm-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--slate-950); border: 1px solid var(--slate-700); border-radius: 8px; padding: .5rem .65rem; font-size: .76rem; color: var(--slate-300); box-shadow: 0 6px 20px rgba(0,0,0,.35); min-width: 170px; max-width: 280px; }
.wm-tip strong { color: var(--slate-100); font-size: .85rem; display: block; } .wm-tip-sub { display: block; color: var(--slate-500); margin-bottom: .3rem; }
.wm-tip-row { display: block; margin-top: .15rem; } .wm-tip-row i { color: var(--blue-400); margin-right: .25rem; } .wm-tip-row .fa-triangle-exclamation { color: var(--amber-400); }
.wm-tip-muted { color: var(--slate-500); } .wm-tip-list { margin: .35rem 0 0; padding-left: 1rem; color: var(--slate-200); }
.wm-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--slate-400); margin: .6rem 0 0; align-items: center; }
.wm-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.wm-sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .wm-sw--on { background: var(--blue-400); } .wm-sw--warn { background: var(--amber-400); } .wm-sw--off { background: var(--slate-500); opacity: .7; }
.wm-failed::after { content: 'Mappa non disponibile'; color: var(--slate-500); display: block; padding: 2rem; text-align: center; }
/* Schede risorse in dashboard */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rc-card { display: block; background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 12px; padding: .8rem .9rem; color: inherit; text-decoration: none !important; transition: border-color .15s; }
.rc-card:hover { border-color: var(--blue-500); }
.rc-card .rc-name { font-weight: 600; color: var(--slate-100); font-size: .92rem; display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.rc-card .rc-meta { font-size: .74rem; color: var(--slate-500); margin: .25rem 0 .5rem; }
.rc-card .rc-stats { display: flex; gap: .9rem; font-size: .76rem; color: var(--slate-300); } .rc-card .rc-stats i { color: var(--blue-400); margin-right: .25rem; }

.wm-inset-bg { fill: var(--slate-950); opacity: .85; }
.wm-inset-frame { fill: none; stroke: var(--slate-600); stroke-width: 1; }
.wm-inset-title { fill: var(--slate-400); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.wm-land--inset circle { fill: var(--slate-600); opacity: .5; }
.wm-eu-box { fill: none; stroke: var(--slate-500); stroke-width: 1; stroke-dasharray: 3 3; }
.wm-eu-link { stroke: var(--slate-600); stroke-width: 1; stroke-dasharray: 3 3; }
/* Pagina "I tuoi servizi" */
.hs-body { min-height: 100vh; display: flex; flex-direction: column; background: var(--slate-950); }
.hs-top { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.6rem; border-bottom: 1px solid var(--slate-800); background: var(--slate-900); gap: 1rem; flex-wrap: wrap; }
.hs-logo img { height: 46px; width: auto; display: block; }
.hs-user { display: flex; align-items: center; gap: 1rem; } .hs-user form { margin: 0; }
.hs-who { display: flex; flex-direction: column; text-align: right; color: var(--slate-200); font-size: .85rem; } .hs-who small { color: var(--slate-500); font-size: .72rem; }
.hs-main { width: min(1180px, 100%); margin: 0 auto; padding: 2rem 1.6rem 1rem; box-sizing: border-box; flex: 1; }
.hs-hello { margin: 0; font-size: 1.6rem; color: var(--slate-100); font-weight: 650; }
.hs-sub { margin: .3rem 0 1.6rem; color: var(--slate-500); font-size: .9rem; }
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: stretch; }
.hs-tile { display: flex; flex-direction: column; gap: .9rem; background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 14px; padding: 1.1rem 1.2rem; text-decoration: none !important; color: inherit; transition: border-color .15s, transform .15s; min-height: 190px; box-sizing: border-box; }
.hs-tile:hover, .hs-tile:focus { border-color: var(--blue-500); transform: translateY(-2px); outline: none; }
.hs-tile-head { display: flex; gap: .85rem; align-items: flex-start; }
.hs-tile-icon { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue-600) 20%, transparent); color: var(--blue-400); font-size: 1.25rem; }
.hs-tile-name { display: flex; flex-direction: column; font-size: 1.08rem; font-weight: 650; color: var(--slate-100); } .hs-tile-name small { font-weight: 400; color: var(--slate-500); font-size: .76rem; margin-top: .2rem; }
.hs-stats { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .8rem; color: var(--slate-400); } .hs-stats i { color: var(--blue-400); margin-right: .35rem; } .hs-stats b { color: var(--slate-100); font-size: .95rem; margin-right: .15rem; }
.hs-tile-foot { margin-top: auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.hs-note { color: var(--slate-500); font-size: .74rem; } .hs-go { margin-left: auto; color: var(--blue-400); font-size: .8rem; font-weight: 600; }
.hs-foot { text-align: center; color: var(--slate-600); font-size: .72rem; padding: 1rem; }
/* Barra laterale: ritorno ai servizi e nome del modulo */
.sb-services { display: flex; align-items: center; gap: .5rem; margin: .3rem .9rem .2rem; padding: .4rem .6rem; border: 1px solid var(--slate-700); border-radius: 8px; color: var(--slate-300) !important; font-size: .78rem; text-decoration: none !important; }
.sb-services:hover { border-color: var(--blue-500); color: var(--slate-100) !important; }
.sb-module { display: block; margin: .5rem .9rem 0; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); font-weight: 700; }
/* Dashboard amministrazione: tasselli dei moduli */
.ad-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ad-mod { display: flex; align-items: center; gap: .7rem; background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 12px; padding: .7rem .8rem; }
.ad-mod--off { opacity: .6; }
.ad-mod-icon { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue-600) 20%, transparent); color: var(--blue-300); }
.ad-mod-name { flex: 1; display: flex; flex-direction: column; font-weight: 600; color: var(--slate-100); font-size: .88rem; } .ad-mod-name small { font-weight: 400; color: var(--slate-500); font-size: .72rem; }
/* Pulsanti segmentati con link: spaziatura leggibile */
.st-toolbar .st-seg { display: flex; flex-wrap: wrap; gap: 6px; height: auto; overflow: visible; background: none; border-radius: 0; margin-bottom: 0; }
.st-seg > a.btn { display: inline-flex; align-items: center; padding: .32rem .75rem; font-size: .78rem; border-radius: 8px; line-height: 1.2; }

.wm-tip-tenant { color: var(--slate-500); }

/* Scheda cliente: servizi assegnati (chip con x = da togliere al salvataggio) + tendina dei servizi liberi */
.svc-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.svc-chips { display: contents; }
.svc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .55rem; border: 1px solid var(--blue-700); border-radius: 999px; font-size: .78rem; color: var(--slate-100); cursor: pointer; margin: 0; }
.svc-chip > i { font-size: .7rem; color: var(--slate-400); }
.svc-chip:hover > i { color: var(--red-400); }
.svc-chip.is-new { border-style: dashed; }
.svc-chip.is-removed { opacity: .5; text-decoration: line-through; border-color: var(--red-700); }
.svc-chip.is-removed::after { content: 'da togliere'; font-size: .66rem; color: var(--red-300); text-decoration: none; }
.svc-picker select.svc-add { width: auto; min-width: 220px; max-width: 360px; margin: 0; padding: .25rem .5rem; font-size: .8rem; }
.svc-chip.is-new::after { content: 'nuovo'; font-size: .66rem; color: var(--blue-300); }
.hs-tile--soon { cursor: default; } .hs-tile--soon:hover { transform: none; }
dialog.svc-confirm { width: min(480px, 94vw); padding: 1.2rem 1.3rem; } dialog.svc-confirm h2 { margin: 0 0 .8rem; font-size: 1rem; } dialog.svc-confirm p { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.5; }
.tn-logo { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .8rem; } .tn-logo-prev { flex: 0 0 200px; height: 70px; display: grid; place-items: center; border: 1px dashed var(--slate-600); border-radius: 10px; padding: .4rem; } .tn-logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Marchio Eagle Network (scritta finche' non c'e' il file del logo) */
.en-brand { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.45rem; letter-spacing: .01em; color: var(--slate-50); white-space: nowrap; }
.en-brand > i { color: var(--blue-400); font-size: 1.3rem; }
.en-brand b { font-weight: 800; color: var(--blue-300); margin-left: .3rem; }
.sb-logo--login .en-brand { display: flex; justify-content: center; font-size: 1.7rem; }
.hs-logo { text-decoration: none; }
.sb-logo--login img[src*="eaglenetwork-logo"] { max-width: 170px; } .hs-logo img[src*="eaglenetwork-logo"] { height: 64px; }
.cs-company { margin: .9rem 0 0; text-align: right; font-size: .75rem; color: var(--slate-400); }
/* Pagina "I tuoi servizi": applicazioni web sotto i moduli (blocchetti piccoli, separatore con titolo) */
.hs-sep { display: flex; align-items: center; gap: .8rem; margin: 8px 0 16px; color: var(--slate-400); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hs-sep::before, .hs-sep::after { content: ""; flex: 1; height: 1px; background: var(--slate-800); }
.hs-sep span { display: inline-flex; align-items: center; gap: .5rem; } .hs-sep i { color: var(--blue-400); }
.hs-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.hs-app { display: flex; align-items: center; gap: .7rem; background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 12px; padding: .7rem .85rem; text-decoration: none !important; color: inherit; transition: border-color .15s, transform .15s; }
.hs-app:hover, .hs-app:focus { border-color: var(--blue-500); transform: translateY(-2px); outline: none; }
.hs-app-icon { flex: 0 0 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue-600) 20%, transparent); color: var(--blue-400); font-size: .95rem; }
.hs-app-name { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; font-weight: 600; color: var(--slate-100); }
.hs-app-name small { font-weight: 400; color: var(--slate-500); font-size: .72rem; margin-top: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-app-go { margin-left: auto; color: var(--slate-500); font-size: .75rem; }

/* Lingua del portale (partials/locale-dialog): una scheda per lingua, la scelta attuale evidenziata con bordo e spunta (non solo colore). */
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 1rem 0; }
.lc-card { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .8rem 1rem; text-align: left; }
.lc-card[aria-checked="true"] { border-color: var(--blue-500); }
.lc-code { font-family: monospace; font-size: .75rem; color: var(--slate-500); }
.lc-name { font-weight: 600; color: var(--slate-100); }
.lc-check { font-size: .72rem; color: var(--blue-400); }

/* Note locali sui record DNS (pagina della zona): icona che apre la finestra della nota; con nota = piena e primaria, senza = vuota e grigia (mai solo il colore). */
.rn-link { display: inline-block; padding: .1rem .35rem; font-size: .95rem; line-height: 1; text-decoration: none !important; }
.rn-link.rn-has { color: var(--blue-400); }
.rn-link.rn-none { color: var(--slate-500); }
.rn-link:hover, .rn-link:focus { color: var(--blue-300); }
.rn-edit-note { font-size: .72rem; margin-top: .25rem; white-space: normal; line-height: 1.3; }
.fw-rules td.act .rn-link { margin-right: .4rem; vertical-align: middle; }
.rn-edit-note[hidden] { display: none; }

/* Login SSO (auth/sso, auth/denied): pannello del marchio con un solo bottone, allineato a destra come i moduli */
.sso-login .sso-intro { margin: .2rem 0 .6rem; font-size: .95rem; color: var(--slate-100); line-height: 1.5; }
.sso-login .sso-help { margin: 0 0 1rem; font-size: .78rem; color: var(--slate-400); line-height: 1.4; } .sso-login .sso-help i { color: var(--blue-400); margin-right: .3rem; }
.sso-login .dialog-actions { display: flex; justify-content: flex-end; }
.sso-denied-title { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--slate-100); } .sso-denied-title i { color: var(--amber-400); margin-right: .4rem; }
.cs-login .sso-help { margin: -.4rem 0 .9rem; font-size: .78rem; color: var(--slate-400); } .cs-login .sso-help i { color: var(--amber-400); margin-right: .3rem; }
/* Tassello di un servizio esterno in "I tuoi servizi" (si apre in una nuova scheda) */
.hs-tile--ext .hs-tile-icon { background: color-mix(in srgb, var(--green-600) 18%, transparent); color: var(--green-400); }
.hs-tile--ext .hs-stats b { font-size: .9rem; }