/* Notification-only presentation: no workspace, document or booking colors. */
#appShell > #notificationPanel {
  inset: calc(var(--header-height, 56px) + 8px) 16px auto auto !important;
  width: min(400px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: min(690px, calc(100dvh - var(--header-height, 56px) - 24px)) !important;
  padding: 0; border: 1px solid #e8edf2 !important; border-radius: 18px !important;
  background: #fff !important; box-shadow: 0 16px 48px #10283e24 !important;
  color: #183149; font-family: Manrope, 'Segoe UI', sans-serif;
}
#notificationPanel .floating-panel-head { min-height: 58px; padding: 12px 16px; gap: 8px; border-bottom: 1px solid #edf0f4; }
#notificationPanel #notificationPanelTitle { font-size: 16px !important; font-weight: 750; line-height: 1.4; letter-spacing: -.2px; color: #132d42; }
#notificationPanel #unreadCount { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
#notificationPanel .notification-head-actions { gap: 5px; }
#notificationPanel .notification-head-actions #markAllNotifications { background: transparent; border-radius: 6px; color: #16857f; padding: 7px 2px; font-size: 11px; font-weight: 550; }
#notificationPanel #markAllNotifications svg { display: none; }
#notificationPanel .notification-head-actions button[data-action="close-notifications"] { width: 27px; height: 30px; padding: 5px; background: transparent; color: #8b9aa8; }
#notificationPanel #notificationTabs { height: 38px; margin: 0; padding: 0 16px; gap: 18px; background: #fff; border-bottom: 1px solid #edf0f4; border-radius: 0; }
#notificationPanel #notificationTabs button { flex: initial; height: 38px; min-height: 38px; padding: 0 1px; gap: 6px; border-radius: 0; border-bottom: 2px solid transparent; color: #8493a1; font-size: 11px; font-weight: 600; }
#notificationPanel #notificationTabs button.is-active { background: transparent; color: #147f79; border-bottom-color: #209b8e; box-shadow: none; }
#notificationPanel #notificationTabs button > svg { display: none; }
#notificationPanel #notificationTabs b { font-size: 9px; padding: 1px 5px; background: #eef4f4; color: #527d77; }
#notificationPanel #notificationList { padding: 0; border: 0; scrollbar-gutter: auto; }
#notificationPanel .notification-activity > h3 { display: none; }
#notificationPanel .notification-item,
#notificationPanel .sc-request { padding: 0; margin: 0; border: 0; border-bottom: 1px solid #e9eef3; border-radius: 0; box-shadow: none; background: #fff; transform: none !important; }
#notificationPanel .notification-item.is-unread { background: #f7f9fc; }
#notificationPanel .notification-item:hover,
#notificationPanel .sc-request:hover { background: #f2f7fa; }
#notificationPanel .notification-summary,
#notificationPanel .sc-request-summary { display: grid; grid-template-columns: 36px minmax(0,1fr) 7px; align-items: start; gap: 12px; width: 100%; min-height: 88px; padding: 16px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; list-style: none; }
#notificationPanel .sc-request-summary::-webkit-details-marker { display: none; }
#notificationPanel .notification-icon { display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: #e8eef5; color: #6f829d; }
#notificationPanel .notification-icon svg { width: 18px; height: 18px; }
#notificationPanel [data-tone="blue"] .notification-icon { color: #009ed6; background: #dff3ff; }
#notificationPanel [data-tone="mint"] .notification-icon { color: #13a553; background: #dcfbe5; }
#notificationPanel [data-tone="amber"] .notification-icon,
#notificationPanel .sc-request .notification-icon { color: #cf9707; background: #fff3cc; }
#notificationPanel [data-tone="rose"] .notification-icon { color: #f04455; background: #ffe4e7; }
#notificationPanel .notification-copy { gap: 3px; line-height: 1.4; }
#notificationPanel .notification-copy > b { color: #183149; font-size: 12px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
#notificationPanel .notification-copy > span { color: #8090a2; font-size: 11px; line-height: 1.5; font-weight: 400; margin: 0; }
#notificationPanel .notification-copy small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin: 1px 0 0; color: #98a6b7; font-size: 10px; line-height: 1.5; }
#notificationPanel .notification-copy .notification-action-label { display: inline-flex; align-items: center; gap: 3px; color: #23867e; font-size: 10px; font-weight: 650; font-style: normal; }
#notificationPanel .notification-action-label svg { width: 11px; height: 11px; transition: transform 160ms ease; }
#notificationPanel [aria-expanded="true"] .notification-action-label svg,
#notificationPanel .sc-request[open] .notification-action-label svg { transform: rotate(90deg); }
#notificationPanel .notification-dot { width: 6px; height: 6px; margin-top: 6px; background: #239f93; }
#notificationPanel .notification-detail,
#notificationPanel .sc-request-detail { padding: 0 16px 14px; background: transparent; }
#notificationPanel .notification-detail:not([hidden]),
#notificationPanel .sc-request[open] .sc-request-detail { animation: notificationExpand 160ms ease both; }
#notificationPanel .notification-finance-detail,
#notificationPanel .notification-full-message { color: #708295; font-size: 12px; line-height: 1.8; margin: 0 0 12px; padding: 12px; background: #edf3f7; border-radius: 10px; white-space: pre-line; overflow-wrap: anywhere; }
#notificationPanel .notification-action-heading { margin: 0 0 8px; color: #506a7d; font-size: 12px; line-height: 1.6; }
#notificationPanel .notification-checklist { margin: 0 0 14px; padding-left: 18px; color: #778b9b; font-size: 12px; }
#notificationPanel .notification-action-pair,
#notificationPanel .notification-finance-actions,
#notificationPanel .sc-decision-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 10px 0 0; }
#notificationPanel .notification-action-pair > :is(button,a),
#notificationPanel .notification-finance-actions > button,
#notificationPanel .sc-decision-buttons > button { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; min-height: 46px; height: auto; padding: 11px 8px; margin: 0; border: 1px solid #d9e4eb; border-radius: 10px; background: #fff; color: #456277; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; transition: background 140ms ease,transform 140ms ease; }
#notificationPanel :is(.notification-action-pair,.notification-finance-actions) > .notification-primary,
#notificationPanel .sc-decision-buttons > .sc-approve { background: #148879; color: #fff; border-color: #148879; }
#notificationPanel :is(.notification-action-pair,.notification-finance-actions) > .notification-danger,
#notificationPanel .sc-decision-buttons > [data-sc-decision="rejected"] { background: #fff4f4; border-color: #f3d7dc; color: #be4655; }
#notificationPanel :is(.notification-action-pair,.notification-finance-actions,.sc-decision-buttons) > :is(button,a):hover { filter: brightness(.97); }
#notificationPanel :is(.notification-action-pair,.notification-finance-actions,.sc-decision-buttons) > :is(button,a):active { transform: scale(.98); }
#notificationPanel .notification-rejection label { display: grid; gap: 7px; color: #607487; font-size: 12px; }
#notificationPanel .notification-rejection textarea { width: 100%; min-height: 76px; border: 1px solid #d9e4eb; border-radius: 10px; background: #fff; font: inherit; padding: 10px; resize: vertical; }
#notificationPanel .notification-detail-actions { margin-top: 6px; }
#notificationPanel .notification-row-tools button { width: 28px; height: 28px; color: #91a2b1; }
#notificationPanel .sc-requests { padding: 0; margin: 0; }
#notificationPanel .sc-request-options { margin: 0; padding: 0; background: #fff; border-bottom: 1px solid #edf1f4; }
#notificationPanel .sc-request-options > summary { padding: 8px 16px; color: #92a1af; font-size: 10px; cursor: pointer; }
#notificationPanel .sc-request-toolbar { margin: 0; padding: 0 16px 9px; }
#notificationPanel .sc-request-toolbar select { margin-right: auto; color: #617c8b; background: #f1f5f8; }
#notificationPanel .sc-status { display: inline-block; max-width: none; padding: 4px 7px; font-size: 10px; }
#notificationPanel .sc-request .sc-diff { margin-top: 10px; background: #edf3f7; }
#notificationPanel .sc-note-label { font-size: 11px; color: #708497; }
#notificationPanel .sc-note-label input { height: 40px; border-color: #d9e4eb; }
#notificationPanel .notification-empty { min-height: 180px; color: #8a9aaa; }
#notificationPanel :is(button,a,summary,input,textarea,select):focus-visible { outline: 2px solid #1d9b91; outline-offset: -2px; }
#notificationPanel [hidden] { display: none !important; }
@keyframes notificationExpand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media(max-width:650px) {
  #appShell > #notificationPanel { inset: calc(var(--header-height,56px) + 6px) 8px auto 8px !important; width: auto !important; max-height: calc(100dvh - var(--header-height,56px) - 16px) !important; border-radius: 16px !important; }
  #notificationPanel .floating-panel-head { padding: 12px 14px; }
  #notificationPanel #notificationPanelTitle { font-size: 15px !important; }
  #notificationPanel .notification-summary,#notificationPanel .sc-request-summary { padding: 15px 14px; gap: 10px; }
  #notificationPanel .notification-detail,#notificationPanel .sc-request-detail { padding: 0 14px 14px; }
}
@media(prefers-reduced-motion:reduce) { #notificationPanel *,#notificationPanel *::after { animation: none !important; transition: none !important; } }