/* =========================================================================== DVO Helpdesk — "datavoice options" reskin. Neumorphic surfaces · violet accent · emerald actions · gradient wordmark. Light + dark (follows the OS via prefers-color-scheme). This file restyles the EXISTING class structure — no markup changes needed. The pre-reskin stylesheet is preserved in /backup/original-source/styles.css. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Hanken+Grotesque:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap'); /* ---- Design tokens ------------------------------------------------------- */ :root { --bg:#e8eaf1; --surface:#eef1f7; --press:#e3e6ee; --text:#2b2f3a; --muted:#6c7280; --faint:#9aa0b2; --line:rgba(140,148,170,0.18); --purple:#7c3aed; --purple-2:#8b5cf6; --purple-bg:#ece8fb; --green:#16bd6f; --green-2:#0fa45f; --green-deep:#0c7a47; --crit:#d4453f; --shadow-dark:rgba(167,174,196,0.62); --shadow-light:rgba(255,255,255,0.96); --raise:6px 6px 16px var(--shadow-dark), -6px -6px 14px var(--shadow-light); --raise-sm:4px 4px 10px var(--shadow-dark), -4px -4px 9px var(--shadow-light); --inset:inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); --logo-grad:linear-gradient(90deg,#14b8a6 0%,#3b82f6 52%,#d6336c 100%); --cta:linear-gradient(135deg,#1bcd7a,#10a866); --open-bg:#e4edfc; --open-fg:#2c5fd0; --prog-bg:#ece7fb; --prog-fg:#7c3aed; --hold-bg:#edeef3; --hold-fg:#6b7280; --resolved-bg:#dcf3e6; --resolved-fg:#1a8b53; --closed-bg:#dcf3e6; --closed-fg:#15824b; /* Closed = green (per request) */ --low-bg:#dcf3e6; --low-fg:#1a8b53; --med-bg:#faf0d4; --med-fg:#956712; --high-bg:#fce3d2; --high-fg:#b1571f; --crit-bg:#fbdcdc; --crit-fg:#bd3636; --amber-bg:#fbf0d4; --amber-fg:#9a6b12; --amber-accent:#e0a93b; --info-bg:#e4edfc; --info-fg:#2c5fd0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#15161f; --surface:#22242f; --press:#1b1d26; --text:#e8eaf2; --muted:#a0a6ba; --faint:#787e92; --line:rgba(255,255,255,0.06); --purple:#a78bfa; --purple-2:#bca6fc; --purple-bg:#2a2548; --green:#22c47e; --green-2:#16a566; --green-deep:#3fae6f; --crit:#e06a6a; --shadow-dark:rgba(0,0,0,0.55); --shadow-light:rgba(255,255,255,0.045); --open-bg:#1e2a44; --open-fg:#93b6f6; --prog-bg:#2a2348; --prog-fg:#bda6fb; --hold-bg:#262833; --hold-fg:#a0a6ba; --resolved-bg:#16331f; --resolved-fg:#62cf90; --closed-bg:#16331f; --closed-fg:#62cf90; /* Closed = green (per request) */ --low-bg:#16331f; --low-fg:#62cf90; --med-bg:#332b14; --med-fg:#d8b25f; --high-bg:#3a2417; --high-fg:#e6975f; --crit-bg:#3a1d1d; --crit-fg:#ef8f8f; --amber-bg:#332b14; --amber-fg:#d8b25f; --amber-accent:#c79433; --info-bg:#1e2a44; --info-fg:#93b6f6; } } /* Manual override: the floating toggle (theme.js) sets data-theme="dark" on to force dark even when the OS is light. (The "light" choice is handled above by :not([data-theme="light"]).) */ :root[data-theme="dark"] { --bg:#15161f; --surface:#22242f; --press:#1b1d26; --text:#e8eaf2; --muted:#a0a6ba; --faint:#787e92; --line:rgba(255,255,255,0.06); --purple:#a78bfa; --purple-2:#bca6fc; --purple-bg:#2a2548; --green:#22c47e; --green-2:#16a566; --green-deep:#3fae6f; --crit:#e06a6a; --shadow-dark:rgba(0,0,0,0.55); --shadow-light:rgba(255,255,255,0.045); --open-bg:#1e2a44; --open-fg:#93b6f6; --prog-bg:#2a2348; --prog-fg:#bda6fb; --hold-bg:#262833; --hold-fg:#a0a6ba; --resolved-bg:#16331f; --resolved-fg:#62cf90; --closed-bg:#16331f; --closed-fg:#62cf90; /* Closed = green (per request) */ --low-bg:#16331f; --low-fg:#62cf90; --med-bg:#332b14; --med-fg:#d8b25f; --high-bg:#3a2417; --high-fg:#e6975f; --crit-bg:#3a1d1d; --crit-fg:#ef8f8f; --amber-bg:#332b14; --amber-fg:#d8b25f; --amber-accent:#c79433; --info-bg:#1e2a44; --info-fg:#93b6f6; } /* ---- Floating theme toggle (built by theme.js, on every page) ------------ */ .theme-toggle { position: fixed; right: 28px; bottom: 28px; z-index: 200; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; background: var(--surface); box-shadow: var(--raise); color: var(--purple); display: flex; align-items: center; justify-content: center; transition: background .25s, color .25s; } .theme-toggle:hover { color: var(--purple-2); } .theme-toggle svg { width: 23px; height: 23px; } * { box-sizing: border-box; } html { zoom: 1.05; } body { font-family: "Hanken Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--text); position: relative; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background: rgba(120,128,150,0.4); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } /* ---- Header: dark indigo glass band + gradient wordmark ------------------ */ header { background: radial-gradient(120% 320% at 82% -120%, #2a1f5e 0%, #181a3e 46%, #0e1030 100%); color: #fff; padding: 18px 28px; display: block; position: relative; } /* Floating glass nav pill (built by enhanceDvoHeader in auth.js / portal.js). */ .nav-pill { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 11px 14px 11px 20px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 17px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; z-index: 60; /* keep nav dropdowns above the overlapping stat cards */ } /* Nav links sit to the LEFT (right after the wordmark); the search + bell + avatar are pushed to the far right by .global-search's own margin-left:auto. */ .nav-pill .user-bar { flex: 1; min-width: 0; } /* Pages where the pill isn't built (login/setup) keep a simple centered band. */ header > h1, header > .user-bar { max-width: 1340px; margin-left: auto; margin-right: auto; } /* Gradient "datavoice options" wordmark + Helpdesk tag. */ header h1 .wm-data { background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } header h1 .wm-options { color: #fff; -webkit-text-fill-color: #fff; margin-left: 5px; } header h1 .wm-tag { display: inline-block; margin-left: 11px; padding: 4px 10px; border-radius: 8px; background: rgba(167,139,250,0.22); color: #cbb8ff; -webkit-text-fill-color: #cbb8ff; font-family: "Hanken Grotesque", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } /* Client portal tag ("Support") is green/teal instead of the staff lavender. */ header h1 .wm-tag.wm-tag-support { background: rgba(45,212,191,0.22); color: #9beede; -webkit-text-fill-color: #9beede; } header h1 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; } header h1 .home-link, header h1 a { color: #fff; text-decoration: none; } /* Gradient-treat the wordmark text. */ header h1 a { background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .user-bar { display: flex; align-items: center; gap: 7px; font-size: 14px; flex-wrap: nowrap; min-width: 0; } .user-name { opacity: 0.9; } /* Search + bell + avatar stay together as one cluster pinned to the far right, so the avatar never wraps off on its own when the nav gets wide. The whole bar is ONE line; the search box shrinks first if space gets tight. */ .user-bar-right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; min-width: 0; } .user-bar-right .global-search { margin-left: 0; min-width: 0; flex: 0 1 auto; } .nav-link { flex: none; } /* nav links → translucent glass pills */ .nav-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.72); text-decoration: none; font-weight: 600; font-size: 13.5px; border: none; padding: 8px 11px; border-radius: 11px; white-space: nowrap; } .nav-link .nav-ic { flex: none; opacity: 0.85; } .nav-link:hover { background: rgba(219,233,253,0.92); color: #1d4ed8; } .home-link { color: #fff; text-decoration: none; } /* logout pill (login-less pages) */ .logout-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.18); padding: 7px 14px; border-radius: 11px; cursor: pointer; font-weight: 600; } .logout-btn:hover { background: rgba(255,255,255,0.18); } /* ---- Global search (in header) ------------------------------------------- */ .global-search { position: relative; display: flex; gap: 8px; align-items: center; margin-left: auto; padding: 5px 13px 5px 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; } .gsearch-type { margin-right: 2px; } .gsearch-ic { width: 16px; height: 16px; flex: none; background: rgba(255,255,255,0.6); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center/contain no-repeat; } .gsearch-input { padding: 4px 2px; border: none; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font-size: 13.5px; flex: 1 1 60px; width: 150px; min-width: 0; } .gsearch-input::placeholder { color: rgba(255,255,255,0.55); } .gsearch-input:focus { outline: none; } .gsearch-type { padding: 5px 8px; border: none; border-radius: 8px; background: rgba(255,255,255,0.14); color: #fff; font-size: 12px; } .gsearch-results { position: absolute; top: 120%; left: 0; width: 380px; max-height: 420px; overflow-y: auto; background: var(--surface); border: none; border-radius: 14px; box-shadow: 0 18px 44px rgba(10,12,30,0.32); z-index: 60; } .gsearch-group { padding: 8px 14px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); background: var(--press); border-bottom: 1px solid var(--line); font-weight: 700; } .gsearch-item { display: block; padding: 10px 14px; color: var(--text); text-decoration: none; font-size: 13px; border-bottom: 1px solid var(--line); line-height: 1.4; } .gsearch-item:hover { background: var(--purple-bg); } .gsearch-item .muted { color: var(--muted); } .gsearch-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; } /* ---- Avatars + account dropdown ------------------------------------------ */ .avatar-circle { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg,#2dd4bf,#f472b6); color: #fff; font-weight: 700; border: none; padding: 0; flex-shrink: 0; } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-initials { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .avatar-sm { width: 38px; height: 38px; font-size: 14px; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); } .avatar-md { width: 44px; height: 44px; font-size: 16px; } .avatar-lg { width: 96px; height: 96px; font-size: 32px; } .avatar-xs { width: 22px; height: 22px; font-size: 10px; } .avatar-sm:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.6); } .profile-wrap { position: relative; } .profile-menu { position: absolute; top: 50px; right: 0; width: 250px; background: var(--surface); color: var(--text); border: none; border-radius: 16px; box-shadow: 0 18px 44px rgba(10,12,30,0.32); padding: 8px; z-index: 50; } .profile-head { display: flex; align-items: center; gap: 10px; padding: 10px; } .profile-id { min-width: 0; } .profile-name { font-weight: 700; font-size: 14px; } .profile-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; color: var(--text); border: none; border-top: 1px solid var(--line); padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 9px; } .profile-item .pi-ic { color: var(--muted); flex: none; } .profile-item.profile-signout .pi-ic { color: var(--crit); } .profile-item:first-of-type { border-top: none; } .profile-item:hover { background: var(--purple-bg); } .profile-signout { color: var(--crit); font-weight: 700; } .profile-signout:hover { background: var(--crit-bg); } /* ---- Notifications ------------------------------------------------------- */ .notif-wrap { position: relative; } .notif-bell { position: relative; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #fff; border-radius: 11px; padding: 8px 11px; cursor: pointer; font-size: 14px; line-height: 1; } .notif-bell:hover { background: rgba(255,255,255,0.18); } .notif-count { position: absolute; top: -6px; right: -6px; background: #f0506e; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; } .notif-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 330px; max-height: 420px; overflow: auto; background: var(--surface); color: var(--text); border-radius: 16px; box-shadow: 0 18px 44px rgba(10,12,30,0.32); z-index: 50; } .notif-item { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 13px; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--press); } .notif-item.unread { background: var(--open-bg); } .notif-time { color: var(--faint); font-size: 11px; margin-top: 2px; } .notif-empty { padding: 16px; color: var(--muted); font-size: 13px; } .notif-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--line); font-family: "Plus Jakarta Sans", sans-serif; } .notif-action { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 12.5px; font-weight: 600; padding: 2px 6px; } .notif-action:hover { background: none; text-decoration: underline; } .notif-list { max-height: 360px; overflow-y: auto; } /* ---- Layout -------------------------------------------------------------- */ main { max-width: 800px; margin: 30px auto; padding: 0 28px; display: grid; gap: 24px; } main.wide { max-width: 1500px; } main.dash { max-width: 1200px; } .card { background: var(--surface); border-radius: 20px; box-shadow: var(--raise); padding: 24px; } .card h2 { margin-top: 0; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; letter-spacing: -0.01em; } .back-link { display: inline-block; margin-bottom: 16px; color: var(--purple); text-decoration: none; font-weight: 600; } .back-link:hover { text-decoration: underline; } /* Give the back-link a little breathing room below the dark header band. */ main:has(> .back-link) { padding-top: 18px; } .muted { color: var(--muted); } .error { color: var(--crit); font-weight: 600; min-height: 1em; margin: 0; } .form-ok { color: var(--green-deep); font-weight: 600; } h1, h2, h3 { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -0.01em; } /* ---- Forms / inputs ------------------------------------------------------ */ form { display: grid; gap: 12px; } form[hidden] { display: none; } /* Field labels: small uppercase + letter-spacing (matches the mockup forms). */ label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); } label > input, label > select, label > textarea { font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text); } label .muted { text-transform: none; letter-spacing: normal; font-weight: 400; } /* Button-/control-like labels keep their natural casing. */ .attach-btn, .time-billable { text-transform: none; letter-spacing: normal; } input, textarea, select { padding: 11px 13px; border: none; border-radius: 11px; font: inherit; background: var(--press); color: var(--text); box-shadow: var(--inset); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--purple); outline-offset: 1px; } input[type="checkbox"] { width: auto; padding: 0; border: 0; box-shadow: none; accent-color: var(--green); } .checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; } .checkbox input { width: auto; } /* ---- Buttons ------------------------------------------------------------- */ button { justify-self: start; background: var(--cta); color: #fff; border: none; padding: 11px 20px; border-radius: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 18px rgba(16,160,90,0.28); font-family: inherit; } button:hover { filter: brightness(1.03); } .btn-primary { background: var(--cta); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 13px; box-shadow: 0 8px 18px rgba(16,160,90,0.32); display: inline-flex; align-items: center; gap: 8px; } .btn-primary:hover { filter: brightness(1.03); } .btn-small { background: var(--cta); color: #fff; border: none; padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: var(--raise-sm); } .btn-small:hover { filter: brightness(1.03); } .btn-ghost { background: var(--surface); color: var(--text); border: none; box-shadow: var(--raise-sm); } .btn-ghost:hover { color: var(--purple); filter: none; } .btn-secondary { background: var(--surface); color: var(--text); box-shadow: var(--raise-sm); } .btn-secondary:hover { color: var(--purple); } .btn-danger, .btn-small.btn-danger { background: var(--crit); color: #fff; border: none; box-shadow: var(--raise-sm); } .btn-danger:hover, .btn-small.btn-danger:hover { filter: brightness(1.05); } .btn-link { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 13px; padding: 4px 6px; box-shadow: none; font-weight: 600; } .btn-link:hover { background: none; text-decoration: underline; filter: none; } .btn-link.danger { color: var(--crit); } .form-actions, .edit-actions { display: flex; gap: 10px; align-items: center; } .edit-error { color: var(--crit); font-weight: 600; margin: 0; } .result-box { margin-top: 10px; padding: 10px 12px; background: var(--low-bg); color: var(--low-fg); border: none; border-radius: 10px; font-size: 14px; } /* ---- Toasts (global error/info popups, see js/toast.js) ------------------- */ #toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 9999; pointer-events: none; } .toast { max-width: 420px; padding: 10px 18px; border-radius: 10px; font-size: 14px; background: #23262f; color: #f0f1f5; box-shadow: 0 6px 24px rgba(0,0,0,0.25); border-left: 4px solid #ef4444; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; } .toast-info { border-left-color: #3b82f6; } .toast-show { opacity: 1; transform: translateY(0); } /* ---- Empty states ---------------------------------------------------------- */ .empty-state { text-align: center; padding: 36px 16px; color: var(--muted); } .empty-state .empty-ic { font-size: 30px; display: block; margin-bottom: 8px; } .empty-state p { margin: 4px 0 12px; } /* ---- Bug Reports (beta tracker) ------------------------------------------- */ .bug-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 18px 0 4px; } .bug-group-title:first-child { margin-top: 0; } .bug-row { border-top: 1px solid var(--line); } .bug-row summary { display: flex; align-items: center; gap: 10px; padding: 10px 4px; cursor: pointer; list-style: none; } .bug-row summary::-webkit-details-marker { display: none; } .bug-status-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; } .bug-open .bug-status-dot { background: #ef4444; } .bug-fixed .bug-status-dot { background: #22c55e; } .bug-title { flex: 1; font-weight: 600; } .bug-fixed .bug-title { color: var(--muted); font-weight: 500; } .bug-meta { font-size: 12px; color: var(--muted); white-space: nowrap; } .bug-body { padding: 0 4px 14px 23px; } .bug-desc { margin: 4px 0 8px; line-height: 1.55; } /* ---- Login --------------------------------------------------------------- */ .login-card { max-width: 380px; margin: 56px auto; } #forgot-link a, #twofa-resend { color: var(--purple); } /* "Remember this device" checkbox on the 2FA step — inline, not a stacked field. */ .twofa-remember { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; color: var(--muted); cursor: pointer; } .twofa-remember input { width: auto; margin: 0; accent-color: var(--purple); } /* ---- Auth split-screen (login) — dark brand panel + neumorphic card ------ */ .auth-body { margin: 0; } .auth-split { display: flex; min-height: 100vh; } .auth-brand { position: relative; flex: 0 0 44%; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 46px 52px; background: radial-gradient(130% 120% at 75% 5%, #2a1f5e 0%, #181a3e 46%, #0e1030 100%); } .auth-brand::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 55% at 18% 95%, rgba(124,58,237,0.45), transparent 70%); } .auth-brand > * { position: relative; z-index: 1; } .auth-brand-logo { display: flex; align-items: center; gap: 12px; } .auth-wm { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; } .auth-wm-data { background: linear-gradient(90deg,#2dd4bf,#60a5fa 52%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .auth-wm-options { color: #fff; } .auth-wm-tag { padding: 4px 11px; border-radius: 8px; background: rgba(167,139,250,0.22); color: #cbb8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } /* Client/Support flavour of the login brand panel: green tag + teal eyebrow. */ .auth-wm-tag-support { background: rgba(45,212,191,0.22); color: #9beede; } .auth-eyebrow-support { color: #9beede; } .auth-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #c9b8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; } .auth-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .auth-headline { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.02em; color: #fff; margin: 0 0 16px; line-height: 1.08; } .auth-headline span { background: linear-gradient(90deg,#a78bfa,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .auth-sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 380px; margin: 0; } .auth-brand-foot { display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,0.4); font-size: 12.5px; } .auth-brand-foot .auth-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px; } .auth-card { width: 100%; max-width: 400px; margin: 0; padding: 40px 38px; } .auth-card-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; } .auth-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 12px; color: var(--faint); } .auth-switch { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; } .auth-switch a { color: var(--purple); font-weight: 600; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } /* ---- Client portal info footer ------------------------------------------- */ .portal-footer { margin-top: 56px; background: var(--surface); border-top: 1px solid var(--line); } .portal-footer-inner { max-width: 1000px; margin: 0 auto; padding: 34px 28px 20px; display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; } .pf-brand { flex: 1 1 240px; min-width: 220px; } .pf-wm { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; } .pf-wm .wm-data { background: linear-gradient(90deg,#2dd4bf,#60a5fa 55%,#f472b6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .pf-wm .wm-options { color: var(--text); margin-left: 5px; } .pf-tag { margin: 10px 0 0; font-size: 13px; color: var(--muted); max-width: 280px; } .pf-col { display: flex; flex-direction: column; gap: 10px; } .pf-head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; } .pf-line { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); text-decoration: none; } a.pf-line:hover { color: var(--purple); } .pf-line svg { width: 15px; height: 15px; flex: none; color: var(--purple); } .pf-social { display: flex; gap: 10px; } .pf-social a { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); box-shadow: var(--raise-sm); color: var(--purple); } .pf-social a:hover { color: var(--purple-2); } .pf-social svg { width: 18px; height: 18px; } .pf-bottom { max-width: 1000px; margin: 0 auto; padding: 14px 28px 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); } @media (max-width: 860px) { .auth-split { flex-direction: column; } .auth-brand { flex: none; padding: 32px; gap: 22px; } .auth-headline { font-size: 30px; } .auth-main { padding: 28px 18px; } } /* ---- Pill badges --------------------------------------------------------- */ .badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--press); color: var(--muted); } /* User role badges: Global Admin = purple, others = neutral grey. */ .badge.role-ga { background: var(--purple-bg); color: var(--purple); } .twofa-on { color: var(--amber-fg); font-weight: 600; } .priority-low { background: var(--low-bg); color: var(--low-fg); } .priority-medium { background: var(--med-bg); color: var(--med-fg); } .priority-high { background: var(--high-bg); color: var(--high-fg); } .priority-critical { background: var(--crit-bg); color: var(--crit-fg); } .chip { display: inline-block; padding: 3px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; border: none; background: var(--press); color: var(--muted); white-space: nowrap; } .chip.st-open { color: var(--open-fg); background: var(--open-bg); } .chip.st-in-progress { color: var(--prog-fg); background: var(--prog-bg); } .chip.st-on-hold { color: var(--hold-fg); background: var(--hold-bg); } .chip.st-resolved { color: var(--resolved-fg); background: var(--resolved-bg); } .chip.st-closed { color: var(--closed-fg); background: var(--closed-bg); } a.import-badge { text-decoration: none; } a.import-badge:hover { text-decoration: underline; } .import-badge { display: inline-block; background: var(--purple-bg); color: var(--purple); border: none; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; } .merged-banner { margin: 8px 0 12px; padding: 9px 12px; border-radius: 8px; font-size: 13px; background: var(--purple-bg); color: var(--purple); border-left: 3px solid var(--purple); } .merged-banner a { color: inherit; text-decoration: underline; } .via-email { font-size: 11px; background: var(--info-bg); color: var(--info-fg); padding: 1px 7px; border-radius: 999px; margin-left: 4px; } /* SLA pills */ .sla-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .sla-green { background: var(--low-bg); color: var(--low-fg); } .sla-yellow { background: var(--med-bg); color: var(--med-fg); } .sla-red { background: var(--crit-bg); color: var(--crit-fg); } .sla-done { background: var(--press); color: var(--muted); } /* ---- Dashboard ----------------------------------------------------------- */ .dashboard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dashboard-head h2 { font-size: 28px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 8px; } .stat-card { background: var(--surface); border-radius: 18px; box-shadow: var(--raise); padding: 20px 22px; } .stat-icon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--purple-bg); color: var(--purple); } .stat-icon.tone-open { background: var(--open-bg); color: var(--open-fg); } .stat-icon.tone-crit { background: var(--crit-bg); color: var(--crit-fg); } .stat-icon.tone-low { background: var(--low-bg); color: var(--low-fg); } .stat-icon.tone-purple { background: var(--purple-bg); color: var(--purple); } .stat-icon.tone-closed { background: var(--closed-bg); color: var(--closed-fg); } .stat-number { font-family: "Plus Jakarta Sans", sans-serif; font-size: 32px; font-weight: 800; color: var(--purple); line-height: 1; } .stat-number.tone-crit { color: var(--crit-fg); } .stat-number.tone-low { color: var(--text); } .stat-number.tone-closed { color: var(--closed-fg); } /* Analytics summary numbers are colour-coded per metric (scoped so the dashboard keeps purple). */ #a-cards .stat-number.tone-open { color: var(--open-fg); } #a-cards .stat-number.tone-low { color: var(--low-fg); } .stat-label { color: var(--muted); font-size: 13px; margin-top: 6px; } /* Filters */ .filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; } .filter-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; } /* The class sets display:flex, which would otherwise override [hidden]. */ .filter-field[hidden] { display: none; } .filter-field select { width: 100%; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); padding: 9px 12px; border: none; border-radius: 11px; background: var(--press); box-shadow: var(--inset); cursor: pointer; } .filters #f-reset { flex: 0 0 auto; margin-bottom: 1px; } .filter-btn { background: var(--surface); border: none; color: var(--text); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; box-shadow: var(--raise-sm); } .filter-btn.active { background: var(--purple); color: #fff; } /* Ticket rows */ .ticket-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 14px; } .ticket-row:last-child { border-bottom: none; } .ticket-row:hover { background: var(--press); } /* Closed/Resolved tickets: greyed out (still clickable), brighten on hover. */ .ticket-row.ticket-done { opacity: 0.55; transition: opacity .15s; } .ticket-row.ticket-done:hover { opacity: 1; } /* ---- Merge selection (dashboard) ----------------------------------------- */ .t-merge { display: flex; align-items: center; padding-top: 2px; flex: none; margin: 0; } .t-merge-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--purple); box-shadow: none; } .ticket-row.row-selected { box-shadow: inset 3px 0 0 var(--purple); background: var(--purple-bg); } .merge-bar { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(140%); display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--raise); z-index: 120; opacity: 0; transition: transform .18s ease, opacity .18s ease; pointer-events: none; } .merge-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .merge-bar-count { font-weight: 700; font-size: 13.5px; color: var(--text); } .merge-overlay { position: fixed; inset: 0; background: rgba(10,12,30,0.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } /* An overlay placed in the HTML and toggled via [hidden] needs this, because the display:flex above otherwise overrides the browser's [hidden]{display:none}. */ .merge-overlay[hidden] { display: none; } .merge-modal { width: 100%; max-width: 460px; margin: 0; } .merge-modal h2 { margin-top: 0; } .merge-opts { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; } .merge-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--press); box-shadow: var(--inset); cursor: pointer; font-size: 14px; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--text); } .merge-opt input { width: auto; box-shadow: none; accent-color: var(--purple); } .overdue-badge { flex-shrink: 0; display: inline-block; background: var(--crit-bg); color: var(--crit-fg); border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; } .t-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .t-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; text-decoration: none; color: inherit; } .t-id { font-weight: 600; font-family: "JetBrains Mono", ui-monospace, monospace; text-decoration: none; color: var(--purple); white-space: nowrap; flex: 0 0 auto; } .t-subject { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); font-weight: 700; } .t-top:hover .t-subject { text-decoration: underline; } .t-sub { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); min-width: 0; } .t-reporter { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; } .t-lastresp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Small green SLA timer line under the reporter/response row. */ .t-sla { margin-top: 5px; } .t-sla .sla-badge { display: inline-flex; align-items: center; gap: 5px; } .t-category { display: flex; align-items: center; gap: 8px; margin-top: 5px; } .t-cat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); flex-shrink: 0; } .t-category .row-select { width: 200px; flex: none; font-size: 12px; padding: 5px 9px; } .resp-agent { color: var(--muted); } .resp-client { color: var(--open-fg); font-weight: 600; } .t-reporter-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; } .t-reporter-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; } .t-assignee { flex: 0 0 130px; font-size: 13px; } .row-sla { flex: 0 0 95px; display: flex; justify-content: flex-end; } .row-select { flex: 0 0 130px; font-size: 12px; font-weight: 600; padding: 6px 9px; border: none; border-radius: 9px; background: var(--press); box-shadow: var(--inset); color: var(--text); cursor: pointer; } .row-select.prio-low { background: var(--low-bg); color: var(--low-fg); box-shadow: none; } .row-select.prio-medium { background: var(--med-bg); color: var(--med-fg); box-shadow: none; } .row-select.prio-high { background: var(--high-bg); color: var(--high-fg); box-shadow: none; } .row-select.prio-critical { background: var(--crit-bg); color: var(--crit-fg); box-shadow: none; } .row-select.st-open { background: var(--open-bg); color: var(--open-fg); box-shadow: none; } .row-select.st-in-progress { background: var(--prog-bg); color: var(--prog-fg); box-shadow: none; } .row-select.st-on-hold { background: var(--hold-bg); color: var(--hold-fg); box-shadow: none; } .row-select.st-resolved { background: var(--resolved-bg); color: var(--resolved-fg); box-shadow: none; } .row-select.st-closed { background: var(--closed-bg); color: var(--closed-fg); box-shadow: none; } /* The OPEN dropdown list: keep options neutral so they don't all inherit the colour of the currently-selected status/priority. */ .row-select option { background: var(--surface); color: var(--text); font-weight: 600; } .row-controls { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; } .row-line { display: flex; align-items: center; gap: 8px; } .row-line-label { width: 58px; text-align: right; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); } .row-line .row-select { width: 150px; flex: none; box-sizing: border-box; } .row-line .t-assignee { width: 150px; flex: none; text-align: left; } /* Pager */ .pager { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; padding: 4px; } .pager[hidden] { display: none; } /* respect the hidden attribute (e.g. on contact/company detail views) */ .pager:empty { display: none; } /* no controls → take up no space */ .pager-info { color: var(--muted); font-size: 13px; } /* "Per page" always sits at the far right of the bar. */ .pager .pager-size { margin-left: auto; } .pager-size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .pager-size select { padding: 6px 10px; border-radius: 9px; border: none; background: var(--press); box-shadow: var(--inset); color: var(--text); } /* A pager placed ABOVE a list: tuck it up against the list, no top gap. */ .pager-top { margin-top: 0; margin-bottom: 12px; } /* ---- App settings toggles ------------------------------------------------ */ .set-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); } .set-row:last-child { border-bottom: none; } .set-text strong { font-size: 14px; } .set-text .muted { font-size: 13px; margin-top: 3px; } .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; cursor: pointer; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; inset: 0; background: var(--press); box-shadow: var(--inset); border-radius: 999px; transition: background 0.15s; } .switch-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; box-shadow: var(--raise-sm); transition: transform 0.15s; } .switch input:checked + .switch-slider { background: var(--purple); } .switch input:checked + .switch-slider::before { transform: translateX(20px); } .switch input:disabled + .switch-slider { opacity: 0.5; cursor: not-allowed; } .ai-controls { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 6px; } .ai-controls label { font-size: 12px; } .ai-controls select { padding: 8px 12px; border-radius: 10px; border: none; background: var(--press); box-shadow: var(--inset); color: var(--text); } /* ---- Ticket detail ------------------------------------------------------- */ .detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .detail-head h2 { margin: 0; } dl.fields { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 18px 0; } dl.fields dt { font-weight: 600; color: var(--faint); } dl.fields dd { margin: 0; color: var(--text); } .inline-select { font-size: 13px; padding: 7px 11px; max-width: 240px; border-radius: 10px; } .description { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--press); border: none; box-shadow: var(--inset); border-radius: 10px; padding: 12px 14px; max-height: 220px; overflow-y: auto; } .description-pointer { background: none; box-shadow: none; border: none; padding: 0; font-style: italic; color: var(--muted); } .desc-origin-ic { vertical-align: -2px; color: var(--purple); } /* Two-column body of the ticket-detail card: details on the left, AI summary panel on the right (collapses to a stack on narrow screens). */ .detail-body-row { display: flex; gap: 22px; align-items: flex-start; } .detail-body-main { flex: 1 1 0; min-width: 0; } .detail-body-main .detail-head { margin-top: 0; } .ai-summary-panel { flex: 0 0 clamp(240px, 34%, 320px); align-self: flex-start; background: var(--purple-bg); box-shadow: var(--inset); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; } .ai-summary-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--purple); } .ai-summary-head .ai-ic { color: var(--purple); flex: none; } .ai-summary-head span { flex: 1 1 auto; } .ai-summary-refresh { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 1rem; line-height: 1; padding: 2px 4px; border-radius: 6px; } .ai-summary-refresh:hover { background: rgba(124,58,237,0.12); } .ai-summary-body { font-size: 0.92rem; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; overflow-y: auto; } .ai-summary-placeholder { font-style: italic; } .ai-summary-text { white-space: normal; } .ai-summary-meta { margin-top: 10px; font-size: 0.78rem; color: var(--faint); } .ai-summary-gen { margin-top: 10px; font-size: 0.82rem; padding: 7px 12px; } .ai-suggest-btn { margin-left: 8px; font-size: 0.8rem; color: var(--purple); cursor: pointer; } .ai-suggest-btn:disabled { opacity: 0.6; cursor: default; } @media (max-width: 760px) { .detail-body-row { flex-direction: column; } .ai-summary-panel { flex: none; width: 100%; } } .assign-actions, .sla-actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .assign-actions select, .sla-actions input[type="datetime-local"] { padding: 9px 12px; border: none; border-radius: 10px; font: inherit; background: var(--press); box-shadow: var(--inset); color: var(--text); } .sla-actions input[type="datetime-local"] { font-size: 13px; max-width: 220px; } .status-actions { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; } .status-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .status-btn { background: var(--surface); color: var(--text); border: none; padding: 9px 16px; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: 13.5px; box-shadow: var(--raise-sm); } .status-btn[data-status="Open"] { background: var(--open-bg); color: var(--open-fg); } .status-btn[data-status="In Progress"] { background: var(--prog-bg); color: var(--prog-fg); } .status-btn[data-status="On Hold"] { background: var(--hold-bg); color: var(--hold-fg); } .status-btn[data-status="Resolved"] { background: var(--resolved-bg); color: var(--resolved-fg); } .status-btn[data-status="Closed"] { background: var(--closed-bg); color: var(--closed-fg); } .status-btn:hover { filter: brightness(0.98); } .status-btn.current { color: #fff; cursor: default; box-shadow: none; } .status-btn.current[data-status="Open"] { background: var(--open-fg); } .status-btn.current[data-status="In Progress"] { background: var(--prog-fg); } .status-btn.current[data-status="On Hold"] { background: var(--hold-fg); } .status-btn.current[data-status="Resolved"] { background: var(--resolved-fg); } .status-btn.current[data-status="Closed"] { background: var(--closed-fg); } /* Reply / note compose */ .box-hint { margin-top: -4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); } .reply-card { border-left: 4px solid var(--open-fg); } .reply-card .box-hint { color: var(--open-fg); } .note-card { background: var(--amber-bg); border-left: 4px solid var(--amber-accent); } .note-card .box-hint { color: var(--amber-fg); } .btn-note { background: var(--amber-accent); box-shadow: var(--raise-sm); } .btn-note:hover { filter: brightness(1.05); } .btn-reply-open { margin-top: 8px; background: var(--open-bg); color: var(--open-fg); border: none; box-shadow: none; border-radius: 11px; padding: 10px 18px; font-weight: 700; cursor: pointer; } .btn-reply-open:hover { filter: brightness(0.97); } .reply-buttons { display: flex; gap: 10px; align-items: center; } .btn-note-open { margin-top: 8px; background: var(--amber-bg); color: var(--amber-fg); border: none; box-shadow: none; border-radius: 11px; padding: 10px 18px; font-weight: 700; cursor: pointer; } .btn-note-open:hover { filter: brightness(0.97); } /* Recipient picker */ .recip-field { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; } .recip-label { width: 26px; flex-shrink: 0; padding-top: 9px; font-size: 13px; font-weight: 600; color: var(--muted); } .recip-box { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border: none; border-radius: 11px; padding: 5px 7px; min-height: 38px; cursor: text; background: var(--press); box-shadow: var(--inset); } .recip-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--purple-bg); color: var(--purple); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; } .recip-chip button { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; box-shadow: none; } .recip-input { flex: 1; min-width: 130px; border: none; outline: none; padding: 4px; font: inherit; background: transparent; box-shadow: none; color: var(--text); } .recip-suggest { position: absolute; top: 100%; left: 34px; right: 0; z-index: 20; margin-top: 4px; background: var(--surface); border: none; border-radius: 12px; box-shadow: 0 12px 30px rgba(10,12,30,0.22); max-height: 220px; overflow-y: auto; } .recip-option { display: flex; flex-direction: column; padding: 8px 12px; cursor: pointer; } .recip-option.active, .recip-option:hover { background: var(--purple-bg); } .recip-opt-name { font-size: 13px; font-weight: 600; } .recip-opt-email { font-size: 12px; color: var(--muted); } /* Reporter autocomplete on the New Ticket form (dropdown anchored to the input). Keep the base label's grid layout (subheading above a full-width input) — only add positioning context so the dropdown anchors correctly. */ .reporter-field { position: relative; } .reporter-suggest { left: 0; } .quote-toggle { display: inline-block; background: var(--press); color: var(--muted); border: none; border-radius: 6px; height: 20px; line-height: 18px; padding: 0 10px; margin: 6px 0 0; font-weight: 700; letter-spacing: 1px; cursor: pointer; box-shadow: none; } .quote-toggle:hover { filter: brightness(0.97); } .quoted-thread { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); } /* Templates toolbar */ .tpl-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .tpl-picker { font-size: 13px; padding: 7px 10px; border: none; border-radius: 9px; background: var(--press); box-shadow: var(--inset); color: var(--text); max-width: 220px; } .tpl-save { font-size: 13px; padding: 7px 12px; background: var(--purple-bg); color: var(--purple); border: none; border-radius: 9px; cursor: pointer; box-shadow: none; font-weight: 600; } .tpl-save:hover { filter: brightness(0.97); } /* Templates management page */ .tpl-group-head { margin: 18px 0 8px; font-size: 14px; color: var(--text); font-weight: 700; font-family: "Plus Jakarta Sans", sans-serif; } .tpl-group-head:first-child { margin-top: 0; } .tpl-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .tpl-row-title { font-weight: 700; margin-right: 8px; } .tpl-kind-chip { display: inline-block; font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--open-bg); color: var(--open-fg); vertical-align: middle; font-weight: 600; } /* Template kind chips: client-reply = blue, internal-note = amber/orange. */ .tpl-kind-chip.kind-email { background: var(--open-bg); color: var(--open-fg); } .tpl-kind-chip.kind-note { background: var(--amber-bg); color: var(--amber-fg); } /* Company name chip beside a contact (Contacts page) — purple, not the blue default. */ .tpl-kind-chip.company-chip { background: var(--purple-bg); color: var(--purple); } /* Gold default-template stars. */ .tpl-star { color: #e0a93b; -webkit-text-fill-color: #e0a93b; } .tpl-row-preview { font-size: 12px; margin-top: 4px; line-height: 1.5; white-space: pre-wrap; max-height: 3em; overflow: hidden; color: var(--muted); } .tpl-row-preview.expanded { max-height: none; } .tpl-more { margin-top: 4px; } .tpl-row-actions { white-space: nowrap; } /* ---- Activity timeline --------------------------------------------------- */ .activity-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; } .activity-item:last-child { border-bottom: none; } .activity-item.type-comment { background: var(--open-bg); border-left: 3px solid var(--open-fg); border-radius: 8px; } .activity-item.internal { background: var(--amber-bg); border-left: 3px solid var(--amber-accent); border-radius: 8px; } .activity-time { color: var(--faint); font-size: 12px; white-space: nowrap; } .tl-tag { display: inline-block; margin-bottom: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 8px; border-radius: 6px; } .tl-client { background: var(--open-bg); color: var(--open-fg); } .tl-internal { background: var(--amber-bg); color: var(--amber-fg); } .tl-in { background: var(--purple-bg); color: var(--purple); } /* ---- Lists / generic rows ------------------------------------------------ */ .list-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; } .list-row:last-child { border-bottom: none; } /* ---- Tables (users / agents / billing) ----------------------------------- */ .user-table, .agent-table, .bill-table { width: 100%; border-collapse: collapse; font-size: 14px; } .user-table th, .agent-table th, .bill-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 700; } .user-table td, .agent-table td, .bill-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } .user-main-row:hover, .agent-table tbody tr:hover, .bill-table tbody tr:hover { background: var(--press); } .user-actions-cell { text-align: right; white-space: nowrap; } .user-actions-cell .btn-small { margin-left: 6px; } .user-edit-row td { background: var(--press); } .edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .edit-grid label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } /* ---- Analytics ----------------------------------------------------------- */ #a-body { display: flex; flex-direction: column; gap: 24px; } #a-body .stats { margin-bottom: 0; } /* Analytics summary: all six cards in one straight row (like the mockup). */ #a-cards { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1100px) { #a-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { #a-cards { grid-template-columns: repeat(2, 1fr); } } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } /* Hand-rolled SVG line charts (Trends) */ .line-chart { width: 100%; height: auto; display: block; } .chart-grid { stroke: var(--line); stroke-width: 1; } .chart-ytick { fill: var(--muted); font-size: 10px; text-anchor: end; } .chart-xtick { fill: var(--muted); font-size: 10px; } .trend-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin: 14px 0 2px; } .trend-subhead:first-of-type { margin-top: 8px; } /* Per-category drill-down rows */ .cat-row { border-bottom: 1px solid var(--line); padding: 4px 0; } .cat-row > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 2px; flex-wrap: wrap; } .cat-row > summary::-webkit-details-marker { display: none; } .cat-row > summary::before { content: '▸'; color: var(--muted); font-size: 0.85em; margin-right: 6px; } .cat-row[open] > summary::before { content: '▾'; } .cat-name { font-weight: 700; } .cat-meta { font-size: 13px; } .cat-subtable { margin: 4px 0 10px; } .cat-assisted, .kb-assisted { font-size: 13px; margin: 0 0 12px; } /* Keep the long By-Company / By-Category lists from filling the screen. */ #a-company, #a-category-detail { max-height: 360px; overflow-y: auto; } /* Article links in analytics tables match the app's purple aesthetic (not browser blue). */ .agent-table a { color: var(--purple); font-weight: 600; text-decoration: none; } .agent-table a:hover { text-decoration: underline; } /* By Agent table: colour-coded numbers (match the mockup). */ .agent-table .num-open { color: var(--open-fg); font-weight: 700; } .agent-table .num-closed { color: var(--closed-fg); font-weight: 700; } .agent-table .num-billable { color: var(--green); font-weight: 700; } .chart-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .chart-head h2 { margin: 0; } .legend { display: flex; gap: 14px; font-size: 13px; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .bar-row { display: flex; align-items: center; gap: 10px; margin: 11px 0; font-size: 13px; } .bar-label { width: 120px; flex-shrink: 0; color: var(--text); } .bar-track { flex: 1; background: var(--press); box-shadow: var(--inset); border-radius: 999px; height: 10px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; min-width: 2px; } .bar-count { width: 34px; text-align: right; font-weight: 700; flex-shrink: 0; color: var(--text); } .trend-chart { display: flex; align-items: stretch; gap: 12px; height: 180px; margin-top: 12px; } .trend-week { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; } .trend-bar { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; } .trend-label { font-size: 11px; color: var(--muted); } .time-billable { display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); } .time-nb { display: inline-block; background: var(--amber-bg); color: var(--amber-fg); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; } /* ---- Billing ------------------------------------------------------------- */ #b-report { display: flex; flex-direction: column; gap: 16px; } #b-body .filters { flex-wrap: wrap; } #b-body .filter-field { flex: 0 0 auto; } .bill-grandtotal { margin-left: auto; align-self: center; flex-shrink: 0; font-size: 15px; color: var(--muted); } .bill-total-val { color: var(--green); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; } .bill-company { padding: 0; overflow: hidden; } .bill-company-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--press); border-bottom: 1px solid var(--line); border-left: 5px solid var(--green); } .bill-company-name { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 18px; color: var(--text); } .bill-company-total { font-weight: 800; font-size: 16px; color: var(--green); } .bill-table .num { text-align: right; font-weight: 700; white-space: nowrap; } .bill-table tbody tr:last-child td { border-bottom: none; } .bill-table a { color: var(--purple); font-weight: 600; text-decoration: none; } .bill-table a:hover { text-decoration: underline; } /* ---- Devices ---- */ .filter-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; } .device-owner-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .owner-matched { background: rgba(22,163,74,.12); color: var(--green); } .owner-review { background: rgba(217,119,6,.14); color: #b45309; } .owner-unassigned { background: var(--press); color: var(--muted); } .owner-manual { background: var(--purple-bg, rgba(124,58,237,.12)); color: var(--purple); } .tpl-kind-chip.device-nocompany { background: var(--press); color: var(--muted); } .device-source-name { font-weight: 700; text-transform: capitalize; } /* 3CX extensions directory */ .tpl-kind-chip.ext-phone-chip { background: var(--ok-bg, rgba(16,185,129,.12)); color: var(--ok, #059669); } .tpl-kind-chip.ext-soft-chip { background: var(--press); color: var(--muted); } .reg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .reg-dot.reg-on { background: var(--ok, #10b981); } .reg-dot.reg-off { background: var(--border, #cbd5e1); } /* Device lifecycle (health) chips + detail + overview bar */ .life-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } .life-good { background: rgba(16,185,129,.12); color: #059669; } .life-aging { background: rgba(245,158,11,.15); color: #b45309; } .life-replace { background: rgba(239,68,68,.13); color: #dc2626; } .life-unknown { background: var(--press); color: var(--muted); } .life-detail { border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; border: 1px solid var(--border); } .life-detail.life-replace { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); } .life-detail.life-aging { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.3); } .life-detail.life-good { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.25); } .life-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .life-reasons { margin: 8px 0 0; padding-left: 18px; font-size: .85rem; } .life-reasons li { margin: 2px 0; } .life-r-replace { color: #dc2626; } .life-r-aging { color: #b45309; } .life-rec { margin-top: 8px; font-weight: 600; font-size: .85rem; } .life-ai-at { margin-top: 6px; font-size: .72rem; } .lifecycle-bar { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .life-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; cursor: pointer; background: var(--card, #fff); min-width: 96px; } .life-cell:hover { box-shadow: var(--raise-sm); } .life-cell-n { font-size: 1.3rem; font-weight: 800; line-height: 1; } .life-cell-l { font-size: .72rem; font-weight: 600; color: var(--muted); } .life-cell.life-replace .life-cell-n { color: #dc2626; } .life-cell.life-aging .life-cell-n { color: #b45309; } .life-cell.life-good .life-cell-n { color: #059669; } /* 3CX extension detail panel */ .ext-detail-title { margin: 0 0 8px; font-size: 1.05rem; } .ext-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .ext-section { font-weight: 700; margin: 14px 0 6px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .ext-call-box { background: var(--press); border-radius: 8px; padding: 10px 12px; } .ext-call-live { color: var(--crit); font-weight: 700; } .ext-call-idle { color: var(--muted); } .ext-tix-head { font-weight: 700; margin: 12px 0 6px; } .ext-tix-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; text-decoration: none; color: inherit; } .ext-tix-row:hover { background: var(--press); } .ext-tix-id { font-weight: 700; color: var(--purple); white-space: nowrap; } .ext-tix-subj { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Override panel */ .device-override-body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; } .device-override-body label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; } .device-override-body select, .device-override-body input, .device-override-body textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 400; } .device-owner-results { display: flex; flex-direction: column; gap: 2px; } .device-owner-opt { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 13px; } .device-owner-opt:hover { background: var(--press); } /* Unmapped-sites banner */ .device-banner { background: rgba(217,119,6,.08); border: 1px solid rgba(217,119,6,.3); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 14px; } .device-sites-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .device-site-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .device-site-name { min-width: 200px; font-weight: 600; } .device-site-input { flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); } /* Manage-sites modal */ .dashboard-head-actions { display: flex; align-items: center; gap: 10px; } .sites-modal { width: 100%; max-width: 720px; margin: 0; max-height: 82vh; overflow-y: auto; position: relative; } .sites-modal h2 { margin-top: 0; } .sites-modal-hint { margin: -4px 0 14px; } .sites-group-title { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; } .sites-group-title:first-of-type { margin-top: 4px; } .site-manage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); } .site-manage-name { flex: 1; min-width: 180px; font-weight: 600; } .site-status-chip { font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; } .site-status-chip.mapped { background: rgba(22,163,74,.12); color: var(--green); } .site-status-chip.unmapped { background: rgba(217,119,6,.14); color: #b45309; } .site-status-chip.ignored { background: var(--press); color: var(--muted); } .site-manage-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Ignore is a "set aside" action — muted/grey, distinct from the green Map/Reset. */ .site-ignore-btn { background: var(--press); color: var(--muted); box-shadow: var(--inset); } .site-ignore-btn:hover { color: var(--text); filter: none; } .sites-filter-bar { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; } .sites-filter-bar label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; } .sites-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; } .sites-group > summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; background: var(--press); user-select: none; } .sites-group > summary::-webkit-details-marker { display: none; } .sites-group > summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--muted); transition: transform .15s; } .sites-group[open] > summary::before { transform: rotate(90deg); } .sites-group-body { padding: 4px 14px 8px; } .sites-group-body .site-manage-row:last-child { border-bottom: none; } /* Collapsible unmapped-sites banner */ .device-banner-details > summary { cursor: pointer; list-style: none; user-select: none; } .device-banner-details > summary::-webkit-details-marker { display: none; } .device-banner-details > summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: #b45309; transition: transform .15s; } .device-banner-details[open] > summary::before { transform: rotate(90deg); } .tpl-kind-chip.action-sent { background: rgba(22,163,74,.12); color: var(--green); } .tpl-kind-chip.action-failed { background: rgba(220,38,38,.12); color: #dc2626; } .tpl-kind-chip.action-queued { background: rgba(217,119,6,.14); color: #b45309; } .switch-inline { display: inline-flex; align-items: center; gap: 8px; } .set-section-title { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint, var(--muted)); margin: 18px 0 6px; } /* Billable report — summary cards */ .bill-summary { display: flex; gap: 14px; margin: 4px 0 18px; flex-wrap: wrap; } .bill-stat { flex: 1; min-width: 170px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--raise-sm); } .bill-stat-billable { border-top-color: var(--green); } .bill-stat-nb { border-top-color: #9ca3af; } .bill-stat-total { border-top-color: var(--purple); } .bill-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; } .bill-stat-val { font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; } .bill-stat-billable .bill-stat-val { color: var(--green); } .bill-stat-sub { font-size: 12px; color: var(--muted); } /* Billable report — collapsible group cards */ .bill-group { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--raise-sm); margin-bottom: 12px; overflow: hidden; } .bill-group-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; list-style: none; flex-wrap: wrap; } .bill-group-head::-webkit-details-marker { display: none; } .bill-group[open] .bill-group-head { border-bottom: 1px solid var(--line); background: var(--press); } .bill-group-name { display: inline-flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; color: var(--text); } .bill-group-name::before { content: '▸'; color: var(--muted); font-size: .8em; } .bill-group[open] .bill-group-name::before { content: '▾'; } .bill-group-name svg { color: var(--purple); flex: none; } .bill-group-totals { display: inline-flex; align-items: center; gap: 8px; } .bill-pill { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .bill-pill-b { background: rgba(22, 163, 74, .12); color: var(--green); } .bill-pill-nb { background: var(--press); color: var(--muted); } .bill-group-total { font-weight: 800; font-size: 15px; color: var(--text); min-width: 56px; text-align: right; } .bill-group .bill-table { margin: 0; } .bill-group .bill-table th:first-child, .bill-group .bill-table td:first-child { padding-left: 18px; } .bill-group .bill-table th:last-child, .bill-group .bill-table td:last-child { padding-right: 18px; } /* Scroll the entry list instead of letting a big agent fill the page. */ .bill-group-body { max-height: 320px; overflow-y: auto; } .bill-group-body .bill-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } /* ---- Knowledge base ------------------------------------------------------ */ .kb-search-row { margin-bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .kb-search { flex: 1; min-width: 220px; max-width: 420px; padding: 11px 14px; border: none; border-radius: 11px; font-size: 14px; background: var(--press); box-shadow: var(--inset); color: var(--text); } .kb-filter { padding: 9px 12px; border: none; border-radius: 10px; font-size: 13px; background: var(--press); box-shadow: var(--inset); color: var(--text); } /* Article badges (visibility / status / pinned) + tags */ .kb-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; } .kb-badge.internal { background: var(--press); color: var(--muted); } .kb-badge.client { background: var(--purple-bg); color: var(--purple); } .kb-badge.draft { background: rgba(245,158,11,0.18); color: #9a6700; } .kb-badge.archived { background: var(--press); color: var(--faint); } .kb-badge.pin { background: rgba(245,158,11,0.18); color: #9a6700; } .kb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .kb-tag { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--press); color: var(--muted); } .kb-pin-label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: normal; } .kb-pin-label input { width: auto; } /* "Was this helpful?" feedback (client Help Center) */ .kb-feedback { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; } .kb-feedback-q { font-weight: 700; margin-bottom: 8px; } .kb-feedback-btns { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .kb-feedback textarea { width: 100%; padding: 10px 12px; border: none; border-radius: 10px; background: var(--press); box-shadow: var(--inset); color: var(--text); font-family: inherit; resize: vertical; } /* AI "suggest / draft" actions in the ticket's Related Articles panel */ .kb-ai-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; } .kb-suggest-head { font-size: 12px; margin: 6px 0 2px; font-weight: 700; } .kb-suggest-reason { font-size: 12px; margin: -2px 0 8px; line-height: 1.4; } .kb-card { cursor: pointer; transition: box-shadow 0.15s; } .kb-card:hover { box-shadow: var(--raise); } .kb-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .kb-card-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 16px; } .kb-card-snippet { margin: 6px 0; font-size: 13px; color: var(--text); } .kb-card-meta { font-size: 12px; color: var(--muted); } .kb-card-actions { margin-top: 8px; } .kb-detail-actions { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 6px; } .kb-detail-title { margin: 0; } .kb-article-body { margin: 16px 0; line-height: 1.6; } .kb-article-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; } .kb-featured-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 2px 8px; } .kb-featured-head:first-child { margin-top: 0; } .article-linked-tickets { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; } .linked-ticket-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .linked-ticket-row a { font-weight: 600; color: var(--purple); } .linked-ticket-row span { color: var(--muted); flex: 1; } .link-ticket-row, .link-article-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .link-ticket-input, #article-picker { padding: 9px 12px; border: none; border-radius: 10px; font-size: 14px; background: var(--press); box-shadow: var(--inset); color: var(--text); } #article-picker { max-width: 260px; } .form-link-tickets { margin-top: 12px; } .ticket-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ticket-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-bg); color: var(--purple); border: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; } .ticket-chip button { background: none; border: none; color: var(--purple); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; box-shadow: none; } /* ---- Contacts & companies ------------------------------------------------ */ .tab-bar { display: flex; gap: 4px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .tab-btn { background: none; color: var(--muted); border: none; border-bottom: 2.5px solid transparent; padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: 14px; box-shadow: none; margin-bottom: -1px; } .tab-btn:hover { background: none; color: var(--text); filter: none; } .tab-btn.active { color: var(--green-2); border-bottom-color: var(--green); } .list-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; } .list-toolbar .kb-search { flex: 1; } .directory-row { cursor: pointer; padding: 15px 18px; margin-bottom: 12px; transition: box-shadow 0.15s; box-shadow: var(--raise-sm); } .directory-row:hover { box-shadow: var(--raise); } .directory-row.row-selected { box-shadow: var(--raise), inset 0 0 0 2px var(--purple); } /* The new/edit form lives inside the side panel — stack its fields in one column so they fit the narrower panel, and give the title a little room. */ .directory-panel .field-grid { grid-template-columns: 1fr; } /* "People at this company" dropdown: keep the list scrollable so a big company doesn't fill the whole panel. */ #company-contacts, #company-tickets, #contact-tickets { margin-top: 12px; max-height: 300px; overflow-y: auto; } .directory-panel #contact-form-title, .directory-panel #company-form-title { margin: 0 0 14px; } /* Split directory: list on the left, a detail panel that opens on the right. */ .dir-page { max-width: 1180px; } .directory-split { display: flex; gap: 22px; align-items: flex-start; } .directory-list-col { flex: 1; min-width: 0; } /* Width fits the content (so a long name grows the box rightward) up to a cap, then the title wraps instead of clipping. */ .directory-panel { position: relative; flex: 0 0 auto; width: fit-content; min-width: 380px; max-width: 520px; align-self: flex-start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; } .directory-panel .kb-card-head { padding-right: 26px; } /* keep the title clear of the ✕ */ .directory-panel .kb-detail-title { font-size: 18px; overflow-wrap: anywhere; } .panel-close { position: absolute; top: 14px; right: 16px; z-index: 1; background: none; border: none; cursor: pointer; line-height: 1; font-size: 18px; color: var(--muted); padding: 4px 7px; border-radius: 8px; } .panel-close:hover { background: var(--press); color: var(--text); } @media (max-width: 1240px) { .dir-page { max-width: 100%; } } @media (max-width: 860px) { .directory-split { flex-direction: column; } .directory-panel { flex-basis: auto; width: 100%; max-width: none; position: static; max-height: none; } } .directory-name { font-weight: 700; font-size: 15px; margin-right: 8px; } .directory-sub { font-size: 13px; margin-top: 3px; color: var(--muted); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 700px) { .field-grid { grid-template-columns: 1fr; } } .info-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .info-label { width: 130px; color: var(--muted); flex-shrink: 0; } .contact-actions { margin-left: auto; } .contact-mini { display: flex; flex-direction: column; gap: 6px; } .contact-mini-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ---- Ticket page two-column layout --------------------------------------- */ .ticket-columns { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; } /* conversation gets ~63% (was ~55%) */ .ticket-columns .column { margin: 0; } @media (max-width: 900px) { .ticket-columns { grid-template-columns: 1fr; } } .msg-thread { display: flex; flex-direction: column; gap: 12px; max-height: 560px; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; } .thread-empty { font-style: italic; padding: 8px 0; color: var(--muted); } .msg { border: none; border-radius: 12px; padding: 12px 14px; background: var(--bg); } .msg-in { box-shadow: inset 0 0 0 2px var(--open-fg); } .msg-out { box-shadow: inset 0 0 0 2px var(--green); } .msg-note { box-shadow: inset 0 0 0 2px var(--amber-accent); } .msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; } .msg-who { font-weight: 700; } .msg-time { color: var(--faint); margin-left: auto; } /* Right-gutter sidebar (Contact / Articles / Time) */ .detail-side { position: absolute; top: 124px; right: 24px; width: 300px; display: flex; flex-direction: column; gap: 14px; z-index: 1; } .detail-side .card { margin: 0; } /* Mid-width screens (e.g. 1080p under the zoom): instead of a narrow centered column, let the ticket page use everything LEFT of the floating sidebar — the Client Conversation was too skinny (Freshdesk gives its thread the whole left side). Right margin = sidebar width (300) + its gutter (24) + a gap. */ @media (max-width: 2100px) { main.wide { max-width: none; margin-left: 12px; margin-right: 372px; } } @media (max-width: 1700px) { main.wide { max-width: 1500px; margin-left: auto; margin-right: auto; } /* sidebar is stacked here — no reserved gutter */ .detail-side { position: static; width: 100%; margin: 0 0 16px; } } .contact-side, .articles-side, .agent-side { padding: 18px; font-size: 13px; } .contact-side h2, .articles-side h2, .agent-side-title { font-size: 14px; margin: 0 0 10px; } .side-head { display: flex; align-items: center; gap: 8px; } .side-head-ic { color: var(--purple); flex: none; } /* Directory list/detail icons (Contacts & Companies) — purple to match the contact card on the ticket page. The SVGs stroke with currentColor. */ .dir-ic { color: var(--purple); flex: none; } .contact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .contact-info { display: flex; flex-direction: column; gap: 6px; } .contact-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .contact-row { display: flex; align-items: center; gap: 8px; color: var(--muted); } .contact-row .ic { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-row .ic svg { display: block; } .contact-row span:last-child { word-break: break-word; } .contact-view-link { display: inline-block; margin-top: 8px; color: var(--purple); } .gen-company-btn { margin-top: 10px; align-self: flex-start; font-size: 13px; padding: 7px 12px; } .company-chip-link { color: var(--purple); text-decoration: none; cursor: pointer; } .company-chip-link:hover { text-decoration: underline; } .articles-side .link-article-row { flex-wrap: wrap; gap: 6px; margin-top: 8px; } .articles-side #article-picker { width: 100%; max-width: 100%; } .agent-side { margin: 0; } .agent-side-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .agent-side-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .agent-side-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-weight: 700; font-size: 14px; } .agent-side-name { font-weight: 700; } .agent-side-row { color: var(--muted); margin-top: 3px; word-break: break-word; } @media (max-width: 760px) { .agent-side { width: 100%; } } /* Time panel + collapsibles */ .time-panel { width: 300px; max-width: 100%; box-sizing: border-box; padding: 16px 18px; font-size: 13px; } .time-panel > summary { cursor: pointer; font-weight: 700; list-style: none; } .time-panel > summary::-webkit-details-marker { display: none; } .time-panel > summary::before { content: '▸ '; color: var(--muted); } .time-panel[open] > summary::before { content: '▾ '; } .time-panel .time-form { margin-top: 12px; gap: 8px; } .time-panel .time-form label { font-size: 12px; } .time-panel .time-form input[type="number"] { width: 70px; } .time-panel #time-list { margin-top: 8px; max-height: 200px; overflow-y: auto; } .collapse-card > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; font-size: 1.15em; font-weight: 800; font-family: "Plus Jakarta Sans", sans-serif; } .collapse-card > summary::-webkit-details-marker { display: none; } .collapse-card > summary::before { content: '▸'; color: var(--muted); font-size: 0.85em; } .collapse-card[open] > summary::before { content: '▾'; } .collapse-hint { font-size: 13px; font-weight: 400; color: var(--muted); } /* History "N events" → purple pill badge (matches the mockup). */ #history-count { background: var(--purple-bg); color: var(--purple); padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; } #history-count:empty { display: none; } .collapse-card #history-list { margin-top: 14px; } /* ---- Rich-text editor (Quill) -------------------------------------------- */ .editor { background: var(--surface); } .ql-toolbar.ql-snow { border: none; background: var(--press); box-shadow: var(--inset); border-top-left-radius: 11px; border-top-right-radius: 11px; } .ql-container.ql-snow { border: none; background: var(--press); box-shadow: var(--inset); border-top: none; border-bottom-left-radius: 11px; border-bottom-right-radius: 11px; } .ql-editor { min-height: 130px; font-size: 14px; color: var(--text); } .ql-toolbar button { background: transparent; color: inherit; padding: 3px 5px; width: 28px; height: 24px; border-radius: 4px; box-shadow: none; } .ql-toolbar button:hover { background: rgba(140,148,170,0.18); } .ql-snow .ql-stroke { stroke: var(--muted); } .ql-snow .ql-fill { fill: var(--muted); } .ql-snow .ql-picker { color: var(--muted); } /* Attach files */ .attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .visually-hidden-file { display: none; } .attach-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--press); border: 1px dashed var(--faint); border-radius: 10px; padding: 7px 12px; box-shadow: none; } .attach-btn:hover { border-color: var(--green); color: var(--green-deep); } .attach-names { font-size: 13px; color: var(--muted); } /* Attachment chips */ .attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .attachment { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text); background: var(--press); border: none; box-shadow: var(--inset); border-radius: 9px; padding: 5px 11px; } .attachment:hover { color: var(--green-deep); } .attachment .att-size { font-weight: 400; color: var(--muted); } /* Rendered message bodies */ .msg-html { margin-top: 4px; overflow-wrap: anywhere; word-break: break-word; color: var(--text); } .msg-html hr { border: 0; border-top: 1px solid var(--line); } .msg-html p { margin: 0 0 6px; } .msg-html p:last-child { margin-bottom: 0; } .msg-html img { max-width: 100%; height: auto; } .msg-img { cursor: zoom-in; } .img-missing { display: inline-block; padding: 6px 10px; margin: 4px 0; background: var(--press); color: var(--muted); border: 1px dashed var(--faint); border-radius: 6px; font-size: 12px; } .msg-html table { max-width: 100%; display: block; overflow-x: auto; } .msg-html pre, .msg-html code { white-space: pre-wrap; overflow-wrap: anywhere; } .msg-html a { color: var(--purple); word-break: break-all; } .msg-html blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); backdrop-filter: blur(6px); } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.5); cursor: zoom-out; } .lightbox-close { position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; border: none; font-size: 18px; cursor: pointer; box-shadow: none; } .lightbox-close:hover { background: rgba(255,255,255,0.3); } /* ---- Time logging -------------------------------------------------------- */ .time-total { font-size: 15px; } .time-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .time-form label { font-size: 13px; font-weight: 600; color: var(--text); } .time-form input[type="number"] { width: 80px; } .time-form .time-note { flex: 1; min-width: 200px; } .time-form .time-note input { width: 100%; } .time-entry { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; } .time-entry .time-amount { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); } .time-meta { display: flex; align-items: center; gap: 6px; } .time-meta .time-who { font-weight: 600; color: var(--text); } .time-meta .time-when { color: var(--muted); } .time-entry .time-desc { color: var(--muted); } /* ---- Settings / avatar editor -------------------------------------------- */ .avatar-edit { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; } .avatar-buttons { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .avatar-hint { font-size: 12px; margin: 2px 0 0; color: var(--muted); } /* ---- Active nav pill + dashboard hero ------------------------------------ */ .gsearch-type option { color: #1f2430; } .nav-link.nav-active { background: #dbe9fd; color: #1d4ed8; } .dvo-hero { max-width: 1340px; margin: 30px auto 0; padding: 0 4px 76px; } .dvo-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .dvo-hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: #c9b8ff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .dvo-hero-kicker span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dvo-hero-title { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; color: #fff; margin: 0; line-height: 1.05; } .dvo-hero-title span { background: linear-gradient(90deg,#a78bfa,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .dvo-hero-actions .btn-primary { box-shadow: 0 10px 24px rgba(16,168,102,0.4); } /* Light-body page eyebrow/kicker (violet pill above a page title), matching the marketing mockups. Use inside .dashboard-head via a .page-head-titles wrapper. */ .page-head-titles { display: flex; flex-direction: column; } .page-kicker { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px; } .page-kicker span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Stat cards overlap the dark hero (dashboard only). */ main.dash { margin: 0 auto 30px; } main.dash > .stats { margin-top: -58px; position: relative; z-index: 2; } /* "All Tickets" heading + count badge above the dashboard filter bar. */ .list-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 16px; } .list-head h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; margin: 0; } .list-count { padding: 3px 11px; border-radius: 999px; background: var(--purple-bg); color: var(--purple); font-size: 12.5px; font-weight: 700; } .list-count:empty { display: none; } /* Reporter name on the ticket page: a link to the contact, but read as normal text (the browser's default blue was unreadable in dark mode). */ .reporter-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--muted); } .reporter-link:hover { color: var(--purple); border-bottom-color: var(--purple); } /* SLA: paused pill (On Hold) + the quick "Change…" deadline menu */ .sla-paused { background: var(--purple-bg); color: var(--purple); } .sla-menu-wrap { position: relative; display: inline-block; } .sla-menu { white-space: nowrap; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; } .sla-pick { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; } .sla-pick:hover { background: var(--press); color: var(--purple); } .sla-menu[hidden] { display: none; } /* the hidden attribute must beat display:flex */ .sla-pick span { white-space: nowrap; } .sla-pick small { color: var(--muted); font-size: 11px; white-space: nowrap; } .sla-pick-reset { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; padding-top: 10px; }