/* SSO Citymall Daily Operations v11: accessible notification center. */
.priority-notification-banner { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 16px; padding:13px 16px; border:1px solid #f1bd4c; border-left:5px solid #ef9d16; border-radius:13px; background:linear-gradient(100deg,#fff8df,#fffdf5); color:#563f0b; box-shadow:0 10px 26px rgba(164,113,7,.09); }
.priority-notification-banner strong { display:block; margin-bottom:2px; font-family:Outfit,sans-serif; }
.priority-notification-banner p { margin:0; color:#775a18; font-size:13px; }
.priority-notification-banner .row-actions { flex:none; align-items:center; }
.notification-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:15px 0 12px; }
.notification-settings-trigger { padding:7px 10px; font-size:11px; }
.notification-item { position:relative; }
.notification-item .notification-kind { display:inline-flex; align-items:center; gap:5px; margin:0 0 7px; color:#52657c; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.notification-item .notification-time { display:block; margin-top:7px; }
.notification-item.priority { border-left-color:#ec9917; background:#fffaf0; }
.notification-item .source-badge { margin-left:6px; vertical-align:middle; }
.notification-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:16px 0; }
.notification-setting { display:flex; align-items:flex-start; gap:9px; min-height:78px; margin:0; padding:12px; border:1px solid var(--sso-border,#e5e1d8); border-radius:11px; background:#fbfcfe; cursor:pointer; }
.notification-setting input { width:auto; margin:2px 0 0; accent-color:#f0b900; }
.notification-setting b { display:block; color:var(--sso-text,#192a3d); font:800 13px Outfit,sans-serif; }
.notification-setting small { display:block; margin-top:3px; color:var(--sso-muted,#68788c); font-size:11px; line-height:1.35; }
.notification-type-settings { display:grid; gap:7px; margin:18px 0; padding:14px; border:1px solid var(--sso-border,#e5e1d8); border-radius:11px; }
.notification-type-settings h3 { margin:0 0 2px; color:var(--sso-text,#192a3d); font:800 15px Outfit,sans-serif; }
.notification-type-settings label { margin:0; color:#435972; font-size:12px; font-weight:700; }
.notification-type-settings input { width:auto; margin:0 7px 0 0; accent-color:#f0b900; }
.notification-browser-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0; padding:13px; border-radius:11px; background:#eef5fb; color:#304966; }
.notification-browser-row b,.notification-browser-row small { display:block; }
.notification-browser-row small { margin-top:3px; color:#60758e; font-size:11px; }
.notification-browser-row > div:last-child { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.notification-browser-row button { padding:8px 9px; font-size:11px; }
.notification-email-note { margin:18px 0; padding:13px; border:1px dashed #d6b55f; border-radius:11px; background:#fffdf7; color:#5d4e26; }
.notification-email-note p { margin:4px 0 0; font-size:12px; line-height:1.4; }
.notification-toast-stack { position:fixed; z-index:130; top:83px; right:18px; display:grid; gap:9px; width:min(365px,calc(100vw - 30px)); pointer-events:none; }
.notification-toast { pointer-events:auto; position:relative; overflow:hidden; padding:14px 38px 14px 15px; border:1px solid #bed0e5; border-left:5px solid #397fc7; border-radius:12px; background:#fff; color:#233e5c; box-shadow:0 15px 40px rgba(20,43,72,.18); animation:notification-slide-in .26s ease-out; }
.notification-toast.priority { border-color:#efc16a; border-left-color:#ec9917; background:#fffaf0; }
.notification-toast strong { display:block; margin-bottom:3px; font:800 14px Outfit,sans-serif; }
.notification-toast p { margin:0; color:#546c87; font-size:12px; line-height:1.42; }
.notification-toast button { position:absolute; top:7px; right:7px; width:25px; height:25px; padding:0; border:0; border-radius:7px; background:transparent; color:#526a84; font-size:18px; line-height:1; }
@keyframes notification-slide-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
body.dark-mode .priority-notification-banner { border-color:#8c6820; background:#3d3219; color:#fff0b8; }
body.dark-mode .priority-notification-banner p { color:#e7cf87; }
body.dark-mode .notification-setting,body.dark-mode .notification-type-settings,body.dark-mode .notification-toast { border-color:#35465e; background:#1b293c; }
body.dark-mode .notification-setting b,body.dark-mode .notification-type-settings h3 { color:#f2f6ff; }
body.dark-mode .notification-type-settings label,body.dark-mode .notification-toast { color:#e1eaf6; }
body.dark-mode .notification-browser-row { background:#1d344e; color:#e5f0fe; }
body.dark-mode .notification-browser-row small,body.dark-mode .notification-toast p { color:#b9cadf; }
body.dark-mode .notification-email-note { border-color:#796127; background:#332d1d; color:#f1df9b; }
body.dark-mode .notification-item.priority { background:#332d1d; }
@media(max-width:650px) { .notification-setting-grid { grid-template-columns:1fr; } .notification-browser-row,.notification-tools,.priority-notification-banner { align-items:flex-start; flex-direction:column; } .notification-browser-row > div:last-child { justify-content:flex-start; } .notification-toast-stack { top:72px; right:12px; width:calc(100vw - 24px); } }