/* Tailwind is loaded separately via the Play CDN in each HTML file. */ :root { --background: #f2f6f9; --foreground: #1f2933; } * { box-sizing: border-box; } html { background: var(--background); } html.dark-console,html.dark-console body { background: #07111b; color-scheme: dark; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; } button, input, select { font: inherit; } button, select, input[type="checkbox"] { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #4aa8e8; outline-offset: 2px; } input[type="checkbox"] { accent-color: #0078d4; } ::view-transition-old(root),::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; } html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after { transition: none !important; } .header-search { display: flex; height: 32px; align-items: center; } .header-search-input { height: 32px; border: 1px solid #4c5f70; border-radius: 6px; background: rgba(10,24,37,.72); padding: 0 48px 0 36px; color: #f2f7fa; font-size: 12px; line-height: 32px; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: border-color .16s ease,background .16s ease,box-shadow .16s ease; } .header-search-input::placeholder { color: #aebdca; opacity: 1; } .header-search-input:focus { border-color: #68b9ee; background: #0a1b2a; box-shadow: 0 0 0 3px rgba(74,168,232,.13); } .header-search-icon,.header-search-shortcut { position: absolute; top: 50%; transform: translateY(-50%); } .header-search-icon { left: 12px; display: grid; width: 14px; height: 14px; place-items: center; color: #aebdca; font-size: 12px; line-height: 1; pointer-events: none; } .header-search-shortcut { right: 8px; display: inline-flex; height: 20px; align-items: center; border: 1px solid #526a7d; border-radius: 4px; padding: 0 6px; color: #b9c8d3; background: rgba(255,255,255,.04); font-size: 9px; line-height: 1; } .workspace-meta { color: #68717d; } .workspace-trigger { border-color: transparent; background: transparent; } .workspace-trigger:hover { border-color: #d6e1e9; background: #fff; } .workspace-trigger.is-open { border-color: #79bce8; background: #eef8ff; box-shadow: 0 0 0 2px rgba(0,120,212,.08); } .workspace-avatar { background: linear-gradient(135deg,#0078d4,#4eb3ed); } .workspace-trigger-chevron { color: #68717d; } .workspace-menu { border-color: #c8d4de; background: #fff; color: #273642; } .workspace-menu-heading { border-color: #e1e7ec; color: #71808d; } .workspace-option { transition: background .16s ease,color .16s ease; } .workspace-option:hover { background: #f2f7fb; } .workspace-option.is-selected { background: #eef7fd; } .workspace-option-avatar { background: #e9eef2; color: #52606b; } .workspace-option-avatar.is-selected { background: #0078d4; color: #fff; } .workspace-option-meta { color: #71808d; } .workspace-option-check,.workspace-manage { color: #0969da; } .workspace-menu-footer { border-color: #e1e7ec; background: #f8fafb; } .workspace-manage:hover { background: #fff; } .conversation-name { color: #23313c; } .conversation-id { color: #7b8994; } .conversation-intent { color: #33434f; } .conversation-time { color: #3e4c57; } .conversation-duration { color: #82909b; } .conversation-sentiment.is-positive { color: #256f3a; } .conversation-sentiment.is-neutral { color: #8a6500; } .conversation-row-action { color: #657581; } .conversation-row-action.is-open { background: #e8f3fa; color: #0872bd; opacity: 1; box-shadow: inset 0 0 0 1px #c9e3f3; } .row-action-menu { position: absolute; right: 42px; top: 9px; z-index: 20; width: 154px; overflow: hidden; border: 1px solid #c7d2da; border-radius: 9px; padding: 5px; background: #fff; box-shadow: 0 14px 34px rgba(17,44,67,.20); } .row-action-menu.open-up { top: auto; bottom: 9px; } .row-action-menu button { display: flex; width: 100%; height: 32px; align-items: center; gap: 8px; border-radius: 6px; padding: 0 8px; color: #34434e; font-size: 9px; font-weight: 650; text-align: left; } .row-action-menu button:hover { background: #eff6fa; color: #0969da; } .row-action-menu > span { display: block; height: 1px; margin: 4px 2px; background: #e2e8ed; } .row-action-menu button.danger { color: #b4232c; } .row-action-menu button.danger:hover { background: #fff0f1; color: #981b24; } .console-footer { color: #6e7781; } .agent-avatar { border: 1px solid #284b66; background: #0d2b43; color: #b7f23a; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .breadcrumb { color: #657480; } .breadcrumb-link { color: #0969da; font-weight: 600; } .breadcrumb-link:hover { text-decoration: underline; } .breadcrumb-separator { color: #a1adb6; } .breadcrumb-muted { color: #6d7a85; } .breadcrumb-current { color: #27333d; font-weight: 750; } .account-trigger { transition: background .16s ease; } .account-trigger:hover,.account-trigger.is-open { background: #202f3e; } .account-menu { border-color: #405569; background: #102334; color: #edf4f8; box-shadow: 0 18px 44px rgba(0,0,0,.36); } .account-menu-profile { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #294052; padding: 13px; } .account-menu-profile > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 999px; background: linear-gradient(135deg,#348fe0,#276ac5); color: #fff; font-size: 10px; font-weight: 800; } .account-menu-profile strong,.account-menu-profile small { display: block; } .account-menu-profile strong { font-size: 11px; } .account-menu-profile small { margin-top: 2px; color: #9eb0bd; font-size: 9px; } .account-menu-items { padding: 5px; } .account-menu-items button,.account-menu-footer button { display: flex; width: 100%; height: 36px; align-items: center; gap: 9px; border-radius: 7px; padding: 0 9px; color: #c9d6df; font-size: 10px; font-weight: 600; text-align: left; } .account-menu-items button:hover,.account-menu-footer button:hover { background: #193247; color: #fff; } .account-menu-footer { border-top: 1px solid #294052; padding: 5px; } .account-menu-footer button { color: #f0a7a7; } .create-dialog { border-color: #c3ced6; background: #fff; color: #26323c; overflow: hidden; } .dialog-heading,.dialog-footer { border-color: #d8dee4; } .dialog-description,.option-meta { color: #6e7781; } .option-kicker { color: #59636e; } .dialog-footer { background: #f6f8fa; } .live-status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #a6d2b3; border-radius: 999px; background: #eef9f1; padding: 3px 8px; color: #277544; font-size: 9px; font-weight: 800; } .page-subtitle { color: #65737e; } .live-command-card { display: grid; gap: 22px; border: 1px solid #1b4f72; border-radius: 15px; padding: 22px; background: radial-gradient(circle at 80% 10%,rgba(53,151,215,.25),transparent 36%),linear-gradient(125deg,#0b1d2c,#123d5b); color: #fff; box-shadow: 0 16px 40px rgba(12,42,68,.18); } .live-eyebrow { display: flex; align-items: center; gap: 8px; color: #b9f25b; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .live-pulse { width: 8px; height: 8px; border-radius: 999px; background: #75d68d; box-shadow: 0 0 0 5px rgba(117,214,141,.12); } .live-command-card h2 { margin-top: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.025em; } .live-command-card > div:first-child > p:last-child { margin-top: 7px; color: #b6c8d5; font-size: 10px; } .live-command-stats { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(5,18,28,.34); } .live-command-stats div { padding: 13px; border-right: 1px solid rgba(255,255,255,.09); } .live-command-stats div:last-child { border-right: 0; } .live-command-stats strong,.live-command-stats span { display: block; } .live-command-stats strong { font-size: 18px; } .live-command-stats span { margin-top: 3px; color: #9fb5c5; font-size: 8px; font-weight: 650; } .live-panel { overflow: hidden; border: 1px solid #cfdae3; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(25,61,89,.06); } .live-panel-head { display: flex; min-height: 62px; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce4ea; padding: 12px 15px; } .live-panel-head h2 { color: #26333d; font-size: 13px; font-weight: 750; } .live-panel-head p { margin-top: 3px; color: #73818b; font-size: 9px; } .live-panel-head > button,.healthy-label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c5d1da; border-radius: 7px; padding: 7px 9px; color: #43535f; font-size: 9px; font-weight: 700; } .healthy-label { border-color: #b9d9c2; background: #eef9f1; color: #277544; } .live-session-row { position: relative; display: grid; width: 100%; grid-template-columns: 34px minmax(150px,1fr) 76px 76px 76px; align-items: center; gap: 10px; border-bottom: 1px solid #e5ebef; padding: 12px 14px; color: #34444f; text-align: left; } .live-session-row:last-child { border-bottom: 0; } .live-session-row:hover { background: #f4f9fc; } .live-row-indicator { position: absolute; inset-block: 10px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #35b76f; } .live-session-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #e8f3fa; color: #1475b8; font-size: 9px; font-weight: 800; } .live-session-person strong,.live-session-person small,.live-session-metric strong,.live-session-metric small { display: block; } .live-session-person strong { color: #293640; font-size: 10px; } .live-session-person small { margin-top: 3px; color: #77858f; font-size: 8px; } .live-session-metric { display: grid; grid-template-columns: 15px 1fr; color: #7a8a95; } .live-session-metric strong { color: #40505c; font-size: 9px; } .live-session-metric small { grid-column: 2; color: #87949e; font-size: 7px; } .live-listen { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 6px; background: #edf6fc; padding: 7px; color: #0872bd; font-size: 8px; font-weight: 750; } .queue-list { display: grid; gap: 17px; padding: 16px; } .queue-row-head { display: flex; justify-content: space-between; } .queue-row-head span:last-child { text-align: right; } .queue-row-head strong,.queue-row-head small { display: block; } .queue-row-head strong { color: #34434e; font-size: 10px; } .queue-row-head small { margin-top: 2px; color: #7d8993; font-size: 8px; } .queue-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e8eef2; } .queue-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1688d9,#4eb3ed); } .routing-button { display: flex; width: calc(100% - 32px); height: 38px; align-items: center; gap: 8px; margin: 0 16px 16px; border: 1px solid #c5d3dc; border-radius: 8px; padding: 0 10px; color: #0969da; font-size: 9px; font-weight: 750; } .routing-button svg:last-child { margin-left: auto; } @media (min-width: 768px) { .live-command-card { grid-template-columns: 1fr minmax(420px,.8fr); align-items: center; } } @media (max-width: 720px) { .live-command-stats { grid-template-columns: repeat(2,1fr); } .live-command-stats div:nth-child(2) { border-right: 0; } .live-session-row { grid-template-columns: 34px 1fr 68px; } .live-session-metric:nth-of-type(2),.live-listen { display: none; } } /* Unified console controls */ .overview-actions { padding: 4px; border: 1px solid rgba(137,158,173,.34); border-radius: 13px; background: rgba(255,255,255,.64); box-shadow: 0 8px 24px rgba(28,58,80,.07),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(12px); } .ui-button { position: relative; display: inline-flex; min-width: max-content; height: 40px; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 1px solid transparent; border-radius: 9px; padding: 0 15px; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: -.005em; box-shadow: 0 1px 2px rgba(20,43,61,.08); transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; } .ui-button:hover { transform: translateY(-1px); } .ui-button:active { transform: translateY(0); box-shadow: none; } .ui-button-primary { border-color: #0465b1; background: linear-gradient(145deg,#168ce0 0%,#0874c9 52%,#0563ad 100%); color: #fff; box-shadow: 0 1px 1px rgba(255,255,255,.22) inset,0 7px 16px rgba(0,103,184,.23),0 1px 2px rgba(0,46,82,.22); } .ui-button-primary::after { position: absolute; inset: 0; background: linear-gradient(110deg,transparent 18%,rgba(255,255,255,.14) 48%,transparent 72%); content: ""; transform: translateX(-110%); transition: transform .35s ease; } .ui-button-primary:hover { border-color: #005a9f; background: linear-gradient(145deg,#1183d5,#0569bb); box-shadow: 0 10px 22px rgba(0,103,184,.28),0 1px 2px rgba(0,46,82,.22); } .ui-button-primary:hover::after { transform: translateX(110%); } .ui-button-primary > * { position: relative; z-index: 1; } .ui-button-secondary { border-color: #c0ccd5; background: rgba(255,255,255,.88); color: #25313b; box-shadow: 0 1px 2px rgba(20,43,61,.07),inset 0 1px 0 #fff; } .ui-button-secondary:hover { border-color: #8298a8; background: #fff; box-shadow: 0 7px 16px rgba(29,55,74,.11); } .ui-button-danger { border-color: #a11f26; background: linear-gradient(145deg,#dc3b44 0%,#b62a32 55%,#9a1e26 100%); color: #fff; box-shadow: 0 1px 1px rgba(255,255,255,.18) inset,0 7px 16px rgba(158,30,38,.24),0 1px 2px rgba(70,10,14,.20); } .ui-button-danger:hover { border-color: #8a1a20; background: linear-gradient(145deg,#c93038,#a3222a); box-shadow: 0 10px 22px rgba(158,30,38,.30),0 1px 2px rgba(70,10,14,.22); } .ui-button-danger .ui-button-icon { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .dark-console .ui-button-danger { border-color: #b23138; } .ui-button-icon { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1; } .ui-button-icon svg { width: 15px; height: 15px; } .ui-button-secondary .ui-button-icon { background: #edf4f8; color: #1677bd; } .ui-button-primary .ui-button-icon { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .ui-select,.ui-input { height: 40px; border: 1px solid #c0ccd5; border-radius: 9px; background-color: rgba(255,255,255,.9); color: #25313b; font-size: 11px; font-weight: 650; line-height: 1; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,43,61,.05); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } .ui-select { min-width: 142px; padding: 0 30px 0 12px; } .select-control { position: relative; display: block; } .select-control-input { appearance: none; padding-right: 40px; } .select-control-arrow { position: absolute; right: 13px; top: 50%; display: grid; width: 16px; height: 16px; place-items: center; color: #61727e; transform: translateY(-50%); pointer-events: none; } .date-control { position: relative; display: block; } .date-control-icon { position: absolute; left: 12px; top: 50%; z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 5px; background: #edf4f8; color: #1677bd; font-size: 12px; transform: translateY(-50%); pointer-events: none; } .date-select { min-width: 158px; padding-left: 38px; } .ui-input { min-width: 0; padding-top: 0; padding-bottom: 0; } .ui-select:hover,.ui-input:hover { border-color: #8ba0af; } .ui-select:focus,.ui-input:focus { border-color: #1685da; box-shadow: 0 0 0 3px rgba(0,120,212,.12); } .ui-input::placeholder { color: #7e8c97; font-weight: 500; } .conversation-actions { width: min(100%,610px); justify-content: flex-end; } .ui-search { max-width: 300px; } .pagination-button { display: inline-grid; min-width: 34px; height: 34px; place-items: center; border: 1px solid #bac6cf; border-radius: 6px; background: #fff; color: #34434e; padding: 0 9px; font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 1px 2px rgba(20,43,61,.05); transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; } .pagination-button:hover:not(:disabled):not(.active) { border-color: #7d94a5; background: #f3f8fb; color: #0969da; transform: translateY(-1px); } .pagination-button.active { border-color: #0067b8; background: #0078d4; color: #fff; box-shadow: 0 3px 9px rgba(0,120,212,.22); } .pagination-button:disabled { cursor: not-allowed; border-color: #d8e0e6; background: #f4f6f8; color: #9ca8b1; box-shadow: none; } .pagination-label { display: inline-flex; gap: 6px; padding-inline: 11px; } .dialog-close { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #53616c; font-size: 18px; transition: .16s ease; } .dialog-close:hover { border-color: #d0d8de; background: #f0f4f7; color: #1f2933; } .option-button { border: 1px solid #c1ccd4; border-radius: 8px; padding: 13px; background: #fff; text-align: left; box-shadow: 0 1px 2px rgba(20,43,61,.04); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .option-button:hover { border-color: #1685da; box-shadow: 0 0 0 3px rgba(0,120,212,.08),0 5px 14px rgba(28,59,82,.08); transform: translateY(-1px); } .console-logo { display: grid; grid-template-columns: repeat(3, 4px); align-items: center; gap: 2px; width: 16px; height: 22px; } .console-logo span { display: block; width: 4px; border-radius: 1px; background: linear-gradient(180deg, #b7f23a, #4aa8e8); } .console-logo span:nth-child(1) { height: 11px; } .console-logo span:nth-child(2) { height: 20px; } .console-logo span:nth-child(3) { height: 15px; } .sidebar-chevron { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 5px; color: #6b7a86; font-size: 11px; transition: transform .2s ease,background .2s ease; } .sidebar-chevron.is-open { transform: rotate(180deg); background: rgba(0,120,212,.08); color: #0078d4; } .sidebar-nav-icon { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; border: 1px solid #d7e0e6; border-radius: 7px; background: #edf2f5; color: #52616d; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transition: border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease; } .sidebar-nav-icon.is-active { border-color: #b8dcee; background: #fff; color: #0078d4; box-shadow: 0 2px 6px rgba(25,79,115,.09),inset 0 1px 0 #fff; } .sidebar-dropdown-trigger { color: #3c4a55; } .sidebar-dropdown-trigger:hover { background: #fff; box-shadow: 0 1px 4px rgba(32,66,90,.06); } .sidebar-dropdown-trigger.is-child-active { background: linear-gradient(90deg,#e5f4fd,#f3f9fc); color: #0067b8; font-weight: 700; box-shadow: inset 0 0 0 1px #d4eaf7; } .sidebar-submenu { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease,opacity .18s ease; } .sidebar-submenu.is-open { grid-template-rows: 1fr; opacity: 1; } .sidebar-submenu-inner { min-height: 0; overflow: hidden; margin-left: 20px; padding: 0 0 0 13px; border-left: 1px solid #d6e1e8; transition: padding .2s ease; } .sidebar-submenu.is-open .sidebar-submenu-inner { padding-top: 6px; padding-bottom: 4px; } .sidebar-submenu-item { display: flex; width: 100%; height: 34px; align-items: center; gap: 8px; border-radius: 6px; padding: 0 8px; color: #52616d; font-size: 10px; text-align: left; transition: background .16s ease,color .16s ease; } .sidebar-submenu-item:hover { background: rgba(255,255,255,.82); color: #1e506f; } .sidebar-submenu-item[aria-current="page"] { background: #edf7fd; color: #0067b8; font-weight: 700; } .sidebar-submenu-icon { display: grid; width: 19px; height: 19px; place-items: center; color: #7c8c98; font-size: 9px; } .sidebar-live-count { margin-left: auto; border-radius: 999px; padding: 1px 6px; background: #daf0e3; color: #19713b; font-size: 8px; font-weight: 800; } .operations-hero { background: radial-gradient(circle at 78% -20%, rgba(39, 137, 210, .38), transparent 40%), linear-gradient(120deg, #0b1c2b 0%, #103c5d 58%, #15273b 100%); } .hero-action { display: inline-flex; height: 38px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 0 13px 0 8px; font-size: 10px; font-weight: 750; line-height: 1; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .hero-action:hover { transform: translateY(-1px); } .hero-action:active { transform: translateY(0); } .hero-action:focus-visible { outline: 2px solid #80cfff; outline-offset: 2px; } .hero-action-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 7px; } .hero-action-primary { border-color: #9fd927; background: linear-gradient(145deg, #c3f84b, #a8ed24); color: #102235; box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 7px 16px rgba(133,201,24,.20); } .hero-action-primary .hero-action-icon { background: rgba(16,34,53,.10); color: #16314a; } .hero-action-primary:hover { background: linear-gradient(145deg, #ccff59, #b2f52e); box-shadow: inset 0 1px 0 rgba(255,255,255,.56), 0 9px 19px rgba(133,201,24,.26); } .hero-action-secondary { border-color: rgba(157,190,214,.38); background: rgba(8,25,39,.42); color: #eef6fb; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(8px); } .hero-action-secondary .hero-action-icon { background: rgba(90,180,235,.13); color: #7dd0ff; } .hero-action-secondary:hover { border-color: rgba(139,204,244,.55); background: rgba(18,47,68,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(4,18,30,.18); } .hero-orb { position: absolute; border-radius: 999px; filter: blur(1px); pointer-events: none; } .hero-orb-one { width: 220px; height: 220px; right: 26%; top: -170px; border: 1px solid rgba(183, 242, 58, .18); box-shadow: 0 0 70px rgba(36, 142, 210, .16); } .hero-orb-two { width: 120px; height: 120px; left: 42%; bottom: -105px; border: 1px solid rgba(90, 180, 235, .16); } .live-ring { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 999px; background: rgba(183, 242, 58, .12); box-shadow: 0 0 0 4px rgba(183, 242, 58, .05); } .wave-bar { background: linear-gradient(180deg, #b7f23a, #4aa8e8); opacity: .8; } .wave-bar:nth-child(3n) { opacity: .42; } .chart-bar { background: linear-gradient(180deg, #4eb3ed 0%, #0969da 100%); box-shadow: 0 -3px 8px rgba(0,120,212,.10); } .kpi-card { --accent: #0078d4; --accent-rgb: 0,120,212; position: relative; min-height: 192px; overflow: hidden; border: 1px solid rgba(148, 172, 190, .38); border-radius: 16px; padding: 17px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,250,253,.92)); box-shadow: 0 10px 30px rgba(25,61,89,.07), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .kpi-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .28); box-shadow: 0 18px 38px rgba(25,61,89,.13), inset 0 1px 0 rgba(255,255,255,.9); } .kpi-card-2 { --accent: #7357d3; --accent-rgb: 115,87,211; } .kpi-card-3 { --accent: #e87938; --accent-rgb: 232,121,56; } .kpi-card-4 { --accent: #22a477; --accent-rgb: 34,164,119; } .kpi-glow { position: absolute; width: 150px; height: 150px; right: -66px; top: -76px; border-radius: 999px; background: radial-gradient(circle, rgba(var(--accent-rgb), .19), rgba(var(--accent-rgb), 0) 70%); pointer-events: none; } .kpi-label { display: flex; align-items: center; gap: 9px; color: #485762; font-size: 10px; font-weight: 700; } .kpi-icon { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 9px; background: rgba(var(--accent-rgb), .09); color: var(--accent); font-size: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } .kpi-arrow { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 999px; background: rgba(var(--accent-rgb), .08); color: var(--accent); font-size: 11px; transition: transform .2s ease, background .2s ease; } .kpi-arrow:hover { transform: translate(1px,-1px); background: rgba(var(--accent-rgb), .15); } .kpi-value { color: #15212b; font-size: clamp(27px,2.2vw,36px); font-weight: 680; letter-spacing: -.055em; line-height: .95; } .kpi-change { border-radius: 999px; padding: 3px 6px; background: rgba(var(--accent-rgb), .10); color: var(--accent); font-weight: 800; white-space: nowrap; } .kpi-note,.kpi-context { color: #77858f; } .kpi-body { display: grid; grid-template-columns: minmax(0,1fr) 96px; align-items: end; gap: 12px; } .kpi-copy { min-width: 0; } .kpi-support { display: flex; min-width: 0; align-items: center; gap: 7px; margin-top: 8px; font-size: 8px; } .kpi-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kpi-visual { display: flex; width: 96px; height: 62px; flex: 0 0 96px; flex-direction: column; justify-content: center; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.16); border-radius: 11px; background: linear-gradient(180deg,rgba(var(--accent-rgb),.045),rgba(var(--accent-rgb),.10)); color: var(--accent); } .kpi-visual > small { display: block; overflow: hidden; color: #75848f; font-size: 7px; font-weight: 700; letter-spacing: .01em; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .kpi-trend { padding: 6px 7px 5px; } .kpi-trend-bars { display: flex; height: 37px; align-items: flex-end; gap: 3px; } .kpi-trend-bars span { flex: 1; min-width: 2px; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.34)); } .kpi-resolution { align-items: center; gap: 3px; padding: 4px 8px; } .kpi-resolution-ring { position: relative; display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 999px; background: conic-gradient(var(--accent) 0 91.6%,rgba(var(--accent-rgb),.12) 91.6% 100%); box-shadow: 0 0 16px rgba(var(--accent-rgb),.10); } .kpi-resolution-ring::before { width: 31px; height: 31px; border-radius: inherit; background: #fff; content: ""; } .kpi-resolution-ring span { position: absolute; font-size: 8px; font-weight: 850; } .kpi-calendar { gap: 4px; padding: 6px 9px 5px; } .kpi-calendar-grid { display: grid; height: 38px; grid-template-columns: repeat(5,1fr); gap: 3px; } .kpi-calendar-grid span { border-radius: 3px; background: rgba(var(--accent-rgb),.10); } .kpi-calendar-grid span[data-level="2"] { background: rgba(var(--accent-rgb),.28); } .kpi-calendar-grid span[data-level="3"] { background: rgba(var(--accent-rgb),.55); } .kpi-calendar-grid span[data-level="4"] { background: var(--accent); box-shadow: 0 2px 5px rgba(var(--accent-rgb),.18); } .kpi-speed { gap: 7px; padding: 7px 9px 6px; } .kpi-speed-head { display: flex; align-items: center; justify-content: space-between; color: #71818c; font-size: 7px; font-weight: 800; line-height: 1; } .kpi-speed-head strong { color: var(--accent); font-size: 11px; font-weight: 850; } .kpi-speed-track { position: relative; width: 100%; height: 6px; border-radius: 999px; background: rgba(var(--accent-rgb),.12); } .kpi-speed-track span { display: block; width: 81%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,rgba(var(--accent-rgb),.42),var(--accent)); } .kpi-speed-track i { position: absolute; right: 8%; top: -3px; width: 2px; height: 12px; border-radius: 2px; background: #e87938; box-shadow: 0 0 0 2px rgba(232,121,56,.12); } .kpi-speed > small { text-align: left; } .kpi-live { display: inline-flex; align-items: center; gap: 5px; color: #4b6858; font-weight: 700; } .theme-shell,.theme-sidebar,.theme-content,.theme-toolbar,.theme-panel,.kpi-card { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* Complete dark theme */ .dark-console { background: #07111b; color: #e7eef5; color-scheme: dark; } .dark-console .theme-shell { background: #07111b; color: #e7eef5; } .dark-console .theme-content { background: radial-gradient(circle at 75% 2%,rgba(16,85,130,.28),transparent 31%),#08131e; color: #e7eef5; } .dark-console .theme-content h1 { color: #f4f8fb; } .dark-console .theme-content > div > section:first-of-type p { color: #b3c1cc; } .dark-console .ui-select,.dark-console .ui-input { border-color: #345064; background-color: #0d1e2b; color: #e4edf4; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); color-scheme: dark; } .dark-console .ui-select:hover,.dark-console .ui-input:hover { border-color: #4a7088; background-color: #102536; } .dark-console .ui-select:focus,.dark-console .ui-input:focus { border-color: #4aa8e8; box-shadow: 0 0 0 3px rgba(74,168,232,.13); } .dark-console .ui-input::placeholder { color: #7f93a3; } .dark-console .ui-button-secondary { border-color: #3a5569; background: linear-gradient(180deg,#142838,#102230); color: #dce7ef; box-shadow: 0 1px 2px rgba(0,0,0,.20); } .dark-console .ui-button-secondary:hover { border-color: #5e8299; background: #172d3d; color: #fff; } .dark-console .ui-button-primary { border-color: #268ed8; background: linear-gradient(180deg,#348fdb,#176fc2); } .dark-console .overview-actions { border-color: rgba(89,127,151,.35); background: rgba(9,24,36,.7); box-shadow: 0 10px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035); } .dark-console .ui-button-secondary .ui-button-icon,.dark-console .date-control-icon { background: #193348; color: #74c5f7; } .dark-console .select-control-arrow { color: #9fb3c1; } .dark-console .sidebar-submenu-inner { border-color: #294052; } .dark-console .sidebar-nav-icon { border-color: #28485c; background: linear-gradient(145deg,#173247,#102737); color: #9ab8ca; box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 2px 7px rgba(0,0,0,.12); } .dark-console .sidebar-nav-icon.is-active { border-color: #34799f; background: linear-gradient(145deg,#194b6b,#123650); color: #8bd3fb; box-shadow: 0 0 0 3px rgba(74,168,232,.06),inset 0 1px 0 rgba(255,255,255,.06); } .dark-console .sidebar-submenu-icon { color: #9bb4c5; } .dark-console .sidebar-dropdown-trigger { color: #c4d2dc; } .dark-console .sidebar-dropdown-trigger:hover { background: rgba(255,255,255,.045); box-shadow: none; } .dark-console .sidebar-dropdown-trigger.is-child-active { background: linear-gradient(90deg,#13334a,#102737); color: #82cff9; box-shadow: inset 0 0 0 1px #2d5269; } .dark-console .sidebar-submenu-item { color: #8fa4b4; } .dark-console .sidebar-submenu-item:hover { background: rgba(255,255,255,.045); color: #dbe7ef; } .dark-console .sidebar-submenu-item[aria-current="page"] { background: rgba(0,120,212,.18); color: #77c8fa; } .dark-console .sidebar-chevron.is-open { background: rgba(74,168,232,.10); color: #77c8fa; } .dark-console .sidebar-live-count { background: rgba(51,185,105,.14); color: #78d99e; } .dark-console .conversation-head { background: linear-gradient(90deg,#0f202d,#102533); } .dark-console .table-pagination { border-color: #233949; background: #0d1c29; color: #8fa1af; } .dark-console .table-pagination strong { color: #dce7ef; } .dark-console .pagination-button { border-color: #3a5263; background: #102230; color: #c6d3dd; box-shadow: none; } .dark-console .pagination-button:hover:not(:disabled):not(.active) { border-color: #56819b; background: #162b3b; color: #77c8fa; } .dark-console .pagination-button.active { border-color: #3d9ee3; background: #1978c9; color: #fff; box-shadow: 0 3px 12px rgba(0,120,212,.22); } .dark-console .pagination-button:disabled { border-color: #263a49; background: #0a1823; color: #506575; } .dark-console .dialog-close { color: #99aab7; } .dark-console .dialog-close:hover { border-color: #385163; background: #142735; color: #fff; } .dark-console .option-button { border-color: #314858; background: #0a1722; color: #e7eef5; box-shadow: none; } .dark-console .option-button:hover { border-color: #4aa8e8; background: #102433; box-shadow: 0 0 0 3px rgba(74,168,232,.09); } .dark-console .theme-toolbar { border-color: #294253; background: #0d1d2a; color: #b8c7d2; box-shadow: inset 0 -1px 0 rgba(255,255,255,.015); } .dark-console .breadcrumb-link { color: #69bdf2; } .dark-console .breadcrumb-separator { color: #5f7484; } .dark-console .breadcrumb-muted { color: #a9bbc8; } .dark-console .breadcrumb-current { color: #f0f5f8; } .dark-console .theme-sidebar { border-color: #203344; background: linear-gradient(180deg,#0d1b28,#091520); color: #d3dee6; } .dark-console .theme-sidebar > div { border-color: #203344; } .dark-console .theme-sidebar button { color: #c8d5de; } .dark-console .theme-sidebar button:hover { background: rgba(255,255,255,.055); } .dark-console .theme-sidebar button[aria-current="page"] { background: linear-gradient(90deg,rgba(0,120,212,.23),rgba(44,149,211,.07)); color: #77c8fa; box-shadow: inset 0 0 0 1px rgba(72,166,225,.16); } .dark-console .theme-sidebar .bg-white { background: #10202e; } .dark-console .theme-sidebar input,.dark-console .theme-sidebar select { border-color: #2b4051; background: #10202e; color: #e7eef5; } .dark-console .theme-panel { border-color: #233949; background: #0d1c29; color: #e2ebf2; box-shadow: 0 12px 34px rgba(0,0,0,.20); } .dark-console .theme-panel > div { border-color: #233949; } .dark-console .theme-panel h2,.dark-console .theme-panel td { color: #dce7ef; } .dark-console .theme-panel p,.dark-console .theme-panel th { color: #adbdc8; } .dark-console .theme-panel thead { border-color: #263b4b; background: #112331; } .dark-console .theme-panel tbody { border-color: #243847; } .dark-console .theme-panel tbody tr { border-color: #203442; } .dark-console .theme-panel tbody tr:hover { background: #12293a; } .dark-console .theme-panel input,.dark-console .theme-panel select { border-color: #314858; background: #0b1925; color: #dce7ef; } .dark-console .theme-panel .bg-white { background: #10202e; } .dark-console [role="dialog"] { border-color: #2a4152; background: #0d1c29; color: #e7eef5; } .dark-console [role="dialog"] > div { border-color: #293e4e; } .dark-console [role="dialog"] input,.dark-console [role="dialog"] select { border-color: #314858; background: #0a1722; color: #e7eef5; } .dark-console .dialog-description,.dark-console .option-meta { color: #aebdca; } .dark-console .option-kicker { color: #91a6b6; } .dark-console .dialog-footer { border-color: #2b4354; background: #102330; } .dark-console .dialog-body label { color: #dce7ee; } /* iCal link snippet — background/color that reads in both themes. */ .ics-code { background: #f4f8fb; color: #25313b; } .dark-console .ics-code { background: #0d1e2b; color: #cbd8e1; border: 1px solid #253d51; } .dark-console .ics-hint { color: #a5b7c4; } /* Dialog height cascade — cap the outer section to viewport, make the body the flex-fill region, and let child flex layouts scroll internally by giving the standard `min-h-0` escape hatch. Without this, tall content (a 30-turn transcript) grew the dialog past the viewport with no scroll anywhere. */ .create-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 32px); } .dialog-body { flex: 1 1 auto; min-height: 0; overflow: hidden; } .dark-console .kpi-card { border-color: rgba(var(--accent-rgb),.18); background: linear-gradient(145deg,rgba(17,35,49,.98),rgba(11,25,37,.98)); box-shadow: 0 14px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035); } .dark-console .kpi-card:hover { border-color: rgba(var(--accent-rgb),.40); box-shadow: 0 18px 44px rgba(0,0,0,.30),0 0 32px rgba(var(--accent-rgb),.08); } .dark-console .kpi-label { color: #c1ced7; } .dark-console .kpi-icon { border-color: rgba(var(--accent-rgb),.28); background: rgba(var(--accent-rgb),.15); box-shadow: none; } .dark-console .kpi-value { color: #f3f8fb; } .dark-console .kpi-visual { border-color: rgba(var(--accent-rgb),.22); background: linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(var(--accent-rgb),.12)); } .dark-console .kpi-visual > small,.dark-console .kpi-speed-head { color: #aebdca; } .dark-console .kpi-resolution-ring::before { background: #102331; } .dark-console .kpi-note,.dark-console .kpi-context { color: #bfccd5; } .dark-console .kpi-context { font-size: 9px; font-weight: 550; } .dark-console .workspace-meta { color: #aebfcc; } .dark-console .workspace-meta .bg-\[\#2e8540\] { background: #41c26d; box-shadow: 0 0 0 3px rgba(65,194,109,.12); } .dark-console .workspace-trigger { border-color: transparent; background: transparent; color: #d8e4ec; } .dark-console .workspace-trigger:hover { border-color: #345166; background: rgba(255,255,255,.045); } .dark-console .workspace-trigger.is-open { border-color: #3f91c9; background: linear-gradient(135deg,#112d42,#102536); box-shadow: 0 0 0 2px rgba(74,168,232,.10); } .dark-console .workspace-trigger-chevron { color: #93a9b9; } .dark-console .workspace-menu { border-color: #365368; background: #0d1e2b; color: #e5eef4; box-shadow: 0 20px 44px rgba(0,0,0,.42); } .dark-console .workspace-menu-heading { border-color: #294354; background: #102433; color: #9fb3c2; } .dark-console .workspace-menu-options { background: #0d1e2b; } .dark-console .workspace-option { color: #dbe6ed; } .dark-console .workspace-option:hover { background: #152d3e; } .dark-console .workspace-option.is-selected { background: linear-gradient(90deg,rgba(0,120,212,.22),rgba(45,147,207,.09)); box-shadow: inset 0 0 0 1px rgba(83,174,228,.13); } .dark-console .workspace-option-avatar { background: #1c3445; color: #c0d0dc; } .dark-console .workspace-option-avatar.is-selected { background: linear-gradient(135deg,#1688d9,#2871d1); color: #fff; } .dark-console .workspace-option-name { color: #e7f0f5; } .dark-console .workspace-option-meta { color: #99adbb; } .dark-console .workspace-option-check,.dark-console .workspace-manage { color: #72c5f7; } .dark-console .workspace-menu-footer { border-color: #294354; background: #102331; } .dark-console .workspace-manage:hover { background: #183244; color: #9bd8fb; } .dark-console .conversation-table thead { color: #aebdca; } .dark-console .conversation-name { color: #edf4f8; } .dark-console .conversation-id { color: #a5b7c4; } .dark-console .conversation-intent,.dark-console .conversation-time { color: #c5d3dd; } .dark-console .conversation-duration { color: #a5b7c4; } .dark-console .conversation-sentiment.is-positive { color: #66d18c; } .dark-console .conversation-sentiment.is-neutral { color: #f0b44d; } .dark-console .conversation-row-action { color: #8fa6b6; } .dark-console .conversation-row-action.is-open { background: #17364b; color: #78cafa; box-shadow: inset 0 0 0 1px #2b5874; } .dark-console .row-action-menu { border-color: #365366; background: #102331; box-shadow: 0 18px 38px rgba(0,0,0,.40); } .dark-console .row-action-menu button { color: #cbd8e1; } .dark-console .row-action-menu button:hover { background: #193449; color: #85cff9; } .dark-console .row-action-menu > span { background: #2b4354; } .dark-console .row-action-menu button.danger { color: #ff9ca4; } .dark-console .row-action-menu button.danger:hover { background: rgba(218,69,79,.12); color: #ffb7bd; } .dark-console .agent-avatar { border-color: #315a76; background: linear-gradient(145deg,#16405d,#102e47); color: #c7ff4f; box-shadow: 0 0 0 3px rgba(78,179,237,.07),inset 0 1px 0 rgba(255,255,255,.06); } .dark-console .console-footer { color: #aebdca; } .dark-console .page-subtitle { color: #b7c5cf; } .dark-console .live-status-pill { border-color: rgba(87,204,128,.34); background: rgba(62,186,104,.11); color: #84dda3; } .dark-console .live-panel { border-color: #294354; background: #0d1e2b; box-shadow: 0 12px 30px rgba(0,0,0,.20); } .dark-console .live-panel-head { border-color: #294354; } .dark-console .live-panel-head h2 { color: #edf4f8; } .dark-console .live-panel-head p { color: #a6b7c3; } .dark-console .live-panel-head > button { border-color: #3a5669; color: #c4d2dc; } .dark-console .healthy-label { border-color: rgba(87,204,128,.30); background: rgba(62,186,104,.10); color: #82dca1; } .dark-console .live-session-row { border-color: #253c4c; color: #d6e1e8; } .dark-console .live-session-row:hover { background: #132a3a; } .dark-console .live-session-avatar { background: #17354a; color: #74c5f7; } .dark-console .live-session-person strong { color: #e8f0f5; } .dark-console .live-session-person small { color: #a4b5c1; } .dark-console .live-session-metric { color: #8fa5b4; } .dark-console .live-session-metric strong { color: #cfdae2; } .dark-console .live-session-metric small { color: #92a7b5; } .dark-console .live-listen { background: rgba(0,120,212,.14); color: #78cafa; } .dark-console .queue-row-head strong { color: #dfe8ee; } .dark-console .queue-row-head small { color: #9fb1be; } .dark-console .queue-track { background: #1d3546; } .dark-console .routing-button { border-color: #365568; color: #76c8f8; } .dark-console .kpi-card > div:last-child { border-color: rgba(255,255,255,.07); } .dark-console .kpi-live { color: #9fc7ad; } .dark-console footer { color: #718696; } ::selection { background: #b8dcf4; color: #111827; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Authentication */ .auth-shell { display: grid; min-height: 100svh; grid-template-columns: minmax(460px,1.05fr) minmax(480px,.95fr); background: #f4f7f9; color: #1f2933; } .auth-story { position: relative; display: flex; min-height: 100svh; flex-direction: column; overflow: hidden; padding: 32px clamp(32px,5vw,76px) 28px; background: radial-gradient(circle at 84% 14%,rgba(33,151,221,.25),transparent 31%),radial-gradient(circle at 10% 90%,rgba(183,242,58,.09),transparent 32%),linear-gradient(145deg,#071521 0%,#0d2d46 58%,#102235 100%); color: #f4f8fb; } .auth-story::before { position: absolute; width: 440px; height: 440px; right: -255px; bottom: -225px; border: 1px solid rgba(110,199,247,.12); border-radius: 999px; box-shadow: 0 0 0 72px rgba(110,199,247,.025),0 0 0 144px rgba(110,199,247,.018); content: ""; } .auth-orbit { position: absolute; width: 310px; height: 310px; right: -156px; top: 82px; border: 1px solid rgba(114,201,248,.11); border-radius: 999px; box-shadow: 0 0 0 42px rgba(114,201,248,.025),0 0 0 84px rgba(114,201,248,.018); } .auth-orbit > span { position: absolute; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(131,207,249,.25); border-radius: 10px; background: rgba(10,38,57,.72); color: #78caf8; box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 9px 22px rgba(0,0,0,.20); backdrop-filter: blur(8px); } .auth-orbit > span:nth-child(1) { left: -5px; top: 44px; }.auth-orbit > span:nth-child(2) { left: 38px; bottom: 48px; color: #bff45a; }.auth-orbit > span:nth-child(3) { right: 42px; top: -8px; } .auth-brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; align-items: center; gap: 10px; color: #f3f8fb; font-size: 15px; font-weight: 720; letter-spacing: -.02em; } .auth-brand small { margin-left: 3px; border-radius: 4px; padding: 3px 6px; background: rgba(255,255,255,.10); color: #b8c7d2; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .auth-story-copy { position: relative; z-index: 1; width: min(100%,590px); margin: auto 0; padding-block: 60px 42px; } .auth-eyebrow { display: flex; align-items: center; gap: 9px; color: #bff45a; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; animation: auth-fade-up .58s .08s both cubic-bezier(.22,.8,.25,1); } .auth-eyebrow span { width: 8px; height: 8px; border-radius: 999px; background: #70d58c; box-shadow: 0 0 0 5px rgba(112,213,140,.12); animation: auth-signal-pulse 2.4s 1s infinite ease-out; } .auth-story h1 { max-width: 590px; margin-top: 20px; font-size: clamp(35px,4.15vw,57px); font-weight: 620; letter-spacing: -.052em; line-height: 1.035; text-wrap: balance; } .auth-story h1.auth-login-title { font-size: clamp(30px,2.9vw,42px); } .auth-login-title .auth-title-line { white-space: nowrap; } .auth-signup-title .auth-title-changing > span { font-size: .84em; letter-spacing: -.04em; } /* Enough padding-bottom to keep descenders (g/y/p/q/j) inside the clipped * reveal-animation box — was .07em, too tight for "you're", "booking", * "appointment", etc. and the tail was getting cut off. */ .auth-title-line { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; } .auth-title-line > span { display: block; transform-origin: left bottom; animation: auth-title-reveal .82s .16s both cubic-bezier(.16,1,.3,1); } .auth-title-line:nth-child(2) > span { animation-delay: .28s; } .auth-title-accent > span { width: fit-content; background: linear-gradient(100deg,#f4f8fb 0%,#8bd5fb 52%,#c8fb61 112%); background-size: 180% 100%; color: transparent; -webkit-background-clip: text; background-clip: text; animation-name: auth-title-reveal,auth-title-color; animation-duration: .82s,5.5s; animation-delay: .28s,1.1s; animation-timing-function: cubic-bezier(.16,1,.3,1),ease-in-out; animation-fill-mode: both; animation-iteration-count: 1,infinite; } .auth-title-changing { min-height: 1.08em; } .auth-title-changing > span { width: max-content; max-width: 100%; white-space: nowrap; animation-name: auth-phrase-change,auth-title-color; animation-duration: .68s,5.5s; animation-delay: 0s,.45s; } .auth-title-primary-word { display: inline-block; } .auth-story-copy > p { max-width: 540px; margin-top: 22px; color: #c0cfda; font-size: 14px; line-height: 1.68; animation: auth-fade-up .68s .42s both cubic-bezier(.22,.8,.25,1); } .auth-trust-list { display: grid; gap: 12px; margin-top: 30px; } .auth-trust-list div { display: flex; align-items: center; gap: 10px; color: #d9e6ee; font-size: 11px; font-weight: 600; animation: auth-fade-up .55s both cubic-bezier(.22,.8,.25,1); } .auth-trust-list div:nth-child(1) { animation-delay: .52s; }.auth-trust-list div:nth-child(2) { animation-delay: .60s; }.auth-trust-list div:nth-child(3) { animation-delay: .68s; } .auth-trust-list svg { color: #79ccf8; } .auth-signal-card { position: relative; z-index: 1; width: min(100%,590px); border: 1px solid rgba(128,194,232,.22); border-radius: 14px; padding: 14px; background: rgba(6,20,31,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 18px 42px rgba(0,0,0,.18); backdrop-filter: blur(12px); animation: auth-fade-up .72s .72s both cubic-bezier(.22,.8,.25,1); } .auth-signal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9eb4c3; font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; } .auth-signal-head span { display: flex; align-items: center; gap: 7px; color: #8ddca7; } .auth-signal-head i { width: 7px; height: 7px; border-radius: 999px; background: #4bc778; box-shadow: 0 0 0 4px rgba(75,199,120,.10); } .auth-live-agent { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-top: 12px; border: 1px solid rgba(119,199,242,.12); border-radius: 9px; padding: 9px; background: rgba(17,52,76,.42); } .auth-agent-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(110,199,247,.25); border-radius: 8px; background: linear-gradient(145deg,#174865,#10334b); color: #c8ff58; font-size: 9px; font-weight: 850; } .auth-live-agent strong,.auth-live-agent small { display: block; } .auth-live-agent strong { color: #e7f0f6; font-size: 9px; font-weight: 720; } .auth-live-agent small { margin-top: 2px; color: #91a9b9; font-size: 7px; } .auth-agent-time { display: flex; align-items: center; gap: 4px; color: #a9bdca; font-size: 8px; font-weight: 700; } .auth-signal-body { display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: end; gap: 16px; padding-top: 13px; } .auth-signal-body strong,.auth-signal-body span { display: block; } .auth-signal-body strong { font-size: 20px; font-weight: 680; letter-spacing: -.035em; } .auth-signal-body > div > span { margin-top: 3px; color: #92a9b9; font-size: 8px; } .auth-signal-bars { display: flex; height: 38px; align-items: flex-end; gap: 3px; } .auth-signal-bars span { flex: 1; min-width: 2px; border-radius: 2px 2px 1px 1px; background: linear-gradient(180deg,#65c7fb,#147bc0); opacity: .85; transform-origin: bottom; animation: auth-bar-rise .62s both cubic-bezier(.22,.8,.25,1); } .auth-signal-bars span:nth-child(1) { animation-delay: .80s; }.auth-signal-bars span:nth-child(2) { animation-delay: .84s; }.auth-signal-bars span:nth-child(3) { animation-delay: .88s; }.auth-signal-bars span:nth-child(4) { animation-delay: .92s; }.auth-signal-bars span:nth-child(5) { animation-delay: .96s; }.auth-signal-bars span:nth-child(6) { animation-delay: 1s; }.auth-signal-bars span:nth-child(7) { animation-delay: 1.04s; }.auth-signal-bars span:nth-child(8) { animation-delay: 1.08s; }.auth-signal-bars span:nth-child(9) { animation-delay: 1.12s; }.auth-signal-bars span:nth-child(10) { animation-delay: 1.16s; }.auth-signal-bars span:nth-child(11) { animation-delay: 1.2s; }.auth-signal-bars span:nth-child(12) { animation-delay: 1.24s; } .auth-story-footer { position: relative; z-index: 1; margin-top: 18px; color: #7890a1; font-size: 8px; letter-spacing: .04em; } .auth-form-side { display: flex; min-height: 100svh; flex-direction: column; background: radial-gradient(circle at 88% 4%,rgba(22,136,204,.08),transparent 30%),#f2f6f9; } .auth-topbar { display: flex; height: 70px; align-items: center; justify-content: flex-end; padding: 0 clamp(24px,4vw,48px); } .auth-mobile-brand { display: none; } .auth-help { display: inline-flex; height: 36px; align-items: center; gap: 6px; margin-right: 9px; border-radius: 8px; padding: 0 10px; color: #61727e; font-size: 9px; font-weight: 680; transition: .16s ease; } .auth-help:hover { background: rgba(255,255,255,.72); color: #0875c2; } .auth-theme-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #cbd6de; border-radius: 9px; background: rgba(255,255,255,.85); color: #50616d; box-shadow: 0 1px 2px rgba(20,43,61,.06); transition: .16s ease; } .auth-theme-button:hover { border-color: #8ba2b2; background: #fff; color: #0875c2; transform: translateY(-1px); } .auth-form-wrap { width: min(100% - 48px,500px); margin: auto; padding: 20px 0 38px; } .auth-form-card { position: relative; border: 1px solid #d3dee5; border-radius: 16px; padding: 22px; background: rgba(255,255,255,.80); box-shadow: 0 24px 64px rgba(24,59,84,.11),inset 0 1px 0 #fff; backdrop-filter: blur(16px); animation: auth-card-enter .72s .14s both cubic-bezier(.22,.8,.25,1); } .auth-access-context { display: flex; min-height: 31px; align-items: center; justify-content: space-between; margin: -7px -7px 20px; border: 1px solid #e0e8ed; border-radius: 9px; padding: 0 9px; background: rgba(244,248,250,.82); color: #687984; font-size: 8px; } .auth-access-context span { display: flex; align-items: center; gap: 6px; color: #337b55; font-weight: 720; } .auth-access-context strong { color: #74838e; font-weight: 620; } .auth-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 8px; margin: -3px 1px 17px; color: #87949e; font-size: 8px; font-weight: 700; } .auth-steps > span { display: flex; align-items: center; gap: 5px; } .auth-steps i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #ced8df; border-radius: 6px; background: #f5f8fa; font-style: normal; } .auth-steps b { height: 1px; background: #dce4e9; } .auth-steps .is-active { color: #0875c2; } .auth-steps .is-active i { border-color: #70b4e1; background: #eaf6fd; color: #0875c2; } .auth-heading { display: flex; align-items: flex-start; gap: 14px; } .auth-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid #bfd9ea; border-radius: 11px; background: linear-gradient(145deg,#edf8fe,#e3f2fb); color: #0878c7; box-shadow: inset 0 1px 0 #fff,0 5px 14px rgba(22,102,154,.08); } .auth-heading h2 { color: #17232c; font-size: 25px; font-weight: 680; letter-spacing: -.035em; line-height: 1.15; } .auth-heading p { max-width: 390px; margin-top: 7px; color: #6d7c87; font-size: 11px; line-height: 1.55; } .auth-form { display: grid; gap: 17px; margin-top: 28px; } .auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .auth-field { display: grid; gap: 7px; color: #34434f; font-size: 10px; font-weight: 720; } .auth-label-row { display: flex; align-items: center; justify-content: space-between; } .auth-label-row a,.auth-consent a,.auth-switch a { color: #0875c2; font-weight: 750; } .auth-label-row a:hover,.auth-consent a:hover,.auth-switch a:hover { text-decoration: underline; } .auth-field small { color: #7c8993; font-size: 8px; font-weight: 520; } .auth-strength { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .auth-strength > span { display: grid; flex: 1; grid-template-columns: repeat(4,1fr); gap: 4px; } .auth-strength i { height: 3px; border-radius: 999px; background: #dce4e9; transition: background .18s ease; } .auth-strength i.is-filled { background: linear-gradient(90deg,#1688d9,#3db877); } .auth-strength small { min-width: 88px; text-align: right; } .auth-input-wrap { position: relative; display: flex; height: 44px; align-items: center; border: 1px solid #bdcad3; border-radius: 9px; background: rgba(255,255,255,.92); color: #71818c; box-shadow: inset 0 1px 0 #fff,0 1px 2px rgba(20,43,61,.04); transition: border-color .16s ease,box-shadow .16s ease,background .16s ease; } .auth-input-wrap:focus-within { border-color: #1685da; box-shadow: 0 0 0 3px rgba(0,120,212,.11); } .auth-input-wrap > svg,.auth-input-wrap > iconify-icon { position: absolute; left: 13px; pointer-events: none; color: #71818c; } .dark-console .auth-input-wrap > iconify-icon { color: #93a9b8; } .auth-input-wrap input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 42px 0 40px; color: #1f2d37; font-size: 11px; font-weight: 560; } .auth-input-wrap input::placeholder { color: #8a98a3; } .auth-input-wrap button { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; margin-right: 3px; border-radius: 7px; color: #71818c; } .auth-input-wrap button:hover { background: #edf4f8; color: #0875c2; } .auth-consent { display: flex; align-items: flex-start; gap: 9px; color: #64737e; font-size: 9px; line-height: 1.55; } .auth-consent input { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 0; } .auth-submit { position: relative; display: flex; height: 44px; align-items: center; justify-content: center; gap: 9px; overflow: hidden; border: 1px solid #0668b5; border-radius: 9px; background: linear-gradient(145deg,#168ce0,#0874c9 55%,#0563ad); color: #fff; font-size: 11px; font-weight: 760; box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 9px 20px rgba(0,103,184,.22); transition: transform .16s ease,box-shadow .16s ease,background .16s ease; } .auth-submit:hover { background: linear-gradient(145deg,#218fdf,#0569bb); box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 12px 25px rgba(0,103,184,.28); transform: translateY(-1px); } .auth-submit:active { transform: translateY(0); } .auth-message { display: flex; align-items: center; justify-content: center; gap: 7px; color: #287544; font-size: 9px; font-weight: 650; } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: #81909b; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; } .auth-divider::before,.auth-divider::after { height: 1px; flex: 1; background: #dce4e9; content: ""; } .auth-sso { display: flex; width: 100%; height: 42px; align-items: center; justify-content: center; gap: 9px; border: 1px solid #bdcad3; border-radius: 9px; background: rgba(255,255,255,.85); color: #31414c; font-size: 10px; font-weight: 720; box-shadow: 0 1px 2px rgba(20,43,61,.05); transition: .16s ease; } .auth-sso:hover { border-color: #879ba9; background: #fff; transform: translateY(-1px); } .auth-sso-arrow { display: grid; width: 22px; height: 22px; place-items: center; margin-left: -2px; border-radius: 6px; background: #edf4f8; color: #0875c2; } .auth-ms-mark { display: grid; width: 15px; height: 15px; grid-template-columns: repeat(2,1fr); gap: 1px; } .auth-ms-mark i:nth-child(1) { background: #f35325; }.auth-ms-mark i:nth-child(2) { background: #81bc06; }.auth-ms-mark i:nth-child(3) { background: #05a6f0; }.auth-ms-mark i:nth-child(4) { background: #ffba08; } .auth-switch { margin-top: 24px; color: #64737e; font-size: 10px; text-align: center; } .auth-security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px -22px -22px; border-top: 1px solid #e0e7ec; border-radius: 0 0 16px 16px; padding: 13px; background: rgba(245,248,250,.70); color: #3c8059; } .auth-security-note strong,.auth-security-note small { display: block; } .auth-security-note strong { font-size: 8px; font-weight: 780; } .auth-security-note small { margin-top: 2px; color: #7d8b95; font-size: 7px; } .auth-form-footer { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(24px,4vw,48px); color: #87949e; font-size: 8px; } .auth-form-footer > span:last-child { display: flex; gap: 14px; } .auth-form-footer a:hover { color: #0875c2; } .dark-console .auth-form-side { background: radial-gradient(circle at 88% 4%,rgba(20,104,157,.18),transparent 28%),#08131e; } .dark-console .auth-theme-button { border-color: #345064; background: #102331; color: #aebfcc; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } .dark-console .auth-theme-button:hover { border-color: #4e7892; background: #162d3e; color: #81cff9; } .dark-console .auth-help { color: #a9bbc8; } .dark-console .auth-help:hover { background: rgba(255,255,255,.045); color: #7dccf8; } .dark-console .auth-form-card { border-color: #294253; background: rgba(13,29,42,.86); box-shadow: 0 28px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035); } .dark-console .auth-access-context { border-color: #294354; background: rgba(16,35,49,.82); color: #91a5b4; } .dark-console .auth-access-context span { color: #79d398; } .dark-console .auth-access-context strong { color: #93a8b7; } .dark-console .auth-steps { color: #879baa; } .dark-console .auth-steps i { border-color: #324c5e; background: #102331; } .dark-console .auth-steps b { background: #2a4151; } .dark-console .auth-steps .is-active { color: #79caf8; } .dark-console .auth-steps .is-active i { border-color: #397ba2; background: #15354b; color: #80cef9; } .dark-console .auth-heading-icon { border-color: #2f5f7b; background: linear-gradient(145deg,#173c55,#102b3e); color: #7acaf8; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .dark-console .auth-heading h2 { color: #f1f6f9; } .dark-console .auth-heading p { color: #adbdc8; } .dark-console .auth-field { color: #dbe5ec; } .dark-console .auth-field small,.dark-console .auth-consent,.dark-console .auth-switch { color: #a5b6c2; } .dark-console .auth-label-row a,.dark-console .auth-consent a,.dark-console .auth-switch a { color: #76c8f8; } .dark-console .auth-input-wrap { border-color: #345064; background: #0d1e2b; color: #93a9b8; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } .dark-console .auth-input-wrap:focus-within { border-color: #4aa8e8; background: #102536; box-shadow: 0 0 0 3px rgba(74,168,232,.13); } .dark-console .auth-input-wrap input { color: #e7eef5; } .dark-console .auth-input-wrap input::placeholder { color: #7f93a3; } .dark-console .auth-input-wrap button:hover { background: #173347; color: #7dccf8; } .dark-console .auth-strength i { background: #294052; } .dark-console .auth-strength i.is-filled { background: linear-gradient(90deg,#3a9fe3,#51ca7c); } .dark-console .auth-message { color: #7bd79a; } .dark-console .auth-divider { color: #8499a8; } .dark-console .auth-divider::before,.dark-console .auth-divider::after { background: #294052; } .dark-console .auth-sso { border-color: #365266; background: #102331; color: #d8e4ec; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .dark-console .auth-sso:hover { border-color: #527a92; background: #162d3e; } .dark-console .auth-sso-arrow { background: #19364b; color: #7dccf8; } .dark-console .auth-security-note { border-color: #294253; background: rgba(16,35,49,.72); color: #78d397; } .dark-console .auth-security-note small { color: #9cafbc; } .dark-console .auth-form-footer { color: #8296a5; } @keyframes auth-title-reveal { from { opacity: 0; transform: translateY(108%) skewY(2deg); } to { opacity: 1; transform: translateY(0) skewY(0); } } @keyframes auth-phrase-change { from { opacity: 0; filter: blur(5px); transform: translateY(72%); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes auth-title-color { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes auth-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes auth-card-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes auth-bar-rise { from { opacity: 0; transform: scaleY(.1); } to { opacity: .85; transform: scaleY(1); } } @keyframes auth-signal-pulse { 0% { box-shadow: 0 0 0 0 rgba(112,213,140,.24); } 70%,100% { box-shadow: 0 0 0 8px rgba(112,213,140,0); } } @media (max-width: 960px) { .auth-shell { grid-template-columns: minmax(0,1fr); } .auth-story { display: none; } .auth-mobile-brand { display: block; margin-right: auto; } .auth-mobile-brand .auth-brand { color: #132535; } .auth-mobile-brand .auth-brand small { background: #e8eef2; color: #64737e; } .dark-console .auth-mobile-brand .auth-brand { color: #eef5f9; } .dark-console .auth-mobile-brand .auth-brand small { background: #162b3b; color: #aebdca; } } @media (max-width: 520px) { .auth-topbar { height: 62px; padding-inline: 18px; } .auth-help { width: 36px; padding: 0; justify-content: center; font-size: 0; } .auth-form-wrap { width: calc(100% - 28px); padding-top: 10px; } .auth-form-card { padding: 18px; border-radius: 13px; } .auth-field-row { grid-template-columns: 1fr; } .auth-heading h2 { font-size: 22px; } .auth-access-context strong { display: none; } .auth-steps { gap: 5px; } .auth-steps b { min-width: 8px; } .auth-security-note { margin: 18px -18px -18px; border-radius: 0 0 13px 13px; } .auth-form-footer { align-items: flex-start; gap: 10px; padding: 18px; } .auth-form-footer > span:last-child { gap: 10px; } } /* ══════════════════════════════════════════════════════════════════ v2 shared UI additions (searchable select, table utilities, forms) ══════════════════════════════════════════════════════════════════ */ /* Highlight active sidebar nav item using the template's language. */ .theme-sidebar nav button[data-nav].is-active { background: linear-gradient(90deg,#e5f4fd,#f3f9fc); color: #0067b8; font-weight: 700; box-shadow: inset 0 0 0 1px #d4eaf7; position: relative; } .theme-sidebar nav button[data-nav].is-active::before { content: ""; position: absolute; inset-block: 8px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: #0078d4; } .theme-sidebar nav button[data-nav]:not(.is-active) { color: #3c4a55; } .theme-sidebar nav button[data-nav]:not(.is-active):hover { background: #fff; box-shadow: 0 1px 4px rgba(32,66,90,.06); } .theme-sidebar nav button[data-nav].is-active .sidebar-nav-icon { border-color: #b8dcee; background: #fff; color: #0078d4; box-shadow: 0 2px 6px rgba(25,79,115,.09),inset 0 1px 0 #fff; } .dark-console .theme-sidebar nav button[data-nav]:not(.is-active) { color: #c4d2dc; } .dark-console .theme-sidebar nav button[data-nav]:not(.is-active):hover { background: rgba(255,255,255,.045); box-shadow: none; } .dark-console .theme-sidebar nav button[data-nav].is-active { background: linear-gradient(90deg,#13334a,#102737); color: #82cff9; box-shadow: inset 0 0 0 1px #2d5269; } .dark-console .theme-sidebar nav button[data-nav].is-active::before { background: #4aa8e8; } .dark-console .theme-sidebar nav button[data-nav].is-active .sidebar-nav-icon { border-color: #34799f; background: linear-gradient(145deg,#194b6b,#123650); color: #8bd3fb; box-shadow: 0 0 0 3px rgba(74,168,232,.06),inset 0 1px 0 rgba(255,255,255,.06); } /* Content area page header pattern */ .page-header { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; } @media (min-width: 768px) { .page-header { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .page-header h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: #1f2933; } .page-header .page-sub { margin-top: 6px; font-size: 12px; color: #626c76; } .dark-console .page-header h1 { color: #f4f8fb; } .dark-console .page-header .page-sub { color: #b3c1cc; } /* Panel — generic card container */ .panel { border: 1px solid #cfdae3; border-radius: 10px; background: #fff; box-shadow: 0 4px 18px rgba(25,61,89,.06); overflow: hidden; } .dark-console .panel { border-color: #233949; background: #0d1c29; box-shadow: 0 12px 34px rgba(0,0,0,.20); color: #e2ebf2; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #d8dee4; } .dark-console .panel-head { border-color: #233949; } .panel-head h2 { font-size: 13px; font-weight: 700; color: #26333d; } .panel-head p { margin-top: 3px; font-size: 10px; color: #6e7781; } .dark-console .panel-head h2 { color: #dce7ef; } .dark-console .panel-head p { color: #a5b7c4; } .panel-body { padding: 18px; } /* Data table — used across tenant pages */ .data-table { width: 100%; border-collapse: collapse; text-align: left; } .data-table thead th { padding: 10px 16px; background: #f4f8fb; border-bottom: 1px solid #d8e2e9; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #667581; } .data-table tbody td { padding: 12px 16px; border-bottom: 1px solid #e5ebf0; font-size: 10px; color: #3e4c57; vertical-align: middle; } .data-table tbody tr:hover td { background: #f1f8fd; } .data-table tbody tr:last-child td { border-bottom: none; } .dark-console .data-table thead th { background: #112331; color: #aebdca; border-color: #263b4b; } .dark-console .data-table tbody td { border-color: #203442; color: #d6e1e8; } .dark-console .data-table tbody tr:hover td { background: #12293a; } /* Section grid (dashboard KPIs, etc.) */ .kpi-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } /* Two-column form layout used on Account, AI Settings, Channels */ .form-grid { display: grid; gap: 16px; grid-template-columns: repeat(1, minmax(0,1fr)); } @media (min-width: 900px) { .form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label, .form-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #667581; } .form-field .hint { font-size: 10px; color: #7c8994; } .form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"], .form-field input[type="number"], .form-field input[type="password"], .form-field input[type="url"], .form-field textarea, .form-field select { height: 40px; border: 1px solid #c0ccd5; border-radius: 9px; background: rgba(255,255,255,.9); padding: 0 12px; font: inherit; font-size: 11px; color: #25313b; outline: none; transition: border-color .16s ease, box-shadow .16s ease; } .form-field textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.55; resize: vertical; } .form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: #8ba0af; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: #1685da; box-shadow: 0 0 0 3px rgba(0,120,212,.12); } .dark-console .form-field label, .dark-console .form-label { color: #a5b7c4; } .dark-console .form-field input, .dark-console .form-field textarea, .dark-console .form-field select { border-color: #345064; background: #0d1e2b; color: #e4edf4; color-scheme: dark; } .dark-console .form-field input:hover, .dark-console .form-field textarea:hover, .dark-console .form-field select:hover { border-color: #4a7088; background: #102536; } /* Segmented control (for filter tabs) */ .segmented { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #bccbd6; border-radius: 10px; background: #eef4f8; } .segmented button { border: 0; border-radius: 7px; background: transparent; padding: 6px 12px; font: inherit; font-size: 11px; font-weight: 600; color: #52616d; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .segmented button.is-active { background: linear-gradient(145deg,#168ce0,#0563ad); color: #fff; box-shadow: 0 2px 6px rgba(0,120,212,.28), inset 0 1px 0 rgba(255,255,255,.18); } .segmented button:not(.is-active):hover { background: rgba(255,255,255,.7); color: #26333d; } .dark-console .segmented { border-color: #345064; background: rgba(9,24,36,.5); } .dark-console .segmented button { color: #a5b7c4; } .dark-console .segmented button.is-active { background: linear-gradient(145deg,#348fdb,#176fc2); color: #fff; box-shadow: 0 2px 6px rgba(0,120,212,.35); } .dark-console .segmented button:not(.is-active):hover { background: rgba(255,255,255,.05); color: #dce7ef; } /* Searchable combobox */ .ui-combobox { position: relative; display: inline-block; width: 100%; box-sizing: border-box; } /* In the page-header toolbar row (overview-actions), sit inline with buttons and honour the inline min-width instead of stretching to a full line. */ .overview-actions .ui-combobox { width: auto; flex: 0 0 auto; } .combobox-trigger { display: flex; width: 100%; height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 1px solid #c0ccd5; border-radius: 9px; background: rgba(255,255,255,.9); color: #25313b; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease; } .combobox-trigger:hover { border-color: #8ba0af; } .combobox-trigger[aria-expanded="true"] { border-color: #1685da; box-shadow: 0 0 0 3px rgba(0,120,212,.12); } .combobox-trigger .is-placeholder { color: #7e8c97; font-weight: 500; } .combobox-panel { position: fixed; z-index: 70; overflow: hidden; border: 1px solid #cbd6df; border-radius: 10px; background: #fff; box-shadow: 0 18px 44px rgba(17,44,67,.18); } .combobox-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e5ebf0; color: #7e8c97; } .combobox-search input { flex: 1; height: 28px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; color: #25313b; } .combobox-options { max-height: 260px; overflow-y: auto; padding: 4px; } .combobox-option { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 6px; background: transparent; padding: 8px 10px; font: inherit; font-size: 11px; color: #34434e; text-align: left; cursor: pointer; } .combobox-option:hover, .combobox-option.is-active { background: #edf6fc; color: #0872bd; } .combobox-option.is-selected { background: #dcebf7; color: #0067b8; font-weight: 700; } .combobox-option-meta { font-size: 9px; color: #7c8994; } .combobox-empty { padding: 20px; text-align: center; font-size: 11px; color: #7c8994; } .dark-console .combobox-trigger { border-color: #345064; background: #0d1e2b; color: #e4edf4; } .dark-console .combobox-trigger:hover { border-color: #4a7088; } .dark-console .combobox-panel { border-color: #365366; background: #102331; box-shadow: 0 22px 48px rgba(0,0,0,.42); } .dark-console .combobox-search { border-color: #253c4c; color: #93a9b8; } .dark-console .combobox-search input { color: #e7eef5; } .dark-console .combobox-option { color: #cbd8e1; } .dark-console .combobox-option:hover, .dark-console .combobox-option.is-active { background: #16344a; color: #85cff9; } .dark-console .combobox-option.is-selected { background: rgba(0,120,212,.22); color: #77c8fa; } .dark-console .combobox-empty { color: #8a9caa; } /* Native