body:not(.in-workspace) #notifications-header,#notifications-header[hidden],.notification-dialog [hidden]{display:none!important}
#notifications-header{position:relative;width:44px;height:44px;min-width:44px;padding:var(--space-inline)}#notifications-header>.icon{width:20px;height:20px}.notification-badge{position:absolute;top:-3px;right:-3px;display:grid;place-items:center;min-width:18px;min-height:18px;padding:0 4px;border:1px solid var(--accent-ring);border-radius:10px;font-size:var(--type-eyebrow);font-weight:650;background:var(--surface-field);color:var(--text-link)}#notifications-header[data-error=true] .notification-badge{color:var(--text-error);border-color:var(--border-error)}.notification-badge[hidden]{display:none!important}
.notification-dialog{width:620px;max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);color:var(--text-primary)}.notification-dialog .os-note{font-size:var(--type-description);line-height:1.45;color:var(--text-secondary);margin:4px 0 0}.notification-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--space-inline);margin-bottom:0}.notification-filters .os-field{margin:0;min-width:0}.notification-search{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) var(--control-target);align-items:end;gap:var(--space-inline);min-width:0}:root body.in-workspace .notification-dialog .notification-reload{width:var(--control-target);height:var(--control-target);padding:var(--space-inline);margin:0;box-shadow:none}.notification-reload>span{display:none}:root body.in-workspace .notification-dialog .notification-filters .os-field{gap:4px}:root body.in-workspace .notification-dialog .customer-dialog-header{margin-bottom:0;align-items:start}.notification-dialog .notification-list{margin-block:0}.notification-list{display:grid;gap:var(--space-inline);margin-block:var(--space-fields);min-width:0}.notification-item{display:grid;grid-template-columns:minmax(0,1fr) var(--control-target);align-items:center;gap:var(--space-inline);padding:var(--space-inline);border:1px solid var(--line);border-left:3px solid var(--notification-module,var(--text-secondary));border-radius:var(--action-radius);background:var(--surface-field);min-width:0}.notification-item[data-module=orders]{--notification-module:var(--agenda-order)}.notification-item[data-module=estimates]{--notification-module:var(--agenda-estimate)}.notification-item[data-module=finance]{--notification-module:var(--agenda-finance)}.notification-item[data-module=agenda]{--notification-module:var(--agenda-manual)}.notification-item[data-module=stock]{--notification-module:var(--text-link)}.notification-icon,.notification-module{color:var(--notification-module,var(--text-secondary))}.notification-item[data-priority=urgent] .notification-priority{color:var(--text-error);background:var(--surface-error);font-weight:600}.notification-item[data-priority=attention] .notification-priority{color:var(--text-warning);background:var(--surface-warning)}.notification-open{display:grid;align-content:center;gap:2px;text-align:left;border:0;border-radius:var(--action-radius);background:transparent;color:var(--text-primary);padding:0;font-family:inherit;font-size:var(--type-body);min-height:var(--control-target);min-width:0;width:100%;overflow-wrap:anywhere;box-shadow:none;transform:none}.notification-open:hover{background:var(--surface-hover)}.notification-open:active{background:var(--surface-pressed);transform:none}.notification-open:focus-visible{outline:2px solid var(--text-link);outline-offset:1px}.notification-open>strong{font-size:var(--type-body);font-weight:650;line-height:1.4}.notification-item[data-read=true] .notification-open>strong{font-weight:500}.notification-description{font-size:var(--type-label);line-height:1.4;color:var(--text-secondary)}.notification-item-meta,.notification-item-top{font-size:var(--type-meta);line-height:1.45;color:var(--text-secondary)}.notification-item-top{display:flex;align-items:center;gap:var(--space-inline);flex-wrap:wrap}.notification-icon{display:flex}.notification-icon .icon{width:16px;height:16px}.notification-priority{font-size:var(--type-meta);padding:0 4px;border-radius:4px}.notification-unread{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--text-link)}.notification-item-meta{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--space-inline);row-gap:2px;min-width:0}.notification-amount{font-size:var(--type-label);font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.notification-dialog .notification-read{box-shadow:none;align-self:center}.notification-read{width:var(--control-target);height:var(--control-target);min-height:var(--control-target);padding:var(--space-inline)!important;margin:0!important}.notification-read>span{display:none}.notification-read>.icon{width:18px;height:18px}.notification-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-inline);font-size:var(--type-meta)}.notification-empty{padding:var(--space-section);text-align:center;display:grid;justify-items:center;gap:var(--space-inline);color:var(--text-secondary);font-size:var(--type-body)}.notification-empty>.icon{width:24px;height:24px}.notification-empty p{font-size:var(--type-label);margin:0}.notification-dialog :is(.glass-button,.submit-button):active{transform:none}
@media(max-width:700px){body.in-workspace .topbar #notifications-header{grid-column:5;grid-row:1;justify-self:end;width:44px;height:44px;min-height:44px;padding:var(--space-inline);border-radius:var(--action-radius);box-shadow:none;margin:0}.notification-dialog{width:calc(100% - 24px)}.notification-item{padding:var(--space-inline);gap:var(--space-inline)}.notification-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.notification-filters>.os-field:first-child{grid-column:1/-1}.notification-search{grid-column:1/-1}}

/* Notification center: compact header, quiet filters and distinct reading actions. */
:root body.in-workspace dialog.notification-dialog{width:660px}
:root body.in-workspace .notification-dialog .customer-dialog-header{display:flex;gap:var(--space-inline);align-items:flex-start;padding-bottom:var(--space-fields);border-bottom:1px solid var(--line)}
.notification-heading-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid var(--line);border-radius:var(--action-radius);background:var(--surface-hover);color:var(--text-link)}
.notification-heading-icon>.icon{width:20px;height:20px}
.notification-heading-copy{flex:1;min-width:0}
.notification-heading{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--space-inline)}
:root .notification-dialog .notification-heading h2{margin:0}
.notification-unread-count{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;color:var(--text-link);background:var(--surface-hover);font-size:var(--type-meta);font-weight:600;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.notification-dialog .notification-filters{padding:var(--space-fields);border:1px solid var(--line);border-radius:var(--action-radius);background:var(--surface-hover)}
:root .notification-dialog .notification-item{padding:var(--space-inline) var(--space-fields);background:var(--surface-field);border-radius:var(--action-radius);transition:border-color .15s ease}
.notification-item:focus-within{border-color:var(--accent-ring);border-left-color:var(--notification-module)}
.notification-item-top{gap:4px 8px}
.notification-icon{align-items:center;justify-content:center}
.notification-module{font-weight:600}
.notification-priority{padding:1px 6px;border-radius:5px;line-height:1.4}
.notification-item[data-priority=info] .notification-priority{background:var(--surface-hover)}
.notification-dialog .notification-open{gap:3px}
.notification-item-meta>span+span:before{content:'·';padding-right:var(--space-inline);color:var(--text-secondary)}
:root body.in-workspace .notification-dialog .notification-read{border:1px solid var(--line);border-radius:var(--action-radius);background:transparent;color:var(--text-link);box-shadow:none}
:root body.in-workspace .notification-dialog .notification-read:hover{background:var(--surface-hover)}
:root body.in-workspace .notification-dialog .notification-read:active{background:var(--surface-pressed)}
.notification-item[data-read=true] .notification-read{color:var(--text-secondary)}
.notification-pagination>button{width:44px;height:44px;padding:var(--space-inline);box-shadow:none;border:1px solid var(--line)}
.notification-pagination>button>span{display:none}
.notification-pagination>button:first-child>.icon{transform:rotate(180deg)}
.notification-pagination>span{min-width:60px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.notification-dialog .notification-empty{padding-block:var(--space-section);min-height:140px;align-content:center}
@media(max-width:700px){
 :root body.in-workspace dialog.notification-dialog{width:calc(100% - 24px)}
 .notification-heading-icon{display:none}
 .notification-dialog .notification-filters{padding:var(--space-inline)}
 :root .notification-dialog .notification-item{padding:var(--space-inline)}
 .notification-dialog .notification-unread-count{font-size:var(--type-meta)}
}
@media(prefers-reduced-motion:reduce){.notification-item{transition:none}}

/* Keep useful controls at 44 px; compact the surrounding filter chrome. */
:root body.in-workspace .notification-dialog .notification-filters{padding:0;border:0;background:transparent;gap:var(--space-inline)}
:root body.in-workspace .notification-dialog .notification-filters .os-field{gap:2px}
.notification-field-label{font-size:var(--type-meta);line-height:1.4;font-weight:500}
.notification-search .notification-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root body.in-workspace .notification-dialog .notification-filters :is(select,input){min-height:var(--control-target);padding-block:var(--space-inline)}
@keyframes notification-bell-ring{0%,20%,100%{transform:rotate(0)}3%,9%{transform:rotate(13deg)}6%,12%{transform:rotate(-13deg)}15%{transform:rotate(7deg)}18%{transform:rotate(-4deg)}}
#notifications-header .icon.notification-bell-ring{transform-origin:50% 18%;animation:notification-bell-ring 4.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#notifications-header .icon.notification-bell-ring{animation:none;transform:none}}