/* BredaNet Assistenza v2.1 */
.settings-nav .nav-icon,
aside nav > a .nav-icon {
  display:inline-flex;
  width:1.35rem;
  min-width:1.35rem;
  align-items:center;
  justify-content:center;
  margin-right:.55rem;
  opacity:.92;
  font-size:1rem;
  line-height:1;
}
.settings-nav summary .nav-icon{margin-right:.42rem}
.settings-nav > div > a{display:flex;align-items:center;gap:0}
.account-install{width:100%;margin:.35rem 0 .15rem;background:transparent;border:1px solid rgba(255,255,255,.18);color:inherit;text-align:left;padding:.62rem .75rem;border-radius:10px;cursor:pointer}
.account-install:hover{background:rgba(255,255,255,.08)}

.portal-topbar{display:flex;justify-content:flex-end;align-items:center;min-height:42px;margin:0 0 .55rem;position:relative;z-index:50}
.notification-bell{position:relative}
.notification-bell > summary{list-style:none;position:relative;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border,#dfe7ef);border-radius:12px;background:var(--card,#fff);box-shadow:0 3px 14px rgba(17,35,53,.08);cursor:pointer;user-select:none}
.notification-bell > summary::-webkit-details-marker{display:none}
.bell-symbol{font-size:1.13rem;line-height:1}
.notification-badge{position:absolute;right:-5px;top:-6px;display:flex;min-width:19px;height:19px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#d9343a;color:#fff;font-weight:800;font-size:.69rem;border:2px solid #fff}
.notification-popover{position:absolute;right:0;top:49px;width:min(390px,calc(100vw - 32px));background:var(--card,#fff);border:1px solid var(--border,#dde6ee);border-radius:16px;box-shadow:0 18px 48px rgba(12,28,44,.22);overflow:hidden;z-index:100}
.notification-popover-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--border,#e3e9ef)}
.notification-popover-head a{font-size:.8rem;text-decoration:none}
.notification-popover-list{max-height:420px;overflow:auto}
.bell-item{display:grid;grid-template-columns:34px 1fr;gap:.55rem;padding:.8rem .9rem;border-bottom:1px solid var(--border,#edf1f5);border-left:4px solid transparent}
.bell-item.unread{background:rgba(22,137,231,.045)}
.bell-item.read{opacity:.69}
.bell-item.severity-info{border-left-color:#1689e7}
.bell-item.severity-attenzione{border-left-color:#d99000}
.bell-item.severity-critica{border-left-color:#d9343a}
.bell-item-icon{width:30px;height:30px;border-radius:9px;background:rgba(22,137,231,.09);display:grid;place-items:center;font-weight:800}
.bell-item a{display:block;color:inherit;text-decoration:none}
.bell-item b{display:block;font-size:.9rem;margin-bottom:.15rem}
.bell-item small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:275px;color:var(--muted,#667788)}
.bell-item time{display:block;font-size:.69rem;color:var(--muted,#8291a0);margin-top:.25rem}
.bell-empty{margin:0;padding:1.2rem;color:var(--muted,#667788)}
.notification-popover > form{padding:.75rem .9rem;background:rgba(0,0,0,.018)}

.notification-v20-list{display:grid;gap:.75rem}
.notification-v20{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;background:var(--card,#fff);border:1px solid var(--border,#dfe7ef);border-left:5px solid #1689e7;border-radius:14px;padding:1rem 1.05rem;box-shadow:0 3px 14px rgba(17,35,53,.045)}
.notification-v20.severity-attenzione{border-left-color:#d99000}
.notification-v20.severity-critica{border-left-color:#d9343a}
.notification-v20.read{opacity:.72}
.notification-v20 h3{margin:.2rem 0 .25rem}
.notification-v20 p{margin:.2rem 0}
.notification-v20 small{color:var(--muted,#667788)}
.notification-v20 .inline-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}

.v21-toast-stack{position:fixed;right:22px;top:22px;z-index:9999;display:grid;gap:.7rem;width:min(370px,calc(100vw - 32px));pointer-events:none}
.v21-toast{pointer-events:auto;background:#fff;border:1px solid #dfe7ef;border-left:5px solid #1689e7;border-radius:14px;padding:.9rem 2.1rem .9rem 1rem;box-shadow:0 18px 48px rgba(12,28,44,.24);position:relative;cursor:pointer;animation:v21ToastIn .18s ease-out}
.v21-toast.attention{border-left-color:#d99000}.v21-toast.critical{border-left-color:#d9343a}
.v21-toast b{display:block;margin-bottom:.22rem}.v21-toast p{margin:0;color:#5c6d7d;font-size:.88rem}
.v21-toast-close{position:absolute;right:.55rem;top:.45rem;border:0;background:transparent!important;color:#5b6a79!important;font-size:1.1rem;padding:.2rem;box-shadow:none!important}
@keyframes v21ToastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.offline-card{max-width:560px;margin:10vh auto;padding:2rem;text-align:center}
.settings-nav a[href='/settings/notifications'] .nav-icon{font-weight:800}

@media(max-width:760px){
  .portal-topbar{margin-top:.2rem}
  .notification-popover{position:fixed;left:12px;right:12px;top:64px;width:auto;max-height:calc(100vh - 86px)}
  .notification-popover-list{max-height:calc(100vh - 210px)}
  .notification-v20{display:block}.notification-v20 .inline-actions{justify-content:flex-start;margin-top:.65rem}
  .v21-toast-stack{left:16px;right:16px;top:16px;width:auto}
}

/* v2.1.1 - layout responsive autenticato: smartphone e tablet */
.mobile-nav-toggle{display:none}
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .shell{display:block!important;grid-template-columns:1fr!important;min-height:100vh!important;width:100%!important}
  .shell>aside,
  body:has(.client-header-actions) .shell>aside,
  body:has(.client-header-actions) aside{
    position:sticky!important;inset:auto!important;top:0!important;z-index:1200!important;
    width:100%!important;height:64px!important;min-height:64px!important;max-height:64px!important;
    overflow:visible!important;padding:10px 14px!important;margin:0!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;
    background:linear-gradient(180deg,var(--nav,#0b1727),var(--nav2,#12243a))!important;
  }
  .shell>aside .brand{padding:0!important;margin:0!important;min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important}
  .shell>aside .brand .mark{width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important}
  .shell>aside .brand b{font-size:1rem!important;white-space:nowrap!important}
  .shell>aside .brand small{display:none!important}
  .shell>aside>nav{display:none!important}
  .shell>aside>.account{display:none!important}
  .mobile-nav-toggle{
    display:grid!important;place-items:center!important;position:absolute!important;right:14px!important;top:10px!important;
    width:44px!important;height:44px!important;padding:0!important;border:1px solid rgba(255,255,255,.22)!important;
    border-radius:11px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;
    font-size:1.55rem!important;font-weight:700!important;line-height:1!important;box-shadow:none!important;z-index:2!important
  }
  .mobile-nav-toggle:hover{background:rgba(255,255,255,.14)!important;filter:none!important}
  .shell>aside.mobile-menu-open,
  body:has(.client-header-actions) .shell>aside.mobile-menu-open,
  body:has(.client-header-actions) aside.mobile-menu-open{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;
    overflow-y:auto!important;overflow-x:hidden!important;padding:10px 14px 24px!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important
  }
  .shell>aside.mobile-menu-open .brand{min-height:44px!important;padding-right:58px!important;flex:none!important}
  .shell>aside.mobile-menu-open>nav{display:grid!important;gap:5px!important;margin:14px 0 0!important;padding:0 0 6px!important;overflow:visible!important;flex:none!important}
  .shell>aside.mobile-menu-open>nav>a{display:flex!important;align-items:center!important;width:100%!important;min-height:44px!important;padding:11px 13px!important;white-space:normal!important}
  .shell>aside.mobile-menu-open details.admin-nav{width:100%!important}
  .shell>aside.mobile-menu-open details.admin-nav>summary{min-height:44px!important;display:flex!important;align-items:center!important;cursor:pointer!important}
  .shell>aside.mobile-menu-open details.admin-nav>div{position:static!important;width:100%!important;max-height:none!important;overflow:visible!important}
  .shell>aside.mobile-menu-open>.account{
    display:grid!important;position:static!important;right:auto!important;top:auto!important;
    margin-top:14px!important;padding:16px 8px 4px!important;border-top:1px solid rgba(255,255,255,.14)!important;gap:7px!important;flex:none!important
  }
  .shell>aside.mobile-menu-open>.account span,.shell>aside.mobile-menu-open>.account small{display:block!important}
  .shell>aside.mobile-menu-open>.account a{margin-top:4px!important}
  body.mobile-nav-locked{overflow:hidden!important;touch-action:none}
  .shell>main,body:has(.client-header-actions) main{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:20px!important;overflow-x:hidden!important}
  .portal-topbar{margin-top:0!important;margin-bottom:.8rem!important}
  .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  img,video,iframe{max-width:100%}
}
@media(max-width:600px){
  .shell>main,body:has(.client-header-actions) main{padding:14px!important}
  .shell>main>header{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-bottom:20px!important}
  .shell>main>header>.button,.shell>main>header>form{align-self:flex-start!important}
  .shell>main .card{padding:16px!important}
  .shell>main .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .shell>main .metric{min-width:0!important;padding:14px!important}
  .shell>main .metric span{font-size:1.6rem!important}
  .notification-popover{top:72px!important}
}
@media(max-width:390px){
  .shell>main .metrics{grid-template-columns:1fr!important}
}

/* v2.1.2 - stabilità e rifiniture */
.notification-popover,.notification-v20,.bell-item{min-width:0}
.bell-item b,.bell-item small,.notification-v20 h3,.notification-v20 p{overflow-wrap:anywhere}
.settings-nav .nav-icon{display:inline-grid;place-items:center;width:1.35rem;min-width:1.35rem;text-align:center}
@media(max-width:900px){
  .shell>aside{padding-top:max(10px,env(safe-area-inset-top))!important}
  .shell>aside.mobile-menu-open{padding-top:max(10px,env(safe-area-inset-top))!important;padding-bottom:max(24px,env(safe-area-inset-bottom))!important}
  .mobile-nav-toggle{top:max(10px,env(safe-area-inset-top))!important}
  .notification-popover{max-width:calc(100vw - 24px)!important}
}