/* ===================================================================== Debt Minder — dark/light theme, Kiteview brand palette Layered AFTER tailwind.css and site.css so re-themed views take precedence. Light theme activates via `data-theme="light"` on . PALETTE PROVENANCE The two brand colours were sampled from the master logo artwork, not estimated: navy #01476B (39,705 sampled px — the wordmark) and orange #F47C20 (3,492 px — the bracket). THE RULE THAT SHAPES EVERYTHING Brand orange measures 2.71:1 on white, so it can neither carry text nor take white text on a solid fill — it misses even the 3:1 non-text floor. So navy carries text, chrome and primary actions; orange marks, points and emphasises, exactly as it does in the logo. On the dark theme's navy grounds orange measures 6.77:1, so dark mode uses the true brand colour for interactive text while light mode uses a deepened #AE560F (5.08:1). Every pairing below was measured; ratios are noted inline. Do not substitute brand orange for --accent in the light theme. ===================================================================== */ :root { /* grounds — neutrals biased toward the brand navy hue (~202deg), not grey */ --bg-darkest: #071620; --bg-dark: #0b1f2b; --bg-mid: #0f2632; --surface: #0f2b3d; --surface-2: #12303f; --sidebar: #05121a; --sidebar-head: #030c12; /* brand pair — the literal logo colours, for marks and fills only */ --brand-navy: #01476b; --brand-orange: #f47c20; /* accent = interactive. Brand orange works natively here: 5.1–6.8:1 on every ground above. */ --accent: #f47c20; --accent-soft: rgba(244, 124, 32, 0.14); --accent-mid: rgba(244, 124, 32, 0.26); --accent-line: rgba(244, 124, 32, 0.42); /* primary action — brand navy, white text 9.93:1. On a navy ground the fill alone has no discernible edge (1.85:1), so dark mode adds --primary-edge at 5.22:1 vs ground to supply the boundary. */ --primary: #01476b; --primary-hover:#025a86; --primary-edge: #4a90b8; --on-primary: #ffffff; --text: #e8eff4; /* 15.8:1 on ground */ --text-muted: rgba(232, 239, 244, 0.64); /* 5.97:1 on surface */ --text-dim: rgba(232, 239, 244, 0.60); /* 5.34:1 on surface, 4.7:1 nested */ --border: rgba(255, 255, 255, 0.10); --border-strong:rgba(255, 255, 255, 0.19); --danger: #f08379; /* 5.74:1 on surface */ --warning: #e8b33d; /* 7.64:1 */ --success: #5fc79a; /* 7.06:1 */ /* Row hover is a navy tint, NOT the accent — an orange wash on every hovered row drowns out the accent's actual job. */ --hover: rgba(93, 163, 200, 0.08); --highlight: rgba(244, 124, 32, 0.13); /* Large tinted surfaces (panel headers, list heads) take this navy wash, not --accent-soft: an orange field at panel scale reads as a background rather than an accent, and drowns out the places orange is actually pointing. */ --panel-tint: rgba(93, 163, 200, 0.07); /* Aging ramp — single-hue sequential, lightness descending monotonically (OKLab 0.83 > 0.72 > 0.57 > 0.44) so the buckets stay ordered under colour-vision deficiency; CVD separation passes at dE 11.8. Brand orange is deliberately absent: a brand colour must not also encode a value. "Current" sits outside the ramp — it is the absence of alarm, not a mild one. */ --age-0: rgba(93, 163, 200, 0.10); --age-30: #3a1e16; /* text 13.1:1 */ --age-60: #4e2317; /* 11.5:1 */ --age-90: #6b2a1b; /* 9.2:1 */ --age-120: #8e2e1c; /* 7.1:1 */ --age-ink: #e8eff4; /* Progress-bar variant of the ramp. The cell tints above are backgrounds for ink; a bar has to clear its own track instead, so the dark theme runs light-on-dark and the light theme runs dark-on-light. Both stay monotonic. All >= 3:1 against their track. */ --age-bar-0: #5da3c8; --age-bar-30: #f6cccc; --age-bar-60: #eaa6a6; --age-bar-90: #dc8181; --age-bar-120: #d26d6d; /* ---- Card depth. Cards need to sit ON the ground, not merge into it. Two layers: a 1px hairline for the edge, a wide low-opacity drop for the lift. Deliberately restrained — no Material elevation stack. ---- */ --radius-card: 12px; --shadow-card: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px -12px rgba(0, 0, 0, .55); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, .32), 0 14px 32px -14px rgba(0, 0, 0, .68); --shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, .60); /* ---- Soft status tints. Pill backgrounds previously hardcoded the same rgba() literals in component CSS; these are the tokenised versions so a status tone is defined once. Each is its own hue's ink at low alpha. ---- */ --danger-soft: rgba(240, 131, 121, .15); --warning-soft: rgba(232, 179, 61, .15); --success-soft: rgba(95, 199, 154, .15); /* Informational, NOT alarm and NOT brand: the neutral tone that sub-labels take so --danger is left to mean overdue and nothing else. */ --info: #8fc3de; /* 7.69:1 on surface */ --info-soft: rgba(93, 163, 200, .16); } /* ---- Scope dm-themed reset to .dm-themed pages only so we don't fight the existing Tailwind chrome on un-ported views. ---- */ body.dm-themed, body.dm-themed * { box-sizing: border-box; } body.dm-themed { padding: 0; margin: 0; } body.dm-themed { background: var(--bg-darkest); background: radial-gradient(circle at 30% 20%, #10394f 0%, #0b1f2b 45%, #071620 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; color: var(--text); font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; transition: background-color 200ms ease, color 200ms ease; scrollbar-color: var(--accent) var(--bg-dark); scrollbar-width: thin; } body.dm-themed::-webkit-scrollbar { width: 8px; height: 8px; } body.dm-themed::-webkit-scrollbar-track { background: var(--bg-dark); } body.dm-themed::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } body.dm-themed .dm-page { padding: 0 20px 20px; } body.dm-themed a { text-decoration: none; color: inherit; } /* Light theme overrides */ :root[data-theme="light"] { --bg-darkest: #eaeff4; --bg-dark: #e9eff3; --bg-mid: #ffffff; --surface: #ffffff; --surface-2: #f5f8fa; --sidebar: #ffffff; --sidebar-head: #f1f5f7; --brand-navy: #01476b; --brand-orange: #f47c20; /* Deepened orange: brand #f47c20 is only 2.71:1 on white and cannot carry text here. #ae560f keeps the identity at 5.08:1 on surface, 4.63:1 on ground. The soft/mid/line tints stay on the true brand hue because they are backgrounds, not ink. */ --accent: #ae560f; --accent-soft: rgba(244, 124, 32, 0.11); --accent-mid: rgba(244, 124, 32, 0.22); --accent-line: rgba(244, 124, 32, 0.45); /* Navy on white gives a 9.93:1 edge, so no --primary-edge is needed here. */ --primary: #01476b; --primary-hover:#013a57; --primary-edge: transparent; --on-primary: #ffffff; --text: #0a1e2b; /* 17.0:1 on white */ --text-muted: rgba(10, 30, 43, 0.66); /* 5.11:1 */ --text-dim: rgba(10, 30, 43, 0.68); /* 5.59:1 on white, 5.0:1 nested */ --border: rgba(10, 30, 43, 0.11); --border-strong:rgba(10, 30, 43, 0.20); --danger: #a8231c; /* 7.19:1 on white */ --warning: #9a6b10; /* 4.68:1 */ --success: #1c6b4a; /* 6.46:1 */ --hover: rgba(1, 71, 107, 0.05); --highlight: rgba(244, 124, 32, 0.13); --panel-tint: rgba(1, 71, 107, 0.045); /* Same sequential ramp, inverted: pale tints carrying navy ink. */ --age-0: rgba(1, 71, 107, 0.07); --age-30: #fce8df; /* navy ink 8.4:1 */ --age-60: #f8cdbb; /* 6.8:1 */ --age-90: #f0a88f; /* 5.1:1 */ --age-120: #ee9c86; /* 4.6:1 */ --age-ink: #01476b; --age-bar-0: #1c6d99; --age-bar-30: #b04a4a; --age-bar-60: #993838; --age-bar-90: #822a2a; --age-bar-120: #6a1d1d; /* Navy-tinted shadow rather than neutral black — a grey drop on a cool ground reads as dirt. Both layers stay under .11 alpha. */ --radius-card: 12px; --shadow-card: 0 1px 2px rgba(10, 30, 43, .04), 0 8px 24px -12px rgba(10, 30, 43, .10); --shadow-card-hover: 0 1px 2px rgba(10, 30, 43, .06), 0 14px 30px -14px rgba(10, 30, 43, .18); /* Lifted overlays (the add-widget tray) — deeper than a card, same hue. */ --shadow-overlay: 0 24px 60px -20px rgba(10, 30, 43, .30); --danger-soft: rgba(168, 35, 28, .10); --warning-soft: rgba(154, 107, 16, .12); --success-soft: rgba(28, 107, 74, .10); /* #1c5a7d measures 7.48:1 on white, so it carries text comfortably, and it reads clearly as "information" rather than "alarm". */ --info: #1c5a7d; --info-soft: rgba(1, 71, 107, .08); } /* Ground cooled one step (#f1f5f7 -> #eaeff4 / gradient stops likewise) so white cards read as raised objects instead of merging into the page. */ :root[data-theme="light"] body.dm-themed { background: radial-gradient(circle at 30% 20%, #d9e5ee 0%, #e4ebf1 45%, #eaeff4 100%); } body.dm-themed .num, body.dm-themed td.num, body.dm-themed .amt { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Focus rings */ body.dm-themed *:focus { outline: none; } body.dm-themed *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Page-entry animation */ @keyframes dm-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes dm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes dm-spin { to { transform: rotate(360deg); } } body.dm-themed .dm-page > * { animation: dm-page-in 280ms ease-out both; } body.dm-themed .dm-page > *:nth-child(1) { animation-delay: 0ms; } body.dm-themed .dm-page > *:nth-child(2) { animation-delay: 60ms; } body.dm-themed .dm-page > *:nth-child(3) { animation-delay: 120ms; } body.dm-themed .dm-page > *:nth-child(4) { animation-delay: 180ms; } /* Fixed-position overlays must NOT receive the page-in animation — `animation-fill-mode: both` would freeze a `transform: translateY(0)` on them and clobber their own slide-out transforms. */ body.dm-themed .dm-page > .dm-layout-panel, body.dm-themed .dm-page > .dm-layout-panel-overlay, body.dm-themed .dm-page > .dmg-drawer, body.dm-themed .dm-page > .dmg-scrim, body.dm-themed .dm-page > dialog { animation: none !important; } /* ---------------- TOP SECTION ---------------- */ .dm-top-section { padding: 14px 20px 16px; border-bottom: 1px solid var(--accent-mid); display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 10; background: var(--bg-dark); } .dm-button-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .dm-brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; color: var(--text); } .dm-brand .dm-badge-dm { background: var(--bg-dark); color: var(--accent); border: 2px solid var(--accent); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; letter-spacing: 0.5px; } .dm-brand:hover .dm-badge-dm { box-shadow: 0 0 10px var(--accent-line); } :root[data-theme="light"] .dm-brand .dm-badge-dm { background: var(--accent); color: #fff; border-color: var(--accent); } /* Buttons */ .dm-btn { overflow: hidden; border-radius: 20px; padding: 10px 18px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 500; transition: background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 120ms ease; } .dm-btn:hover { background: var(--surface-2); border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .dm-btn:active { transform: translateY(1px); } .dm-btn.sm { padding: 10px 18px; border-radius: 20px; font-size: 13.5px; min-height: 40px; } /* Primary action is brand navy with white text (9.93:1), never orange — white on brand orange is 2.71:1 and an orange dark enough to fix that is no longer the logo colour. --primary-edge supplies the button's boundary in the dark theme, where a navy fill on a navy ground is only 1.85:1 and would otherwise have no discernible edge; it is transparent in the light theme, where navy on white already gives 9.93:1. */ .dm-btn-primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary-edge); font-weight: 600; } .dm-btn-primary:hover { background: var(--primary-hover); box-shadow: 0 0 0 3px var(--accent-soft); } .dm-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 16px; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; } .dm-btn-ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text); } .dm-btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); border-radius: 8px; padding: 9px 16px; cursor: pointer; min-height: 40px; } .dm-btn-danger:hover { background: rgba(248, 113, 113, 0.08); } .dm-btn.is-loading, .dm-btn-primary.is-loading { pointer-events: none; opacity: 0.85; } .dm-btn.is-loading::before, .dm-btn-primary.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: dm-spin 600ms linear infinite; margin-right: 8px; } .dm-hamburger { background: transparent; border: none; color: var(--text); font-size: 1.4rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; } .dm-hamburger:hover { background: rgba(255, 255, 255, 0.06); } /* Toggle switches */ .dm-switch-group { border-radius: 14px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--border); } .dm-switch-line { display: flex; align-items: center; margin: 2px 0; } .dm-switch-text { color: var(--text); font-size: 14px; } .dm-switch { font-size: 8px; position: relative; display: inline-block; width: 3.5em; height: 2em; margin-right: 8px; } .dm-switch input { opacity: 0; width: 0; height: 0; } .dm-slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 50px; transition: background-color 280ms ease, border-color 280ms ease; } .dm-slider:before { position: absolute; content: ""; height: 1.6em; width: 1.6em; top: 50%; left: 0.2em; transform: translateY(-50%); background: #fff; border-radius: 50px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); transition: transform 280ms cubic-bezier(.175, .885, .32, 1.275); } .dm-switch input:checked + .dm-slider { background: var(--accent); border-color: var(--accent); } .dm-switch input:checked + .dm-slider:before { transform: translate(1.65em, -50%); } .dm-switch input:focus-visible + .dm-slider { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50px; } /* Search */ .dm-search { display: flex; align-items: center; gap: 8px; } .dm-search form { background: var(--surface); width: 300px; height: 42px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; } .dm-search form:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .dm-search input { all: unset; font: 15px system-ui; color: var(--text); height: 100%; width: 100%; padding: 8px 14px; } .dm-search input::placeholder { color: var(--text-muted); } .dm-search button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding-right: 14px; } .dm-search form:focus-within button { color: var(--accent); } /* Theme toggle */ .dm-theme-toggle { background: transparent; border: 1px solid var(--border-strong); color: var(--text); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: inline-grid; place-items: center; font-size: 16px; } .dm-theme-toggle:hover { background: var(--surface-2); } .dm-theme-toggle .icon-light { display: none; } :root[data-theme="light"] .dm-theme-toggle .icon-dark { display: none; } :root[data-theme="light"] .dm-theme-toggle .icon-light { display: inline; } /* Filter dropdown (compact, narrow, fields stacked vertically) */ .dm-filter-dd { position: relative; } .dm-filter-dd-arrow { font-size: 10px; margin-left: 2px; transition: transform 200ms ease; } #filterDdBtn[aria-expanded="true"] .dm-filter-dd-arrow { transform: rotate(180deg); } .dm-filter-dd-pop { position: absolute; left: 0; top: calc(100% + 8px); width: 220px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index: 1060; display: none; padding: 14px; } .dm-filter-dd-pop.open { display: flex; flex-direction: column; gap: 12px; } .dm-filter-dd-item { position: relative; } .dm-filter-dd-item label { color: var(--text-muted); font-size: 12px; margin-bottom: 5px; display: block; } .dm-filter-dd-item input, .dm-filter-dd-item select { width: 100%; height: 36px; padding: 7px 10px; border-radius: 6px; color: var(--text); background: var(--bg-mid); border: 1px solid var(--border-strong); outline: none; } .dm-filter-dd-item input:focus, .dm-filter-dd-item select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } .dm-filter-dd-actions { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 10px; } /* Table header bar */ .dm-header-bar { margin-top: 14px; display: grid; width: 100%; letter-spacing: 0.08em; gap: 0; position: sticky; top: 92px; z-index: 9; background: var(--bg-dark); padding: 4px 0; } .dm-header-bar .col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; color: var(--text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; font-size: 0.72rem; white-space: nowrap; } .dm-header-bar .col.select-cell { gap: 8px; cursor: pointer; } .dm-header-bar .col.select-cell:hover { background: var(--surface-2); } .dm-header-bar .col.select-cell .select-count { margin-left: auto; color: var(--text-muted); font-weight: 500; } /* Tables */ .dm-table-container { width: 100%; padding: 6px 0; overflow-y: auto; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } .dm-table-container::-webkit-scrollbar { width: 6px; height: 6px; } .dm-table-container::-webkit-scrollbar-track { background: transparent; } .dm-table-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } .dm-table-container::-webkit-scrollbar-thumb:hover { background: var(--accent); } .dm-table { width: 100%; font-size: 14px; border-collapse: separate !important; border-spacing: 0 4px !important; } .dm-table td { background: var(--surface); border: none !important; padding: 11px 14px; color: var(--text); vertical-align: middle; } .dm-table tbody tr { cursor: pointer; } .dm-table tbody tr:nth-child(even) td { background: var(--surface-2); } :root[data-theme="light"] body.dm-themed .dm-table tbody tr:nth-child(even) td { background: var(--surface-2); } .dm-table tbody tr:hover td { background: var(--hover); } .dm-table tbody tr td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .dm-table tbody tr td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .dm-table .highlight-row td { background: var(--highlight) !important; } .dm-table .highlight-row td:first-child { box-shadow: inset 2px 0 0 var(--accent); } .dm-table .row-discrepancy td:nth-child(4), .dm-table .row-discrepancy td:nth-child(5) { box-shadow: inset 2px 0 0 var(--warning); } /* Inline cell icon button (Docs / Email) */ .dm-cell-icon { color: var(--text-muted); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: none; border: none; cursor: pointer; } .dm-cell-icon:hover { color: var(--accent); transform: scale(1.2); background: var(--accent-soft); } .dm-cell-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Circle checkboxes */ .dm-check { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent); cursor: pointer; position: relative; outline: none; background: transparent; vertical-align: middle; margin-right: 6px; flex-shrink: 0; } .dm-check::after { content: ""; position: absolute; top: 3px; left: 5px; width: 4px; height: 8px; border: solid var(--bg-darkest); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; } .dm-check:hover { box-shadow: 0 0 0 4px var(--accent-mid); } .dm-check:checked { background: var(--accent); border-color: var(--accent); } .dm-check:checked::after { opacity: 1; } .dm-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Status icons / tooltips */ .dm-icon-tooltip { position: relative; display: inline-flex; align-items: center; } .dm-table td .fa-circle-exclamation { margin-left: 4px; border-radius: 10px; background: #fff; color: #ef4444; animation: dm-pulse 2s ease-in-out infinite; } .dm-table td .fa-circle-info { margin-left: 4px; border-radius: 10px; background: #fff; color: #2f7cef; } :root[data-theme="light"] body.dm-themed .dm-table td .fa-circle-exclamation, :root[data-theme="light"] body.dm-themed .dm-table td .fa-circle-info { background: transparent; } .dm-floating-tooltip { position: fixed; background: var(--surface); color: var(--text); padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; z-index: 9999; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 150ms ease, transform 150ms ease; transform: translateY(4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } .dm-floating-tooltip.show { opacity: 1; transform: translateY(0); } /* Drawer */ .dm-drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 240ms ease; z-index: 1040; } .dm-drawer-overlay.open { opacity: 1; visibility: visible; } :root[data-theme="light"] .dm-drawer-overlay { background: rgba(0, 0, 0, 0.30); } .dm-drawer { position: fixed; top: 0; left: 0; height: 100%; width: 264px; background: var(--sidebar); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 240ms ease-out; z-index: 1050; display: flex; flex-direction: column; } .dm-drawer.open { transform: translateX(0); } .dm-drawer-header { padding: 18px 16px; background: var(--sidebar-head); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .dm-drawer-header h2 { color: var(--text); font-size: 18px; font-weight: 600; margin: 0; } .dm-drawer-header .close-x { background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; line-height: 1; min-width: 32px; min-height: 32px; border-radius: 50%; display: inline-grid; place-items: center; } .dm-drawer-header .close-x:hover { background: rgba(255, 255, 255, 0.1); } .dm-drawer-body { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; } .dm-drawer-body a, .dm-drawer-body button.dm-drawer-action { display: flex; align-items: center; color: var(--text); padding: 10px 14px; border-radius: 8px; margin-bottom: 4px; transition: padding-left 150ms ease, background-color 180ms ease, color 180ms ease; border-left: 3px solid transparent; border: none; background: transparent; font-size: 14px; gap: 10px; text-align: left; width: 100%; cursor: pointer; } .dm-drawer-body a:hover, .dm-drawer-body button.dm-drawer-action:hover { background: rgba(255, 255, 255, 0.06); padding-left: 18px; } .dm-drawer-body a.active { background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--text); font-weight: 600; } .dm-drawer-section-label { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 14px 4px; } .dm-drawer-body .logout-form { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 6px; } .dm-drawer-body .logout-form button { color: var(--danger); border-left: 3px solid transparent; } .dm-drawer-body .logout-form button:hover { background: rgba(240, 131, 121, 0.10); } .dm-drawer-meta { padding: 10px 14px; font-size: 11px; color: var(--text-muted); border-top: 1px solid rgba(255, 255, 255, 0.06); } /* Page header / panels */ .dm-page-header { color: var(--text); margin: 22px 0; font-size: 1.6rem; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--accent); display: inline-block; } .dm-panel { border-radius: 8px; margin-bottom: 16px; overflow: hidden; } .dm-panel-header { padding: 12px 16px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: var(--surface); border-left: 3px solid var(--accent); color: var(--text); } .dm-panel-header:hover { background: var(--surface-2); } .dm-panel-arrow { transition: transform 250ms ease; color: var(--accent); display: inline-block; } .dm-panel-content { overflow: hidden; transition: max-height 320ms ease-in-out; background: var(--panel-tint); } /* Status pills */ .dm-pill { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; min-width: 88px; text-align: center; } .dm-pill--none { background: transparent; border-color: var(--border-strong); color: var(--text-muted); } .dm-pill--followup { background: #6b4e0f; color: #f7e3ae; } /* 6.08:1 */ .dm-pill--escalated { background: #8e2e1c; color: #f8d3c9; } /* 5.92:1 */ .dm-pill--resolved { background: #14532d; color: #bbf7d0; } /* 7.52:1 */ .dm-pill--pending { background: #334155; color: #cbd5e1; } /* 6.97:1 */ .dm-pill--ptp { background: #01476b; color: #c4e0f0; } /* 7.22:1 */ /* Visually hidden utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 768px) { body.dm-themed .dm-page { padding: 0 12px 12px; } .dm-top-section { flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; } .dm-button-group { flex-wrap: wrap; gap: 6px; } .dm-search { width: 100%; } .dm-search form { width: 100%; min-width: 200px; } .dm-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dm-header-bar { top: 120px; } } /* ===================================================================== CUSTOMER DETAIL — configurable section layout ===================================================================== */ .dm-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; transition: opacity .18s ease, box-shadow .18s ease; } .dm-section.hidden-by-user { display: none; } .dm-section-header { padding: 12px 16px; background: var(--surface-2); color: var(--text); border-bottom: 1px solid var(--border); border-left: 3px solid var(--accent); display: flex; align-items: center; gap: 10px; } .dm-section-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); flex: 1; } .dm-section-body { padding: 16px; } .dm-section-body--flush { padding: 0; } /* KPI tile row */ .dm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 16px; } .dm-kpi-row.compact .dm-kpi-tile .dm-kpi-value { font-size: 18px; } .dm-kpi-tile { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; } .dm-kpi-tile[data-hidden="1"] { display: none; } .dm-kpi-tile .dm-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); display: block; margin-bottom: 6px; } .dm-kpi-tile .dm-kpi-value { font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .dm-kpi-tile .dm-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; } .dm-kpi-tile.is-warning .dm-kpi-value { color: var(--warning); } .dm-kpi-tile.is-danger .dm-kpi-value { color: var(--danger); } /* Aging bar inside its tile */ .dm-aging-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-top: 8px; overflow: hidden; } .dm-aging-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .dm-aging-tile.b-current .dm-aging-bar > span { background: var(--age-bar-0); } .dm-aging-tile.b-30 .dm-aging-bar > span { background: var(--age-bar-30); } .dm-aging-tile.b-60 .dm-aging-bar > span { background: var(--age-bar-60); } .dm-aging-tile.b-90 .dm-aging-bar > span { background: var(--age-bar-90); } .dm-aging-tile.b-120 .dm-aging-bar > span { background: var(--age-bar-120); } :root[data-theme="light"] .dm-aging-bar { background: rgba(0,0,0,0.06); } /* All-hidden fallback */ .dm-all-hidden-msg { display: none; padding: 24px; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 12px; } body.dm-all-hidden .dm-all-hidden-msg { display: block; } /* Customize toggle button (top section) */ .dm-customize-toggle { background: transparent; border: 1px solid var(--border-strong); color: var(--text); height: 40px; padding: 0 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; } .dm-customize-toggle:hover { background: var(--surface-2); } .dm-customize-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* Layout panel — slide-in from right */ .dm-layout-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 220ms ease; z-index: 1045; } .dm-layout-panel-overlay.open { opacity: 1; visibility: visible; } :root[data-theme="light"] .dm-layout-panel-overlay { background: rgba(0,0,0,0.30); } .dm-layout-panel { position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 260ms ease-out; z-index: 1050; display: flex; flex-direction: column; box-shadow: -10px 0 24px rgba(0,0,0,0.35); } .dm-layout-panel.open { transform: translateX(0); } .dm-layout-panel-header { padding: 16px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .dm-layout-panel-header h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } .dm-layout-panel-header .close-x { background: none; border: none; color: var(--text); font-size: 22px; cursor: pointer; line-height: 1; min-width: 32px; min-height: 32px; border-radius: 50%; display: inline-grid; place-items: center; } .dm-layout-panel-header .close-x:hover { background: rgba(255,255,255,0.10); } :root[data-theme="light"] .dm-layout-panel-header .close-x:hover { background: rgba(0,0,0,0.06); } .dm-layout-panel-body { padding: 14px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .dm-layout-panel-footer { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dm-layout-row { background: var(--bg-mid); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .dm-layout-row.hidden { opacity: 0.55; } .dm-layout-row-head { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 8px; padding: 10px 12px; } .dm-layout-row-head .dm-layout-row-label { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .dm-layout-row-head button { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: inline-grid; place-items: center; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .dm-layout-row-head button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .dm-layout-row-head button:disabled { opacity: 0.35; cursor: not-allowed; } .dm-layout-row-head button.visibility-toggle.is-off { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.30); color: var(--danger); } .dm-layout-row-head .dm-layout-row-expand[aria-expanded="true"] i { transform: rotate(180deg); } .dm-layout-row-head .dm-layout-row-expand i { transition: transform 200ms ease; } .dm-layout-row-items { border-top: 1px solid var(--border); padding: 8px 12px 12px; display: none; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.10); } .dm-layout-row.expanded .dm-layout-row-items { display: flex; } :root[data-theme="light"] .dm-layout-row-items { background: rgba(0,0,0,0.025); } .dm-layout-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; font-size: 13.5px; color: var(--text); } .dm-layout-item .dm-layout-item-toggle { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: inline-grid; place-items: center; } .dm-layout-item .dm-layout-item-toggle:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); } .dm-layout-item .dm-layout-item-toggle.is-off { background: rgba(248, 113, 113, 0.10); color: var(--danger); border-color: rgba(248, 113, 113, 0.30); } /* sr-only thead alias (table semantics) */ table thead.sr-only-head, table caption.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Ensure dm-table column widths from are authoritative */ .dm-table { table-layout: fixed; } .dm-table td { overflow: hidden; text-overflow: ellipsis; } /* Chips reused from main demo */ .dm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; } .dm-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dm-chip--pdf { background: rgba(248, 113, 113, 0.15); color: #fca5a5; } .dm-chip--word { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } .dm-chip--excel { background: rgba(34, 197, 94, 0.15); color: #86efac; } .dm-chip--call { background: var(--accent-mid); color: var(--accent); } .dm-chip--sms { background: rgba(192, 132, 252, 0.15); color: #d8b4fe; } .dm-chip--email { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } :root[data-theme="light"] .dm-chip--pdf { background: rgba(220, 38, 38, 0.10); color: #b91c1c; } :root[data-theme="light"] .dm-chip--word { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; } :root[data-theme="light"] .dm-chip--excel { background: rgba(22, 163, 74, 0.10); color: #15803d; } :root[data-theme="light"] .dm-chip--call { background: rgba(13, 148, 136, 0.10); color: #0f766e; } :root[data-theme="light"] .dm-chip--sms { background: rgba(126, 34, 206, 0.10); color: #7e22ce; } :root[data-theme="light"] .dm-chip--email { background: rgba(37, 99, 235, 0.10); color: #1d4ed8; } /* Dropzone (Documents upload) */ .dm-dropzone { border: 2px dashed var(--accent-line); border-radius: 8px; padding: 18px; text-align: center; color: var(--text-muted); cursor: pointer; background: var(--hover); display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 80px; } .dm-dropzone:hover, .dm-dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .dm-dropzone i { font-size: 22px; color: var(--accent); } .dm-dropzone .dz-file { color: var(--accent); font-weight: 600; } .dm-dropzone input[type=file] { display: none; } /* Themed dialog (log-contact, etc.) */ .dm-dialog { width: 100%; max-width: 520px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); padding: 0; } .dm-dialog::backdrop { background: rgba(0,0,0,0.5); } .dm-dialog .dialog-head { padding: 16px 20px; border-bottom: 1px solid var(--border); } .dm-dialog .dialog-head h3 { margin: 0; font-size: 17px; font-weight: 600; } .dm-dialog .dialog-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; } .dm-dialog .dialog-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .dm-dialog .dialog-body label { display:block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } .dm-dialog .dialog-body input, .dm-dialog .dialog-body select, .dm-dialog .dialog-body textarea { width: 100%; padding: 8px 12px; min-height: 38px; border-radius: 6px; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-strong); outline: none; } .dm-dialog .dialog-body input:focus, .dm-dialog .dialog-body select:focus, .dm-dialog .dialog-body textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } .dm-dialog .dialog-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; } .dm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* ===================================================================== CHAT — feedback Chat mode ===================================================================== */ .dm-mode-switch { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; margin: 12px 0 18px; } .dm-mode-switch button { background: transparent; border: none; color: var(--text-muted); padding: 8px 18px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .dm-mode-switch button:hover { color: var(--text); } .dm-mode-switch button.active { background: var(--accent); color: var(--bg-darkest); font-weight: 600; } :root[data-theme="light"] .dm-mode-switch button.active { color: #fff; } .dm-mode-pane[hidden] { display: none; } /* Bell */ .dm-bell { position: relative; background: transparent; border: 1px solid var(--border-strong); color: var(--text); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: inline-grid; place-items: center; font-size: 16px; } .dm-bell:hover { background: var(--surface-2); } .dm-bell-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--bg-dark); } .dm-bell-badge[data-empty="1"] { display: none; } .dm-notif-pop { position: absolute; right: 0; top: 48px; width: 360px; max-width: 95vw; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index: 1060; overflow: hidden; display: none; } .dm-notif-pop.open { display: block; } .dm-notif-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); } .dm-notif-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); } .dm-notif-head button { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; } .dm-notif-head button:hover { color: var(--accent); } .dm-notif-body { max-height: 420px; overflow-y: auto; } .dm-notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 12px; align-items: flex-start; } .dm-notif-item:last-child { border-bottom: none; } .dm-notif-item:hover { background: var(--surface-2); } .dm-notif-item.unread { background: var(--hover); } .dm-notif-item .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 13px; flex-shrink: 0; } .dm-notif-item .body { flex: 1; min-width: 0; } .dm-notif-item .line1 { font-size: 13px; color: var(--text); } .dm-notif-item .line2 { font-size: 12px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-notif-item .when { font-size: 11px; color: var(--text-dim); margin-top: 4px; } .dm-notif-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13px; } /* Chat shell */ .chat-shell { display: grid; grid-template-columns: clamp(320px, 38%, 460px) 1fr; gap: 14px; min-height: 580px; height: calc(100vh - 188px); margin-bottom: 16px; } .chat-list, .chat-conv { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .chat-list-head { padding: 12px 14px; background: var(--panel-tint); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .chat-list-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); } .chat-list-head .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .chat-search { width: 100%; height: 36px; padding: 6px 12px; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; } .chat-list-body { flex: 1; overflow-y: auto; } .thread-row { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; } .thread-row:hover { background: var(--surface-2); } .thread-row.active { background: var(--highlight); border-left: 3px solid var(--accent); padding-left: 11px; } .thread-row .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 13px; flex-shrink: 0; } .thread-row .body { flex: 1; min-width: 0; } .thread-row .subject { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-row .preview { font-size: 12px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .thread-row .meta-row { font-size: 11px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 6px; } .thread-row .unread { background: var(--accent); color: var(--bg-darkest); font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 6px; display: grid; place-items: center; margin-left: auto; } .conv-head { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--panel-tint); } .conv-subject { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; } .conv-participants { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .conv-participants .chip { background: var(--bg-mid); padding: 3px 10px; border-radius: 999px; font-size: 11.5px; color: var(--text); border: 1px solid var(--border); } .conv-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-darkest); } :root[data-theme="light"] .conv-body { background: #f1f6f3; } .conv-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; padding: 40px; text-align: center; } .date-divider { text-align: center; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 12px 0; } .date-divider span { background: var(--surface); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); } .msg { display: flex; gap: 8px; margin: 6px 0; max-width: min(72%, 560px); } .msg.theirs { align-self: flex-start; } .msg.mine { align-self: flex-end; flex-direction: row-reverse; } .msg .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 12px; flex-shrink: 0; } .msg.mine .av { display: none; } .msg .bubble { background: var(--surface); color: var(--text); border-radius: 14px; padding: 9px 14px 7px; font-size: 14px; line-height: 1.4; border: 1px solid var(--border); word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } .msg.theirs .bubble { border-top-left-radius: 4px; } .msg.mine .bubble { background: var(--accent); color: var(--bg-darkest); border-color: var(--accent); border-top-right-radius: 4px; } :root[data-theme="light"] .msg.mine .bubble { color: #fff; } .msg .author { font-size: 11.5px; font-weight: 700; color: var(--accent); margin-bottom: 2px; } .msg.mine .author { display: none; } .msg .text { white-space: pre-wrap; } .msg .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .msg.mine .meta { color: rgba(255, 255, 255, 0.78); } .msg .meta .checks { letter-spacing: -2px; } .msg .text .mention { background: var(--panel-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); padding: 1px 6px; border-radius: 4px; font-weight: 600; } .msg.mine .text .mention { background: rgba(255,255,255,0.30); color: inherit; } .msg .text .doc-ref { background: rgba(96,165,250,0.20); color: #93c5fd; padding: 1px 7px 1px 5px; border-radius: 4px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; } .msg .text .doc-ref:hover { background: rgba(96,165,250,0.35); } .msg.mine .text .doc-ref { background: rgba(255,255,255,0.32); color: inherit; } :root[data-theme="light"] .msg .text .doc-ref { background: rgba(37,99,235,0.12); color: #1d4ed8; } .msg .text .doc-ref--credit { background: rgba(232,179,61,0.18); color: #f7e3ae; } .msg .text .doc-ref--credit:hover { background: rgba(232,179,61,0.32); } :root[data-theme="light"] .msg .text .doc-ref--credit { background: rgba(154,107,16,0.12); color: var(--warning); } .composer { border-top: 1px solid var(--border); background: var(--surface); padding: 10px 14px; display: flex; align-items: flex-end; gap: 10px; position: relative; } .composer textarea { flex: 1; min-height: 40px; max-height: 140px; padding: 9px 12px; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; resize: none; font: inherit; font-size: 14px; line-height: 1.4; outline: none; } .composer textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .composer .send-btn { background: var(--primary); color: var(--on-primary); border: none; border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; font-size: 16px; flex-shrink: 0; } .composer .send-btn:hover { background: var(--primary-hover); } .composer .send-btn:disabled { background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; } .mention-pop { position: absolute; bottom: 60px; left: 14px; width: 280px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 100; display: none; } .mention-pop.open { display: block; } .mention-pop-item { padding: 8px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; } .mention-pop-item:hover, .mention-pop-item.focused { background: var(--accent-soft); } .mention-pop-item .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 11.5px; flex-shrink: 0; } .mention-pop-item .name { color: var(--text); font-weight: 500; } .mention-pop-item .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mention-pop-item.doc .av { background: rgba(96,165,250,0.20) !important; color: #93c5fd !important; } :root[data-theme="light"] .mention-pop-item.doc .av { color: #1d4ed8 !important; } .mention-pop-item.doc[data-id^="CRN"] .av i { color: var(--warning); } :root[data-theme="light"] .mention-pop-item.doc[data-id^="CRN"] .av i { color: var(--warning); } /* Conversations pane collapsed to the rail (see .dm-rail above) */ .chat-shell.conv-hidden { grid-template-columns: 44px 1fr; } .chat-shell.conv-hidden .chat-list { display: none; } .chat-shell:not(.conv-hidden) > .dm-rail { display: none; } /* Once the shell stacks to one column the rail spans the full width, so its label has to lie down with it. Each screen stacks at its own breakpoint, which is why this lives here rather than with .dm-rail. */ @media (max-width: 760px) { .chat-shell, .chat-shell.conv-hidden { grid-template-columns: 1fr; } .chat-shell { height: auto; min-height: 0; } .chat-list { max-height: 280px; } .chat-shell > .dm-rail { flex-direction: row; justify-content: center; padding: 9px; } .chat-shell > .dm-rail .dm-rail-t { writing-mode: horizontal-tb; } } /* ---- Merged feedback conversation (Approach B) ---- */ .thread-row .subject .thread-default { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: transparent; color: var(--accent); border: 1px solid var(--accent-line); padding: 1px 7px; border-radius: 999px; margin-left: 6px; } .conv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .conv-head .conv-subject { flex: 1; } .conv-filter { display: inline-flex; gap: 3px; background: var(--bg-mid); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .conv-filter button { background: transparent; border: none; color: var(--text-muted); padding: 4px 12px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 500; } .conv-filter button.active { background: var(--accent); color: var(--bg-darkest); font-weight: 600; } :root[data-theme="light"] .conv-filter button.active { color: #fff; } .conv-head .conv-participants { flex-basis: 100%; } /* outcome card inside the conversation */ .ev-outcome { align-self: stretch; background: var(--bg-mid); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 12px; padding: 11px 14px; margin: 6px 0; position: relative; } .ev-outcome .o-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; } .ev-outcome .o-top .o-by { font-size: 12px; color: var(--text-muted); margin-left: auto; } .ev-outcome .o-ptp { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } .ev-outcome .o-meta { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; } .ev-outcome .o-meta b { color: var(--text); } .ev-outcome .o-reply, .ev-outcome .o-edit { position: absolute; top: 8px; opacity: 0; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 11px; display: grid; place-items: center; transition: opacity .12s; } .ev-outcome .o-reply { right: 8px; } .ev-outcome .o-edit { right: 40px; } .ev-outcome:hover .o-reply, .ev-outcome:hover .o-edit { opacity: 1; } .ev-outcome .o-reply:hover, .ev-outcome .o-edit:hover { color: var(--accent); border-color: var(--accent-line); } /* in-bubble reply affordance + quote */ .msg .bubble { position: relative; } .msg .m-reply { position: absolute; top: 4px; opacity: 0; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 11px; display: grid; place-items: center; transition: opacity .12s; } .msg.theirs .m-reply { right: -4px; } .msg.mine .m-reply { left: -4px; } .msg:hover .m-reply { opacity: 1; } .msg .bubble .q { border-left: 3px solid currentColor; opacity: .85; padding: 3px 8px; margin-bottom: 5px; font-size: 12px; border-radius: 5px; background: rgba(0,0,0,.12); cursor: pointer; } .msg.mine .bubble .q { background: rgba(255,255,255,.18); } .msg .bubble .q .qw { font-weight: 700; } .ev-outcome.flash, .msg .bubble.flash, .msg.flash .bubble { animation: dm-flash 1.2s ease; } @keyframes dm-flash { 0%,100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--accent-mid); } } /* composer wrap: reply banner + mode toggle + outcome fields */ .composer-wrap { border-top: 1px solid var(--border); background: var(--surface); } .composer-wrap .composer { border-top: none; } .reply-quote { display: none; align-items: center; gap: 8px; margin: 10px 14px 0; border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text-muted); } .reply-quote.show { display: flex; } .reply-quote .who { color: var(--accent); font-weight: 600; } .reply-quote .x { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; } .cmp-modes { display: inline-flex; gap: 4px; margin: 10px 14px 0; background: var(--bg-mid); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .cmp-modes button { background: transparent; border: none; color: var(--text-muted); padding: 6px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; } .cmp-modes button.active { background: var(--accent); color: var(--bg-darkest); font-weight: 600; } :root[data-theme="light"] .cmp-modes button.active { color: #fff; } .cmp-outcome { display: none; padding: 10px 14px 0; } .cmp-outcome.show { display: block; } .cmp-outcome .cmp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cmp-outcome label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .cmp-outcome input, .cmp-outcome select { width: 100%; min-height: 36px; padding: 7px 10px; border-radius: 8px; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-strong); outline: none; font: inherit; font-size: 13.5px; } .cmp-outcome input:focus, .cmp-outcome select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } @media (max-width: 760px) { .cmp-outcome .cmp-grid { grid-template-columns: 1fr 1fr; } } /* ===================================================================== FEEDBACK PAGE — Phase 1 UI polish ===================================================================== */ /* 1. Account summary bar */ .dm-acct-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 12px 0 14px; overflow: hidden; } .dm-acct-bar .cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; flex: 1; min-width: 140px; border-left: 1px solid var(--border); } .dm-acct-bar .cell:first-child { border-left: none; } .dm-acct-bar .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .dm-acct-bar .val { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .dm-acct-bar .val.warn { color: var(--warning); } .dm-acct-bar .val.danger { color: var(--danger); } .dm-status { align-self: flex-start; margin-top: 2px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; } .dm-status--ok { background: var(--panel-tint); color: var(--success); border: 1px solid rgba(95,199,154,.55); } .dm-status--warn { background: var(--panel-tint); color: var(--warning); border: 1px solid rgba(232,179,61,.55); } .dm-status--danger { background: var(--panel-tint); color: var(--danger); border: 1px solid rgba(240,131,121,.55); } /* 2. Sidebar — full-width New button + type-icon avatar */ .chat-list-head .row { display: flex; align-items: center; } .dm-newchat { width: 100%; justify-content: center; margin-top: 10px; } .thread-row .av i { font-size: 14px; } /* 3. Outcome cards — colour-coded + two-row */ .ev-outcome--ok { border-left-color: var(--success) !important; } .ev-outcome--warn { border-left-color: var(--warning) !important; } .ev-outcome--danger { border-left-color: var(--danger) !important; } .ev-outcome--muted { border-left-color: var(--border-strong) !important; } .ev-outcome .o-row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ev-outcome .o-code { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--text); } .ev-outcome .o-code--ok { background: rgba(95,199,154,.18); color: var(--success); } .ev-outcome .o-code--warn { background: rgba(251,191,36,.18); color: var(--warning); } .ev-outcome .o-code--danger { background: rgba(248,113,113,.18); color: var(--danger); } .ev-outcome .o-code--muted { background: rgba(255,255,255,.08); color: var(--text-muted); } :root[data-theme="light"] .ev-outcome .o-code--muted { background: rgba(0,0,0,.06); } .ev-outcome .o-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); } .ev-outcome .o-agent { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .ev-outcome .o-ava { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 10px; } .ev-outcome .o-time { margin-left: auto; font-size: 12px; color: var(--text-dim); } .ev-outcome .o-actions { display: inline-flex; gap: 4px; } .ev-outcome .o-actions button { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 11px; display: grid; place-items: center; opacity: 0; transition: opacity .12s; } .ev-outcome:hover .o-actions button { opacity: 1; } .ev-outcome .o-actions button:hover { color: var(--accent); border-color: var(--accent-line); } .ev-outcome .o-note { margin: 7px 0 4px; color: var(--text); line-height: 1.45; } .ev-outcome .o-row2 { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); } .ev-outcome .o-row2 b { color: var(--text); } .ev-outcome .o-row2 .o-label { color: var(--text-dim); } /* remove the old absolute reply/edit buttons (superseded by .o-actions) */ .ev-outcome .o-reply, .ev-outcome .o-edit { position: static; opacity: 0; } /* TODAY divider — prominent pill with side rules */ .conv-body .date-divider { display: flex; align-items: center; gap: 12px; margin: 16px 4px; } .conv-body .date-divider::before, .conv-body .date-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .conv-body .date-divider span { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); padding: 3px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } /* 4. Compose — pill tab bar, tools row, contextual fields */ .cmp-modes { display: flex; gap: 6px; margin: 10px 14px 0; } .cmp-modes button { flex: 1; justify-content: center; background: var(--bg-mid); border: 1px solid var(--border); color: var(--text-muted); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background-color .12s, color .12s; } .cmp-modes button.active { background: var(--accent); color: var(--bg-darkest); border-color: var(--accent); } :root[data-theme="light"] .cmp-modes button.active { color: #fff; } .cmp-tools { display: flex; gap: 6px; padding: 8px 14px 0; } .cmp-tool { background: var(--bg-mid); border: 1px solid var(--border-strong); color: var(--text-muted); width: 32px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 13px; } .cmp-tool:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .cmp-field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } /* 5. Empty state */ .dm-empty-feed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 48px 24px; color: var(--text-muted); height: 100%; } .dm-empty-feed > i { font-size: 40px; color: var(--accent); opacity: .7; } .dm-empty-feed h3 { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--text); } .dm-empty-feed p { margin: 0; max-width: 340px; font-size: 13.5px; } .dm-empty-feed .cta { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; } /* 6. Full-width filter bar */ .conv-filter-bar { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); } .conv-filter-bar button { flex: 1; justify-content: center; background: transparent; border: none; color: var(--text-muted); padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; } .conv-filter-bar button:hover { background: var(--surface-2); color: var(--text); } .conv-filter-bar button.active { background: var(--accent); color: var(--bg-darkest); } :root[data-theme="light"] .conv-filter-bar button.active { color: #fff; } /* 7. Participant avatar stack */ .dm-ava-stack { display: inline-flex; align-items: center; } .dm-ava-stack .ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--bg-darkest); font-weight: 700; font-size: 11px; border: 2px solid var(--surface); margin-left: -8px; } .dm-ava-stack .ava:first-child { margin-left: 0; } .dm-ava-stack .ava.more { background: var(--surface-2) !important; color: var(--text-muted); font-size: 11px; } /* 8. Sticky bottom action bar */ .dm-bottom-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-top: 14px; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -4px 16px rgba(0,0,0,0.18); } .dm-bottom-bar a:nth-child(2) { margin-left: auto; } .dm-bottom-bar a:last-child { margin-left: 0; } @media (max-width: 760px) { .dm-acct-bar .cell { min-width: 50%; } .cmp-modes { flex-direction: row; } } /* ===================================================================== FEEDBACK PAGE — Phase 1.5 redesign (overrides Phase-1 where later wins) ===================================================================== */ /* A. Page header */ .dm-fb-head { margin: 8px 0 8px; } .dm-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; } .dm-crumb a { color: var(--text-muted); } .dm-crumb a:hover { color: var(--accent); } .dm-crumb i { font-size: 9px; opacity: .6; } .dm-fb-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dm-fb-title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text); } .dm-fb-title .ref { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .dm-pagetabs { display: flex; align-items: center; gap: 6px; margin-top: 8px; border-bottom: 1px solid var(--border); } .dm-pagetabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .2s, border-color .2s; } .dm-pagetabs .tab:hover { color: var(--text); } .dm-pagetabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* B. Stat cards */ .dm-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; } .dm-stat { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .dm-stat-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 13px; } .dm-stat-ic.warn { background: rgba(245,158,11,.14); color: var(--warning); } .dm-stat-ic.danger { background: rgba(239,68,68,.14); color: var(--danger); } .dm-stat-bd { display: flex; flex-direction: column; min-width: 0; } .dm-stat-lbl { font-size: 10.5px; color: var(--text-muted); } .dm-stat-val { font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .dm-stat-val.warn { color: var(--warning); } .dm-stat-val.danger { color: var(--danger); } .dm-stat .dm-status { align-self: flex-start; margin-top: 3px; } @media (max-width: 900px){ .dm-stat-cards { grid-template-columns: repeat(2, 1fr); } } /* C. Sidebar — outlined new button, active accent, empty state */ .dm-newchat { width: 100%; justify-content: center; margin-top: 10px; background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent); font-weight: 600; } .dm-newchat:hover { background: var(--accent-soft); } .thread-row.active { background: var(--accent-soft) !important; border-left: 4px solid var(--accent); padding-left: 10px; } .dm-side-empty { padding: 22px 16px; text-align: center; color: var(--text-muted); font-size: 13px; } /* D. Filter tabs → underline */ .conv-filter-bar { display: flex; gap: 4px; padding: 6px 14px 0; border-bottom: 1px solid var(--border); background: var(--surface); } .conv-filter-bar button { flex: 0 0 auto; background: transparent !important; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 8px 12px; border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: color .2s, border-color .2s; } .conv-filter-bar button:hover { color: var(--text); } .conv-filter-bar button.active { color: var(--accent) !important; border-bottom-color: var(--accent); } /* conv-head: participants label */ .conv-people { display: flex; align-items: center; gap: 8px; } .conv-people-lbl { font-size: 12px; color: var(--text-muted); } /* E. Feed — gaps, muted outcome metadata pills, grouped bubbles, subtle divider */ .conv-body { gap: 12px; } .ev-outcome .o-row2 { gap: 6px; } .o-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; background: var(--bg-mid); color: var(--text-muted); border: 1px solid var(--border); } :root[data-theme="light"] .o-tag { background: var(--surface-2); } .msg.grouped { margin-top: -2px; } .msg.grouped .bubble { border-top-left-radius: 14px; border-top-right-radius: 14px; } .conv-body .date-divider { margin: 14px 0 6px; } .conv-body .date-divider::before, .conv-body .date-divider::after { display: none; } .conv-body .date-divider span { background: transparent; border: none; color: var(--text-dim); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: none; padding: 0; } /* F. Composer — compact mode tabs, chips, send pill */ .cmp-modes { display: inline-flex; gap: 6px; margin: 10px 14px 0; } .cmp-modes button { flex: 0 0 auto; background: var(--bg-mid); border: 1px solid var(--border); color: var(--text-muted); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; transition: background-color .2s, color .2s; } .cmp-modes button.active { background: var(--accent); color: var(--bg-darkest); border-color: var(--accent); } :root[data-theme="light"] .cmp-modes button.active { color: #fff; } .cmp-tools { display: flex; gap: 8px; padding: 8px 14px 0; } .cmp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-mid); border: 1px solid var(--border-strong); color: var(--text-muted); padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: 12.5px; transition: background-color .2s, color .2s, border-color .2s; } .cmp-chip:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .send-btn { width: auto !important; padding: 0 16px; gap: 8px; border-radius: 999px !important; font-weight: 600; } .send-btn .send-label { font-size: 13.5px; } /* G. Send confirmation toast */ .dm-sent-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--accent); color: var(--bg-darkest); font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 1200; } :root[data-theme="light"] .dm-sent-toast { color: #fff; } .dm-sent-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* H. Loading skeletons */ @keyframes dm-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .sk-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .sk-av { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; } .sk-line { height: 9px; border-radius: 5px; } .sk-line.w40 { width: 40%; } .sk-line.w70 { width: 70%; } .sk-line.w90 { width: 90%; } .sk-bubble { height: 44px; width: 60%; border-radius: 14px; margin: 8px 18px; } .sk-bubble.r { align-self: flex-end; } .sk-av, .sk-line, .sk-bubble { background: linear-gradient(90deg, var(--bg-mid) 25%, var(--surface-2) 37%, var(--bg-mid) 63%); background-size: 400px 100%; animation: dm-shimmer 1.2s linear infinite; } /* I. Entry animation */ @keyframes dm-enter-kf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .dm-enter { animation: dm-enter-kf .2s ease-out both; } /* styled native select in the outcome composer */ .cmp-field select { width: 100%; min-height: 36px; padding: 7px 30px 7px 10px; border-radius: 8px; background: var(--bg-mid); color: var(--text); border: 1px solid var(--border-strong); outline: none; font: inherit; font-size: 13.5px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .cmp-field select:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; } /* ===================================================================== HOME PAGE — static layout (only the table scrolls, header row stays fixed) ===================================================================== */ body.dm-themed:has(.dm-home-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.dm-themed:has(.dm-home-page) > .dm-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .dm-home-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dm-home-page .dm-grid-toolbar, .dm-home-page .dm-grid-footer { flex: 0 0 auto; } /* No top/bottom padding here: .dm-table-container's base padding (6px) sits BELOW the sticky header's own edge (sticky offsets are measured from the padding edge, not the border edge), leaving an uncovered band that scrolled rows can still slide into and show through above the sticky header. */ .dm-home-page .dm-table-container { flex: 1 1 auto; min-height: 0; padding: 0; } /* Totals footer bar: a plain block (not part of the table), pinned by the static shell above at the true bottom of the page — avoids re-creating the sticky/border-spacing edge case the header has. Each .dmf-cell is positioned in JS to match its column's actual th (left/width), so it has no horizontal padding/border of its own here — that would shift its zero point away from the table's, which starts flush at the same left edge. */ .dm-grid-footer { margin-top: 10px; padding: 6px 0; border-radius: 10px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel-tint); } .dm-grid-footer .dmf-row { position: relative; height: 30px; } .dm-grid-footer .dmf-row.dmf-selected { border-top: 1px dashed var(--border); } .dm-grid-footer .dmf-cell { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 14px; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .dm-grid-footer .dmf-cell.dmf-label { font-weight: 600; color: var(--text-muted); font-size: 12px; } .dm-grid-footer .dmf-cell.dmf-label b { color: var(--accent); } /* ===================================================================== FEEDBACK PAGE — static layout (only the panes scroll) + banner-embedded stats ===================================================================== */ /* Lock page scroll ONLY on the feedback screen (scoped via :has). The whole viewport is fixed; only .chat-list-body and .conv-body scroll internally. */ body.dm-themed:has(.dm-fb-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.dm-themed:has(.dm-fb-page) > .dm-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-top: 6px; } .dm-fb-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dm-fb-page .chat-shell { flex: 1 1 auto; height: auto; min-height: 0; margin-bottom: 0; } /* Header banner now contains the stat cells */ .dm-fb-head { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 8px 14px; margin: 6px 0 12px; } .dm-fb-head .dm-crumb { display: none; } /* slim density: hide breadcrumb */ .dm-fb-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 2px 0; } .dm-fb-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; } .dm-fb-id h1 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); } .dm-fb-id .ref { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .dm-fb-head .dm-pagetabs { margin-top: 6px; } /* Stat cells embedded in the banner: compact, divider-separated, no card chrome */ .dm-fb-head .dm-stat-cards { display: flex; gap: 0; margin: 0; flex-wrap: wrap; } .dm-fb-head .dm-stat { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 2px 16px; border-left: 1px solid var(--border); gap: 10px; } .dm-fb-head .dm-stat:first-child { border-left: none; padding-left: 0; } .dm-fb-head .dm-stat-ic { width: 28px; height: 28px; font-size: 12px; } .dm-fb-head .dm-stat-lbl { font-size: 10.5px; } .dm-fb-head .dm-stat-val { font-size: 15px; } @media (max-width: 900px){ .dm-fb-head .dm-stat { padding: 2px 12px; } .dm-fb-bar { gap: 10px; } } /* ===================================================================== EMAIL TEMPLATES PAGE — static layout (only list/fields/preview panes scroll) ===================================================================== */ body.dm-themed:has(.dm-et-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.dm-themed:has(.dm-et-page) > .dm-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .dm-et-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* CRITICAL: convPane must be a flex column filling .chat-conv so the feed scrolls internally and the composer stays pinned (never clipped). */ .chat-conv > #convPane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #convPane .conv-head, #convPane .conv-filter-bar, #convPane .composer-wrap { flex: 0 0 auto; } #convPane .conv-body { flex: 1 1 auto; min-height: 0; } /* ===================================================================== INVOICE RUN PREVIEW PAGE — static layout (only the customer list and preview pane scroll internally; the page itself never does) ===================================================================== */ body.dm-themed:has(.dm-ir-page) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } body.dm-themed:has(.dm-ir-page) > .dm-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .dm-ir-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dm-ir-page .ir-toolbar { flex: 0 0 auto; } .dm-ir-page .ir-grid { flex: 1 1 auto; min-height: 0; } /* Wrap long unbroken message text so it never runs past the bubble/chat width */ .msg .bubble { min-width: 0; } .msg .text, .ev-outcome .o-note, .msg .bubble .q { overflow-wrap: anywhere; word-break: break-word; } /* Send button: icon only (label hidden; aria-label retained for screen readers) */ .send-btn .send-label { display: none; } .send-btn { width: 40px !important; padding: 0 !important; gap: 0 !important; border-radius: 999px !important; justify-content: center; } /* ===================================================================== Dark overrides for the legacy site.css light primitives (.dm-chip / .dm-badge). These primitives hardcode white/light values; scope dark equivalents to the themed shell so ported views stop rendering white. Only Login uses the non-themed _Layout, so this can't regress it. ===================================================================== */ body.dm-themed .dm-chip { color: var(--text); background: var(--bg-mid); box-shadow: inset 0 0 0 1px var(--border); } body.dm-themed .dm-chip:hover { background: var(--surface-2); } body.dm-themed .dm-chip--selected { color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); } body.dm-themed .dm-badge--sent, body.dm-themed .dm-badge--active, body.dm-themed .dm-badge--posted { background: var(--panel-tint); color: var(--success); } body.dm-themed .dm-badge--pending { background: var(--panel-tint); color: var(--warning); } body.dm-themed .dm-badge--failed { background: var(--panel-tint); color: var(--danger); } body.dm-themed .dm-badge--logged { background: rgba(255,255,255,.08); color: var(--text-muted); } body.dm-themed .dm-badge--inactive { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); } /* Collapsible side pane — the pane collapses to a labelled rail that stays visible, so hiding it is never a dead end. Shared by the allocations debtors list and the feedback conversations list; each screen supplies its own grid-column rules, this supplies the rail and the close button. ===================================================================== */ .dm-rail { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 13px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-muted); cursor: pointer; font: inherit; min-height: 0; overflow: hidden; } .dm-rail:hover { border-color: var(--accent-line); color: var(--text); } .dm-rail .dm-rail-t { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } .dm-pane-x { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: 7px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; flex: 0 0 auto; } .dm-pane-x:hover { border-color: var(--accent-line); color: var(--text); } /* Too narrow for a vertical rail — lay it out as a horizontal strip instead */ @media (max-width: 620px) { .dm-rail { flex-direction: row; justify-content: center; padding: 9px; } .dm-rail .dm-rail-t { writing-mode: horizontal-tb; } } /* ===================================================================== CUSTOMISE DRAWER — shared right-hand slide-over used by the home debtors grid (dm-debtors-grid.js) and the allocations screen. Lived in dm-debtors-grid.js's injected styles until allocations needed the same chrome; moved here so there is one definition, not two. ===================================================================== */ .dmg-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: .25s; z-index: 1200; } .dmg-scrim.show { opacity: 1; pointer-events: auto; } .dmg-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 344px; background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: -20px 0 50px -20px rgba(0,0,0,.6); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 1300; display: flex; flex-direction: column; } .dmg-drawer.show { transform: none; } .dmg-drawer header { padding: 17px 19px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .dmg-drawer header h3 { margin: 0; font-size: 15px; color: var(--text); } .dmg-drawer header p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); } .dmg-x { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; } .dmg-body { flex: 1; overflow: auto; padding: 6px 12px 16px; } .dmg-grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--accent); font-weight: 700; margin: 16px 8px 6px; } .dmg-col-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; cursor: grab; color: var(--text); } .dmg-col-row:hover { background: var(--bg-mid); border-color: var(--border); } .dmg-col-row.drag { opacity: .4; } .dmg-col-row.over { box-shadow: inset 0 2px 0 var(--accent); } .dmg-handle { color: var(--text-dim); font-size: 14px; } .dmg-col-name { flex: 1; font-size: 13.5px; } .dmg-pinbtn { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 7px; width: 28px; height: 26px; cursor: pointer; } .dmg-pinbtn.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } .dmg-tg { appearance: none; width: 34px; height: 19px; border-radius: 999px; background: var(--border-strong); position: relative; cursor: pointer; transition: .18s; flex-shrink: 0; } .dmg-tg:checked { background: var(--accent); } .dmg-tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .18s; } .dmg-tg:checked::after { left: 17px; } .dmg-drawer footer { padding: 13px 19px; border-top: 1px solid var(--border); display: flex; gap: 10px; } .dmg-drawer footer .dm-btn { flex: 1; justify-content: center; } .dmg-hint { font-size: 11px; color: var(--text-muted); text-align: center; padding: 9px; } /* Segmented control + toolbar button, shared by the home toolbar and the drawers */ .dm-grid-seg { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .dm-grid-seg button { background: transparent; border: none; color: var(--text-muted); padding: 7px 12px; cursor: pointer; font: inherit; font-size: 12.5px; } .dm-grid-seg button.on { background: var(--accent-soft); color: var(--text); } .dm-grid-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); height: 36px; padding: 0 13px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; } .dm-grid-btn:hover { border-color: var(--accent-line); }