/* Shared Customer, Admin, and Owner header menus. */
.header-notification-button,.header-account>summary{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid #dce6f3;border-radius:13px;background:#fff;color:#34557e;box-shadow:0 3px 10px #183a630b;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.header-notification-button:hover,.header-account>summary:hover{background:#f2f7ff;border-color:#9fc0f3;transform:translateY(-1px)}
.header-notification-button[aria-expanded=true],.header-account[open]>summary{background:#eaf2ff;border-color:#8db4ed;color:#245fc8;box-shadow:0 0 0 3px #dceaff}
.header-notification-button:focus-visible,.header-account>summary:focus-visible,.header-account-menu :is(a,button):focus-visible,.notification-panel :is(a,button):focus-visible{outline:3px solid #8bb3ff;outline-offset:2px}
.header-notification-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.header-notification-count{position:absolute;top:-6px;right:-7px;display:grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border:2px solid #fff;border-radius:999px;background:#ea4e59;color:#fff;font-size:10px;font-weight:800;line-height:1}
.header-account{position:relative;flex:none}
.header-account>summary{list-style:none}
.header-account>summary::-webkit-details-marker{display:none}
.header-user-avatar,.is-owner .owner-avatar{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:50%;background:linear-gradient(145deg,#d8e8ff,#eff5ff);color:#245fc8;font-size:15px;font-weight:800}
.header-trigger-avatar{width:35px;height:35px}
.header-account-menu,.is-customer .cm-profile-menu,.is-owner .owner-profile-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;display:block;width:min(294px,calc(100vw - 24px));padding:9px;border:1px solid #dce6f2;border-radius:17px;background:#fff;box-shadow:0 24px 56px #102c5026,0 3px 12px #102c500b;color:#243d5f;animation:header-menu-in .18s ease-out}
.header-account-identity,.is-customer .cm-profile-identity{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 11px 15px;border-bottom:1px solid #e6edf6}
.header-account-avatar,.is-owner .header-account-avatar{width:45px;height:45px;font-size:18px}
.header-account-identity>div{min-width:0}
.header-account-identity strong,.is-customer .cm-profile-identity strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1d3453;font-size:15px;font-weight:800;line-height:1.3}
.header-account-identity small{display:block;margin-top:3px;color:#7186a1;font-size:12px;font-weight:700}
.header-account-links{display:grid;gap:2px;padding:8px 0;border-bottom:1px solid #e6edf6}
.header-account-menu :is(a,button),.is-customer .cm-profile-menu :is(a,button),.is-owner .owner-profile-menu :is(a,button){display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#405876;text-align:left;text-decoration:none;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .2s,color .2s}
.header-account-menu :is(a,button):hover,.is-customer .cm-profile-menu :is(a,button):hover,.is-owner .owner-profile-menu :is(a,button):hover{background:#f1f6ff;color:#245fc8}
.header-account-menu :is(a,button)>span:first-child{display:grid;place-items:center;width:20px;flex:none;color:#6685ae;font-size:19px;line-height:1}
.header-account-menu .header-account-signout{margin-top:8px;color:#ad4252}
.header-account-menu .header-account-signout:hover{background:#fff1f3;color:#a32f44}
.header-profile-detail{margin:0 10px 7px;padding:10px 12px;border-radius:10px;background:#f5f8fd;overflow-wrap:anywhere}
.header-profile-detail small{display:block;color:#7a8ca5;font-size:11px}
.header-profile-detail strong{display:block;margin-top:3px;color:#29486f;font-size:12px}
.is-customer #notification-button,.is-admin #notification-button,.is-owner #owner-notification-button{width:44px;height:44px;padding:0;font-size:0}
.is-customer #notification-button:before,.is-admin #notification-button:before{display:none}
.is-customer .cm-profile summary,.is-owner .owner-profile summary,.is-admin .admin-profile summary{width:44px;height:44px;padding:0;border-radius:13px}
.is-owner .owner-profile summary{gap:8px;padding:0 7px;width:auto;min-width:44px}
.is-owner .owner-profile summary .owner-avatar{width:32px;height:32px}
.is-owner .owner-profile-menu>*{padding:0;border:0;border-radius:0;background:none;cursor:auto}
.is-owner .owner-profile-menu .header-account-signout{padding:10px 12px;cursor:pointer}
.notification-panel{z-index:70;right:auto;width:min(380px,calc(100vw - 24px));max-height:min(70vh,620px);padding:16px;border:1px solid #dce6f2;border-radius:17px;background:#fff;box-shadow:0 24px 56px #102c5026,0 3px 12px #102c500b;animation:header-menu-in .18s ease-out}
.notification-heading{margin-bottom:8px;padding:1px 2px 12px;border-bottom:1px solid #e8eef6}
.notification-heading strong{color:#1f3655;font-size:17px}
.notification-heading button{min-height:36px;padding:7px 9px;border-radius:8px;font-size:12px;font-weight:750}
.notification-heading button:hover:not(:disabled){background:#eff5ff}
.notification-heading button:disabled{opacity:.45;cursor:default}
.notification-item{padding:14px 12px;border:1px solid #e7edf5;border-radius:11px;margin-top:9px;background:#fff}
.notification-item.unread{border-color:#c6dafa;background:#f4f8ff}
.notification-item strong{color:#234365;font-size:13px}
.notification-item p{color:#506782;font-size:13px;line-height:1.5}
.notification-item small{font-size:11px}
.notification-item button{min-height:34px;margin-top:7px;border-radius:7px;font-size:12px;font-weight:750}
.notification-item button:hover{background:#e9f2ff}
.notification-empty{display:grid;justify-items:center;padding:26px 13px 21px;text-align:center}
.notification-empty>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#eef5ff;color:#3f70c9;font-size:23px}
.notification-empty strong{margin-top:13px;color:#244365;font-size:14px}
.notification-empty p{margin:6px 0 0;color:#71849c;font-size:12px;line-height:1.5}
.notification-empty a{margin-top:12px;color:#245fc8;font-size:12px;font-weight:750}
@keyframes header-menu-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.header-notification-button,.header-account>summary,.is-customer #notification-button,.is-admin #notification-button,.is-owner #owner-notification-button,.is-customer .cm-profile summary,.is-owner .owner-profile summary{width:42px;height:42px;min-width:42px}.is-owner .owner-profile summary{padding:0}.is-owner .owner-profile-name,.is-owner .owner-profile summary>span:last-child{display:none}.notification-panel{max-height:min(72vh,560px)}}
@media(prefers-reduced-motion:reduce){.header-notification-button,.header-account>summary,.header-account-menu,.notification-panel{animation:none;transition:none}}