/* Scoped notification centre. Keep general portal form styles outside this surface. */
dialog.notifications-panel{width:min(480px,100vw);background:#F7F9FC;overflow:hidden;border-left:1px solid #e4eaf1;box-shadow:-24px 0 80px #0b172a26}
.notifications-panel[open]{display:flex;flex-direction:column}
.notifications-panel *{box-sizing:border-box}
.notifications-panel>header{position:static;flex:none;padding:26px 24px;border-bottom:1px solid #e7ecf2;background:white}
.notification-heading{display:flex;align-items:center;gap:14px}
.notification-heading-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#eef5ff;color:#1570EF;font-size:25px}
.notifications-panel header small{color:#667085;font-size:10px;letter-spacing:1.5px;font-weight:700}
.notifications-panel h2{margin:4px 0 0;font-size:25px;line-height:1.15;letter-spacing:-.7px}
.notifications-panel .notification-close{border:0;background:#f4f6f9;border-radius:50%;color:#667085}
.notifications-panel .notification-close:hover{background:#e8edf4;color:#0B172A}
.notification-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.notifications-panel .notification-toolbar{padding:22px 24px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.notification-toolbar>span{font-size:12px;font-weight:650;color:#475467}
.notification-bulk-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.notifications-panel .notification-toolbar button{min-height:32px;padding:4px 0;font-size:11px;font-weight:600;white-space:nowrap}
.notifications-panel .notification-toolbar button:disabled{color:#98a2b3}
.notifications-panel .notifications-content{padding:0 20px 24px;gap:12px}
.notifications-panel .notification-item{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;gap:12px;border:1px solid #e4eaf1;border-radius:16px;padding:18px;background:white;box-shadow:0 2px 4px #0b172a03}
.notifications-panel .notification-item.is-unread{border-color:#bde7e1;box-shadow:inset 3px 0 #20B8AA,0 2px 4px #0b172a03}
.notifications-panel .notification-item.is-selected{background:#f3f8ff;outline:2px solid #bfd8fc;outline-offset:-2px}
.notifications-panel .notification-item>.mdi{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#eaf8f5;color:#098478;font-size:21px}
.notifications-panel .notification-item.is-pending>.mdi{background:#edf4ff;color:#1570EF}
.notifications-panel .notification-item>.mdi-alert-circle-outline{background:#fff2e9;color:#b54708}
.notification-card-content{min-width:0;overflow-wrap:anywhere}
.notifications-panel .notification-item h3{margin:0 0 6px;font-size:14px;line-height:1.5;letter-spacing:-.15px;font-weight:650}
.notifications-panel .notification-item p{margin:0 0 12px;font-size:12px;line-height:1.75;color:#667085}
.notification-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.notifications-panel .notification-card-meta time{font-size:10px;color:#8893a3;line-height:1.5}
.notifications-panel .notification-item [data-dismiss]{float:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:4px 6px;min-height:30px;border:0;border-radius:6px;background:transparent;color:#667085;font:inherit;font-size:11px;cursor:pointer}
.notifications-panel .notification-item [data-dismiss]:hover{background:#f0f3f7;color:#0B172A}
.notifications-panel .notification-download{display:inline-flex;justify-content:space-between;align-items:center;gap:18px;margin-top:10px;padding:9px 12px;border:1px solid #dce9f9;border-radius:8px;background:#f2f7ff;color:#1570EF;font-size:12px;font-weight:600;line-height:1.5;text-decoration:none;max-width:100%}
.notifications-panel .notification-download:hover{background:#e6f0ff}
.notification-caught-up{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#eaf7f4;color:#087b70}
.notification-caught-up>.mdi{font-size:24px}.notification-caught-up b{display:block;font-size:12px;font-weight:600}.notification-caught-up small{display:block;font-size:11px;margin-top:4px;color:#4b827a}
.notifications-panel .notifications-empty{margin:26px 0;padding:44px 20px;text-align:center;border:1px dashed #dce4eb;border-radius:18px;background:#ffffff80}
.notifications-panel .notifications-empty>.mdi{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#e7f5f1;font-size:32px;color:#169c8f}
.notifications-panel .notifications-empty h3{font-size:16px;letter-spacing:-.3px;margin:20px 0 8px}.notifications-panel .notifications-empty p{font-size:12px;line-height:1.8;margin:0 auto;max-width:260px}
.notifications-panel .notification-error:empty{display:none}
.notifications-panel .notification-preferences{display:block;flex:none;max-height:48dvh;overflow:auto;padding:0;margin:0;border:0;border-top:1px solid #e4eaf1;background:white}
.notification-preferences>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;padding:18px 24px;min-height:74px;color:#344054;font-size:12px;font-weight:600}
.notification-preferences>summary::-webkit-details-marker{display:none}
.notification-preferences>summary>.mdi:first-child{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:#f1f4f8;font-size:19px;color:#667085}
.notification-preferences>summary>.mdi:last-child{margin-left:auto;font-size:20px;color:#98a2b3;transition:transform .15s}
.notification-preferences[open]>summary>.mdi:last-child{transform:rotate(180deg)}
.notifications-panel .notification-preferences summary small{display:block;font-size:10px;color:#8893a3;font-weight:400;line-height:1.6;margin-top:3px}
.notification-preferences-body{padding:0 24px 20px}
.notifications-panel .notification-preference-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;margin:0;border-top:1px solid #edf0f4;cursor:default}
.notification-preference-row>span{min-width:0}.notification-preference-row b{font-size:12px;font-weight:600;color:#344054;display:block}
.notifications-panel .notification-preference-row small{font-size:11px;color:#8893a3;line-height:1.6;display:block;margin-top:3px}
.notifications-panel .notification-switch,.notifications-panel #notifications-sound{position:relative;appearance:none;flex:0 0 42px;width:42px;height:24px;min-width:42px;min-height:24px;padding:0;margin:0;border:0;border-radius:20px;background:#d7dfe9;cursor:pointer;transition:background .15s;font-size:0;box-shadow:none}
.notifications-panel .notification-switch::after,.notifications-panel #notifications-sound::after{content:'';display:block;position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0b172a26;transition:transform .15s}
.notifications-panel .notification-switch[aria-checked=true],.notifications-panel #notifications-sound:checked{background:#20B8AA}
.notifications-panel .notification-switch[aria-checked=true]::after,.notifications-panel #notifications-sound:checked::after{transform:translateX(18px)}
.notifications-panel .notification-switch:disabled{opacity:.45;cursor:not-allowed}
.notification-sound-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0 10px}
.notifications-panel #notifications-test-sound{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid #e0e7ef;background:#fff;border-radius:8px;color:#475467;font-size:11px;font-weight:500;cursor:pointer}
#notifications-test-sound>.mdi{font-size:18px;color:#1570EF}.notification-sound-preview>span{font-size:10px;color:#98a2b3}
.notifications-panel #notifications-permission-status{margin:6px 0 0;padding:10px 12px;background:#f7f9fc;border-radius:8px;font-size:10px;line-height:1.7;color:#667085}
.notifications-panel :is(button,a,input,summary):focus-visible{outline:2px solid #1570EF;outline-offset:3px}
@media(max-width:380px){.notifications-panel>header{padding:20px 16px}.notifications-panel .notification-toolbar{padding:16px}.notifications-panel .notifications-content{padding:0 12px 18px}.notification-bulk-actions{gap:10px}.notifications-panel .notification-item{padding:14px;gap:10px;grid-template-columns:30px minmax(0,1fr)}.notifications-panel .notification-item>.mdi{width:30px;height:30px;font-size:19px}.notification-preferences>summary{padding:16px}.notification-preferences-body{padding:0 16px 16px}}
@media(prefers-reduced-motion:reduce){.notifications-panel *{transition:none!important}}

/* One notification entry point, at the right edge of every portal header. */
.app-shell .topbar{justify-content:flex-start;gap:16px}
.app-shell .topbar>.mobile-menu{margin-right:0;flex-shrink:0}
.app-shell .topbar>div{flex:1;min-width:0}
.app-shell .topbar>.outline{margin-left:auto;flex-shrink:0}
.app-shell .topbar .topbar-notifications{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:1px solid #e4eaf1;border-radius:12px;background:#f7f9fc;color:#475467;cursor:pointer;line-height:1}
.topbar-notifications>.mdi{font-size:23px;line-height:1}
.app-shell .topbar .topbar-notifications:hover,.app-shell .topbar .topbar-notifications[aria-expanded=true]{background:#edf5ff;border-color:#c5dbfa;color:#1570EF}
.topbar-notifications:focus-visible{outline:2px solid #1570EF;outline-offset:3px}
.topbar-notifications .notification-count{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:20px;height:20px;margin:0;padding:0 5px;border:2px solid white;border-radius:12px;background:#20B8AA;color:#0B172A;font-size:10px;font-weight:750;line-height:1}
.topbar-notifications .notification-count[hidden]{display:none}
@media(max-width:480px){.app-shell .topbar{gap:10px;padding-left:16px;padding-right:16px}.app-shell .topbar h1{font-size:18px;overflow-wrap:anywhere}.app-shell .topbar>.outline{font-size:12px;padding:8px 10px}.app-shell .topbar>div>small{font-size:9px;letter-spacing:0}}

.app-shell .topbar .topbar-notifications{margin-left:auto}.app-shell .topbar>.outline+.topbar-notifications{margin-left:0}

.notifications-panel [data-read]{border:0;background:transparent;color:#1570EF;font:inherit;font-size:11px;padding:4px 0;min-height:30px;cursor:pointer}.notifications-panel [data-read]:disabled{opacity:.5}

/* Compact inbox anchored to the notification bell. */
dialog.notifications-panel{position:fixed;inset:76px 20px auto auto;margin:0;padding:0;width:min(440px,calc(100vw - 32px));height:auto;max-height:calc(100dvh - 96px);border:1px solid #e4eaf1;border-radius:16px;background:#fff;box-shadow:0 16px 50px #0b172a24}
dialog.notifications-panel::backdrop{background:#0b172a18;backdrop-filter:none}
.notifications-panel>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;min-height:0;gap:12px}
.notifications-panel .notification-heading{gap:10px}.notifications-panel .notification-heading-icon{width:30px;height:30px;background:transparent;border-radius:0;font-size:23px}
.notifications-panel h2{font-size:19px;letter-spacing:-.3px;margin:0}
.notifications-panel .notification-close{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;min-height:36px;border-radius:9px}
.notifications-panel .notification-toolbar{padding:12px 20px;gap:10px;flex-wrap:wrap;background:#fff}
.notifications-panel .notifications-content{display:grid;gap:0;padding:0 20px 12px}
.notifications-panel .notification-item{grid-template-columns:26px minmax(0,1fr);gap:10px;padding:16px 0;border:0;border-bottom:1px solid #edf0f4;border-radius:0;box-shadow:none;background:transparent}
.notifications-panel .notification-item.is-unread{border-color:#edf0f4;box-shadow:none;background:transparent}
.notifications-panel .notification-item.is-unread h3:after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#1570ef;margin:0 0 2px 8px}
.notifications-panel .notification-item.is-selected{background:#f5f9ff;outline:0;border-radius:8px}
.notifications-panel .notification-item>.mdi{width:26px;height:28px;background:transparent;font-size:21px;border-radius:0}
.notifications-panel .notification-item h3{font-size:13px;font-weight:600;margin-bottom:4px}
.notifications-panel .notification-item p{font-size:12px;line-height:1.6;margin-bottom:8px}
.notifications-panel .notification-download{background:transparent;border:0;border-radius:0;padding:4px 0;margin-top:5px;font-size:12px;min-height:32px}
.notifications-panel .notification-download:hover{background:transparent;text-decoration:underline}
.notifications-panel .notification-caught-up{padding:10px 0;background:transparent;border-radius:0;font-size:12px}.notifications-panel .notification-caught-up small{display:none}
.notifications-panel .notifications-empty{border:0;background:transparent;margin:0;padding:32px 12px}
.notifications-panel .notifications-empty>.mdi{width:44px;height:44px;font-size:25px}.notifications-panel .notifications-empty h3{font-size:14px;margin-top:14px}
.notifications-panel .notification-preferences>summary{min-height:48px;padding:12px 20px;gap:8px}
.notifications-panel .notification-preferences>summary>.mdi:first-child{width:24px;height:24px;background:transparent;font-size:19px}
.notifications-panel .notification-preferences summary small{display:none}
.notifications-panel .notification-preferences-body{padding:0 20px 12px}.notifications-panel .notification-preference-row{padding:12px 0}
@media(max-width:600px){dialog.notifications-panel{top:70px;right:12px;width:calc(100vw - 24px);max-height:calc(100dvh - 82px)}.notifications-panel .notification-bulk-actions{gap:12px}.notifications-panel .notification-toolbar button,.notifications-panel [data-read],.notifications-panel .notification-item [data-dismiss]{min-height:40px}}

/* Report download sits beside the message instead of taking a separate row. */
.notifications-panel .notification-item{padding:12px 0;gap:8px;grid-template-columns:22px minmax(0,1fr)}
.notifications-panel .notification-item>.mdi{width:22px;height:24px;font-size:19px}
.notifications-panel .notification-item h3{margin-bottom:3px;font-size:12px;line-height:1.4}
.notifications-panel .notification-item p{margin-bottom:5px;font-size:11px;line-height:1.5}
.notifications-panel .notification-card-content{position:relative}
.notifications-panel .notification-card-content.has-download>h3,.notifications-panel .notification-card-content.has-download>p{padding-right:46px}
.notifications-panel .notification-download-icon{position:absolute;right:0;top:0;display:grid;place-items:center;justify-content:center;align-content:center;width:40px;height:40px;min-height:40px;padding:0;margin:0;border-radius:9px;color:#1570ef;background:#f2f7ff;text-decoration:none}
.notifications-panel .notification-download-icon:hover{background:#e6f0ff;text-decoration:none}
.notifications-panel .notification-card-meta{gap:4px 8px;justify-content:flex-start}
.notifications-panel .notification-card-meta time{margin-right:auto}
.notifications-panel .notification-item [data-read],.notifications-panel .notification-item [data-dismiss]{font-size:10px;min-height:30px;padding:3px 0}
@media(max-width:600px){.notifications-panel .notification-download-icon{width:44px;height:44px}.notifications-panel .notification-item [data-read],.notifications-panel .notification-item [data-dismiss]{min-height:36px}}

/* Keep every action inside the row, with a shared right-hand alignment. */
.notifications-panel .notifications-content{padding:0 12px 12px;gap:4px}
.notifications-panel .notification-item{padding:12px;border:1px solid transparent;border-bottom-color:#edf0f4;border-radius:10px;min-width:0}
.notifications-panel .notification-item.is-unread{border-color:transparent;border-bottom-color:#edf0f4}
.notifications-panel .notification-item.is-selected{background:#f3f8ff;border-color:#e3edfb;border-radius:10px;outline:0}
.notifications-panel .notification-item>.mdi{align-self:start;margin:0}
.notifications-panel .notification-card-meta{display:grid;grid-template-columns:minmax(0,1fr) auto 40px;gap:4px 8px;align-items:center;min-width:0}
.notifications-panel .notification-card-meta time{grid-column:1;margin:0;min-width:0}
.notifications-panel .notification-item [data-read]{grid-column:2;text-align:center}
.notifications-panel .notification-item [data-dismiss]{grid-column:3;display:grid;place-items:center;width:40px;margin:0;padding:3px 0}
.notifications-panel .notification-caught-up{padding:10px 12px}
@media(max-width:600px){.notifications-panel .notification-card-meta{grid-template-columns:minmax(0,1fr) auto 44px;gap:4px 6px}.notifications-panel .notification-item [data-dismiss]{width:44px}}