/* ========================================================================= Turney Insurance Advisors — Agent Hub workspace (dark rail + inline views) Loaded after css/styles.css, which owns the tokens and base components. Most rules are scoped to one view (#-view) or overlay (#-overlay). ========================================================================= */ /* ======================================================================= "TODAY" HOME — dark rail workspace (replaced the original tile hub). The login view + the shared modals (welcome flow, change password) keep their light styling from css/styles.css. Everything dark below is scoped to #home-view / html.dark-home so the two never collide: - CSS variables live on #home-view (NOT :root) so they don't override styles.css tokens like --text in the login card. - Buttons here are .hbtn (styles.css owns .btn for login/modals). - The page goes dark only once today.js adds .dark-home to after sign-in. Data sources (wired in js/today.js): - Your -> loadProductionSnapshot() (master sheet, own rows) - Needs your attention -> Supabase (progress + quiz_attempts vs CURRICULUM, statements) ======================================================================= */ /* Tokens (dark + the html[data-theme="light"] palette) live in css/styles.css :root so the overlays outside #home-view resolve them too. */ /* The whole page (login included) is dark, so the base colour is unconditional; .dark-home still gates the home-view body gradient. */ html { background: #111113; } html.dark-home body { background: #111113; overflow-x: hidden; } /* LIGHT: flip the page background only once signed in (.dark-home is added by today.js after auth), so the dark login screen is left untouched. */ html[data-theme="light"].dark-home { background: #f1f5f9; } html[data-theme="light"].dark-home body { background: #f1f5f9; } /* LIGHT: hardcoded dark literals the tokens don't reach — elevated popover/menu surfaces (rgba(24,25,28,…)) → white, brand-blue gradients → light-readable equivalents. Inner text/borders use var(--*) inherited from #home-view, so they flip automatically. The two transient dimmed-backdrop modals (#confirm-overlay / #celebration-overlay) stay dark by design. */ html[data-theme="light"] #home-view .rail-profile .avatar { background: linear-gradient(135deg, #2563eb, #1e3a5f); } html[data-theme="light"] #home-view .day-head h1 .name { background: linear-gradient(92deg, #2563eb 10%, #1e3a5f 90%); } html[data-theme="light"] #home-view .hbtn-primary { color: #fff; } /* LIGHT: the head control strip is transparent inside, so its segments take dark ink (the filled .hbtn-primary rule above still covers the service form / pipeline buttons). */ html[data-theme="light"] #home-view .head-actions { background: rgba(11,18,32,.05); border-color: rgba(11,18,32,.12); box-shadow: none; } html[data-theme="light"] #home-view .head-actions .hbtn-primary { color: var(--text); } html[data-theme="light"] #home-view .head-actions .hbtn-primary:hover::after, html[data-theme="light"] #home-view .head-actions .hbtn-ghost:hover::after, html[data-theme="light"] #home-view .head-actions .notif-bell:hover::after { background: rgba(11,18,32,.06); } html[data-theme="light"] #home-view .head-actions > * + *::before { background: rgba(11,18,32,.12); } html[data-theme="light"] #home-view .notif-badge { border-color: #f1f5f9; } html[data-theme="light"] #home-view .onb-mini .om-fill { background: linear-gradient(90deg, #1e3a5f, #2563eb); } html[data-theme="light"] .rail-foot .profile-menu, html[data-theme="light"] .sv-type-panel, html[data-theme="light"] #mgr-overlay .modal, html[data-theme="light"] .palette, html[data-theme="light"] #commissions-view .next-tier-pop, html[data-theme="light"] #preview-overlay .arsenal-preview-modal { background: rgba(255,255,255,.98); box-shadow: 0 24px 50px -16px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="light"] #commissions-view .next-tier-pop::before { border-bottom-color: rgba(255,255,255,.98); } html[data-theme="light"] .rail-foot .profile-item.danger { color: #dc2626; } html[data-theme="light"] .rail-foot .profile-item.danger:hover { background: rgba(220,38,38,.1); color: #dc2626; } @media (prefers-reduced-motion: no-preference) { html.dark-home body { animation: pageIn .24s cubic-bezier(.22,.61,.36,1) backwards; } @keyframes pageIn { from { opacity: 0; } } } #home-view { color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } #home-view *, #home-view *::before, #home-view *::after { box-sizing: border-box; } /* No `#home-view a` color rule on purpose: the ID's specificity would beat every component class (.hbtn-primary, .rail-item, ...) and turn their text accent-blue. Each link-styled component sets its own color. */ #home-view h1, #home-view h2, #home-view h3 { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } /* No `#home-view button` font rule either (same ID-specificity trap as the link rule above) — each button component declares `font: inherit` first, then its own size/weight. */ /* The drifting background glows are retired — flat canvas, brand color lives in the accents instead. Markup stays for an easy re-enable (swap display back to block). */ .aurora { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .2; } .aurora i:nth-child(1) { width: 720px; height: 520px; top: -220px; left: 8%; background: radial-gradient(closest-side, #295584, transparent); animation: drift1 64s var(--ease) infinite alternate; } .aurora i:nth-child(2) { width: 640px; height: 480px; top: -180px; right: -160px; background: radial-gradient(closest-side, #1d3e60, transparent); animation: drift2 76s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate(120px, 60px) scale(1.12); } } @keyframes drift2 { to { transform: translate(-100px, 90px) scale(.92); } } #home-view kbd { font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 6px; border-radius: 6px; color: var(--muted); background: rgba(148,173,214,.1); border: 1px solid rgba(148,173,214,.18); border-bottom-width: 2px; } /* ======================= APP SHELL: RAIL + CANVAS ======================= */ .app { display: flex; min-height: 100vh; position: relative; z-index: 1; } /* ---- navigation rail ---- */ .rail { /* left:0 matters: styles.css's onboarding progress-rail rule sets a left offset on .rail at wide viewports, which shoves a sticky box sideways (body is an overflow-x:hidden scroll container). */ position: sticky; top: 0; left: 0; align-self: flex-start; width: var(--rail-w); height: 100vh; flex: 0 0 auto; display: flex; flex-direction: column; padding: 18px 14px 14px; background: var(--rail-bg); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-right: 1px solid var(--line); } .rail-brand { padding: 2px 8px 16px; } .rail-brand img { height: 38px; width: auto; display: block; } /* "Agent Hub" tag under the lockup — same treatment as the login card's: tracked caps flanked by hairlines, scaled down for the rail. */ .rail-tag { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .rail-tag::before, .rail-tag::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright) 35%, var(--line-bright) 65%, transparent); } .rail-tag span { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 10px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .18em; white-space: nowrap; } .rail-search { font: inherit; display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 12px; border-radius: 11px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(148,173,214,.16); color: var(--muted); font-size: 13px; font-weight: 500; width: 100%; transition: background .15s ease, border-color .15s ease, color .15s ease; } .rail-search:hover { background: rgba(255,255,255,.09); border-color: var(--line-bright); color: var(--text); } .rail-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rail-search .hint { margin-left: auto; display: inline-flex; gap: 3px; } .rail-nav { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .rail-group { margin: 14px 8px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .rail-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; margin: 1px 0; border-radius: 10px; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .13s ease, color .13s ease, transform .13s var(--ease); } .rail-item svg { flex: 0 0 auto; width: 17px; height: 17px; transition: transform .15s var(--ease); } .rail-item:hover { background: rgba(148,173,214,.08); color: var(--text); } .rail-item:hover svg { transform: scale(1.12); } .rail-item:active { transform: scale(.985); } .rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .rail-item.is-active { background: rgba(94,154,222,.12); color: var(--text); } .rail-item.is-active::before { content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .rail-item.is-active svg { color: var(--accent); } /* tiny onboarding progress ring — filled by today.js from Supabase */ .rail-ring { margin-left: auto; flex: 0 0 auto; } .rail-ring .t { stroke: rgba(148,173,214,.18); } .rail-ring .f { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); } /* Onboarding complete: ring turns green and a check appears inside it. */ .rail-ring .c { stroke: var(--good); stroke-linecap: round; stroke-linejoin: round; display: none; } .rail-item.is-complete .rail-ring .f { stroke: var(--good); } .rail-item.is-complete .rail-ring .c { display: block; } /* ---- rail footer: profile (wired to shell.js's menu machinery) ---- */ .rail-foot { border-top: 1px solid var(--line); padding-top: 10px; position: relative; } .rail-profile { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 11px; border: none; cursor: pointer; background: transparent; text-align: left; transition: background .13s ease; } .rail-profile:hover { background: rgba(148,173,214,.08); } .rail-profile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .rail-profile .avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3f77b8, #295584); color: #fff; font-size: 12.5px; font-weight: 700; border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .rail-profile .who { min-width: 0; } .rail-profile .who b { display: block; font-size: 13px; color: var(--text); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-profile .who span { display: block; font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* dark dropdown that opens UPWARD from the rail footer; overrides the light topbar menu styling in styles.css for this page only */ .rail-foot .profile-menu { position: absolute; top: auto; bottom: calc(100% + 8px); left: 8px; right: 8px; width: auto; min-width: 0; z-index: 30; padding: 7px; border-radius: 14px; background: rgba(24, 25, 28, .97); border: 1px solid var(--line-bright); box-shadow: 0 24px 50px -16px rgba(2,6,16,.9), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: bottom center; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; } .rail-foot .profile-menu.open { opacity: 1; visibility: visible; transform: none; } .rail-foot .profile-item { display: block; width: 100%; margin: 0; padding: 8px 11px; border: none; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; } .rail-foot .profile-item:hover { background: rgba(148,173,214,.1); color: var(--text); } .rail-foot .profile-item.danger { color: #f87171; } .rail-foot .profile-item.danger:hover { background: rgba(248,113,113,.1); color: #f87171; } /* theme toggle row in the rail footer (above the profile button) */ .rail-theme { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-bottom: 4px; border-radius: 11px; border: none; cursor: pointer; background: transparent; text-align: left; color: var(--muted); transition: background .13s ease, color .13s ease; } .rail-theme:hover { background: rgba(148,173,214,.08); color: var(--text); } html[data-theme="light"] .rail-theme:hover { background: rgba(30,58,95,.06); } .rail-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .rail-theme svg { width: 17px; height: 17px; flex: 0 0 auto; } .rail-theme-label { font-size: 13px; font-weight: 500; } /* moon in dark (default), sun in light */ .rail-theme .ic-sun { display: none; } html[data-theme="light"] .rail-theme .ic-sun { display: block; } html[data-theme="light"] .rail-theme .ic-moon { display: none; } /* ---- main canvas ---- */ .canvas { flex: 1 1 auto; min-width: 0; padding: 30px 38px 70px; } .day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 4px 0 24px; } .day-head .hgroup p.date { margin: 0 0 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .day-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--text); } .day-head h1 .name { background: linear-gradient(92deg, #7fb3e8 10%, #a9cdf2 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the ", Name" tail fades in once shell.js resolves the profile name */ #home-view .greet-rest { opacity: 0; transition: opacity .35s var(--ease); } #home-view #greet-line.has-name .greet-rest { opacity: 1; } .day-head .sub { margin: 7px 0 0; font-size: 14.5px; color: var(--muted); } .day-head .sub b { color: var(--text); font-weight: 600; } /* One frosted "control strip": the container is the only box — a slim glass capsule with a single hairline border. The bell + both actions are borderless segments inside it, split by faint dividers. NOTE: .hbtn is reused elsewhere (service form, pipeline toolbar, modal styles) — every rule below is scoped under .head-actions on purpose. */ .head-actions { display: inline-flex; align-items: stretch; gap: 0; margin-top: 6px; padding: 3px; border-radius: 999px; border: 1px solid rgba(148,173,214,.16); background: rgba(255,255,255,.045); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); /* the blur creates a stacking context, so the strip needs an explicit z-index or the cards below (own stacking contexts, later in DOM) paint over the notifications dropdown. Above card popovers (25), below the mobile rail drawer (40). */ position: relative; z-index: 35; } .hbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; cursor: pointer; text-decoration: none; white-space: nowrap; font-size: 13.5px; font-weight: 700; border: 1px solid transparent; transition: transform .13s var(--ease), box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease; } .hbtn svg { width: 16px; height: 16px; } .hbtn:active { transform: scale(.97); } .hbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* legacy filled looks, kept for the service form / pipeline buttons */ .hbtn-primary { color: #eaf2ff; background: rgba(94,154,222,.18); border-color: rgba(94,154,222,.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .hbtn-primary:hover { background: rgba(94,154,222,.3); border-color: rgba(94,154,222,.6); } .hbtn-ghost { color: var(--muted); background: rgba(255,255,255,.05); border-color: rgba(148,173,214,.18); } .hbtn-ghost:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-bright); } /* strip segments: no fills, no borders — the capsule is the chrome */ .head-actions .hbtn { background: transparent; border: 0; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; position: relative; z-index: 0; } /* hover highlight = a slightly-inset pill floating inside the segment (iOS segmented-control style) rather than a fill running edge-to-edge into the capsule border and dividers. ::before is taken by the divider, so the highlight lives on ::after, painted under the label via z-index. */ .head-actions .hbtn::after, .head-actions .notif-bell::after { content: ""; position: absolute; inset: 2px 3px; border-radius: 999px; background: transparent; transition: background .15s ease; z-index: -1; } .head-actions .hbtn-primary { color: var(--text); } .head-actions .hbtn-primary svg { color: var(--accent); } .head-actions .hbtn-primary:hover { background: transparent; border-color: transparent; } .head-actions .hbtn-primary:hover::after { background: rgba(94,154,222,.10); } .head-actions .hbtn-ghost { color: var(--muted); } .head-actions .hbtn-ghost:hover { color: var(--text); background: transparent; border-color: transparent; } .head-actions .hbtn-ghost:hover::after { background: rgba(255,255,255,.06); } /* faint inset hairlines between segments (bell │ book │ service) */ .head-actions > * + * { position: relative; } .head-actions > * + *::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: rgba(148,173,214,.16); } /* ===================== NOTIFICATIONS (bell + panel + toasts) ===================== */ .notif-wrap { position: relative; flex: 0 0 auto; display: flex; } /* borderless segment inside the head-actions strip */ .notif-bell { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; border-radius: 999px; cursor: pointer; color: var(--muted); background: transparent; border: 0; transition: color .13s ease; } .notif-bell:hover { color: var(--text); } .notif-bell:hover::after { background: rgba(255,255,255,.06); } .notif-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .notif-bell svg { width: 18px; height: 18px; } /* unread = a real count pill on the bell's shoulder — the number is the whole point, so it's visible (was an 8px dot with the count hidden). Scoped under .notif-bell so it outranks the shared .att-count chip styles it also carries. */ .notif-bell .notif-badge { position: absolute; top: 2px; right: 0; margin: 0; vertical-align: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; font-weight: 800; line-height: 1; border-radius: 999px; color: #fff; background: #e05252; border: 2px solid #16171b; } /* short wiggle when a new notification lands (js adds .nf-ring) */ .notif-bell.nf-ring svg { animation: nfRing .7s var(--ease); transform-origin: 50% 4px; } @keyframes nfRing { 0% { transform: rotate(0); } 15% { transform: rotate(14deg); } 35% { transform: rotate(-11deg); } 55% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } } .notif-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 340px; max-width: calc(100vw - 24px); padding: 7px; border-radius: 14px; background: rgba(24, 25, 28, .98); border: 1px solid var(--line-bright); box-shadow: 0 24px 50px -16px rgba(2,6,16,.9), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.98); transform-origin: top right; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; } .notif-panel.open { opacity: 1; visibility: visible; transform: none; } .notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; font-size: 12.5px; font-weight: 800; color: var(--text); } .notif-head-title { display: inline-flex; align-items: center; gap: 7px; } .notif-head-count { display: inline-flex; align-items: center; height: 17px; padding: 0 7px; font-size: 10.5px; font-weight: 800; border-radius: 999px; color: #fff; background: #e05252; } .notif-head-count[hidden] { display: none; } .notif-head-actions { display: inline-flex; align-items: center; gap: 2px; } .notif-markall, .notif-clearall { border: none; background: transparent; cursor: pointer; padding: 2px 5px; border-radius: 6px; font-size: 11.5px; font-weight: 700; color: var(--accent); } .notif-markall:hover { background: rgba(94,154,222,.14); } .notif-clearall { color: var(--muted); } .notif-clearall:hover { color: var(--bad); background: rgba(248,113,113,.12); } .notif-clearall.is-armed { color: var(--bad); background: rgba(248,113,113,.12); } .notif-list { max-height: 380px; overflow-y: auto; overflow-x: hidden; } /* "New" / "Earlier" separators */ .notif-sec { margin: 4px 0 2px; padding: 6px 10px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .notif-empty { margin: 0; padding: 22px 10px 26px; text-align: center; color: var(--muted); } .notif-empty svg { width: 22px; height: 22px; color: var(--faint); } .notif-empty b { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--text); } .notif-empty span { display: block; margin-top: 2px; font-size: 12px; } .notif-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px; cursor: pointer; background: transparent; text-align: left; transition: background .13s ease; } .notif-item:hover { background: rgba(148,173,214,.08); } .notif-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .notif-item .att-icon { flex: 0 0 auto; } .notif-item .att-body { flex: 1 1 auto; min-width: 0; } .notif-item .att-body b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text); } .notif-item .att-body span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-unread { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; background: transparent; } /* unread = accent left edge + brighter wash + the dot: unmissable */ .notif-item.is-unread { background: rgba(94,154,222,.09); box-shadow: inset 3px 0 0 var(--accent); } .notif-item.is-unread:hover { background: rgba(94,154,222,.14); } .notif-item.is-unread .att-body b { font-weight: 800; } .notif-item.is-unread .notif-unread { background: var(--accent); } /* per-item dismiss — appears on hover/focus (always shown on touch) */ .notif-x { flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 7px; opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease; } .notif-item:hover .notif-x, .notif-item:focus-within .notif-x { opacity: 1; } .notif-x:hover { color: var(--bad); background: rgba(248,113,113,.12); } .notif-x:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; } @media (hover: none) { .notif-x { opacity: 1; } } .notif-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 24px); pointer-events: none; } .notif-toast { pointer-events: auto; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 13px; cursor: pointer; background: rgba(24, 25, 28, .98); border: 1px solid var(--line-bright); box-shadow: 0 18px 40px -14px rgba(2,6,16,.92), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; transform: translateX(18px); transition: opacity .26s var(--ease), transform .26s var(--ease); } .notif-toast.in { opacity: 1; transform: none; } .notif-toast .att-icon { flex: 0 0 auto; } .notif-toast-body { flex: 1 1 auto; min-width: 0; } .notif-toast-body b { display: block; font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.3; } .notif-toast-body span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif-toast-x { flex: 0 0 auto; border: none; background: transparent; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; border-radius: 6px; } .notif-toast-x:hover { color: var(--text); } /* per-type colored edge so a toast reads at a glance (js sets nf-edge-*) */ .notif-toast { border-left: 3px solid var(--line-bright); } .notif-toast.nf-edge-ok { border-left-color: var(--good); } .notif-toast.nf-edge-err { border-left-color: var(--bad); } .notif-toast.nf-edge-service { border-left-color: #9aa5fb; } .notif-toast.nf-edge-training { border-left-color: #b69dfc; } .notif-toast.nf-edge-commissions { border-left-color: #5e9ade; } .notif-toast.nf-edge-arsenal { border-left-color: #fbcb4d; } .notif-toast.nf-edge-reporting { border-left-color: #a8b6cc; } /* unread count echoed on the rail's Today item — visible from every view */ .rail-item .notif-rail-pill { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; font-weight: 800; line-height: 1; border-radius: 999px; color: #fff; background: #e05252; } .rail-item .notif-rail-pill[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .notif-panel, .notif-toast { transition: none; } .notif-bell.nf-ring svg { animation: none; } } @media (max-width: 560px) { .notif-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; } .notif-toasts { left: 12px; right: 12px; width: auto; } } /* ======================= CARDS ======================= */ .hcard { position: relative; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .16s var(--ease), background .16s ease, border-color .16s ease, box-shadow .16s ease; } .hcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 179, 232, .55), transparent 70%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .2s ease; } .hcard:hover::before { opacity: 1; } /* ======================= COLUMNS ======================= */ .cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; } .panel-head h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); } /* ======================= PRODUCTION PANEL ======================= */ .prod { padding: 20px 22px; } .prod-top { display: flex; align-items: center; gap: 20px; } .ring-track { stroke: rgba(148,173,214,.14); } .ring-fill { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); filter: drop-shadow(0 0 5px rgba(94,154,222,.45)); } .ring-pct { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 17px; fill: var(--text); font-variant-numeric: tabular-nums; } .prod-top .m-body { flex: 1 1 auto; min-width: 0; } .m-eyebrow { margin: 0 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .m-big { font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } .m-big small { font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .m-meta { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; color: var(--good); } .m-meta.behind { color: var(--warn); } .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .pstat b { display: block; font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); } .pstat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px; } .prod-note { margin: 2px 0 6px; font-size: 13px; color: var(--muted); } .panel-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; transition: gap .15s var(--ease); } .panel-link:hover { gap: 8px; } .panel-link svg { width: 13px; height: 13px; } /* ======================= SIDE: ATTENTION ======================= */ .col-side { display: flex; flex-direction: column; gap: 18px; } .panel { padding: 18px 20px; } .att-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; margin: 0 -10px; border: none; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; text-decoration: none; color: inherit; transition: background .13s ease, transform .13s var(--ease); } .att-item:hover { background: rgba(148,173,214,.08); transform: translateX(3px); } .att-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .att-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .att-icon svg { width: 16px; height: 16px; } .att-icon.blue { background: var(--accent-soft); color: var(--accent); } .att-icon.green { background: var(--good-soft); color: var(--good); } .att-icon.amber { background: var(--warn-soft); color: var(--warn); } .att-body { flex: 1 1 auto; min-width: 0; } .att-body b { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text); } .att-body span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } .att-go { color: var(--faint); flex: 0 0 auto; transition: color .14s ease, transform .14s ease; } .att-item:hover .att-go { color: var(--accent); transform: translateX(2px); } .att-count { font-size: 11px; font-weight: 800; min-width: 19px; height: 19px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; background: var(--warn-soft); color: var(--warn); margin-left: 7px; vertical-align: 1px; } .att-empty { margin: 2px 0 4px; font-size: 13px; color: var(--muted); } /* loading skeletons for the two Today data panels (js/today.js). The shared .skel kit (css/styles.css) provides the pulsing bars; these rules add the ghost-row layout and pulse the production ring. */ #prod-card.is-loading .ring-track { animation: skelPulse 1.3s ease-in-out infinite; } #prod-card.is-loading .ring-pct { opacity: .35; } .att-ghost { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .att-ghost .att-ico-skel { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--skel-bar); animation: skelPulse 1.3s ease-in-out infinite; } .att-ghost .att-body { flex: 1 1 auto; min-width: 0; } .att-ghost:nth-child(2) .skel, .att-ghost:nth-child(2) .att-ico-skel { animation-delay: .12s; } @media (prefers-reduced-motion: reduce) { #prod-card.is-loading .ring-track, .att-ghost .att-ico-skel { animation: none; } .att-ghost .att-ico-skel { opacity: .55; } } /* onboarding mini-bar at the foot of the attention panel */ .onb-mini { margin: 12px -10px 0; padding: 12px 10px 4px; border-top: 1px solid var(--line); } .onb-mini[hidden] { display: none; } .onb-mini .om-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; } .onb-mini .om-row b { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .onb-mini .om-track { height: 6px; border-radius: 999px; background: rgba(148,173,214,.12); overflow: hidden; } .onb-mini .om-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2e5f96, #7fb3e8); transition: width 1s var(--ease); } /* ======================= BOOK APPOINTMENT (inline #book view) ======================= */ .bk-head { margin: 4px 0 22px; } .bk-eyebrow { margin: 0 0 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .bk-title { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--text); } .bk-sub { margin: 7px 0 0; font-size: 14.5px; color: var(--muted); } /* Pill switcher shared by #book (rendered from BK_CALENDARS by today.js), #service and #analytics (static markup): one wrapping row of segmented pills in a capsule, plus a one-line .bk-caption describing the active tab (fed from each button's data-desc). */ .bk-switch { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); } .bk-switch-btn { font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-radius: calc(var(--r-md) - 4px); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .13s var(--ease); } .bk-switch-btn svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--faint); transition: color .15s ease; } .bk-switch-btn:hover { color: var(--text); background: var(--surface-2); border-color: var(--line); } .bk-switch-btn:hover svg { color: var(--text); } .bk-switch-btn:active { transform: scale(.98); } .bk-switch-btn.is-active { color: var(--text); background: var(--accent-soft); border-color: rgba(94, 154, 222, .45); box-shadow: 0 0 0 1px rgba(94, 154, 222, .18); } .bk-switch-btn.is-active svg { color: var(--accent); } .bk-switch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* badges inside a pill (service: open-ticket count + activity dot) */ .bk-switch-btn .att-count { margin-left: 0; vertical-align: 0; } .bk-switch-btn .sv-alert-dot { margin-left: 0; } .bk-caption { margin: 10px 0 18px; font-size: 13px; line-height: 1.45; color: var(--muted); min-height: 1.45em; } /* White "sheet" so the (cross-origin, unstyleable) GHL widget reads as a deliberate light card on the dark canvas. --bk-crop clips the widget's blank top band — same trick the old calendar modal used. */ .bk-sheet { --bk-crop: 34px; background: #fff; border-radius: var(--r-lg); padding: 10px; border: 1px solid var(--line); box-shadow: var(--card-shadow); } .bk-sheet.is-empty { background: var(--surface); } .bk-frame-wrap { overflow: hidden; border-radius: 12px; min-height: 60px; } .bk-frame { width: 100%; height: calc(74vh + var(--bk-crop)); min-height: 520px; margin-top: calc(-1 * var(--bk-crop)); border: none; display: block; background: #fff; } .bk-empty { margin: 0; padding: 26px; text-align: center; font-size: 14px; color: var(--muted); line-height: 1.55; } .bk-empty code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: rgba(148, 173, 214, .1); color: var(--accent); } /* ======================= SERVICE REQUESTS (inline #service view) ======================= */ /* Same skeleton as #book (bk-head + bk-switch), but the content is native — a dark form card + the agent's own ticket list (js/tickets.js). */ .sv-card { padding: 22px 24px; overflow: visible; } /* visible so the type dropdown can escape the card */ .sv-card::before { display: none; } /* no cursor-spotlight glow here — keep the form utilitarian */ .sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .sv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sv-field.full { grid-column: 1 / -1; } .sv-field label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .sv-field label b { color: var(--accent); } .sv-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--faint); } .sv-input { font: inherit; font-size: 13.5px; color: var(--text); width: 100%; background: rgba(148,173,214,.07); border: 1px solid rgba(148,173,214,.18); border-radius: 11px; padding: 10px 12px; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .sv-input::placeholder { color: var(--faint); } .sv-input:hover { border-color: rgba(148,173,214,.32); } .sv-input:focus { outline: none; border-color: rgba(94,154,222,.6); background: rgba(148,173,214,.1); } .sv-input.is-invalid { border-color: rgba(248,113,113,.65); } .sv-textarea { min-height: 110px; resize: vertical; } /* request-type multi-select */ .sv-type-wrap { position: relative; } .sv-type-btn { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; } .sv-type-value { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-type-value.is-placeholder { color: var(--faint); } .sv-type-chev { flex: 0 0 auto; color: var(--faint); } .sv-type-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25; max-height: 280px; overflow-y: auto; padding: 6px; background: rgba(24, 25, 28, .98); border: 1px solid var(--line-bright); border-radius: 13px; box-shadow: 0 24px 50px -16px rgba(2,6,16,.9), inset 0 1px 0 rgba(255,255,255,.06); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; } .sv-type-panel.open { opacity: 1; visibility: visible; transform: none; } .sv-type-opt { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 9px; cursor: pointer; background: transparent; text-align: left; color: var(--muted); font-size: 13.5px; font-weight: 500; } .sv-type-opt:hover { background: rgba(148,173,214,.1); color: var(--text); } .sv-type-check { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(148,173,214,.35); color: transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .sv-type-opt.is-on { color: var(--text); } .sv-type-opt.is-on .sv-type-check { background: var(--accent); border-color: var(--accent); color: #fff; } /* staged files */ .sv-file-add { font: inherit; padding: 8px 14px; font-size: 13px; font-weight: 700; } .sv-file-list { display: flex; flex-wrap: wrap; gap: 8px; } .sv-file-list:empty { display: none; } .sv-file-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(148,173,214,.09); border: 1px solid rgba(148,173,214,.18); border-radius: 999px; padding: 5px 11px; } .sv-file-x { font: inherit; border: none; background: transparent; cursor: pointer; color: var(--faint); font-size: 15px; line-height: 1; padding: 0 0 1px; } .sv-file-x:hover { color: #f87171; } button.sv-file-link { cursor: pointer; transition: background .13s ease, color .13s ease; } button.sv-file-link:hover { background: rgba(148,173,214,.16); color: var(--text); } .sv-actions { display: flex; align-items: center; gap: 14px; justify-content: flex-end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .sv-notice { flex: 1 1 auto; margin: 0; font-size: 13px; min-height: 1em; } .sv-notice.err { color: #f87171; } .sv-notice.ok { color: var(--good); } /* olive variant of the translucent primary button, just for Submit Ticket */ .sv-submit-btn { font: inherit; color: #f0f4e4; background: rgba(128, 145, 60, .2); border-color: rgba(145, 160, 70, .45); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .sv-submit-btn:hover { background: rgba(128, 145, 60, .32); border-color: rgba(155, 170, 80, .62); } /* "movement on one of your tickets" dot — rail item + View Active tab. Cleared the next time the agent opens their list. */ .sv-alert-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; } .rail-item .sv-alert-dot { margin-left: auto; } .sv-alert-dot[hidden] { display: none; } /* ======================= NEW BUSINESS (inline #newbusiness view) ======================= */ /* Sold-policy submission form (js/new-business.js -> /api/new-business -> GHL). Reuses the service form's dark vocabulary (sv-grid / sv-field / sv-input / sv-file-chip); only the per-policy expanding rows + done panel are new. */ .nb-section-lab { margin: 24px 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); } .nb-section-lab:first-child { margin-top: 0; } .nb-section-lab .sv-opt { font-weight: 500; letter-spacing: 0; text-transform: none; } .nb-policy { border: 1px solid rgba(148,173,214,.14); border-radius: 13px; margin-bottom: 10px; transition: border-color .15s ease, background .15s ease; } .nb-policy.is-on { border-color: rgba(94,154,222,.4); background: rgba(148,173,214,.04); } .nb-policy.is-invalid { border-color: rgba(248,113,113,.65); } .nb-policy-head { font: inherit; display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: none; background: transparent; cursor: pointer; text-align: left; color: var(--muted); font-size: 14px; font-weight: 600; border-radius: 13px; } .nb-policy-head:hover, .nb-policy.is-on .nb-policy-head { color: var(--text); } .nb-policy-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(148,173,214,.35); color: transparent; transition: background .12s ease, color .12s ease, border-color .12s ease; } .nb-policy.is-on .nb-policy-check { background: var(--accent); border-color: var(--accent); color: #fff; } .nb-policy-body { padding: 2px 14px 14px; } .nb-policy-body[hidden] { display: none; } .nb-policy-body .sv-grid { grid-template-columns: 1fr 1fr 1fr; } :is(#newbusiness-view, #sv-view) select.sv-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238598b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; } :is(#newbusiness-view, #sv-view) select.sv-input option { background: #1a1b1f; color: #e6e9f0; } :is(#newbusiness-view, #sv-view) input.sv-input[type="date"] { color-scheme: dark; } /* claim details block on the service form (shown only for a "Claim" request) */ .sv-claim { padding: 12px 14px 14px; border-radius: 12px; background: rgba(148,173,214,.05); border: 1px dashed var(--line); } .sv-claim[hidden] { display: none; } .sv-claim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sv-incident-row { display: flex; align-items: center; gap: 12px; } .sv-incident-row .sv-input { flex: 1 1 auto; min-width: 0; } .sv-incident-row .sv-input:disabled { opacity: .45; cursor: not-allowed; } .sv-check { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; } .sv-check:hover { color: var(--text); } .sv-check input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 0; cursor: pointer; width: 17px; height: 17px; border-radius: 5px; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line-bright); display: inline-grid; place-items: center; transition: background .13s ease, border-color .13s ease; } .sv-check input:hover { border-color: rgba(148,173,214,.5); } .sv-check input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,154,222,.25); } .sv-check input::before { content: ""; width: 9px; height: 9px; transform: scale(0); transition: transform .12s ease; background: #0f1115; clip-path: polygon(14% 44%, 0 65%, 38% 100%, 100% 22%, 84% 8%, 38% 66%); } .sv-check input:checked { background: var(--accent); border-color: var(--accent); } .sv-check input:checked::before { transform: scale(1); } .sv-check input:checked + span { color: var(--text); } /* claim facts in the agent's expanded row */ .sv-d-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; } .sv-d-facts span { display: flex; flex-direction: column; gap: 1px; } .sv-d-facts b { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); } .sv-d-facts i { font-style: normal; font-size: 13px; color: var(--text); } #newbusiness-view .sv-input[readonly] { opacity: .65; cursor: default; } .nb-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nb-file-btn.is-invalid { border-color: rgba(248,113,113,.65); color: #f87171; } .nb-done { text-align: center; padding: 36px 20px; } .nb-done-medallion { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font: 800 24px/1 "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--good); background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .28); } .nb-done h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; color: var(--text); } .nb-done p { margin: 0 auto 20px; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 480px; } .nb-done .nb-warn { color: #fbbf24; } /* the agent's ticket list */ /* Confirmation card above the list — same visual language as the new-statement celebration popup, but pops in and fades on its own. */ .sv-list-flash { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 11px 15px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--text); background: rgba(24, 25, 28, .96); border: 1px solid var(--line-bright); box-shadow: 0 22px 48px -20px rgba(2,6,16,.9), inset 0 1px 0 rgba(255,255,255,.07); animation: svFlashIn .3s cubic-bezier(.22,.61,.36,1); } .sv-list-flash[hidden] { display: none; } .sv-list-flash.is-leaving { animation: none; opacity: 0; transform: translateY(-4px); transition: opacity .24s ease, transform .24s ease; } .sv-flash-medallion { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 15px/1 "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--good); background: radial-gradient(circle at 50% 36%, rgba(74,222,128,.30), rgba(74,222,128,.08)); border: 1px solid rgba(74,222,128,.45); animation: cmPop .42s cubic-bezier(.22,.61,.36,1) both, svFlashGlow 2s ease-in-out .4s 1; } .sv-list-flash.is-err { border-color: rgba(248,113,113,.28); } .sv-list-flash.is-err .sv-flash-msg { color: var(--bad); } .sv-list-flash.is-err .sv-flash-medallion { color: var(--bad); background: radial-gradient(circle at 50% 36%, rgba(248,113,113,.28), rgba(248,113,113,.08)); border-color: rgba(248,113,113,.45); animation: cmPop .42s cubic-bezier(.22,.61,.36,1) both; } @keyframes svFlashIn { 0% { opacity: 0; transform: translateY(-6px) scale(.98); } 100% { opacity: 1; transform: none; } } @keyframes svFlashGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 6px 18px -8px rgba(74,222,128,.45); } 50% { box-shadow: 0 0 0 6px rgba(74,222,128,0), 0 8px 24px -6px rgba(74,222,128,.7); } } @media (prefers-reduced-motion: reduce) { .sv-list-flash, .sv-flash-medallion { animation: none; } } .sv-filter { display: flex; gap: 8px; margin: 0 0 12px; } .sv-pill { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(148,173,214,.18); transition: background .13s ease, color .13s ease, border-color .13s ease; } .sv-pill:hover { color: var(--text); border-color: var(--line-bright); } .sv-pill.is-active { color: var(--text); background: var(--accent-soft); border-color: rgba(94,154,222,.5); } .sv-list-card { padding: 8px 10px; } .sv-empty { margin: 0; padding: 22px 14px; font-size: 13.5px; color: var(--muted); } .sv-row { border-bottom: 1px solid var(--line); } .sv-row:last-child { border-bottom: none; } /* brief pulse when a notification click lands on this ticket */ .sv-row-flash { animation: svRowFlash 1.6s ease; } @keyframes svRowFlash { 0%, 40% { background: rgba(94,154,222,.12); } 100% { background: transparent; } } .sv-row-head { font: inherit; display: flex; flex-direction: column; align-items: stretch; gap: 7px; width: 100%; padding: 13px 12px; border: none; border-radius: 11px; cursor: pointer; background: transparent; text-align: left; color: var(--text); transition: background .13s ease; } .sv-row-head:hover { background: rgba(148,173,214,.06); } .sv-row-top { display: flex; align-items: center; gap: 12px; width: 100%; } .sv-row-main { flex: 1 1 auto; min-width: 0; } .sv-row-main b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; } .sv-row-types { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-row-when { flex: 0 0 auto; font-size: 11.5px; color: var(--faint); white-space: nowrap; } .sv-row-chev { flex: 0 0 auto; color: var(--faint); transition: transform .15s var(--ease); } .sv-row.is-open .sv-row-chev { transform: rotate(180deg); } .sv-badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .sv-badge.open { color: var(--accent); background: var(--accent-soft); } .sv-badge.prog { color: var(--warn); background: var(--warn-soft); } .sv-badge.wait { color: #b69dfc; background: rgba(167,139,250,.14); } .sv-badge.appr { color: #5eead4; background: rgba(45,212,191,.14); } .sv-badge.done { color: var(--good); background: var(--good-soft); } .sv-badge.del { color: var(--bad); background: rgba(248,113,113,.14); } .sv-row-detail { padding: 2px 12px 16px; } .sv-d-note { margin: 0 0 12px; padding: 10px 13px; border-radius: 11px; background: var(--accent-soft); border: 1px solid rgba(94,154,222,.3); } .sv-d-note b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; } .sv-d-note p { margin: 0; font-size: 13px; color: var(--text); white-space: pre-wrap; } .sv-d-desc { margin: 0 0 10px; font-size: 13px; color: var(--muted); white-space: pre-wrap; } .sv-d-files { display: flex; flex-wrap: wrap; gap: 8px; } .sv-d-files:empty { display: none; } .sv-d-history { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .sv-d-step { margin: 0 0 4px; font-size: 12px; color: var(--faint); } .sv-d-step b { color: var(--muted); font-weight: 700; } .sv-d-actions { margin-top: 14px; display: flex; justify-content: flex-end; } .sv-d-delete { font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--bad); background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.28); border-radius: 9px; padding: 8px 14px; transition: background .13s ease, border-color .13s ease, color .13s ease; } .sv-d-delete:hover { color: #fbb5b5; background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.45); } /* stage sections (Active view): a stage header above a card of rows */ .sv-sec { margin: 0 0 16px; } .sv-sec:last-child { margin-bottom: 0; } .sv-sec-head { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; } .sv-sec-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .sv-sec-dot.open { background: var(--accent); } .sv-sec-dot.prog { background: var(--warn); } .sv-sec-dot.appr { background: #2dd4bf; } .sv-sec-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sv-sec-count { font-size: 11px; font-weight: 800; color: var(--faint); text-align: center; background: rgba(148,173,214,.1); border-radius: 999px; padding: 1px 8px; min-width: 18px; } /* stage flag on an In Progress row (awaiting carrier, the claim stages) and the "Claim" marker; colour follows the stage's cls */ .sv-row-flag { align-self: flex-start; display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #b69dfc; background: rgba(167,139,250,.14); border-radius: 999px; padding: 3px 10px; } .sv-row-flags { display: flex; flex-wrap: wrap; gap: 6px; } .sv-row-flag.prog { color: var(--warn); background: var(--warn-soft); } .sv-row-flag.appr { color: #5eead4; background: rgba(45,212,191,.14); } .sv-row-flag.claim { color: var(--muted); background: rgba(148,173,214,.12); border: 1px solid var(--line); } /* at-a-glance snapshot of the admin's latest note */ .sv-row-note { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--muted); } .sv-row-note > svg { flex: 0 0 auto; color: var(--accent); } .sv-row-note-txt { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-row-note-when { flex: 0 0 auto; color: var(--faint); white-space: nowrap; } /* status timeline inside the expanded detail */ .sv-tl-lab { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 9px; } .sv-tl { position: relative; margin: 0; padding-left: 6px; } .sv-tl-step { position: relative; display: flex; gap: 11px; padding-bottom: 13px; } .sv-tl-step:last-child { padding-bottom: 0; } .sv-tl-step::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: -8px; width: 2px; background: var(--line); } .sv-tl-step:last-child::before { display: none; } .sv-tl-dot { position: relative; z-index: 1; flex: 0 0 10px; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: var(--bg1); border: 2px solid var(--line-bright); box-sizing: border-box; } .sv-tl-dot.open { background: var(--accent); border-color: var(--accent); } .sv-tl-dot.prog { background: var(--warn); border-color: var(--warn); } .sv-tl-dot.wait { background: #b69dfc; border-color: #b69dfc; } .sv-tl-dot.appr { background: #2dd4bf; border-color: #2dd4bf; } .sv-tl-dot.done { background: var(--good); border-color: var(--good); } .sv-tl-dot.del { background: var(--bad); border-color: var(--bad); } .sv-tl-body { display: flex; flex-direction: column; gap: 1px; } .sv-tl-body b { font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.25; } .sv-tl-step.is-current .sv-tl-body b { color: var(--text); } .sv-tl-meta { font-size: 11.5px; color: var(--faint); } /* The shared confirm popup (e.g. delete-a-request, with its reason box) lives OUTSIDE #home-view, so it would otherwise inherit styles.css's LIGHT modal theme — a white card on this dark page. Redefine the dark tokens on the overlay (so nested var() refs resolve correctly) and skin the surface to match the hub + service-request cards. */ #confirm-overlay { } /* Scrim: neutral dark + blur to match the hub's own overlays (the page is #111113, NOT slate) — styles.css's .overlay is a blue-grey #0f172a. */ #confirm-overlay { background: rgba(10, 10, 12, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* Card: same surface as the command palette (rgba(24,25,28,.97), 18px). */ #confirm-overlay .modal { background: rgba(24, 25, 28, .97); border: 1px solid var(--line-bright); border-radius: 18px; box-shadow: 0 40px 90px -20px rgba(2,6,16,.95), inset 0 1px 0 rgba(255,255,255,.07); } /* Heading: Manrope 800 / -.01em — the hub's heading treatment (.panel-head h2). The modal lives outside #home-view, so it would otherwise fall back to styles.css's system-font body stack. */ #confirm-overlay .modal h2 { color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; letter-spacing: -.01em; } #confirm-overlay .confirm-body { color: var(--muted); } #confirm-overlay .confirm-body b { color: var(--text); } #confirm-overlay .reason-lab { color: var(--text); } /* Reason box: identical to the service-request form's .sv-input. */ #confirm-overlay .reason-input { background: rgba(148, 173, 214, .07); color: var(--text); border-color: rgba(148, 173, 214, .18); } #confirm-overlay .reason-input::placeholder { color: var(--faint); } /* claim-value prompt (approve a claim): "$" + number box, then the skip tick */ #confirm-overlay .claim-value-row { position: relative; display: flex; align-items: center; } #confirm-overlay .claim-value-cur { position: absolute; left: 12px; font-size: 14px; font-weight: 700; color: var(--muted); pointer-events: none; } #confirm-overlay .claim-value-input { min-height: 0; resize: none; padding-left: 26px; -moz-appearance: textfield; } #confirm-overlay .claim-value-input::-webkit-outer-spin-button, #confirm-overlay .claim-value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #confirm-overlay .claim-value-input:disabled { opacity: .45; cursor: not-allowed; } #confirm-overlay .claim-value-skip { margin-top: 12px; } #confirm-overlay .claim-value-skip input { background: rgba(148,173,214,.07); border-color: rgba(148,173,214,.28); } #confirm-overlay .claim-value-skip input:checked { background: var(--accent); border-color: var(--accent); } #confirm-overlay .reason-input:focus { border-color: rgba(94, 154, 222, .6); background: rgba(148, 173, 214, .1); } #confirm-overlay .reason-err { color: var(--bad); } /* Buttons: Manrope at the hub's button weight (.hbtn is 700), so they read as part of the same family as the Manrope heading — styles.css's .btn is 600 system. */ #confirm-overlay .btn { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; } /* Cancel: the hub's ghost button (.hbtn-ghost). */ #confirm-overlay .btn.secondary { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(148, 173, 214, .18); } #confirm-overlay .btn.secondary:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-bright); } /* Delete: translucent danger, matching the in-portal "Delete this request" link — NOT the opaque #dc2626 from styles.css's .btn-danger. */ #confirm-overlay .btn.btn-danger { background: rgba(248, 113, 113, .12); color: var(--bad); border: 1px solid rgba(248, 113, 113, .32); } #confirm-overlay .btn.btn-danger:hover { color: #fbb5b5; background: rgba(248, 113, 113, .2); border-color: rgba(248, 113, 113, .5); } /* The Edit-name / Change-password / first-login Welcome popups all render into the shared #pw-overlay, which — like #confirm-overlay above — lives OUTSIDE #home-view and would otherwise inherit styles.css's LIGHT modal theme (a white card on this dark page). Make the dark hub theme the DEFAULT for this overlay so the light modal is never the fallback, exactly as #confirm-overlay. */ #pw-overlay { background: rgba(10, 10, 12, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #pw-overlay .modal { background: rgba(24, 25, 28, .97); border: 1px solid var(--line-bright); border-radius: 18px; box-shadow: 0 40px 90px -20px rgba(2,6,16,.95), inset 0 1px 0 rgba(255,255,255,.07); } #pw-overlay .modal h2 { color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; letter-spacing: -.01em; } #pw-overlay .modal .sub { color: var(--muted); } /* Inputs: identical to the service-request form's .sv-input / the confirm box. */ #pw-overlay .modal .modal-input { background: rgba(148, 173, 214, .07); color: var(--text); border-color: rgba(148, 173, 214, .18); } #pw-overlay .modal .modal-input::placeholder { color: var(--faint); } #pw-overlay .modal .modal-input:focus { outline: none; border-color: rgba(94, 154, 222, .6); background: rgba(148, 173, 214, .1); } /* Buttons at the hub's button weight (.hbtn is 700). */ #pw-overlay .modal .btn { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; } /* Cancel / Back: the hub's ghost button (.hbtn-ghost), same as #confirm-overlay's .secondary. */ #pw-overlay .modal .btn.secondary { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(148, 173, 214, .18); } #pw-overlay .modal .btn.secondary:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-bright); } /* Save / Next: the hub's primary button (.hbtn-primary) — translucent blue, not the opaque light-theme .btn. */ #pw-overlay .modal .btn:not(.secondary) { color: #eaf2ff; background: rgba(94,154,222,.18); border: 1px solid rgba(94,154,222,.42); } #pw-overlay .modal .btn:not(.secondary):hover { background: rgba(94,154,222,.3); border-color: rgba(94,154,222,.6); } /* Notices: dark success/error, matching #login-view's dark notices below. */ #pw-overlay .modal .notice.ok { background: rgba(74,222,128,.12); color: #4ade80; } #pw-overlay .modal .notice.err { background: rgba(248,113,113,.12); color: #f87171; } /* First-login Welcome flow: its h2, body text, list, inputs, buttons and notices already pick up the dark tokens + rules above. Re-skin only the three bespoke pieces that hard-reference light tokens: the badge tile, the success-check ring (its strokes use --good, set above), and the active slide dot. */ #pw-overlay .onb-badge { background: rgba(94,154,222,.15); color: #eaf2ff; border: 1px solid rgba(94,154,222,.4); } #pw-overlay .onb-check-wrap { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.32); } #pw-overlay .onb-dot.active { background: var(--accent); } /* the new-statement heads-up dot, reused on the Statements tab */ .tab .sv-alert-dot { margin-left: 6px; vertical-align: 1px; } /* ===== new-statement celebration popup ===== Like #confirm-overlay, this overlay sits outside #home-view, so it redefines the dark tokens it needs and skins its own surface. */ #celebration-overlay { background: rgba(10, 10, 12, .68); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } #celebration-overlay .modal.cm-celebrate { position: relative; overflow: hidden; max-width: 420px; text-align: center; padding: 30px 30px 26px; background: rgba(24, 25, 28, .98); border: 1px solid var(--line-bright); border-radius: 20px; box-shadow: 0 40px 90px -20px rgba(2,6,16,.95), inset 0 1px 0 rgba(255,255,255,.07); } /* $ medallion: pops in, then gently pulses its glow */ #celebration-overlay .cm-medallion { position: relative; z-index: 1; width: 84px; height: 84px; margin: 2px auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 36%, rgba(74,222,128,.30), rgba(74,222,128,.08)); border: 1px solid rgba(74,222,128,.45); animation: cmPop .42s var(--ease) both, cmGlow 2.4s ease-in-out .45s infinite; } #celebration-overlay .cm-coin { font: 800 40px/1 "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; color: var(--good); } #celebration-overlay h2 { margin: 0 0 6px; color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; letter-spacing: -.01em; font-size: 22px; } #celebration-overlay .cm-celebrate-sub { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } #celebration-overlay .cm-celebrate-sub b { color: var(--text); } #celebration-overlay .cm-celebrate-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 9px; margin-top: 22px; } #celebration-overlay .cm-btn { font: 700 14px/1 "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer; border-radius: 12px; padding: 12px 18px; border: 1px solid transparent; transition: transform .13s var(--ease), background .15s ease, border-color .15s ease, color .15s ease; } #celebration-overlay .cm-btn:active { transform: scale(.98); } #celebration-overlay .cm-btn-primary { color: #eafff1; background: rgba(74,222,128,.20); border-color: rgba(74,222,128,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } #celebration-overlay .cm-btn-primary:hover { background: rgba(74,222,128,.30); } #celebration-overlay .cm-btn-ghost { color: var(--muted); background: rgba(255,255,255,.05); border-color: rgba(148,173,214,.18); } #celebration-overlay .cm-btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-bright); } /* confetti shower, clipped to the card */ #celebration-overlay .cm-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } #celebration-overlay .cm-confetti-piece { position: absolute; top: -14%; width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: cmConfettiFall 2.6s var(--ease) forwards; } @keyframes cmPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes cmGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 10px 28px -12px rgba(74,222,128,.5); } 50% { box-shadow: 0 0 0 9px rgba(74,222,128,0), 0 12px 36px -8px rgba(74,222,128,.75); } } @keyframes cmConfettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(360px) rotate(560deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #celebration-overlay .cm-medallion { animation: none; } #celebration-overlay .cm-confetti { display: none; } #celebration-overlay .modal.cm-celebrate { transition: none; } } /* ===== Inline Reporting view — dark skin of the Sales dashboard ===== The .an-* dashboard classes (business-analytics.js) on the hub's dark tokens. Scoped to the two views that render dashboards: :is(#reporting-view,#analytics-view) (Sales) and #analytics-view (Appointments + Reconciliation). */ :is(#reporting-view,#analytics-view) .an-controls { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 18px; } :is(#reporting-view,#analytics-view) .an-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--good); background:var(--good-soft); border:1px solid rgba(74,222,128,.28); padding:5px 12px; border-radius:999px; } :is(#reporting-view,#analytics-view) .an-tag.warn { color:var(--warn); background:var(--warn-soft); border-color:rgba(251,191,36,.3); } :is(#reporting-view,#analytics-view) .an-tag.bad { color:var(--bad); background:var(--bad-soft); border-color:rgba(248,113,113,.3); } :is(#reporting-view,#analytics-view) .an-filters { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; } :is(#reporting-view,#analytics-view) .an-filters select, :is(#reporting-view,#analytics-view) .an-card select.an-gran { font:inherit; background:var(--surface-2); color:var(--text); border:1px solid var(--line-bright); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; } :is(#reporting-view,#analytics-view) .an-card select.an-gran { padding:6px 10px; font-size:12px; } :is(#reporting-view,#analytics-view) .an-kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-bottom:18px; } :is(#reporting-view,#analytics-view) .an-kpis-sub { grid-template-columns:repeat(6,1fr); gap:16px; margin-top:-4px; } :is(#reporting-view,#analytics-view) .an-kpis-sub .an-card { padding:14px 18px; background:var(--surface-2); } :is(#reporting-view,#analytics-view) .an-card { background:var(--surface); border:1px solid var(--line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--card-shadow); min-width:0; display:flex; flex-direction:column; } :is(#reporting-view,#analytics-view) .an-kpi .an-label { color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; } :is(#reporting-view,#analytics-view) .an-kpi .an-value { font-size:26px; font-weight:800; color:var(--text); margin:8px 0 2px; letter-spacing:-.02em; font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } :is(#reporting-view,#analytics-view) .an-kpis-sub .an-kpi .an-value { font-size:24px; } :is(#reporting-view,#analytics-view) .an-kpi .an-meta { font-size:12px; color:var(--muted); } :is(#reporting-view,#analytics-view) .an-kpi .pill { font-size:11px; } :is(#reporting-view,#analytics-view) .pill { font-weight:700; padding:3px 10px; border-radius:999px; } :is(#reporting-view,#analytics-view) .pill.good { background:var(--good-soft); color:var(--good); } :is(#reporting-view,#analytics-view) .pill.bad { background:var(--bad-soft); color:var(--bad); } :is(#reporting-view,#analytics-view) .pill.warn { background:var(--warn-soft); color:var(--warn); } :is(#reporting-view,#analytics-view) .an-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; margin-bottom:18px; align-items:stretch; } :is(#reporting-view,#analytics-view) .an-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; align-items:stretch; } :is(#reporting-view,#analytics-view) .an-grid-1 { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; } :is(#reporting-view,#analytics-view) .an-card .an-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } :is(#reporting-view,#analytics-view) .an-title { font-size:15px; font-weight:800; color:var(--text); margin:0 0 4px; letter-spacing:-.01em; font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } :is(#reporting-view,#analytics-view) .an-note { font-size:12px; color:var(--muted); margin:0 0 14px; } :is(#reporting-view,#analytics-view) .an-chart { position:relative; height:280px; flex:1 1 auto; } :is(#reporting-view,#analytics-view) .an-chart.sm { height:300px; } :is(#reporting-view,#analytics-view) .an-foot { font-size:12px; color:var(--faint); line-height:1.6; margin:6px 2px 0; } :is(#reporting-view,#analytics-view) .an-message { text-align:center; padding:46px 24px; } :is(#reporting-view,#analytics-view) .an-message h2 { color:var(--text); margin:0 0 8px; font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } :is(#reporting-view,#analytics-view) .an-message p { color:var(--muted); margin:0; } :is(#reporting-view,#analytics-view) .an-message .an-detail { display:block; margin-top:8px; font-size:12px; opacity:.8; overflow-wrap:anywhere; } :is(#reporting-view,#analytics-view) .splitrow { margin:16px 0 20px; } :is(#reporting-view,#analytics-view) .splitrow:last-child { margin-bottom:4px; } :is(#reporting-view,#analytics-view) .splitlabel { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:7px; } :is(#reporting-view,#analytics-view) .splitlabel .lhs { font-weight:600; color:var(--text); } :is(#reporting-view,#analytics-view) .splitlabel .rhs { color:var(--muted); font-size:12px; } :is(#reporting-view,#analytics-view) .splittrack { display:flex; height:30px; border-radius:8px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); } :is(#reporting-view,#analytics-view) .splittrack .seg { display:flex; align-items:center; justify-content:center; min-width:0; color:#fff; font-weight:700; font-size:13px; white-space:nowrap; transition:width .3s ease; } :is(#reporting-view,#analytics-view) .splitkey { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:8px; } :is(#reporting-view,#analytics-view) .splitkey span { display:inline-flex; align-items:center; gap:6px; } :is(#reporting-view,#analytics-view) .splitkey i { width:11px; height:11px; border-radius:3px; display:inline-block; } @media (max-width:980px) { :is(#reporting-view,#analytics-view) .an-kpis, :is(#reporting-view,#analytics-view) .an-kpis-sub { grid-template-columns:1fr 1fr; } :is(#reporting-view,#analytics-view) .an-grid, :is(#reporting-view,#analytics-view) .an-grid-2 { grid-template-columns:1fr; } } /* Appointments + Reconciliation panels, and the sortable tables both views render (per-rep production, reconciliation by carrier, worklist). */ :is(#reporting-view,#analytics-view) .an-controls > select { margin-left:auto; font:inherit; background:var(--surface-2); color:var(--text); border:1px solid var(--line-bright); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; } #analytics-view #panel-appts .an-kpis { grid-template-columns:repeat(5,1fr); } #analytics-view #panel-appts .an-kpis-sub { grid-template-columns:repeat(4,1fr); } #analytics-view .an-chart { height:264px; } #analytics-view .an-chart.sm { height:230px; } :is(#reporting-view,#analytics-view) .an-formula { font-size:12px; color:var(--muted); background:rgba(148,173,214,.06); border:1px solid var(--line); border-radius:10px; padding:12px 14px; line-height:1.55; } :is(#reporting-view,#analytics-view) .an-formula strong { color:var(--text); } :is(#reporting-view,#analytics-view) .an-table-wrap { overflow-x:auto; } :is(#reporting-view,#analytics-view) .an-table { width:100%; border-collapse:collapse; font-size:14px; } :is(#reporting-view,#analytics-view) .an-table th, :is(#reporting-view,#analytics-view) .an-table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } :is(#reporting-view,#analytics-view) .an-table th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); cursor:pointer; user-select:none; position:relative; } :is(#reporting-view,#analytics-view) .an-table th:hover, :is(#reporting-view,#analytics-view) .an-table th.sorted { color:var(--text); } :is(#reporting-view,#analytics-view) .an-table th.num, :is(#reporting-view,#analytics-view) .an-table td.num { text-align:right; font-variant-numeric:tabular-nums; } :is(#reporting-view,#analytics-view) .an-table tbody td { color:var(--text); } :is(#reporting-view,#analytics-view) .an-table tbody td:first-child { font-weight:600; } :is(#reporting-view,#analytics-view) .an-table tbody tr:hover { background:rgba(148,173,214,.06); } :is(#reporting-view,#analytics-view) .an-table tfoot td { border-top:2px solid var(--line); border-bottom:none; font-weight:800; color:var(--text); background:rgba(148,173,214,.06); } :is(#reporting-view,#analytics-view) .an-table tr.rw-overdue td { background:var(--bad-soft); } :is(#reporting-view,#analytics-view) .rw-filters { margin:0 0 14px; margin-left:0; } :is(#reporting-view,#analytics-view) .rw-export, :is(#reporting-view,#analytics-view) .rw-act { font:inherit; background:var(--surface-2); color:var(--text); border:1px solid var(--line-bright); border-radius:10px; padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .13s ease, color .13s ease; } :is(#reporting-view,#analytics-view) .rw-act { border-radius:8px; padding:4px 10px; font-size:12px; white-space:nowrap; } :is(#reporting-view,#analytics-view) .rw-export:hover, :is(#reporting-view,#analytics-view) .rw-act:hover { border-color:var(--accent); color:var(--accent); } :is(#reporting-view,#analytics-view) .rw-act:disabled { opacity:.55; cursor:default; } @media (max-width:980px) { #analytics-view #panel-appts .an-kpis, #analytics-view #panel-appts .an-kpis-sub { grid-template-columns:1fr 1fr; } } /* ---- Daily KPIs tab (PaceDash): month strip + four pace tiles ---- */ #analytics-view .pk-month { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px; font-size:13px; color:var(--muted); } #analytics-view .pk-month b { color:var(--text); font-size:16px; font-weight:800; font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } #analytics-view .pk-month .pk-bar { flex:1 1 200px; margin:0; } #analytics-view .pk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:12px; } #analytics-view .pk-tile { display:flex; flex-direction:column; gap:8px; } #analytics-view .pk-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } #analytics-view .pk-top .pill { white-space:nowrap; } #analytics-view .pk-top .pill:not(.good):not(.warn):not(.bad) { background:var(--surface-2); color:var(--muted); } #analytics-view .pk-value { font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--text); font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } #analytics-view .pk-target { font-size:12px; color:var(--muted); } #analytics-view .pk-bar { position:relative; height:8px; border-radius:999px; margin:4px 0 2px; background:var(--surface-2); border:1px solid var(--line); } #analytics-view .pk-bar .fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--accent); transition:width .45s ease; } #analytics-view .pk-ahead .pk-bar .fill, #analytics-view .pk-on .pk-bar .fill { background:var(--good); } #analytics-view .pk-over .pk-bar .fill { background:var(--warn); } #analytics-view .pk-off .pk-bar .fill { background:var(--bad); } #analytics-view .pk-none .pk-bar .fill { background:var(--muted); opacity:.4; } #analytics-view .pk-bar .mark { position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; border-radius:1px; background:var(--text); opacity:.75; } #analytics-view .pk-bar .mark.pace { background:var(--warn); opacity:1; } #analytics-view .pk-meta { font-size:12px; color:var(--muted); line-height:1.5; } #analytics-view .pk-key { display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); margin:0 0 18px; } #analytics-view .pk-key i { display:inline-block; width:2px; height:12px; vertical-align:-2px; margin-right:6px; background:var(--text); opacity:.75; } #analytics-view .pk-key i.pace { background:var(--warn); opacity:1; } #analytics-view .pk-key-pills { display:inline-flex; gap:6px; margin-left:auto; } #analytics-view .pk-tile .skel { display:block; } @media (max-width:980px) { #analytics-view .pk-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { #analytics-view .pk-grid { grid-template-columns:1fr; } #analytics-view .pk-key-pills { margin-left:0; } } /* ===== Inline Training view — dark skin ===== Re-skins the training classes (light in css/styles.css: .tr-*, .lesson-*, .status-*, .page-crumb*, .btn) onto the hub's dark tokens. Quiz blocks share the #quiz-overlay rules (see :is(#quiz-overlay,#training-view)). */ #training-view { color:var(--text); } #training-view .page-crumbs { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin:0 0 10px; font-size:13px; } #training-view .page-crumbs:empty { display:none; } #training-view .page-crumb { color:var(--muted); text-decoration:none; padding:3px 7px; border-radius:6px; display:inline-flex; align-items:center; gap:5px; } #training-view a.page-crumb:hover { background:rgba(148,173,214,.1); color:var(--text); } #training-view .page-crumb.is-current { color:var(--text); font-weight:600; } #training-view .page-crumb-sep { color:var(--faint); display:inline-flex; } #training-view .muted-note { color:var(--muted); } #training-view .tr-tile, #training-view .tr-row, #training-view .tr-viewtoggle, #training-view .lesson-link, #training-view .lesson-row.is-locked, #training-view .lesson-expand, #training-view .lesson-panel, #training-view .lesson-locked-card, #training-view .tr-sidenav { background:var(--surface); border-color:var(--line); box-shadow:var(--card-shadow); color:var(--text); } #training-view .tr-tile:hover, #training-view .tr-row:hover, #training-view .lesson-link:hover, #training-view .lesson-row.is-open .lesson-link, #training-view .lesson-expand { border-color:var(--line-bright); } #training-view .tr-tile-img { background:var(--surface-2); } #training-view .tr-viewbtn { color:var(--muted); } #training-view .tr-viewbtn:hover { color:var(--text); } #training-view .tr-viewbtn.is-active { background:var(--accent); color:#fff; } #training-view .tr-file-link { color:var(--text); } #training-view .tr-file-link:hover { background:rgba(148,173,214,.08); color:var(--accent); } #training-view .lesson-num { background:var(--surface-2); border-color:var(--line); color:var(--muted); } #training-view .status-open { background:var(--accent-soft); color:var(--accent); } #training-view .status-done { background:var(--good-soft); color:var(--good); } #training-view .status-locked { background:var(--surface-2); color:var(--muted); } #training-view .lesson-row.is-locked { background:var(--surface-2); } #training-view .lesson-video-empty { background:var(--surface-2); border-color:var(--line); color:var(--muted); } #training-view .lesson-quiz-title, #training-view .lesson-locked-card h2 { color:var(--text); } #training-view .btn { background:var(--accent); color:#fff; } #training-view .btn:hover { filter:brightness(1.08); } #training-view .btn.secondary { background:var(--surface-2); color:var(--text); border:1px solid var(--line-bright); } /* ===== Inline Commissions view — dark skin ===== Re-skins the commissions classes (defined light in css/styles.css) onto the hub's dark tokens. Every selector scoped to #commissions-view so the standalone light commissions.html stays untouched. */ /* Compensation/Statements toggle → standalone rounded pills, exactly like the Service Requests Active/Closed filter (.sv-pill) — NOT a boxed track. */ #commissions-view .tabs { display:flex; gap:8px; margin:0 0 18px; padding:0; background:none; border:none; border-radius:0; } #commissions-view .tab { font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:6px 14px; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid rgba(148,173,214,.18); box-shadow:none; transition:background .13s ease, color .13s ease, border-color .13s ease; } #commissions-view .tab:hover { color:var(--text); border-color:var(--line-bright); } #commissions-view .tab.is-active { color:var(--text); background:var(--accent-soft); border-color:rgba(94,154,222,.5); box-shadow:none; } /* Tier eyebrow + name */ #commissions-view .cb-tier-eyebrow { color:var(--muted); } #commissions-view .cb-tier { color:var(--text); font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } /* Tier hero → translucent hub surface (was a navy gradient) */ #commissions-view .cb-hero { background:var(--surface); border:1px solid var(--line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--card-shadow); border-radius:var(--r-lg); } #commissions-view .cb-foot { border-top-color:var(--line); } #commissions-view .cb-half-label, #commissions-view .cb-fig-lab, #commissions-view .cb-pace-sub, #commissions-view .cb-pace-placeholder { color:var(--muted); } #commissions-view .cb-fig-val, #commissions-view .cb-pace-avg { color:var(--text); } #commissions-view .cb-divider { background:var(--line); } #commissions-view .cb-ring-track { stroke:rgba(148,173,214,.18); } #commissions-view .cb-ring-pct { fill:var(--text); } #commissions-view .cb-ring-cap { fill:var(--faint); } #commissions-view .cb-ring-fill.is-none { stroke:var(--faint); } /* "View full tier chart" ghost button → hub ghost (was white-on-navy) */ #commissions-view .btn-ghost { background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line-bright); } #commissions-view .btn-ghost:hover { background:rgba(255,255,255,.09); border-color:var(--line-bright); } /* Incentive card → hub surface */ #commissions-view .incentive-card { background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); } /* Targets strip (hero footer) → hub tokens */ #commissions-view .cb-targets-item { color:var(--muted); } #commissions-view .cb-targets-item b { color:var(--text); font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } #commissions-view .section-heading { color:var(--text); font-family:"Manrope", -apple-system, BlinkMacSystemFont, sans-serif; } #commissions-view .incentive-note { color:var(--muted); } #commissions-view .incentive-row { border-color:var(--line); } #commissions-view .incentive-row-head { color:var(--muted); } #commissions-view .incentive-row:hover { background:rgba(148,173,214,.06); } #commissions-view .inc-level { color:var(--text); } /* was var(--brand) = navy, illegible on dark */ /* Next-tier pill + popover */ #commissions-view .next-tier { background:var(--accent-soft); border-color:rgba(94,154,222,.3); color:var(--text); } #commissions-view .next-tier-icon { color:var(--accent); } #commissions-view .next-tier-text strong { color:var(--text); } /* tier name (was white-on-navy) */ #commissions-view .next-tier-perk { color:var(--accent); } #commissions-view .next-tier-perk::before { color:var(--line); } #commissions-view .next-tier-pop { background:rgba(24,25,28,.98); color:var(--text); border:1px solid var(--line-bright); box-shadow:0 18px 44px -16px rgba(2,6,16,.7); } #commissions-view .next-tier-pop::before { border-bottom-color:rgba(24,25,28,.98); filter:none; } #commissions-view .ntp-title { color:var(--text); } /* was var(--brand) navy */ #commissions-view .ntp-gap.is-hit { color:var(--good); } /* was #14532d dark green */ /* Statements list + filters — match the Compensation cards' surface; the icon chip was a light-blue (#eef4fb) badge → translucent accent chip */ #commissions-view .statement-row { background:var(--surface); border:1px solid var(--line); color:var(--text); box-shadow:var(--card-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } #commissions-view .statement-row:hover { border-color:var(--line-bright); box-shadow:var(--card-shadow); } #commissions-view .statement-icon { background:var(--accent-soft); color:var(--accent); } #commissions-view .muted-note { color:var(--muted); } #commissions-view .filter-select { background:var(--surface-2); color:var(--text); border:1px solid var(--line-bright); } #commissions-view .filter-select:hover { border-color:var(--line-bright); } #commissions-view .select-chev { color:var(--muted); } /* ===== Inline Agent Arsenal view — clean dark LIST ===== Restyles the light .arsenal-* tiles (css/styles.css) into a single framed panel of hairline-divided rows, on the hub's dark tokens. Scoped to #arsenal-view so the light arsenal.html page (tiles) stays untouched. Manila = a muted tan folder accent (vs the saturated amber). */ #arsenal-view { --manila:#d4bd8a; --manila-soft:rgba(212,189,138,.13); } /* the inner list wrapper becomes one framed panel */ #arsenal-view .arsenal-grid { display:block; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:var(--card-shadow); overflow:hidden; } /* each item → a list row with a hairline divider (no tile chrome) */ #arsenal-view .arsenal-card { width:100%; padding:13px 16px; gap:12px; color:var(--text); background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } #arsenal-view .arsenal-grid > .arsenal-card:last-child { border-bottom:none; } #arsenal-view .arsenal-card:hover { background:rgba(148,173,214,.08); box-shadow:none; transform:none; } /* name left (ellipsis) + meta right, on one line */ #arsenal-view .arsenal-info { flex:1 1 auto; min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:12px; } #arsenal-view .arsenal-name { color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; } #arsenal-view .arsenal-card:hover .arsenal-name { color:var(--accent); } #arsenal-view .arsenal-meta { margin-top:0; color:var(--muted); white-space:nowrap; flex:0 0 auto; } /* icon chips: files blue, folders manila */ #arsenal-view .arsenal-icon { width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); } #arsenal-view .arsenal-card-folder .arsenal-icon { background:var(--manila-soft); color:var(--manila); } /* affordance: faint, accent on hover, no chip */ #arsenal-view .arsenal-go { color:var(--faint); background:transparent; } #arsenal-view .arsenal-card:hover .arsenal-go, #arsenal-view .arsenal-card-file:hover .arsenal-go { color:var(--accent); background:transparent; transform:translateX(2px); } /* breadcrumb (above the panel) + loading/empty note */ #arsenal-view .arsenal-crumb { color:var(--accent); } #arsenal-view .arsenal-crumb[data-crumb]:hover { background:rgba(148,173,214,.1); } #arsenal-view .arsenal-crumb.is-current { color:var(--text); } #arsenal-view .arsenal-crumb-sep { color:var(--muted); } #arsenal-view .muted-note { color:var(--muted); } @media (max-width:560px) { #arsenal-view .arsenal-info { flex-direction:column; align-items:flex-start; gap:1px; } #arsenal-view .arsenal-name { white-space:normal; } } /* Arsenal file-preview modal lives OUTSIDE #home-view, so (like #confirm-overlay) redefine the dark tokens on it, then skin the chrome. The .api-frame stays white — it shows Google's own white doc preview. */ #preview-overlay { background:rgba(10,10,12,.62); /* neutral grey scrim, not styles.css's blue #0f172a */ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #preview-overlay .arsenal-preview-modal { background:rgba(24,25,28,.98); border:1px solid var(--line-bright); } #preview-overlay .api-head { border-bottom:1px solid var(--line); } #preview-overlay .api-title { color:var(--text); } #preview-overlay .api-close { background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line-bright); } #preview-overlay .api-close:hover { background:rgba(255,255,255,.09); color:var(--text); border-color:var(--line-bright); } #preview-overlay .api-stage { background:#16181c; } #preview-overlay .btn.secondary { background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line-bright); } #preview-overlay .btn.secondary:hover { background:rgba(255,255,255,.09); } /* ===== Inline Onboarding view — dark skin ===== Re-skins the onboarding classes (defined light in css/styles.css: .overall, .section, .item, .tag, .btn, .group-head, …) onto the hub's dark tokens. Every selector scoped to #onboarding-view so the rest of the site is untouched. NOTE: css/styles.css uses var(--brand)/(--brand-light) and the white "glass" tokens, which #home-view doesn't define — they'd fall back to the light :root navy/white and break on dark, so each is overridden here. */ #onboarding-view { color:var(--text); } /* Overall progress card */ #onboarding-view .overall { background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } #onboarding-view .overall .pct { color:var(--text); } #onboarding-view .bar { background:rgba(148,173,214,.14); } #onboarding-view .bar > span { background:linear-gradient(90deg, var(--accent), var(--accent-2)); } /* Section cards */ #onboarding-view .section { background:var(--surface); border:1px solid var(--line); box-shadow:var(--card-shadow); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } #onboarding-view .section > header { background:transparent; } #onboarding-view .section > header:hover { background:rgba(148,173,214,.06); } #onboarding-view .section h3 { color:var(--text); } #onboarding-view .section .seccount { color:var(--accent); background:var(--accent-soft); } /* Active (current) section: accent stripe + lift */ #onboarding-view .section:not(.done):not(.gated) { box-shadow:inset 4px 0 0 var(--accent), var(--card-shadow); border-color:var(--line-bright); } #onboarding-view .section:not(.done):not(.gated) > header { background:transparent; } #onboarding-view .section:not(.done):not(.gated) > header:hover { background:rgba(148,173,214,.06); } #onboarding-view .section:not(.done):not(.gated) .seccount { color:#0f1115; background:var(--accent); } /* Done (frosted) section */ #onboarding-view .section.done { background:rgba(148,173,214,.03); } #onboarding-view .section.done > header { background:transparent; } #onboarding-view .section.done > header:hover { background:rgba(148,173,214,.05); } #onboarding-view .section.done .seccount { color:var(--good); background:var(--good-soft); } /* Gated (locked) section */ #onboarding-view .section.gated { border-color:var(--line); } #onboarding-view .section.gated > header { background:transparent; } #onboarding-view .section.gated > header:hover { background:rgba(148,173,214,.05); } #onboarding-view .section.gated .seccount { color:var(--muted); background:rgba(148,173,214,.1); } /* Group sub-headers (Morning / Afternoon / Training to Complete) */ #onboarding-view .group-head { color:var(--accent); border-top-color:var(--line); } /* Item rows + tags */ #onboarding-view .item { border-top-color:var(--line); } /* Custom dark checkbox — native ones render bright white on dark; accent-color only tints the checked state, so re-draw the whole control. */ #onboarding-view .item input[type=checkbox] { -webkit-appearance:none; appearance:none; border:1.5px solid var(--line-bright); border-radius:6px; background:rgba(148,173,214,.06); position:relative; transition:background .13s ease, border-color .13s ease; } #onboarding-view .item input[type=checkbox]:not(:disabled):hover { border-color:var(--accent); } #onboarding-view .item input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); } #onboarding-view .item input[type=checkbox]:checked::after { content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #0f1115; border-width:0 2px 2px 0; transform:rotate(45deg); } #onboarding-view .tag.video { background:var(--accent-soft); color:var(--accent); } #onboarding-view .tag.audio { background:rgba(167,139,250,.16); color:#c4b5fd; } #onboarding-view .tag.reading { background:var(--warn-soft); color:var(--warn); } #onboarding-view .tag.quiz { background:var(--good-soft); color:var(--good); } #onboarding-view .tag.locked { background:rgba(148,173,214,.14); color:var(--muted); } #onboarding-view .item .time { background:var(--accent-soft); color:var(--accent); } /* admin-only reset button at the foot of the checklist */ #onboarding-view #reset-progress { margin:28px auto 4px; padding:8px 14px; font-size:13px; font-weight:600; color:var(--bad); background:transparent; border:1px solid rgba(248,113,113,.35); border-radius:8px; cursor:pointer; } #onboarding-view #reset-progress:hover { background:var(--bad-soft); border-color:rgba(248,113,113,.6); } /* Media / links / pending notes */ #onboarding-view .linklike { color:var(--accent); } #onboarding-view .pending-note { color:var(--warn); background:var(--warn-soft); } /* Quiz pills + status, locked banner, gated note */ #onboarding-view .pill.pass { background:var(--good-soft); color:var(--good); } #onboarding-view .pill.fail { background:var(--bad-soft); color:var(--bad); } #onboarding-view .locked-banner { background:var(--good-soft); color:var(--good); border-color:rgba(74,222,128,.4); } /* Buttons (submit / quiz start) */ #onboarding-view .btn { background:var(--accent); color:#0f1115; } #onboarding-view .btn:hover { background:#74abe6; } #onboarding-view .btn:disabled { opacity:.4; } #onboarding-view .btn.secondary { background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line-bright); } #onboarding-view .btn.secondary:hover { background:rgba(255,255,255,.09); } /* Onboarding quiz modal — lives OUTSIDE #home-view, so (like #confirm-overlay) redefine the dark tokens on it, then skin the modal chrome over the light css/styles.css .overlay/.modal. */ #quiz-overlay { background:rgba(10,10,12,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } #quiz-overlay .modal { background:rgba(24,25,28,.98); border:1px solid var(--line-bright); color:var(--text); box-shadow:0 20px 50px rgba(2,6,16,.6), inset 0 1px 0 rgba(255,255,255,.04); } #quiz-overlay .modal h2 { color:var(--text); } #quiz-overlay .modal .sub { color:var(--muted); } :is(#quiz-overlay,#training-view) .qblock { border-top-color:var(--line); } :is(#quiz-overlay,#training-view) .opt { border:1px solid var(--line); color:var(--text); } :is(#quiz-overlay,#training-view) .opt:hover { background:rgba(148,173,214,.08); } :is(#quiz-overlay,#training-view) .opt.correct { background:var(--good-soft); border-color:rgba(74,222,128,.5); } :is(#quiz-overlay,#training-view) .opt.wrong { background:var(--bad-soft); border-color:rgba(248,113,113,.5); } /* Custom dark radio for quiz options (same white-on-dark problem) */ :is(#quiz-overlay,#training-view) .opt input[type=radio] { -webkit-appearance:none; appearance:none; flex:none; margin-top:3px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-bright); background:rgba(148,173,214,.06); position:relative; cursor:pointer; } :is(#quiz-overlay,#training-view) .opt input[type=radio]:hover { border-color:var(--accent); } :is(#quiz-overlay,#training-view) .opt input[type=radio]:checked { border-color:var(--accent); } :is(#quiz-overlay,#training-view) .opt input[type=radio]:checked::after { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); } :is(#quiz-overlay,#training-view) .result-banner.pass { background:rgba(74,222,128,.13); color:var(--good); } :is(#quiz-overlay,#training-view) .result-banner.fail { background:var(--bad-soft); color:var(--bad); } #quiz-overlay .btn { background:var(--accent); color:#0f1115; } #quiz-overlay .btn:hover { background:#74abe6; } #quiz-overlay .btn.secondary { background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--line-bright); } #quiz-overlay .btn.secondary:hover { background:rgba(255,255,255,.09); } /* ===== SERVICE PIPELINE (#pipeline) — admin kanban, dark skin ===== Ported from the old light pipeline.html and re-skinned onto the hub's dark tokens. The board lives inside #home-view, so var(--surface)/--line/ --text/etc. resolve to the dark palette (and flip automatically under html[data-theme="light"] #home-view). The ticket-detail modal lives outside #home-view, so it's skinned separately under #tk-overlay below. */ #pipeline-view .pl-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; } #pipeline-view .pl-toolbar .hint { font-size: 12.5px; color: var(--muted); } #pipeline-view .pl-toolbar .hbtn { margin-left: auto; } /* the Service / Claims switch — reads as the board's title control */ #pipeline-view .pl-pipeline { font-weight: 800; color: var(--text); letter-spacing: .01em; } #pipeline-view .pl-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; } #pipeline-view .pl-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 220px; } #pipeline-view .pl-search > svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; } #pipeline-view .pl-search input { width: 100%; box-sizing: border-box; padding: 9px 32px 9px 34px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; font-family: inherit; } #pipeline-view .pl-search input:focus { outline: none; border-color: var(--line-bright); } #pipeline-view .pl-search input::placeholder { color: var(--muted); } #pipeline-view .pl-search-clear { position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; } #pipeline-view .pl-search-clear:hover { color: var(--text); background: var(--surface); } #pipeline-view .pl-select { padding: 9px 30px 9px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } #pipeline-view .pl-select:focus { outline: none; border-color: var(--line-bright); } #pipeline-view .pl-select.is-active { border-color: var(--accent, #5e9ade); color: var(--text); } #pipeline-view .pl-board { /* --pl-cols = stages in the showing pipeline (service 5, claims 6); js/pipeline.js sets it on the board */ display: grid; grid-template-columns: repeat(var(--pl-cols, 5), minmax(0, 1fr)); gap: 16px; align-items: start; } #pipeline-view .pl-col { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; transition: background .15s ease, border-color .15s ease; } /* Cards scroll inside the column, capped to the viewport, so a long column (e.g. Closed) scrolls on its own and the board stays on one screen instead of the whole page scrolling. The .pl-col-head above stays put. */ #pipeline-view .pl-col-body { max-height: calc(100vh - 280px); min-height: 180px; overflow-y: auto; /* tuck the scrollbar into the column's right padding */ margin-right: -6px; padding-right: 6px; } #pipeline-view .pl-col-body::-webkit-scrollbar { width: 8px; } #pipeline-view .pl-col-body::-webkit-scrollbar-track { background: transparent; } #pipeline-view .pl-col-body::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 999px; } #pipeline-view .pl-col.is-over { background: rgba(94,154,222,.1); border-color: rgba(94,154,222,.4); } /* the Deleted column reads as set-apart from the working pipeline */ #pipeline-view .pl-col[data-status="deleted"] { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.2); } #pipeline-view .pl-col[data-status="deleted"].is-over { background: var(--bad-soft); border-color: rgba(248,113,113,.45); } /* The Deleted column collapses to just its header by default (it's a bin of removed tickets — clutter in the working pipeline). Clicking the header toggles it; the caret rotates down when open. Collapsing hides the cards; on desktop the collapsed column also narrows (see the board grid override below) so the four active columns get the room. */ #pipeline-view .pl-col-del .pl-col-head { cursor: pointer; } #pipeline-view .pl-col-del .pl-col-head:hover { color: var(--text); } #pipeline-view .pl-col-caret { margin-left: 6px; flex: 0 0 auto; opacity: .65; transition: transform .15s ease; } #pipeline-view .pl-col-del:not(.is-collapsed) .pl-col-caret { transform: rotate(90deg); } #pipeline-view .pl-col.is-collapsed .pl-col-body { display: none; } #pipeline-view .pl-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #pipeline-view .pl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } #pipeline-view .pl-col-head .count { margin-left: auto; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: rgba(148,173,214,.1); border: 1px solid var(--line); color: var(--muted); } #pipeline-view .pl-dot.open { background: var(--accent); } #pipeline-view .pl-dot.prog { background: var(--warn); } #pipeline-view .pl-dot.wait { background: #b69dfc; } #pipeline-view .pl-dot.appr { background: #2dd4bf; } #pipeline-view .pl-dot.done { background: var(--good); } #pipeline-view .pl-dot.del { background: var(--bad); } #pipeline-view .pl-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; cursor: grab; user-select: none; box-shadow: 0 1px 2px rgba(2,6,16,.4); transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease, opacity .15s ease; } #pipeline-view .pl-card:hover { border-color: var(--line-bright); box-shadow: 0 6px 18px -8px rgba(2,6,16,.7); transform: translateY(-1px); } #pipeline-view .pl-card.is-dragging { opacity: .45; cursor: grabbing; } #pipeline-view .pl-card b { display: block; font-size: 14px; color: var(--text); line-height: 1.3; } #pipeline-view .pl-card .types { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pipeline-view .pl-card .desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; color: var(--text-2, #b7c0cc); line-height: 1.4; margin-top: 7px; } #pipeline-view .pl-card .meta { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; color: var(--muted); } #pipeline-view .pl-card .meta .agent { max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } #pipeline-view .pl-card .meta .clip { display: inline-flex; align-items: center; gap: 3px; } #pipeline-view .pl-card .meta .when { margin-left: auto; white-space: nowrap; } #pipeline-view .pl-card .reason { display: block; font-size: 11.5px; color: var(--bad); line-height: 1.35; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(248,113,113,.3); } #pipeline-view .pl-empty-col { margin: 6px; padding: 14px 8px; font-size: 12.5px; color: var(--muted); text-align: center; } /* ======================================================================= MED SUPP TRACKER (inline view — #medsupp) — js/med-supp.js Read-only triage of post-sale Part D / MBI follow-ups, bucketed by urgency. KPI cards double as the bucket filter (mirrored by the .sv-pill row); the table skins the shared surface tokens. ======================================================================= */ #medsupp-view .ms-note { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(251,191,36,.3); border-radius: 12px; } #medsupp-view .ms-note svg { flex: 0 0 auto; width: 15px; height: 15px; } #medsupp-view .ms-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; } #medsupp-view .ms-kpi { appearance: none; text-align: left; cursor: pointer; font: inherit; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ms-kpi, var(--accent)); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--card-shadow); transition: background .15s ease, border-color .15s ease, transform .15s var(--ease); } #medsupp-view .ms-kpi:hover { background: var(--surface-2); transform: translateY(-1px); } #medsupp-view .ms-kpi.is-active { background: var(--surface-2); border-color: var(--ms-kpi, var(--accent)); } #medsupp-view .ms-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #medsupp-view .ms-kpi-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #medsupp-view .ms-kpi-count { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.25; margin-top: 2px; } #medsupp-view .ms-kpi.k-overdue { --ms-kpi: #f87171; } #medsupp-view .ms-kpi.k-due-soon { --ms-kpi: var(--warn); } #medsupp-view .ms-kpi.k-upcoming { --ms-kpi: var(--accent); } #medsupp-view .ms-kpi.k-complete { --ms-kpi: var(--good); } #medsupp-view .ms-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } #medsupp-view .ms-search { flex: 1 1 220px; max-width: 320px; font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-bright); border-radius: 10px; padding: 8px 12px; } #medsupp-view .ms-search::placeholder { color: var(--faint); } #medsupp-view .ms-search:focus { outline: none; border-color: var(--accent); } #medsupp-view .ms-toolbar select { font: inherit; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-bright); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; } #medsupp-view .ms-toolbar .hint { margin-left: auto; font-size: 12.5px; color: var(--muted); } #medsupp-view .ms-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } #medsupp-view .ms-card { padding: 6px 10px; } #medsupp-view .ms-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } #medsupp-view .ms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } #medsupp-view .ms-table th { padding: 12px 10px 10px; text-align: left; white-space: nowrap; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-bright); } #medsupp-view .ms-table td { padding: 11px 10px; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--text); } #medsupp-view .ms-table tbody tr:last-child td { border-bottom: none; } #medsupp-view .ms-table tbody tr:hover { background: rgba(148,173,214,.06); } @keyframes msRise { from { opacity: 0; transform: translateY(10px); } } #medsupp-view .ms-table.ms-animate tbody tr { animation: msRise .3s var(--ease) backwards; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(1) { animation-delay: .03s; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(2) { animation-delay: .06s; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(3) { animation-delay: .09s; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(4) { animation-delay: .12s; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(5) { animation-delay: .15s; } #medsupp-view .ms-table.ms-animate tbody tr:nth-child(n+6) { animation-delay: .18s; } @media (prefers-reduced-motion: reduce) { #medsupp-view .ms-table.ms-animate tbody tr { animation: none; } } #medsupp-view .ms-client-name { font-weight: 700; } #medsupp-view .ms-client-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } #medsupp-view .ms-client-sub a { color: var(--muted); text-decoration: none; } #medsupp-view .ms-client-sub a:hover { color: var(--accent); text-decoration: underline; } #medsupp-view .ms-eff-date { white-space: nowrap; } #medsupp-view .ms-eff-rel { font-size: 12px; margin-top: 2px; font-weight: 700; } #medsupp-view .ms-eff-rel.r-overdue { color: #f87171; } #medsupp-view .ms-eff-rel.r-due-soon { color: var(--warn); } #medsupp-view .ms-eff-rel.r-upcoming { color: var(--muted); } #medsupp-view .ms-eff-rel.r-complete { color: var(--good); } #medsupp-view .ms-policy-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } #medsupp-view .ms-pill { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } #medsupp-view .ms-pill.ok { color: var(--good); background: var(--good-soft); border: 1px solid rgba(74,222,128,.28); } #medsupp-view .ms-pill.warn { color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(251,191,36,.3); } #medsupp-view .ms-pill.bad { color: var(--bad); background: var(--bad-soft); border: 1px solid rgba(248,113,113,.3); } #medsupp-view .ms-empty { padding: 26px 16px; font-size: 13.5px; color: var(--muted); text-align: center; } #medsupp-view .ms-empty.is-err { color: var(--bad); } /* Loading skeleton — the shared .skel kit (css/styles.css) provides the pulsing bars; these rules only lay out where they land in this view (js/med-supp.js swaps them in on first load). A re-fetch pulses the existing table instead of blanking it. */ #medsupp-view .ms-kpi-count .skel { width: 44px; height: 20px; margin: 5px 0 3px; } #medsupp-view .ms-skel-table { padding: 4px 0; } #medsupp-view .ms-skel-row { display: flex; align-items: center; gap: 18px; padding: 14px 10px; border-bottom: 1px solid var(--line); } #medsupp-view .ms-skel-row:last-child { border-bottom: none; } /* stagger the pulse so the rows breathe as a wave, not one block */ #medsupp-view .ms-skel-row:nth-child(2) .skel { animation-delay: .12s; } #medsupp-view .ms-skel-row:nth-child(3) .skel { animation-delay: .24s; } #medsupp-view .ms-skel-row:nth-child(4) .skel { animation-delay: .36s; } #medsupp-view .ms-skel-row:nth-child(5) .skel { animation-delay: .48s; } #medsupp-view .ms-skel-row:nth-child(6) .skel { animation-delay: .6s; } #medsupp-view .ms-skel-pill { height: 20px; } #medsupp-view .ms-table.ms-loading { animation: skelPulse 1.3s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { #medsupp-view .ms-table.ms-loading { animation: none; opacity: .55; } } @media (max-width: 860px) { #medsupp-view .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } #medsupp-view .ms-toolbar .hint { display: none; } } /* ======================================================================= PROCESSES (inline view — #processes) — js/processes.js Live view of the process Google Sheet. One .sv-pill per sheet tab (Sales / Operations / Administrative), rows regrouped into workflow stages and rendered as link cards straight to each SOP doc. ======================================================================= */ #processes-view .pr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } #processes-view .pr-search { flex: 1 1 220px; max-width: 320px; font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-bright); border-radius: 10px; padding: 8px 12px; } #processes-view .pr-search::placeholder { color: var(--faint); } #processes-view .pr-search:focus { outline: none; border-color: var(--accent); } #processes-view .pr-toolbar .hint { margin-left: auto; font-size: 12px; color: var(--faint); } #processes-view .pr-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; } #processes-view .pr-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; margin-left: 7px; padding: 0 5px; font-size: 11px; font-weight: 800; border-radius: 999px; background: rgba(148,173,214,.14); color: var(--muted); } #processes-view .sv-pill.is-active .pr-count { background: rgba(255,255,255,.16); color: inherit; } #processes-view .pr-card { padding: 0; overflow: hidden; } #processes-view .pr-group { padding: 18px 20px 8px; } #processes-view .pr-group:first-child { padding-top: 14px; } #processes-view .pr-group-title { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } #processes-view .pr-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); transition: background .13s ease; } #processes-view .pr-group + .pr-row { border-top: none; } #processes-view a.pr-row:hover { background: var(--surface-2); } #processes-view a.pr-row:hover .pr-name { color: var(--accent); } #processes-view a.pr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } #processes-view .pr-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; line-height: 1.35; transition: color .13s ease; } #processes-view .pr-meta { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 1px; } #processes-view .pr-ext { flex: 0 0 auto; color: var(--faint); } #processes-view a.pr-row:hover .pr-ext { color: var(--accent); } #processes-view .pr-empty { padding: 26px 16px; font-size: 13.5px; color: var(--muted); text-align: center; } #processes-view .pr-empty-err { color: var(--bad); } /* first load: rows rise in as a wave */ #processes-view .pr-animate .pr-row { animation: prRise .32s var(--ease, ease) both; } #processes-view .pr-animate .pr-row:nth-child(-n+6) { animation-delay: .03s; } #processes-view .pr-animate .pr-row:nth-child(n+7) { animation-delay: .08s; } #processes-view .pr-animate .pr-row:nth-child(n+13) { animation-delay: .13s; } @keyframes prRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #processes-view .pr-animate .pr-row { animation: none; } } /* ----- Organize (edit) mode: js/processes.js, admins only ----- */ #processes-view #pr-organize.is-active { background: var(--accent); color: #fff; border-color: var(--accent); } #processes-view .pr-group-edit { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #processes-view .pr-sec-actions { display: inline-flex; gap: 6px; } #processes-view .pr-sec-btn { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--line-bright); border-radius: 7px; padding: 3px 9px; transition: color .13s ease, background .13s ease, border-color .13s ease; } #processes-view .pr-sec-btn:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--accent); } #processes-view .pr-sec-btn-danger:hover { color: var(--bad); border-color: var(--bad); } #processes-view .pr-row-edit { cursor: grab; user-select: none; -webkit-user-select: none; background: var(--surface-2); } #processes-view .pr-row-edit:active { cursor: grabbing; } #processes-view .pr-row-edit .pr-handle { flex: 0 0 auto; color: var(--faint); } #processes-view .pr-row-edit:hover .pr-handle { color: var(--muted); } #processes-view .pr-row-edit.pr-dragging { opacity: .4; } /* Insertion markers while dragging over a row / an empty section. */ #processes-view .pr-row-edit.pr-over-before { box-shadow: inset 0 2px 0 var(--accent); } #processes-view .pr-row-edit.pr-over-after { box-shadow: inset 0 -2px 0 var(--accent); } #processes-view .pr-drop.pr-drop-hot { background: rgba(94,154,222,.08); box-shadow: inset 0 0 0 1px var(--accent); } #processes-view .pr-drop-empty { margin: 0; padding: 14px 20px; font-size: 12.5px; color: var(--faint); font-style: italic; } #processes-view .pr-add-sec { display: block; width: calc(100% - 40px); margin: 14px 20px 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--muted); background: transparent; border: 1px dashed var(--line-bright); border-radius: 10px; padding: 11px; transition: color .13s ease, border-color .13s ease, background .13s ease; } #processes-view .pr-add-sec:hover { color: var(--accent); border-color: var(--accent); background: rgba(94,154,222,.06); } @media (max-width: 860px) { #processes-view .pr-toolbar .hint { display: none; } } /* Desktop: when the Deleted column is collapsed, give it just its content width (auto) so the four active columns share the rest. At narrower widths the board reflows to 2/1 columns and the collapsed column simply hides its cards (no width override needed). */ @media (min-width: 1081px) { #pipeline-view .pl-board.del-collapsed { grid-template-columns: repeat(calc(var(--pl-cols, 5) - 1), minmax(0, 1fr)) auto; } } @media (max-width: 1080px) { #pipeline-view .pl-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1280px) { #pipeline-view .pl-board { gap: 12px; } #pipeline-view .pl-col { padding: 10px; } } @media (max-width: 620px) { #pipeline-view .pl-board { grid-template-columns: 1fr; } } /* The ticket-detail modal (js/pipeline.js) renders into #tk-overlay, which — like #confirm-overlay / #pw-overlay — lives OUTSIDE #home-view and would otherwise inherit styles.css's LIGHT modal theme (a white card on this dark page). Redefine the dark tokens on the overlay, skin the chrome, then the bespoke .tk-* pieces. */ #tk-overlay { background: rgba(10,10,12,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #tk-overlay .modal { max-width: 640px; background: rgba(24,25,28,.98); border: 1px solid var(--line-bright); color: var(--text); box-shadow: 0 40px 90px -20px rgba(2,6,16,.95), inset 0 1px 0 rgba(255,255,255,.06); } #tk-overlay .modal h2 { color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 800; letter-spacing: -.01em; } #tk-overlay .modal .sub { color: var(--muted); } /* Buttons (Save note / Close): the hub's ghost button, at .hbtn weight. */ #tk-overlay .btn { font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; } #tk-overlay .btn.secondary { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(148,173,214,.18); } #tk-overlay .btn.secondary:hover { color: var(--text); background: rgba(255,255,255,.09); border-color: var(--line-bright); } #tk-overlay .tk-del-reason { margin: 4px 0 14px; padding: 10px 13px; border-radius: 12px; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.28); } #tk-overlay .tk-del-reason b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bad); margin-bottom: 3px; } #tk-overlay .tk-del-reason p { margin: 0; font-size: 13.5px; color: var(--text); white-space: pre-wrap; } #tk-overlay .tk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 14px 0; } #tk-overlay .tk-grid .lab { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } #tk-overlay .tk-grid .val { font-size: 14px; color: var(--text); margin-top: 2px; word-break: break-word; } #tk-overlay .tk-desc { grid-column: 1 / -1; background: rgba(148,173,214,.06); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--text); white-space: pre-wrap; } #tk-overlay .tk-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } #tk-overlay .tk-file { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent); background: rgba(148,173,214,.07); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; transition: border-color .14s ease, background .14s ease; } #tk-overlay .tk-file:hover { border-color: var(--accent); background: rgba(148,173,214,.12); } #tk-overlay .tk-status-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; } #tk-overlay .tk-status-row label + select { min-width: 150px; } #tk-overlay .tk-status-row label { font-size: 13px; font-weight: 700; color: var(--text); } #tk-overlay .tk-status-row select { flex: 1; } /* Native