/* Echo notifications: compact activity list with a persistent reading pane. */
:root { --notification-ink:#1f211e; --notification-muted:#666761; --notification-line:#e4e3de; --notification-green:#0d5c3d; }
body { margin:0; color:var(--notification-ink); font:13px 'Plus Jakarta Sans',Arial,sans-serif; background:#fff; }
#mainContent.layout { display:flex !important; flex-direction:row !important; width:100%; height:100vh; overflow:hidden; }
#mainContent > main.notifications-main { flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; overflow:hidden; background:#fff; padding:0; }
.notifications-main > header { flex:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 32px 20px; }
h1 { margin:0; font-size:27px; font-weight:800; letter-spacing:-.04em; }
header p { margin:6px 0 0; font-size:12px; color:var(--notification-muted); }
button,select,input { font:500 12px 'Plus Jakarta Sans',Arial,sans-serif; color:inherit; }
button,select,input { border:1px solid var(--notification-line); border-radius:5px; background:#fff; min-height:36px; padding:8px 12px; }
button { cursor:pointer; } button:hover { background:#f6f5f1; } button:disabled { opacity:.5; cursor:wait; }
:focus-visible { outline:2px solid #0d5c3d; outline-offset:2px; }
.notification-toolbar { flex:none; padding:0 32px; border-bottom:1px solid var(--notification-line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; align-items:center; }
.activity-tabs { display:flex; gap:20px; }
.activity-tabs button { border:0; border-radius:0; padding:14px 0; min-height:46px; color:var(--notification-muted); border-bottom:2px solid transparent; background:transparent; }
.activity-tabs button[aria-pressed=true] { color:var(--notification-green); border-bottom-color:var(--notification-green); font-weight:750; }
.filters { display:flex; gap:8px; padding:6px 0; }
#search { width:280px; background:#f7f7f5; } #client { width:190px; }
#message { flex:none; margin:0; padding:10px 32px; color:var(--notification-muted); font-size:11px; border-bottom:1px solid var(--notification-line); min-height:35px; }
.notification-workspace { display:grid; grid-template-columns:minmax(420px,1.1fr) minmax(360px,1fr); flex:1; min-height:0; }
.notification-list { min-width:0; min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--notification-line); }
#items { flex:1; min-height:0; overflow:auto; }
.day-heading { margin:0; padding:10px 24px; background:#f7f7f5; border-bottom:1px solid #efefeb; color:#6b6b68; font-size:10px; font-weight:750; letter-spacing:.04em; }
.notification-row { display:flex; align-items:flex-start; gap:12px; width:100%; min-width:0; margin:0; padding:15px 24px; border:0; border-bottom:1px solid #efefeb; border-left:3px solid transparent; border-radius:0; text-align:left; background:#fff; }
.notification-row:hover { background:#f8f8f5; }.notification-row.is-selected { background:#edf4f0; border-left-color:var(--notification-green); }
.notification-row > .ti { flex:none; font-size:18px; color:var(--notification-green); margin-top:2px; }
.row-body { display:block; min-width:0; flex:1; }.row-top { display:flex; gap:16px; align-items:baseline; justify-content:space-between; }.row-top strong { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.row-top time { flex:none; font-size:10px; color:var(--notification-muted); font-variant-numeric:tabular-nums; }
.row-meta,.row-preview { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.6; }.row-meta { margin-top:3px; color:var(--notification-muted); font-size:10px; }.row-preview { margin-top:3px; color:#494b45; font-size:12px; }
#more { flex:none; margin:12px 24px; }
#detail { min-width:0; overflow:auto; padding:28px 32px 40px; background:#fafaf8; }
.detail-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; }.event-label { font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; color:var(--notification-green); }.detail-back { display:none; }
.detail-title { font-size:23px; font-weight:750; letter-spacing:-.03em; line-height:1.35; margin:16px 0 6px; overflow-wrap:anywhere; }.detail-title:focus { outline:none; }.detail-client { margin:0; font-size:12px; color:var(--notification-muted); }
.open-task { display:inline-flex; margin:20px 0 8px; padding:10px 14px; background:var(--notification-ink); color:#fff; border-radius:5px; font-size:12px; font-weight:650; text-decoration:none; }.open-task:hover { background:var(--notification-green); }
#detail h3 { margin:26px 0 12px; font-size:11px; font-weight:750; color:#52544e; text-transform:uppercase; letter-spacing:.05em; }.detail-meta { color:var(--notification-muted); font-size:11px; margin:0 0 12px; }.change-body { margin:0; padding:16px; border:1px solid var(--notification-line); border-radius:6px; background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.task-context { border-top:1px solid var(--notification-line); margin-top:28px; }.task-context dl { display:grid; grid-template-columns:100px 1fr; gap:12px; font-size:12px; }.task-context dt { color:var(--notification-muted); }.task-context dd { margin:0; font-weight:600; }.full-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; color:#494b45; }
.detail-empty { color:var(--notification-muted); text-align:center; margin:100px auto; max-width:220px; line-height:1.7; }.empty { color:var(--notification-muted); padding:40px 24px; text-align:center; }.muted { color:var(--notification-muted); }
[hidden] { display:none !important; }
@media(max-width:1100px) { .notification-toolbar { padding:0 24px; }.filters { flex:1; } #search { flex:1; min-width:120px; }.notification-workspace { grid-template-columns:minmax(350px,1fr) minmax(300px,.9fr); }.notification-row { padding:14px 16px; } #detail { padding:24px; } }
@media(max-width:800px) { .notifications-main > header { padding:22px 16px 16px; }.notification-toolbar { padding:0 16px; }.activity-tabs { gap:16px; overflow:auto; width:100%; }.activity-tabs button { white-space:nowrap; }.filters { width:100%; }#client { width:140px; }#message { padding:10px 16px; }.notification-workspace { display:block; position:relative; }.notification-list { height:100%; border-right:0; }#detail { display:none; height:100%; }.show-detail #detail { display:block; }.show-detail .notification-list { display:none; }.detail-back { display:block; }.detail-title { font-size:21px; } }
/* Social activity feed: one readable column, people first. */
#mainContent > main.notifications-main { overflow-y:auto; display:block; }
.notifications-main > header,.notification-toolbar,#message,.notification-workspace { width:min(760px,100%); box-sizing:border-box; margin-left:auto; margin-right:auto; }
.notifications-main > header { padding:44px 24px 26px; }
h1 { font-size:28px; letter-spacing:-.045em; }
header p { font-size:13px; margin-top:8px; }
#refresh { border:0; background:transparent; color:#737373; }
.notification-toolbar { padding:0 24px 16px; display:block; border-bottom:0; }
.activity-tabs { gap:8px; flex-wrap:wrap; }
.activity-tabs button { min-height:34px; padding:8px 14px; border:0; border-radius:20px; font-size:12px; background:#f2f2f2; color:#373737; }
.activity-tabs button[aria-pressed=true] { color:#fff; background:#252525; }
.filters { padding:18px 0 0; gap:10px; }#search { width:auto; flex:1; min-width:0; background:#f7f7f7; border-color:#eee; border-radius:9px; }#client { width:170px; border-radius:9px; border-color:#eee; }
#message { padding:0 24px 12px; border:0; min-height:24px; color:#909090; }
.notification-workspace { display:block; }
.notification-list { border:0; display:block; }
#items { overflow:visible; }
.day-heading { margin:8px 24px 4px; padding:20px 0 10px; font-size:16px; color:#222; background:#fff; border:0; letter-spacing:-.02em; }
.notification-row { align-items:center; gap:15px; border:0; padding:16px 24px; min-height:86px; border-radius:12px; }
.notification-row:hover,.notification-row.is-selected { background:#f7f7f7; }
.avatar { width:46px; height:46px; border-radius:50%; background:#e9e7f0; color:#625772; flex:none; display:flex; align-items:center; justify-content:center; position:relative; font-size:14px; font-weight:750; }
.avatar .ti { position:absolute; right:-3px; bottom:-3px; background:white; border:2px solid white; border-radius:50%; padding:2px; font-size:12px; color:#555; }
.row-sentence { font-size:14px; line-height:1.6; color:#333; }.row-sentence strong { font-weight:700; }.row-sentence time { font-size:12px; color:#999; white-space:nowrap; }
.row-preview { color:#777; font-size:13px; margin-top:4px; line-height:1.5; }.row-meta { font-size:11px; color:#999; margin-top:5px; }.row-arrow { font-size:16px!important; color:#aaa!important; flex:none; }
#more { display:block; width:calc(100% - 48px); margin:24px; border:0; border-radius:10px; background:#f5f5f5; padding:13px; }
.show-detail::before { content:''; position:fixed; inset:0; background:#0005; z-index:1100; backdrop-filter:blur(3px); }
#detail { position:fixed; z-index:1101; top:50%; left:50%; transform:translate(-50%,-50%); width:min(540px,calc(100vw - 40px)); max-height:85vh; box-sizing:border-box; padding:28px; background:white; border-radius:20px; box-shadow:0 20px 90px #0003; overflow:auto; }
.detail-back { display:block; border:0; border-radius:20px; background:#f3f3f3; }.detail-title { font-size:24px; }.event-label { color:#777; }.open-task { border-radius:9px; }.change-body { border:0; background:#f7f7f7; border-radius:10px; font-size:14px; }
@media(max-width:800px) { .notifications-main > header { padding:28px 20px 22px; }.notification-toolbar { padding:0 20px 16px; }.activity-tabs { overflow:visible; gap:6px; }.activity-tabs button { font-size:11px; padding:8px 11px; }.filters { width:auto; }#client { width:130px; }.notification-list,.show-detail .notification-list { display:block; height:auto; }#detail { height:auto; }.day-heading { margin-left:20px; }.notification-row { padding:15px 20px; gap:12px; }.row-sentence { font-size:13px; }.avatar { width:40px; height:40px; } }
/* Task-style activity table. */
.notifications-main > header,.notification-toolbar,#message,.notification-workspace { width:100%; max-width:none; }
.notifications-main > header { padding:28px 32px 22px; justify-content:flex-start; gap:12px; }.notifications-main > header > div { margin-right:auto; }
#mark-read { border:1px solid #d9ddd9; border-radius:6px; font-weight:650; }
.notification-toolbar { padding:0 32px 14px; display:flex; align-items:center; justify-content:space-between; gap:16px; }.filters { padding:0; }.activity-tabs button { border-radius:6px; }.activity-tabs button[aria-pressed=true] { background:#e8f0eb; color:#20563e; }#search { width:260px; }#message { padding:0 32px 18px; }
.notification-workspace { padding:0 32px 30px; }.notification-list { border:1px solid #e1e4e0; border-radius:8px; overflow:hidden; }#items { overflow:auto; }.activity-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:13px; }.activity-table th { padding:12px 16px; background:#f5f6f3; color:#697066; font-size:11px; text-transform:uppercase; letter-spacing:.04em; text-align:left; border-bottom:1px solid #e1e4e0; }.activity-table td { padding:15px 16px; vertical-align:middle; border-bottom:1px solid #eceee9; line-height:1.5; }.activity-table tr:hover { background:#f8faf7; }.activity-table th:nth-child(1){width:90px}.activity-table th:nth-child(2){width:28%}.activity-table th:nth-child(3){width:30%}.activity-table th:nth-child(4){width:140px}.activity-table th:nth-child(5){width:120px}.activity-table th:nth-child(6){width:64px}.task-title-button { padding:0; min-height:0; border:0; background:transparent; text-align:left; font-size:14px; font-weight:700; line-height:1.5; }.task-title-button:hover { background:transparent; text-decoration:underline; }.table-client { display:block; color:#7a8077; font-size:12px; margin-top:4px; }.event-chip { font-size:11px; font-weight:650; padding:3px 7px; background:#f0f2ee; border-radius:4px; display:inline-block; }.table-preview { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#656b61; margin-top:5px; }.unread-pill { color:#b42318; font-size:11px; font-weight:650; white-space:nowrap; }.unread-pill::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#dc2626; margin-right:5px; }.read-pill { color:#92978e; font-size:11px; }.view-notification { min-height:30px; padding:5px 10px; border-radius:5px; background:white; }.unread-row .task-title-button { color:#203e2e; }#more { margin:16px auto; width:auto; min-width:260px; }
@media(max-width:1100px) { .notification-toolbar { flex-wrap:wrap; }.activity-table { min-width:1050px; }.notifications-main > header { flex-wrap:wrap; }.notification-workspace { padding:0 16px 24px; } }