/* ===================================================================== QETC Sales Team Analytics — Apple-inspired light theme Design principles: SF Pro type, soft neutrals, large radii, subtle shadows, hairline borders, generous whitespace. ===================================================================== */ /* --- Page-level background override (scoped to dashboard pages only) --- When the dashboard is present on the page, we paint the and backgrounds to match the dashboard, and clip any horizontal overflow. This makes the viewport-width escape trick zoom-safe: even if sub-pixel rounding leaves a thin gap at non-100% browser zoom, the gap is the same color as the dashboard and is invisible to the eye. */ html:has(.qetc-dash), body:has(.qetc-dash), html.qetc-has-dashboard, body.qetc-has-dashboard { background: #f5f5f7 !important; overflow-x: hidden; } body.qetc-has-dashboard { margin: 0; } .qetc-dash { /* Apple semantic-ish palette */ --qetc-bg: #f5f5f7; --qetc-surface: #ffffff; --qetc-surface-2: #fbfbfd; --qetc-hair: #e5e5ea; --qetc-hair-2: #d2d2d7; --qetc-text: #1d1d1f; --qetc-text-2: #424245; --qetc-muted: #86868b; --qetc-muted-2: #a1a1a6; --qetc-blue: #007aff; --qetc-blue-soft: rgba(0,122,255,0.10); --qetc-green: #34c759; --qetc-green-soft: rgba(52,199,89,0.12); --qetc-red: #ff3b30; --qetc-red-soft: rgba(255,59,48,0.10); --qetc-orange: #ff9500; --qetc-orange-soft: rgba(255,149,0,0.12); --qetc-yellow: #ffcc00; --qetc-indigo: #5856d6; --qetc-pink: #ff2d55; --qetc-teal: #5ac8fa; --qetc-purple: #af52de; --qetc-shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03); --qetc-shadow-2: 0 4px 14px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04); color-scheme: light; --qetc-r-sm: 10px; --qetc-r-md: 14px; --qetc-r-lg: 18px; --qetc-r-xl: 22px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--qetc-text); background: var(--qetc-bg); /* Break out of any narrow theme container and span the full viewport. 1. Negative margins pull the element edge-to-edge. 2. box-shadow + clip-path extend the dashboard's own background a few pixels beyond its box on both sides, absorbing any sub-pixel rounding gap that otherwise appears at non-100% browser zoom. */ position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-shadow: 0 0 0 8px var(--qetc-bg); clip-path: inset(0 -8px); border-radius: 0; padding: 32px max(24px, calc(50vw - 720px)); min-height: 100vh; letter-spacing: -0.01em; } .qetc-dash *, .qetc-dash *::before, .qetc-dash *::after { box-sizing: border-box; } /* Many WP themes force lowercase on headings via text-transform, which makes "Zoom Module" render as "zoom module" and "GSM Calls" as "gsm calls". Lock casing to the author's intent (kept `text-transform: uppercase` only where we explicitly opt in via .qetc-is-uppercase). */ .qetc-dash, .qetc-dash h1, .qetc-dash h2, .qetc-dash h3, .qetc-dash h4, .qetc-dash h5, .qetc-dash h6, .qetc-dash span, .qetc-dash button, .qetc-dash label, .qetc-dash p, .qetc-dash a, .qetc-dash th, .qetc-dash td, .qetc-dash li { text-transform: none; } .qetc-leaderboard thead th { text-transform: uppercase; } /* keep column caps */ /* -------- Header — title + scope glued together on the left, controls on the right. Becomes sticky (blurred white strip) once the user scrolls past the first 60px so "who + when" is always visible. -- */ .qetc-dash__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 20px; padding: 12px 14px; margin: -4px -14px 18px; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.03); position: sticky; top: 8px; z-index: 15; } .qetc-dash__titleblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qetc-dash__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--qetc-text); line-height: 1.15; } .qetc-dash__subtitle { display: none; } /* Scope caption — "who + when" sits right under the title so it travels with the page identity instead of floating alone. */ .qetc-dash__scope { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--qetc-text-2); letter-spacing: -0.005em; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qetc-dash__scope-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); flex: none; } .qetc-dash__scope-who { font-weight: 600; color: var(--qetc-text); } .qetc-dash__scope-sep { color: var(--qetc-muted-2); } .qetc-dash__scope-when { color: var(--qetc-muted); font-weight: 500; font-variant-numeric: tabular-nums; } .qetc-dash__controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .qetc-field { display: flex; flex-direction: column; gap: 2px; } .qetc-field__caption { font-size: 11px; color: var(--qetc-muted); font-weight: 500; padding-left: 2px; pointer-events: none; } /* Team select — subtle blue halo + caption colour when a filter is active so the user can spot a non-default choice at a glance. */ .qetc-field--filled .qetc-field__caption { color: var(--qetc-blue); } .qetc-field--filled select { border-color: var(--qetc-blue) !important; box-shadow: 0 0 0 3px var(--qetc-blue-soft) !important; color: var(--qetc-blue); font-weight: 600; } /* Date range — From → To pills joined by an arrow so they read as one control instead of two disconnected boxes. */ .qetc-daterange { display: inline-flex; align-items: stretch; gap: 0; background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-md); padding: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); transition: border-color 0.15s, box-shadow 0.15s; } .qetc-daterange:focus-within { border-color: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); } .qetc-daterange .qetc-datepill { border: none; background: transparent; padding: 4px 14px 6px; min-width: 128px; border-radius: 10px; box-shadow: none; } .qetc-daterange .qetc-datepill:hover { background: var(--qetc-surface-2); } .qetc-daterange .qetc-datepill:focus-within { background: var(--qetc-blue-soft); box-shadow: none; } .qetc-daterange__arrow { display: inline-flex; align-items: center; color: var(--qetc-muted-2); font-size: 13px; padding: 0 2px; user-select: none; } .qetc-dash__controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--qetc-muted); font-weight: 500; } .qetc-dash__controls input, .qetc-dash__controls select { background: var(--qetc-surface); color: var(--qetc-text); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-sm); padding: 8px 12px; font-size: 14px; font-family: inherit; min-width: 160px; transition: border-color 0.15s, box-shadow 0.15s; } .qetc-dash__controls input:focus, .qetc-dash__controls select:focus { outline: none; border-color: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); } /* Primary Apple-style pill button — scoped narrowly to the Refresh control only. Earlier this selector was `.qetc-dash button`, which (thanks to specificity of 0,1,1) overrode every pill class inside the dashboard — quick-date pills, employee pills, chart-type selector, module bar — and painted them all blue. Scope it to the specific ID so other pills keep their own look. */ #qetc-refresh { background: var(--qetc-blue); color: #fff; border: none; border-radius: 980px; padding: 9px 18px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, transform 0.08s, box-shadow 0.15s; letter-spacing: -0.005em; } #qetc-refresh:hover { background: #0a68d9; } #qetc-refresh:active { transform: scale(0.98); } #qetc-refresh:disabled { opacity: 0.4; cursor: not-allowed; } /* -------- Date pill (click anywhere on the label to open picker) -- */ .qetc-datepill { position: relative; display: inline-flex; flex-direction: column; gap: 2px; background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-sm); padding: 6px 14px 8px; cursor: pointer; min-width: 150px; transition: border-color 0.15s, box-shadow 0.15s; } .qetc-datepill:hover { border-color: var(--qetc-hair-2); } .qetc-datepill:focus-within { border-color: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); } .qetc-datepill__caption { font-size: 11px; color: var(--qetc-muted); font-weight: 500; pointer-events: none; } .qetc-datepill input[type="date"] { background: transparent !important; border: none !important; padding: 0 !important; font-size: 14px; color: var(--qetc-text); font-family: inherit; min-width: 0 !important; width: 100%; cursor: pointer; box-shadow: none !important; outline: none; } /* Hide the native calendar emoji so the whole pill feels like one control */ .qetc-datepill input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; } .qetc-datepill input[type="date"]::-webkit-inner-spin-button, .qetc-datepill input[type="date"]::-webkit-clear-button { display: none; } /* -------- Quick date range pills --------------------------------- */ .qetc-quickdates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .qetc-quickdate { background: var(--qetc-surface); color: var(--qetc-text-2); border: 1px solid var(--qetc-hair); border-radius: 980px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; letter-spacing: -0.005em; transition: background 0.15s, color 0.15s, border-color 0.15s; } .qetc-quickdate:hover { background: var(--qetc-surface-2); color: var(--qetc-text); border-color: var(--qetc-hair-2); } .qetc-quickdate.is-active { background: var(--qetc-blue); color: #fff; border-color: var(--qetc-blue); box-shadow: 0 1px 3px rgba(0,122,255,0.35), 0 0 0 3px var(--qetc-blue-soft); } .qetc-quickdate.is-active:hover { background: #0a68d9; color: #fff; } /* Pills wider than the active module's lookback (e.g. Zoom's 30-day cap) get visually muted, non-interactive, and show a help cursor so the hover-title explains why. Disabling the native button also blocks any programmatic click handlers from firing. */ .qetc-quickdate--unavailable, .qetc-quickdate:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: auto; /* keep tooltip on hover */ background: var(--qetc-surface); color: var(--qetc-text-2); border-color: var(--qetc-hair); box-shadow: none; } .qetc-quickdate--unavailable:hover, .qetc-quickdate:disabled:hover { background: var(--qetc-surface); color: var(--qetc-text-2); border-color: var(--qetc-hair); } .qetc-quickdates__note { margin: -8px 0 18px; font-size: 12px; line-height: 1.4; color: var(--qetc-text-2); letter-spacing: -0.005em; } .qetc-quickdates__note::before { content: "ⓘ "; color: var(--qetc-blue); font-weight: 600; margin-right: 2px; } /* -------- Scope bar (sticky "who + when" banner) ----------------- */ .qetc-scopebar { position: sticky; top: 8px; z-index: 10; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; margin-bottom: 18px; background: rgba(255,255,255,0.78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border: 1px solid var(--qetc-hair); border-radius: 980px; font-size: 13px; color: var(--qetc-text); box-shadow: 0 1px 3px rgba(0,0,0,0.04); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qetc-scopebar__icon { width: 8px; height: 8px; border-radius: 50%; background: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); flex: none; } .qetc-scopebar__who { font-weight: 600; letter-spacing: -0.01em; } .qetc-scopebar__sep { color: var(--qetc-muted-2); } .qetc-scopebar__when { color: var(--qetc-muted); font-weight: 500; } /* -------- Module switcher (segmented control) -------------------- */ .qetc-modbar { display: inline-flex; gap: 2px; padding: 3px; background: var(--qetc-hair); border-radius: 12px; margin-bottom: 20px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02); } .qetc-modbar__btn { background: transparent; color: var(--qetc-text-2); border: none; padding: 8px 18px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; border-radius: 10px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 8px; letter-spacing: -0.005em; } .qetc-modbar__btn::after { content: none; } .qetc-modbar__btn:hover { color: var(--qetc-text); background: rgba(255,255,255,0.6); } .qetc-modbar__btn.is-active { background: var(--qetc-surface); color: var(--qetc-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04); } .qetc-modbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qetc-muted-2); transition: background 0.2s; } .qetc-modbar__btn--zoom.is-active .qetc-modbar__dot { background: var(--qetc-blue); } .qetc-modbar__btn--dinstar.is-active .qetc-modbar__dot { background: var(--qetc-green); } .qetc-modbar__btn--pipedrive.is-active .qetc-modbar__dot { background: var(--qetc-orange); } /* -------- Module container --------------------------------------- */ .qetc-module { display: none; animation: qetcFade 0.25s ease; } .qetc-module.is-active { display: block; } @keyframes qetcFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* -------- Module head (title + sync) ----------------------------- */ .qetc-module__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .qetc-module__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--qetc-text); } .qetc-module__title .qetc-module__caption { color: var(--qetc-muted); font-size: 14px; font-weight: 400; } .qetc-module__actions { display: flex; align-items: center; gap: 10px; } .qetc-module__pill { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 980px; background: var(--qetc-surface-2); color: var(--qetc-text); border: 1px solid var(--qetc-hair); } .qetc-module__pill--zoom { background: var(--qetc-blue-soft); color: var(--qetc-blue); border-color: transparent; } .qetc-module__pill--dinstar { background: var(--qetc-green-soft); color: #1d8a40; border-color: transparent; } .qetc-module__pill--pipedrive { background: var(--qetc-orange-soft); color: #b36a00; border-color: transparent; } /* -------- Sync button (secondary pill) --------------------------- Hover used to fade to surface-2 which, on a white page, looked like the label was vanishing. Now hover tints it blue so the button clearly reads as "clickable" — text stays legible. */ .qetc-sync-btn { background: var(--qetc-surface); color: var(--qetc-text); border: 1px solid var(--qetc-hair-2); border-radius: 980px; padding: 7px 16px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .qetc-sync-btn:hover { background: var(--qetc-blue-soft); border-color: var(--qetc-blue); color: var(--qetc-blue); box-shadow: 0 1px 3px rgba(0,122,255,0.15); } .qetc-sync-btn:disabled { opacity: 0.6; cursor: wait; color: var(--qetc-muted); } .qetc-sync-btn:disabled:hover { background: var(--qetc-surface); border-color: var(--qetc-hair-2); color: var(--qetc-muted); box-shadow: none; } /* v1.17.4 — icon variant. Flex-centered icon + label with a small gap, slight lift shadow on hover, and an active-spin class for the Sync button while a sync is in flight. Applies on top of .qetc-sync-btn. */ .qetc-sync-btn--icon, .qetc-print-btn--icon { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px; line-height: 1; font-weight: 600; letter-spacing: 0.01em; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .qetc-sync-btn--icon:hover, .qetc-print-btn--icon:hover { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10); transform: translateY(-0.5px); } .qetc-sync-btn__icn, .qetc-print-btn__icn { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; color: currentColor; } .qetc-sync-btn--icon.is-busy .qetc-sync-btn__icn svg { animation: qetcSyncSpin 1.2s linear infinite; } @keyframes qetcSyncSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .qetc-sync-status { display: none; font-size: 12px; color: var(--qetc-muted); padding: 4px 10px; border-radius: 980px; background: var(--qetc-surface-2); border: 1px solid var(--qetc-hair); } .qetc-sync-status:not(:empty) { display: inline-flex; align-items: center; gap: 6px; } .qetc-sync-status--running { color: var(--qetc-orange); background: var(--qetc-orange-soft); border-color: transparent; } .qetc-sync-status--ok { color: #1d8a40; background: var(--qetc-green-soft); border-color: transparent; } .qetc-sync-status--err { color: var(--qetc-red); background: var(--qetc-red-soft); border-color: transparent; } .qetc-sync-log-wrap { margin: 0 0 16px; font-size: 12px; color: var(--qetc-muted); width: 100%; } .qetc-sync-log-wrap summary { cursor: pointer; user-select: none; color: var(--qetc-muted); } .qetc-sync-log-wrap summary:hover { color: var(--qetc-text); } .qetc-sync-log { margin: 8px 0 0; padding: 14px; background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-md); max-height: 240px; overflow: auto; white-space: pre-wrap; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.55; color: var(--qetc-text-2); } /* -------- KPI cards ----------------------------------------------- */ .qetc-dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* v1.17.12 — every row of cards stretches to the height of its tallest sibling, so a card with a progress bar attached doesn't leave the others looking dwarfed. `1fr` makes each row size to fill, and align-items: stretch ensures cards fill that row. */ grid-auto-rows: 1fr; align-items: stretch; gap: 12px; margin-bottom: 20px; } .qetc-kpi { background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.12s ease, box-shadow 0.2s ease; box-shadow: var(--qetc-shadow-1); /* Pin the value to the top, push the optional progress block to the bottom — keeps the KPI label/value aligned across siblings even when one card has a progress bar. */ justify-content: flex-start; } .qetc-kpi__progress { margin-top: auto !important; padding-top: 8px; border-top: 1px solid rgba(15, 23, 42, 0.05); } .qetc-kpi:hover { transform: translateY(-1px); box-shadow: var(--qetc-shadow-2); } .qetc-kpi__label { font-size: 12px; color: var(--qetc-muted); font-weight: 500; } .qetc-kpi__value { font-size: 30px; font-weight: 600; color: var(--qetc-text); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } .qetc-module--zoom .qetc-kpi:first-child .qetc-kpi__value { color: var(--qetc-blue); } .qetc-module--dinstar .qetc-kpi:first-child .qetc-kpi__value { color: var(--qetc-green); } /* ============================================================================= * v1.17.11 — Admin per-card hide/show eye toggle. * * Click the eye to hide a KPI card; click again to show. The card stays * present (translucent + collapsed look) so the discovery affordance is * preserved — admins always know what cards exist. A "Show all hidden * cards" pill appears above the grid when any card is hidden. * ========================================================================== */ .qetc-kpi-eye { position: absolute; top: 8px; right: 8px; appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--qetc-hair, #e5e7eb); border-radius: 999px; padding: 4px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--qetc-muted, #64748b); opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; z-index: 2; } .qetc-kpi { /* `position: relative` already set in v1.16.0 — keep it so the eye absolute-positions correctly. */ } .qetc-kpi:hover .qetc-kpi-eye, .qetc-kpi:focus-within .qetc-kpi-eye, .qetc-kpi.is-card-hidden .qetc-kpi-eye { opacity: 1; } .qetc-kpi-eye:hover { background: #fff; color: var(--qetc-text, #0f172a); border-color: #cbd5e1; } .qetc-kpi-eye:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; } .qetc-kpi.is-card-hidden { opacity: 0.42; background: repeating-linear-gradient( 135deg, #fafbfc 0, #fafbfc 6px, #f1f3f5 6px, #f1f3f5 12px ); } .qetc-kpi.is-card-hidden .qetc-kpi__value { filter: blur(2px); } .qetc-kpi.is-card-hidden:hover { opacity: 0.75; } .qetc-show-hidden { appearance: none; -webkit-appearance: none; margin: 0 0 12px; padding: 6px 14px; background: #f0f6ff; border: 1px solid #c5dcff; border-left: 4px solid #2271b1; border-radius: 6px; color: #1d4ed8; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .qetc-show-hidden:hover { background: #dbeafe; } .qetc-show-hidden::before { content: "👁 "; } @media print { .qetc-kpi-eye, .qetc-show-hidden { display: none !important; } .qetc-kpi.is-card-hidden { display: none !important; } } /* ============================================================================= * v1.17.7 — KPI target progress bars. * * Rendered below the value when: * · A single employee is filtered on the header, and * · A daily target is set in Settings → QETC Targets for that * employee + metric combo. * * Shows "X / Y (Z%)" plus a coloured bar: green if 100%+, amber 60-99%, * red below 60%. The hint row under the track explains the math * (daily target × days in window). * ========================================================================== */ .qetc-kpi__progress { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; } .qetc-kpi__progress-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-variant-numeric: tabular-nums; } .qetc-kpi__progress-num { color: var(--qetc-muted, #64748b); font-weight: 600; } .qetc-kpi__progress-pct { font-weight: 700; letter-spacing: 0.01em; } .qetc-kpi__progress-track { position: relative; width: 100%; height: 6px; background: #eef0f4; border-radius: 999px; overflow: hidden; } .qetc-kpi__progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .qetc-kpi__progress.is-hit .qetc-kpi__progress-fill { background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%); } .qetc-kpi__progress.is-hit .qetc-kpi__progress-pct { color: #16a34a; } .qetc-kpi__progress.is-mid .qetc-kpi__progress-fill { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); } .qetc-kpi__progress.is-mid .qetc-kpi__progress-pct { color: #b45309; } .qetc-kpi__progress.is-low .qetc-kpi__progress-fill { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); } .qetc-kpi__progress.is-low .qetc-kpi__progress-pct { color: #b91c1c; } .qetc-kpi__progress-hint { font-size: 10.5px; color: var(--qetc-muted, #64748b); letter-spacing: 0.01em; } /* -------- Call outcomes breakdown (Apple segmented summary) ----- */ .qetc-outcomes { background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-lg); padding: 22px 22px 18px; margin-bottom: 20px; box-shadow: var(--qetc-shadow-1); } .qetc-outcomes__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .qetc-outcomes__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--qetc-text); letter-spacing: -0.01em; } .qetc-outcomes__caption { font-size: 12px; color: var(--qetc-muted); } .qetc-outcomes__bar { display: flex; height: 10px; border-radius: 980px; overflow: hidden; background: var(--qetc-hair); margin-bottom: 18px; } .qetc-outcomes__seg { height: 100%; transition: width 0.4s ease; min-width: 2px; } .qetc-outcomes__seg--answered { background: var(--qetc-green); } .qetc-outcomes__seg--no_answer { background: var(--qetc-orange); } .qetc-outcomes__seg--missed { background: var(--qetc-red); } .qetc-outcomes__seg--rejected { background: var(--qetc-pink); } .qetc-outcomes__seg--busy { background: var(--qetc-yellow); } .qetc-outcomes__seg--abandoned { background: var(--qetc-purple); } .qetc-outcomes__seg--canceled { background: var(--qetc-muted-2); } .qetc-outcomes__seg--failed { background: var(--qetc-indigo); } .qetc-outcomes__bar-empty { flex: 1; text-align: center; font-size: 11px; color: var(--qetc-muted); line-height: 10px; background: var(--qetc-hair); } .qetc-outcomes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; } .qetc-outcome { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--qetc-r-sm); transition: background 0.15s; } .qetc-outcome:hover { background: var(--qetc-surface-2); } .qetc-outcome.is-empty { opacity: 0.4; } .qetc-outcome__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--qetc-muted-2); } .qetc-outcome--answered .qetc-outcome__dot { background: var(--qetc-green); } .qetc-outcome--no_answer .qetc-outcome__dot { background: var(--qetc-orange); } .qetc-outcome--missed .qetc-outcome__dot { background: var(--qetc-red); } .qetc-outcome--rejected .qetc-outcome__dot { background: var(--qetc-pink); } .qetc-outcome--busy .qetc-outcome__dot { background: var(--qetc-yellow); } .qetc-outcome--abandoned .qetc-outcome__dot { background: var(--qetc-purple); } .qetc-outcome--canceled .qetc-outcome__dot { background: var(--qetc-muted-2); } .qetc-outcome--failed .qetc-outcome__dot { background: var(--qetc-indigo); } .qetc-outcome__label { font-size: 13px; color: var(--qetc-text-2); font-weight: 500; } .qetc-outcome__value { font-size: 15px; color: var(--qetc-text); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* -------- Chart card --------------------------------------------- */ .qetc-dash__chart { background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-lg); padding: 22px; margin-bottom: 20px; height: 320px; box-shadow: var(--qetc-shadow-1); } .qetc-dash__chart canvas { max-width: 100%; width: 100% !important; height: 100% !important; } /* -------- Tables -------------------------------------------------- */ .qetc-dash__table { background: var(--qetc-surface); border: 1px solid var(--qetc-hair); border-radius: var(--qetc-r-lg); padding: 22px; margin-bottom: 20px; box-shadow: var(--qetc-shadow-1); } .qetc-dash__table h4 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--qetc-text); letter-spacing: -0.01em; } .qetc-leaderboard { width: 100%; border-collapse: collapse; font-size: 13px; } .qetc-leaderboard th, .qetc-leaderboard td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--qetc-hair); } .qetc-leaderboard thead th { color: var(--qetc-muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--qetc-hair-2); background: transparent; } .qetc-leaderboard tbody tr:last-child td { border-bottom: none; } .qetc-leaderboard th.num, .qetc-leaderboard td.num { text-align: right; font-variant-numeric: tabular-nums; } .qetc-leaderboard tbody tr { transition: background 0.12s; } .qetc-leaderboard tbody tr:hover { background: var(--qetc-surface-2); } .qetc-leaderboard tbody td:first-child { font-weight: 500; color: var(--qetc-text); } .qetc-empty { padding: 36px 12px; text-align: center; color: var(--qetc-muted); font-style: normal; font-size: 13px; } /* -------- Recent calls table ------------------------------------- */ .qetc-dash__table--calls { margin-top: 20px; } .qetc-table__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .qetc-table__head h4 { margin: 0; } .qetc-table__filters { display: flex; gap: 8px; flex-wrap: wrap; } .qetc-chip-select { background: var(--qetc-surface-2); color: var(--qetc-text); border: 1px solid var(--qetc-hair); border-radius: 980px; padding: 6px 14px; font-size: 12px; font-family: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .qetc-chip-select:focus { outline: none; border-color: var(--qetc-blue); box-shadow: 0 0 0 3px var(--qetc-blue-soft); } .qetc-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .qetc-table__count { font-size: 12px; color: var(--qetc-muted); } .qetc-ghost-btn { background: var(--qetc-surface); color: var(--qetc-blue); border: 1px solid var(--qetc-hair-2); border-radius: 980px; padding: 7px 18px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .qetc-ghost-btn:hover { background: var(--qetc-blue-soft); border-color: var(--qetc-blue); } .qetc-ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* -------- Badges -------------------------------------------------- */ .qetc-badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 500; border-radius: 980px; border: 1px solid transparent; white-space: nowrap; } .qetc-badge--in { background: var(--qetc-blue-soft); color: var(--qetc-blue); } .qetc-badge--out { background: var(--qetc-green-soft); color: #1d8a40; } .qetc-badge--ok { background: var(--qetc-green-soft); color: #1d8a40; } .qetc-badge--err { background: var(--qetc-red-soft); color: var(--qetc-red); } .qetc-badge--warn { background: var(--qetc-orange-soft); color: #b36a00; } .qetc-badge--neutral { background: var(--qetc-surface-2); color: var(--qetc-muted); border-color: var(--qetc-hair); } .qetc-num-cell { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--qetc-text-2); } .qetc-calls td { vertical-align: middle; } /* -------- Footer -------------------------------------------------- */ .qetc-dash__footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--qetc-hair); font-size: 12px; color: var(--qetc-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .qetc-dash-locked { padding: 60px 24px; text-align: center; color: var(--qetc-muted); font-size: 15px; } /* -------- Employee pill bar — radio-style filter row ------------ Horizontal pills, scrollable on narrow screens. One click selects an employee (or "All"); the hidden