/** * Inbox Page Styles — Phase 2 shell (Inbox Hub plan). * * Full-page Personal Space hub for @mentions, work assigned to you, and * approvals waiting on your call. This file styles the SHELL only (header, * tab rail, toolbar frame incl. the Split⇄Table layout switcher, empty-state * placeholders); the split/table row renderers land in Phase 3. * * Visual source of truth: tests/inbox-page-mockup.html (variant A frame + the * A/C switcher rendered as a compact in-toolbar segmented control, NOT the * floating debug panel from the mockup). * * All selectors are namespaced (`.inbox-page`, `.inbox-*`). * * Phase 2 surface decision (2026-07-06 review fix): the content area is an * EXPLICIT LIGHT surface with literal values, exactly like the mockup (light * #f8f9fa-family page, white cards, #1f2937/#2c3e50 ink, #e5e9f2 borders). * Theme tokens (--page-bg / --cell-text / --muted-text) resolve DARK under * dark themes and made the header unreadable (dark ink on dark body). The * dark-mode/token pass is scheduled for Phase 6 of the plan — do NOT * re-tokenize these before that pass. */ /* ============================================================ CONTAINER WRAPPER — sibling to #gantt-container in . Positioned exactly like .dashboard-container-wrapper so it fills the content area to the right of the (fixed-overlay) sidebar. ============================================================ */ .inbox-container { display: none; /* shown by the 'inbox' view switch (nav-view-switcher.js) */ flex-direction: column; flex: 1; border: 1px solid #dee2e6; overflow: hidden; min-height: 0; margin-left: 0; /* default: no sidebar */ transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Full-height light surface (mirrors how .dashboard-container-wrapper owns its background): the wrapper paints the WHOLE content area so no dark body ever shows through behind the header/tabs. */ background: #f8f9fa; color: #1f2937; } /* Everything inside the page uses border-box so padded 100%-width controls (e.g. the search input: 260px slot + 42px padding + borders) can never overflow their flex slot and collide with the next toolbar item. */ .inbox-container *, .inbox-container *::before, .inbox-container *::after { box-sizing: border-box; } /* Push content right when the sidebar is pinned open (mirrors the .left-sidebar width chain, same as .gantt-container.sidebar-open / dashboard wrapper). */ .inbox-container.sidebar-open { margin-left: var(--side-width-user, var(--side-width, 256px)); } /* ============================================================ PAGE SHELL ============================================================ */ .inbox-page { /* LITERAL light palette (mockup values) — see file header; Phase 6 owns the dark-mode/token pass. Namespaced custom props so Phase 3 renderers consume one palette. */ --inbox-ink: #1f2937; --inbox-title: #2c3e50; --inbox-sub: #6b7280; --inbox-border: #e5e9f2; --inbox-panel: #f8f9fa; --inbox-surface: #ffffff; --inbox-blue: #2563eb; --inbox-blue2: #3b82f6; --inbox-blue-soft: #eff4ff; --inbox-blue-line: #bcd3ff; --inbox-red: #ef4444; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; /* The page NEVER scrolls: head + tab rail + toolbar stay pinned and only the list region scrolls (.inbox-tbl-wrap in table layout; .inbox-split-list / -preview in split layout). Page-level scroll here was the "header rides the scroll and drags the preview pane" bug (user-reported 2026-07-08). */ overflow: hidden; padding: 22px 28px 40px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: var(--inbox-ink); background: #f8f9fa; } /* ---- page head ---- */ .inbox-page-head { margin-bottom: 14px; flex: 0 0 auto; } .inbox-page-head h1 { font-size: 24px; font-weight: 650; color: var(--inbox-title); letter-spacing: -0.01em; margin: 0; } .inbox-page-sub { font-size: 13px; color: var(--inbox-sub); margin-top: 3px; } /* ============================================================ TAB RAIL ============================================================ */ .inbox-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--inbox-border); margin-bottom: 14px; flex: 0 0 auto; } .inbox-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; cursor: pointer; color: #556070; /* mockup .tab — clearly legible muted grey on light */ font-weight: 600; font-size: 14px; border: none; border-bottom: 2px solid transparent; background: none; top: 1px; font-family: inherit; } .inbox-tab:hover { color: var(--inbox-ink); } .inbox-tab.active { color: var(--inbox-blue); border-bottom-color: var(--inbox-blue); } .inbox-tab .inbox-tab-count { color: var(--inbox-sub); font-weight: 600; } .inbox-tab.active .inbox-tab-count { color: var(--inbox-blue2); } .inbox-tab.disabled { color: #b3bcc9; cursor: not-allowed; } .inbox-tab.disabled .inbox-reserved { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #aab3c1; background: #f0f2f6; border: 1px dashed #cfd6e2; border-radius: 10px; padding: 1px 7px; } /* ============================================================ TOOLBAR (frame only — search/filters are placeholders in Phase 2) ============================================================ */ .inbox-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; flex: 0 0 auto; } .inbox-search { position: relative; flex: 0 0 260px; } .inbox-search input { width: 100%; height: 34px; border: 1px solid var(--inbox-border); border-radius: 8px; padding: 0 30px 0 32px; font-size: 13px; color: var(--inbox-ink); background: var(--inbox-surface); outline: none; font-family: inherit; } .inbox-search input:focus { border-color: var(--inbox-blue-line); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } .inbox-search .inbox-search-ic { position: absolute; left: 9px; top: 9px; width: 16px; height: 16px; color: var(--inbox-sub); } /* Clear-search × (2026-07-11): sits inside the box, shown ONLY while it has text — pure CSS via :placeholder-shown (every .inbox-search input carries a placeholder). */ .inbox-search .inbox-search-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 6px; color: var(--inbox-sub); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } .inbox-search .inbox-search-x:hover { color: var(--inbox-ink); background: rgba(148, 163, 184, 0.18); } .inbox-search input:placeholder-shown ~ .inbox-search-x { display: none; } .inbox-chip { height: 34px; border: 1px solid var(--inbox-border); border-radius: 18px; background: var(--inbox-surface); padding: 0 12px; font-size: 12.5px; color: var(--inbox-ink); display: inline-flex; align-items: center; gap: 6px; cursor: not-allowed; opacity: 0.75; font-family: inherit; } .inbox-toolbar-spacer { flex: 1; } /* ---- layout switcher: compact segmented control (Split ⇄ Table) ---- */ .inbox-layout-switch { display: inline-flex; border: 1px solid var(--inbox-border); border-radius: 8px; overflow: hidden; height: 34px; flex: 0 0 auto; } .inbox-layout-btn { border: none; background: var(--inbox-surface); color: var(--inbox-sub); font-size: 12px; padding: 0 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-family: inherit; } .inbox-layout-btn + .inbox-layout-btn { border-left: 1px solid var(--inbox-border); } .inbox-layout-btn:hover { background: var(--inbox-panel); color: var(--inbox-ink); } .inbox-layout-btn.active { background: var(--inbox-blue-soft); color: var(--inbox-blue); font-weight: 600; } .inbox-layout-btn svg { width: 14px; height: 14px; } /* ============================================================ BODY + EMPTY STATE (Phase 2 placeholders per tab) ============================================================ */ .inbox-body { flex: 1; min-height: 0; display: flex; flex-direction: column; /* Containment: an overgrown layout must scroll INSIDE its own region (tbl-wrap / split panes), never push the page chrome into a scroll. */ overflow: hidden; } .inbox-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 70px 20px; color: var(--inbox-sub); border: 1px dashed var(--inbox-border); border-radius: 12px; background: var(--inbox-surface); flex: 1; min-height: 260px; } .inbox-empty .inbox-empty-ic { width: 66px; height: 66px; border-radius: 50%; background: var(--inbox-blue-soft); color: var(--inbox-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .inbox-empty .inbox-empty-ic svg { width: 32px; height: 32px; } .inbox-empty h3 { font-size: 17px; color: var(--inbox-title); font-weight: 650; margin: 0 0 5px; } .inbox-empty p { font-size: 13px; color: var(--inbox-sub); max-width: 380px; margin: 0; line-height: 1.5; } .inbox-empty .inbox-empty-layout { margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--inbox-sub); opacity: 0.75; } /* ============================================================ PHASE 3 — MENTIONS TAB (both renderers off the shared model) Literal light palette per the file header; Phase 6 owns the dark-mode/token pass — do NOT re-tokenize these before that. ============================================================ */ /* ---- tab-rail unread badge ---- */ .inbox-tab-badge { min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 8px; background: var(--inbox-red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; display: inline-block; } /* ---- toolbar filter controls (rendered by the tab into the shell toolbar) ---- */ .inbox-fchip { height: 34px; border: 1px solid var(--inbox-border); border-radius: 18px; background: var(--inbox-surface); padding: 0 12px; font-size: 12.5px; color: #3b4759; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; transition: all 0.12s; } .inbox-fchip:hover { border-color: #cfd8e6; background: #fafcff; } .inbox-fchip.active { background: var(--inbox-blue-soft); border-color: var(--inbox-blue-line); color: #1d4ed8; } select.inbox-fchip { -webkit-appearance: none; appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, #9aa4b2 50%), linear-gradient(135deg, #9aa4b2 50%, transparent 50%); background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .inbox-toggle .inbox-dotc { width: 8px; height: 8px; border-radius: 50%; } .inbox-markall { height: 34px; border: 1px solid var(--inbox-border); border-radius: 8px; background: var(--inbox-surface); color: #3b4759; font-size: 12.5px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; margin-left: 8px; } .inbox-markall:hover:not(:disabled) { background: #f6f8fc; } .inbox-markall:disabled { opacity: 0.5; cursor: default; } /* ---- bulk bar ---- */ .inbox-bulkbar { display: flex; align-items: center; gap: 14px; background: #0f254a; color: #dce7ff; border-radius: 10px; padding: 9px 14px; margin-bottom: 12px; font-size: 13px; flex: 0 0 auto; } .inbox-bulkbar .inbox-bcount { font-weight: 700; color: #fff; } .inbox-bulkbar .inbox-bsep { width: 1px; height: 16px; background: #33456e; } .inbox-bulkbar .inbox-bspacer { flex: 1; } .inbox-bulkbar button { background: transparent; border: none; color: #bcd3ff; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; font-family: inherit; } .inbox-bulkbar button:hover { background: #1c366a; color: #fff; } /* ---- shared row atoms ---- */ .inbox-type-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; flex: 0 0 auto; white-space: nowrap; } .inbox-type-badge svg { width: 13px; height: 13px; } .inbox-tb-mention, .inbox-tb-schedule { background: #e8f1fe; color: #1d5fd0; } .inbox-tb-rfi { background: #fef3e2; color: #b26a04; } .inbox-tb-submittal { background: #e6f7ef; color: #087f52; } .inbox-tb-co, .inbox-tb-ce { background: #f1ebfe; color: #6d3fd4; } .inbox-tb-invoice, .inbox-tb-budget, .inbox-tb-commitment { background: #e3f6f5; color: #0b7a78; } .inbox-tb-meeting { background: #ecebff; color: #4338ca; } .inbox-tb-document { background: #eef1f6; color: #475569; } .inbox-avatar { width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .inbox-avatar.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; } .inbox-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #5b6675; background: #f2f4f8; border: 1px solid #e8ecf3; border-radius: 6px; padding: 1px 7px; white-space: nowrap; } .inbox-tag.where { color: #4b5563; background: #f7f9fc; } .inbox-tag .inbox-dotc { width: 6px; height: 6px; border-radius: 50%; } .inbox-age { font-size: 12px; color: #9aa4b2; white-space: nowrap; flex: 0 0 auto; } .inbox-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--inbox-blue2); flex: 0 0 auto; } .inbox-unread-dot.hidden { visibility: hidden; } .inbox-pin { width: 14px; height: 14px; color: #f59e0b; flex: 0 0 auto; display: inline-flex; } .inbox-rowcheck { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--inbox-blue); cursor: pointer; } /* ---- SPLIT layout ---- */ /* Split = Outlook-style reading pane: BOTH panes fill the body region and scroll INTERNALLY. The old flex-start + sticky-preview pair made the whole page the scroller with the preview visibly chasing it (user-reported 2026-07-08). */ .inbox-split { display: flex; gap: 16px; align-items: stretch; flex: 1; min-height: 0; overflow: hidden; } .inbox-split-list { flex: 0 0 52%; min-width: 0; min-height: 0; border: 1px solid var(--inbox-border); border-radius: 12px; overflow-y: auto; overflow-x: hidden; background: var(--inbox-surface); } .inbox-split-preview { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; } /* Themed scrollbars for the three internal scroll containers introduced by the fixed-chrome fix above (.inbox-split-list, .inbox-split-preview, .inbox-tbl-wrap — see its rule below). Token-driven off the SAME --inbox-* custom props the rest of this module already flips for dark mode (inbox-page.css:67-77 light / [data-theme-mode="dark"] .inbox-page override below) — no light/dark duplication needed, and no default OS scrollbar to clash with the theme (user-reported 2026-07-08). Mirrors the thin-bar pattern used elsewhere (style.css .left-sidebar, theme-dark.css .dynamic-dropdown/.modal-content). */ .inbox-split-list, .inbox-split-preview, .inbox-tbl-wrap { scrollbar-width: thin; scrollbar-color: var(--inbox-border) var(--inbox-panel); } .inbox-split-list::-webkit-scrollbar, .inbox-split-preview::-webkit-scrollbar, .inbox-tbl-wrap::-webkit-scrollbar { width: 10px; height: 10px; } .inbox-split-list::-webkit-scrollbar-track, .inbox-split-preview::-webkit-scrollbar-track, .inbox-tbl-wrap::-webkit-scrollbar-track { background: var(--inbox-panel); } .inbox-split-list::-webkit-scrollbar-thumb, .inbox-split-preview::-webkit-scrollbar-thumb, .inbox-tbl-wrap::-webkit-scrollbar-thumb { background: var(--inbox-border); border-radius: 5px; } .inbox-split-list::-webkit-scrollbar-thumb:hover, .inbox-split-preview::-webkit-scrollbar-thumb:hover, .inbox-tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--inbox-sub); } .inbox-list-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid var(--inbox-border); cursor: pointer; position: relative; } .inbox-list-row:last-child { border-bottom: none; } .inbox-list-row:hover { background: #f7faff; } .inbox-list-row.selected { background: var(--inbox-blue-soft); box-shadow: inset 3px 0 0 var(--inbox-blue); } .inbox-list-row.unrow { background: #fbfdff; } .inbox-list-row .inbox-midcol { flex: 1; min-width: 0; } .inbox-list-row .inbox-ctx { font-size: 13.5px; color: var(--inbox-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox-list-row.unrow .inbox-ctx { font-weight: 650; } .inbox-list-row .inbox-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; } .inbox-list-row .inbox-rightcol { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; } /* ---- "Load more" footer (Phase 11 server pagination) ---- */ .inbox-loadmore { display: flex; justify-content: center; padding: 12px; } .inbox-loadmore .inbox-btn-sec { min-width: 130px; justify-content: center; } /* ---- preview pane ---- */ .inbox-pv { border: 1px solid var(--inbox-border); border-radius: 12px; background: var(--inbox-surface); overflow: hidden; display: flex; flex-direction: column; } .inbox-pv-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--inbox-border); background: var(--inbox-panel); } .inbox-pv-head .inbox-pv-title { font-weight: 650; color: var(--inbox-title); font-size: 15px; } .inbox-pv-head .pv-proj { margin-left: auto; } .inbox-pv-body { padding: 16px; } .inbox-pv-comment { display: flex; gap: 10px; background: #f7faff; border: 1px solid #e6eefb; border-radius: 10px; padding: 12px; } .inbox-pv-comment .cwrap { min-width: 0; } .inbox-pv-comment .cwho { font-size: 12.5px; color: #4b5563; margin-bottom: 3px; } .inbox-pv-comment .cwho b { color: var(--inbox-ink); } .inbox-ctext { font-size: 13.5px; color: #374151; line-height: 1.5; word-break: break-word; } .inbox-ctext.inbox-muted { color: #9aa4b2; font-style: italic; } .inbox-at { background: #dbeafe; color: #1d4ed8; font-weight: 700; border-radius: 4px; padding: 0 3px; } .inbox-pv-sec-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a0b2; margin: 18px 0 9px; } .inbox-pv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; } .inbox-pv-field { display: flex; flex-direction: column; gap: 2px; } .inbox-pv-field .fk { font-size: 11px; color: #94a0b2; } .inbox-pv-field .fv { font-size: 13px; color: var(--inbox-ink); font-weight: 600; word-break: break-word; } .inbox-pv-actions { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--inbox-border); background: var(--inbox-panel); flex-wrap: wrap; } .inbox-btn-primary { height: 36px; background: var(--inbox-blue); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 0 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; } .inbox-btn-primary:hover { background: #1d4ed8; } .inbox-btn-sec { height: 36px; background: var(--inbox-surface); color: #3b4759; border: 1px solid var(--inbox-border); border-radius: 8px; font-size: 13px; padding: 0 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; } .inbox-btn-sec:hover:not(:disabled) { background: #f4f7fb; } .inbox-btn-sec:disabled { opacity: 0.55; cursor: default; } .inbox-btn-sec.danger { color: #c0392b; } .inbox-btn-sec.danger:hover { background: #fdecea; border-color: #f3c6c0; } /* ---- TABLE layout ---- */ .inbox-tbl-wrap { border: 1px solid var(--inbox-border); border-radius: 12px; overflow: auto; background: var(--inbox-surface); flex: 1; min-height: 0; } table.inbox-tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.inbox-tbl th { /* Sticky within the .inbox-tbl-wrap scroller — completes the design the filter row (sticky top:33px, z-index:1) was always expecting. */ position: sticky; top: 0; z-index: 2; background: var(--inbox-panel); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7a869a; padding: 9px 12px; border-bottom: 1px solid var(--inbox-border); white-space: nowrap; position: sticky; top: 0; z-index: 2; } table.inbox-tbl th.sortable { cursor: pointer; user-select: none; } table.inbox-tbl th.sortable:hover { color: var(--inbox-blue); } table.inbox-tbl th.sorted { color: var(--inbox-blue); } table.inbox-tbl td { padding: 9px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; color: var(--inbox-ink); } table.inbox-tbl tr:last-child td { border-bottom: none; } table.inbox-tbl tbody tr { cursor: pointer; } table.inbox-tbl tbody tr:hover { background: #f7faff; } table.inbox-tbl tbody tr.unrow { background: #fbfdff; } table.inbox-tbl tbody tr.unrow td.c-ctx { font-weight: 650; } .inbox-filter-row td { background: #fff; padding: 6px 10px; border-bottom: 1px solid var(--inbox-border); position: sticky; top: 33px; z-index: 1; } .inbox-filter-row input, .inbox-filter-row select { width: 100%; height: 28px; border: 1px solid var(--inbox-border); border-radius: 6px; font-size: 12px; padding: 0 7px; color: #3b4759; background: #fff; outline: none; font-family: inherit; } .inbox-filter-row .inbox-fr-note { font-size: 10.5px; color: #aab3c1; } table.inbox-tbl td.c-ctx { max-width: 0; width: 40%; } table.inbox-tbl td.c-ctx .ctxline { display: flex; align-items: center; gap: 7px; } table.inbox-tbl td.c-ctx .ctxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.inbox-tbl td.c-from { display: flex; align-items: center; gap: 7px; white-space: nowrap; } table.inbox-tbl td.c-menu { text-align: right; position: relative; } .inbox-rowmenu { width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px; color: #9aa4b2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .inbox-rowmenu:hover { background: #eef2f8; color: #4b5563; } .inbox-rowmenu-pop { position: absolute; right: 10px; top: 34px; z-index: 20; background: #fff; border: 1px solid var(--inbox-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 30, 60, 0.16); padding: 5px; display: flex; flex-direction: column; min-width: 140px; } .inbox-rowmenu-pop button { display: flex; align-items: center; gap: 8px; background: none; border: none; text-align: left; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; color: #3b4759; cursor: pointer; font-family: inherit; } .inbox-rowmenu-pop button:hover:not(:disabled) { background: #f2f6fc; } .inbox-rowmenu-pop button:disabled { opacity: 0.5; cursor: default; } .inbox-rowmenu-pop button.danger { color: #c0392b; } .inbox-rowmenu-pop button.danger:hover { background: #fdecea; } /* ============================================================ PHASE 4 — ASSIGNED TO ME TAB Reuses every shared atom above (.inbox-split, .inbox-list-row, .inbox-pv, .inbox-tbl, .inbox-type-badge/.inbox-tb-*, .inbox-tag). Only NET-NEW rule: the overdue due-date pill. Literal light values per the file header; Phase 6 owns the dark-mode/token pass — do NOT re-tokenize before that. ============================================================ */ .inbox-tag.inbox-due-over { color: #c0392b; background: #fdecea; border-color: #f3c6c0; } .inbox-tag.inbox-due-over svg { color: #c0392b; } /* ============================================================ PHASE 5 — APPROVALS TAB Reuses every shared atom above (.inbox-split, .inbox-list-row, .inbox-pv, .inbox-tbl, .inbox-type-badge/.inbox-tb-co, .inbox-tag). Only NET-NEW rule: the "why is this waiting on me?" callout at the top of the split preview. Literal light values per the file header; Phase 6 owns the dark-mode/token pass — do NOT re-tokenize before that. ============================================================ */ .inbox-pv-why { display: flex; align-items: flex-start; gap: 9px; background: #f4f0fe; border: 1px solid #e3d9fb; border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.4; color: #4a2fa0; margin-bottom: 4px; } .inbox-pv-why .inbox-pv-why-ic { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: #6d3fd4; } .inbox-pv-why .inbox-pv-why-ic svg { width: 14px; height: 14px; } /* ---- Phase 12: degraded-sources banner (Approvals tab) ---- Soft, passive note above the list when a source failed. Muted amber tint (no bright fill — dark-mode rule); dark override lives in the dark-mode pass below. */ .inbox-degraded-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px; padding: 10px 13px; background: #fbf5ea; border: 1px solid #eadfc6; border-radius: 10px; font-size: 13px; line-height: 1.4; color: #7a5a1e; } .inbox-degraded-note .inbox-degraded-ic { display: inline-flex; flex: 0 0 auto; margin-top: 1px; color: #b7862c; } .inbox-degraded-note .inbox-degraded-ic svg { width: 14px; height: 14px; } /* ============================================================ OPTION C PHASE 2 — NOTIFICATIONS TAB Reuses every shared atom above (.inbox-split, .inbox-list-row, .inbox-pv, .inbox-tbl, .inbox-type-badge/.inbox-tb-*, .inbox-tag, .inbox-bulkbar, .inbox-rowcheck, .inbox-unread-dot). Only NET-NEW rules: the small action pill and the preview message block. Literal light values per the file header; the dark overrides live in the dark-mode pass below. ============================================================ */ .inbox-tag.inbox-notif-action { color: #4338ca; background: #eef0fe; border-color: #dfe1fb; font-weight: 600; } .inbox-notif-msg { font-size: 14px; color: var(--inbox-ink); line-height: 1.5; word-break: break-word; background: #f7faff; border: 1px solid #e6eefb; border-radius: 10px; padding: 12px 13px; } /* ============================================================ PHASE 6 — POLISH: density toggle + keyboard-selected row ============================================================ */ /* The density segmented control reuses the layout-switch chrome (both classes). */ .inbox-density-switch { flex: 0 0 auto; } .inbox-page:focus { outline: none; } /* Compact density: tighten row padding in BOTH layouts + the preview body. */ .inbox-page.density-compact .inbox-list-row { padding: 7px 12px; } .inbox-page.density-compact .inbox-list-row .inbox-meta { margin-top: 3px; } .inbox-page.density-compact table.inbox-tbl td { padding: 5px 12px; } .inbox-page.density-compact table.inbox-tbl th { padding: 6px 12px; } .inbox-page.density-compact .inbox-filter-row td { padding: 4px 10px; } .inbox-page.density-compact .inbox-pv-body { padding: 12px; } /* Keyboard-selected row highlight in the TABLE layout (split reuses .selected). */ table.inbox-tbl tbody tr.kbd-row { background: var(--inbox-blue-soft); box-shadow: inset 3px 0 0 var(--inbox-blue); } table.inbox-tbl tbody tr.kbd-row td.c-ctx { font-weight: 650; } /* ============================================================ PHASE 6 — DARK MODE PASS The base of this file is LIGHT by design (see the file header). This block is the dark surface pass, scoped under [data-theme-mode="dark"] — the app's theme-AGNOSTIC dark signal (theme-dark.css convention). Classic sets NO marker and Light sets data-theme-mode="light", so both stay byte-identical. Strategy: (1) redefine the namespaced --inbox-* custom props to a dark-navy family (covers every token-consuming rule at once); (2) override the rules that hardcode light literals. NO large bright fills (house rule): dark navy surfaces, light ink, saturated hues kept only as SMALL accents (badges, dots, CTAs). ============================================================ */ [data-theme-mode="dark"] .inbox-container { background: #0e1726; color: #e6ecf7; border-color: #283652; } [data-theme-mode="dark"] .inbox-page { --inbox-ink: #e6ecf7; --inbox-title: #f1f5fc; --inbox-sub: #8b98b0; --inbox-border: #283652; --inbox-panel: #12203a; --inbox-surface: #16243a; --inbox-blue: #3b82f6; --inbox-blue2: #60a5fa; --inbox-blue-soft: #16334d; --inbox-blue-line: #2b4a72; --inbox-red: #ef4444; background: #0e1726; } /* ---- tab rail ---- */ [data-theme-mode="dark"] .inbox-tab { color: #8b98b0; } [data-theme-mode="dark"] .inbox-tab:hover { color: var(--inbox-ink); } [data-theme-mode="dark"] .inbox-tab.disabled { color: #56617a; } [data-theme-mode="dark"] .inbox-tab.disabled .inbox-reserved { color: #6b7690; background: #16243a; border-color: #2b3a57; } /* ---- toolbar controls ---- */ [data-theme-mode="dark"] .inbox-fchip { color: #c2ccdd; } [data-theme-mode="dark"] .inbox-fchip:hover { border-color: #34456a; background: #1b2b45; } [data-theme-mode="dark"] .inbox-fchip.active { background: #16334d; border-color: #2b4a72; color: #93c5fd; } [data-theme-mode="dark"] select.inbox-fchip { background-image: linear-gradient(45deg, transparent 50%, #6b7690 50%), linear-gradient(135deg, #6b7690 50%, transparent 50%); } [data-theme-mode="dark"] .inbox-markall { color: #c2ccdd; } [data-theme-mode="dark"] .inbox-markall:hover:not(:disabled) { background: #1b2b45; } [data-theme-mode="dark"] .inbox-layout-btn:hover { background: #1b2b45; color: var(--inbox-ink); } [data-theme-mode="dark"] .inbox-layout-btn.active { background: #16334d; color: #93c5fd; } /* ---- type badges (small dark-tinted accents, no bright fill) ---- */ [data-theme-mode="dark"] .inbox-tb-mention, [data-theme-mode="dark"] .inbox-tb-schedule { background: #16273f; color: #7fb3f7; } [data-theme-mode="dark"] .inbox-tb-rfi { background: #33260f; color: #e0a24a; } [data-theme-mode="dark"] .inbox-tb-submittal { background: #12301f; color: #4bbd86; } [data-theme-mode="dark"] .inbox-tb-co, [data-theme-mode="dark"] .inbox-tb-ce { background: #241a3f; color: #a888ef; } [data-theme-mode="dark"] .inbox-tb-invoice, [data-theme-mode="dark"] .inbox-tb-budget, [data-theme-mode="dark"] .inbox-tb-commitment { background: #0f2e2d; color: #48b7b4; } [data-theme-mode="dark"] .inbox-tb-meeting { background: #1e1c40; color: #8b87e6; } [data-theme-mode="dark"] .inbox-tb-document { background: #1a2233; color: #94a3b8; } /* ---- tags + meta ---- */ [data-theme-mode="dark"] .inbox-tag { color: #aab5c8; background: #16243a; border-color: #283652; } [data-theme-mode="dark"] .inbox-tag.where { color: #9aa6ba; background: #131f33; } [data-theme-mode="dark"] .inbox-age { color: #8b98b0; } /* ---- split list rows ---- */ [data-theme-mode="dark"] .inbox-list-row:hover { background: #16243a; } [data-theme-mode="dark"] .inbox-list-row.unrow { background: #12203a; } /* ---- preview pane ---- */ [data-theme-mode="dark"] .inbox-pv-comment { background: #12203a; border-color: #26344f; } [data-theme-mode="dark"] .inbox-pv-comment .cwho { color: #9aa6ba; } [data-theme-mode="dark"] .inbox-ctext { color: #cdd6e6; } [data-theme-mode="dark"] .inbox-ctext.inbox-muted { color: #6b7690; } [data-theme-mode="dark"] .inbox-at { background: #16334d; color: #66bdff; } [data-theme-mode="dark"] .inbox-pv-sec-label { color: #7e8aa1; } [data-theme-mode="dark"] .inbox-pv-field .fk { color: #8b98b0; } /* ---- buttons ---- */ [data-theme-mode="dark"] .inbox-btn-sec { color: #c2ccdd; } [data-theme-mode="dark"] .inbox-btn-sec:hover:not(:disabled) { background: #1b2b45; } [data-theme-mode="dark"] .inbox-btn-sec.danger { color: #f28b82; } [data-theme-mode="dark"] .inbox-btn-sec.danger:hover { background: #3a1d1b; border-color: #5a2a26; } /* ---- table ---- */ [data-theme-mode="dark"] table.inbox-tbl th { color: #8b98b0; } [data-theme-mode="dark"] table.inbox-tbl td { border-bottom-color: #1e2c45; } [data-theme-mode="dark"] table.inbox-tbl tbody tr:hover { background: #16243a; } [data-theme-mode="dark"] table.inbox-tbl tbody tr.unrow { background: #12203a; } [data-theme-mode="dark"] .inbox-filter-row td { background: #12203a; border-bottom-color: #283652; } [data-theme-mode="dark"] .inbox-filter-row input, [data-theme-mode="dark"] .inbox-filter-row select { color: #cdd6e6; background: #16243a; border-color: #2b3a57; } [data-theme-mode="dark"] .inbox-filter-row .inbox-fr-note { color: #6b7690; } [data-theme-mode="dark"] .inbox-rowmenu { color: #8b98b0; } [data-theme-mode="dark"] .inbox-rowmenu:hover { background: #1b2b45; color: #cdd6e6; } [data-theme-mode="dark"] .inbox-rowmenu-pop { background: #16243a; border-color: #2b3a57; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-theme-mode="dark"] .inbox-rowmenu-pop button { color: #c2ccdd; } [data-theme-mode="dark"] .inbox-rowmenu-pop button:hover:not(:disabled) { background: #1b2b45; } [data-theme-mode="dark"] .inbox-rowmenu-pop button.danger { color: #f28b82; } [data-theme-mode="dark"] .inbox-rowmenu-pop button.danger:hover { background: #3a1d1b; } /* ---- bulk bar (keep the dark family, no bright fill) ---- */ [data-theme-mode="dark"] .inbox-bulkbar { background: #12203a; color: #cdd6e6; } [data-theme-mode="dark"] .inbox-bulkbar .inbox-bcount { color: #fff; } [data-theme-mode="dark"] .inbox-bulkbar .inbox-bsep { background: #2b3a57; } [data-theme-mode="dark"] .inbox-bulkbar button { color: #93c5fd; } [data-theme-mode="dark"] .inbox-bulkbar button:hover { background: #1b2b45; color: #fff; } /* ---- Phase 4 overdue pill (danger) ---- */ [data-theme-mode="dark"] .inbox-tag.inbox-due-over { color: #f28b82; background: #3a1d1b; border-color: #5a2a26; } [data-theme-mode="dark"] .inbox-tag.inbox-due-over svg { color: #f28b82; } /* ---- Phase 5 "why is this waiting on me?" callout (purple) ---- */ [data-theme-mode="dark"] .inbox-pv-why { background: #201a3a; border-color: #34285a; color: #b7a6f0; } [data-theme-mode="dark"] .inbox-pv-why .inbox-pv-why-ic { color: #a888ef; } /* ---- Option C Phase 2 Notifications: action pill + preview message block ---- */ [data-theme-mode="dark"] .inbox-tag.inbox-notif-action { color: #a5a1f0; background: #1c1b3a; border-color: #2f2c58; } [data-theme-mode="dark"] .inbox-notif-msg { background: #12203a; border-color: #26344f; color: #cdd6e6; } /* ---- Phase 12 degraded-sources banner (muted amber, no bright fill) ---- */ [data-theme-mode="dark"] .inbox-degraded-note { background: #2a2312; border-color: #4a3d1e; color: #d8bd7e; } [data-theme-mode="dark"] .inbox-degraded-note .inbox-degraded-ic { color: #cba75a; } /* ---- Action-Items Unified Feed (Phase 5): merged tab group headers + results note. Reuses every existing inbox atom (.inbox-list-row, .inbox-tbl, .inbox-type-badge/ .inbox-tb-*, .inbox-tag, .inbox-fchip, .inbox-loadmore, .inbox-degraded-note). Only NET-NEW rules: the contiguous group-by header separator + the filtered-total note. */ .inbox-group-hdr { display: flex; align-items: center; gap: 7px; padding: 10px 14px 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a0b2; } .inbox-group-hdr .inbox-group-ic { font-size: 12px; line-height: 1; } .inbox-group-row td { padding: 0 !important; background: transparent; border: none; } .inbox-results-note { padding: 8px 14px; font-size: 12px; color: #7a869a; border-bottom: 1px solid var(--inbox-border); } .inbox-aitab-dir { min-width: 34px; justify-content: center; font-size: 14px; } [data-theme-mode="dark"] .inbox-group-hdr { color: #7f8ba1; } [data-theme-mode="dark"] .inbox-results-note { color: #8a95a8; } /* ============================================================ INBOX + BELL FOLLOW-UPS (Phase 3) — group collapse · hover row actions · "snoozed" chip · Undo toast. Reuses every existing atom; only NET-NEW rules below. Literal light values per the file header; dark overrides follow. No large bright fills (dark-mode rule) — small accents only. ============================================================ */ /* ---- group-collapse header: clickable chevron + a live count that STAYS visible ---- */ .inbox-group-hdr[data-aitab-act="group-toggle"] { cursor: pointer; user-select: none; } .inbox-group-hdr .inbox-group-chev { font-size: 10px; width: 12px; display: inline-flex; justify-content: center; color: #9aa4b2; flex: 0 0 auto; } .inbox-group-hdr[data-aitab-act="group-toggle"]:hover .inbox-group-chev { color: var(--inbox-blue); } .inbox-group-hdr .inbox-group-count { font-size: 10px; font-weight: 700; color: #7a869a; background: #eef1f6; border-radius: 8px; padding: 0 6px; line-height: 16px; letter-spacing: 0; flex: 0 0 auto; } [data-theme-mode="dark"] .inbox-group-hdr .inbox-group-chev { color: #7f8ba1; } [data-theme-mode="dark"] .inbox-group-hdr[data-aitab-act="group-toggle"]:hover .inbox-group-chev { color: var(--inbox-blue2); } [data-theme-mode="dark"] .inbox-group-hdr .inbox-group-count { color: #8a95a8; background: #1a2233; } /* ---- hover row actions (📌 pin / 💤 defer / ✕ delete) — revealed on row hover ---- */ .inbox-row-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; vertical-align: middle; } .inbox-list-row .inbox-row-actions { opacity: 0; pointer-events: none; transition: opacity 0.12s; } .inbox-list-row.has-actions:hover .inbox-row-actions, .inbox-list-row.has-actions.selected .inbox-row-actions { opacity: 1; pointer-events: auto; } table.inbox-tbl .inbox-row-actions { opacity: 0; pointer-events: none; transition: opacity 0.12s; margin-right: 4px; } table.inbox-tbl tbody tr:hover .inbox-row-actions, table.inbox-tbl tbody tr.kbd-row .inbox-row-actions { opacity: 1; pointer-events: auto; } .inbox-row-act { width: 26px; height: 26px; border: none; background: transparent; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; padding: 0; font-family: inherit; } .inbox-row-act:hover { background: rgba(148, 163, 184, 0.18); } .inbox-row-act.on { background: var(--inbox-blue-soft); } .inbox-row-act.danger:hover { background: #fdecea; } [data-theme-mode="dark"] .inbox-row-act:hover { background: rgba(148, 163, 184, 0.14); } [data-theme-mode="dark"] .inbox-row-act.danger:hover { background: #3a1d1b; } /* ---- "snoozed" chip (B1 — a deferred row stays in the register, only flagged) ---- */ .inbox-snooze-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #6b7280; background: #eef1f6; border: 1px solid #e2e6ee; border-radius: 6px; padding: 1px 7px; white-space: nowrap; } [data-theme-mode="dark"] .inbox-snooze-chip { color: #9aa6ba; background: #1a2233; border-color: #2b3a57; } /* ---- Undo toast (M-DEL / defer) — bottom-left, dark surface in BOTH themes (like the bulk bar), so no light/dark duplication and no large bright fill. ---- */ .inbox-undo-container { position: fixed; left: 20px; bottom: 20px; z-index: 999998; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .inbox-undo-toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; background: #0f254a; color: #dce7ff; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 30, 60, 0.25); padding: 10px 14px; font-size: 13px; min-width: 240px; max-width: 360px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; animation: inboxUndoIn 0.18s ease-out; } .inbox-undo-toast .inbox-undo-msg { flex: 1; min-width: 0; } .inbox-undo-toast .inbox-undo-btn { background: transparent; border: none; color: #93c5fd; font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 8px; border-radius: 6px; font-family: inherit; flex: 0 0 auto; } .inbox-undo-toast .inbox-undo-btn:hover { background: rgba(147, 197, 253, 0.16); } @keyframes inboxUndoIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }