/* Support Center — Nexa Mini App styles. Self-contained, no CDN/build step. * Theme: SDK (nexa-web-app.js) sets `--nexa-*` custom props + [data-nexa-color-scheme] * on when the host posts a 'theme' message (see applyTheme()). We key our own * `--sc-*` tokens off those, with hardcoded hex ONLY as the `var(--nexa-x, #fallback)` * fallback — never bare hex elsewhere. Standalone (no host message yet, e.g. dev * preview) falls back to `prefers-color-scheme`. */ :root, [data-nexa-color-scheme='light'] { --sc-bg: var(--nexa-bg-color, #f4f5f9); --sc-bg2: var(--nexa-secondary-bg-color, #ffffff); --sc-bg-hover: #eef0f6; --sc-text: var(--nexa-text-color, #0f1220); --sc-hint: var(--nexa-hint-color, #6b7185); --sc-link: var(--nexa-link-color, #2f6fed); --sc-accent: var(--nexa-button-color, #5b67f1); --sc-on-accent: var(--nexa-button-text-color, #ffffff); --sc-border: #e6e8ef; --sc-shadow: 0 4px 14px rgba(15, 18, 32, 0.08); --sc-shadow-pop: 0 20px 48px rgba(15, 18, 32, 0.18); --sc-danger: #ef4444; --sc-success: #10b981; --sc-scrim: rgba(15, 18, 32, 0.45); } [data-nexa-color-scheme='dark'] { --sc-bg: var(--nexa-bg-color, #101319); --sc-bg2: var(--nexa-secondary-bg-color, #181c26); --sc-bg-hover: #1f2331; --sc-text: var(--nexa-text-color, #eceef5); --sc-hint: var(--nexa-hint-color, #8a90a3); --sc-link: var(--nexa-link-color, #7c9bff); --sc-accent: var(--nexa-button-color, #6f7bff); --sc-on-accent: var(--nexa-button-text-color, #ffffff); --sc-border: #262a36; --sc-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); --sc-shadow-pop: 0 20px 48px rgba(0, 0, 0, 0.6); --sc-scrim: rgba(0, 0, 0, 0.6); } @media (prefers-color-scheme: dark) { :root:not([data-nexa-color-scheme]) { --sc-bg: var(--nexa-bg-color, #101319); --sc-bg2: var(--nexa-secondary-bg-color, #181c26); --sc-bg-hover: #1f2331; --sc-text: var(--nexa-text-color, #eceef5); --sc-hint: var(--nexa-hint-color, #8a90a3); --sc-link: var(--nexa-link-color, #7c9bff); --sc-accent: var(--nexa-button-color, #6f7bff); --sc-on-accent: var(--nexa-button-text-color, #ffffff); --sc-border: #262a36; --sc-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); --sc-shadow-pop: 0 20px 48px rgba(0, 0, 0, 0.6); --sc-scrim: rgba(0, 0, 0, 0.6); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; font-size: 14px; color: var(--sc-text); background: var(--sc-bg); -webkit-font-smoothing: antialiased; } button, input, select, textarea { font-family: inherit; } #app { height: 100%; } :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 4px; } /* ── boot / desktop-only guard (pre-app screens) ── */ .sc-boot, .sc-desktop-only { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px; text-align: center; } .sc-boot-title, .sc-desktop-only-title { font-size: 18px; font-weight: 700; } .sc-boot-hint, .sc-desktop-only-hint { color: var(--sc-hint); max-width: 420px; } /* ── app shell ── */ .sc-app { height: 100%; display: flex; flex-direction: column; } .sc-appbar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--sc-border); background: var(--sc-bg2); flex: none; } .sc-appbar-title { font-size: 16px; font-weight: 700; margin-right: auto; } .sc-appbody { flex: 1; min-height: 0; overflow: auto; padding: 24px; } .sc-scroll { height: 100%; overflow: auto; } .sc-wrap { max-width: 960px; margin: 0 auto; } /* ── role switch (app bar tabs) ── */ .sc-roleswitch { display: inline-flex; background: var(--sc-bg); border-radius: 10px; padding: 3px; gap: 2px; } .sc-roletab { border: 0; background: transparent; color: var(--sc-hint); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .sc-roletab.on { background: var(--sc-bg2); color: var(--sc-text); box-shadow: var(--sc-shadow); } .sc-rolebadge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--sc-danger); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* ── stats row ── */ .sc-stats { display: flex; gap: 12px; margin-bottom: 18px; } .sc-stat { flex: 1; background: var(--sc-bg2); border: 1px solid var(--sc-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .sc-stat-n { font-size: 24px; font-weight: 700; } .sc-stat-l { font-size: 12px; color: var(--sc-hint); } /* ── list / rows ── */ .sc-list { display: flex; flex-direction: column; gap: 8px; } .sc-row { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--sc-bg2); border: 1px solid var(--sc-border); border-radius: 12px; padding: 12px 14px; cursor: pointer; text-align: left; color: inherit; } .sc-row:hover { background: var(--sc-bg-hover); } .sc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sc-row-top { display: flex; gap: 8px; align-items: baseline; } .sc-row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-row-sub { font-size: 12px; color: var(--sc-hint); display: flex; gap: 6px; align-items: center; } /* ── tabs / filters ── */ .sc-subtabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--sc-border); } .sc-subtab { border: 0; background: transparent; color: var(--sc-hint); font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; } .sc-subtab.on { color: var(--sc-text); border-bottom-color: var(--sc-accent); } .sc-filters { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .sc-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sc-hint); } /* ── badge (TK.44 — chữ + màu, màu chỉ bổ trợ) ── */ .sc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--sc-badge-c, var(--sc-hint)); background: color-mix(in srgb, var(--sc-badge-c, var(--sc-hint)) 14%, transparent); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .sc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-badge-c, var(--sc-hint)); flex: none; } /* ── buttons / inputs ── */ .sc-btn { border: 0; border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; } .sc-btn.sc-btn-primary { background: var(--sc-accent); color: var(--sc-on-accent); } .sc-btn.sc-btn-ghost { background: var(--sc-bg); color: var(--sc-text); border: 1px solid var(--sc-border); } .sc-btn.sc-btn-sm { padding: 6px 12px; font-size: 12px; } .sc-btn:disabled { opacity: 0.5; cursor: default; } .sc-icon-btn { border: 0; background: transparent; color: var(--sc-hint); cursor: pointer; padding: 6px; border-radius: 8px; } .sc-icon-btn:hover { background: var(--sc-bg-hover); } .sc-input { font-size: 14px; padding: 8px 11px; border: 1px solid var(--sc-border); border-radius: 9px; background: var(--sc-bg); color: var(--sc-text); width: 100%; } /* ── table (reports / admin lists) ── */ .sc-table { width: 100%; border-collapse: collapse; font-size: 13px; } .sc-table th, .sc-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--sc-border); } .sc-table th { color: var(--sc-hint); font-weight: 600; font-size: 12px; } .sc-table tr.total td { font-weight: 700; border-top: 2px solid var(--sc-border); } /* ── empty state (TK.40) ── */ .sc-empty { text-align: center; padding: 48px 16px; color: var(--sc-hint); display: flex; flex-direction: column; gap: 8px; align-items: center; } .sc-empty-title { font-size: 15px; font-weight: 600; color: var(--sc-text); } .sc-empty-hint { font-size: 13px; max-width: 380px; } /* ── modal ── */ .sc-modal-scrim { position: fixed; inset: 0; background: var(--sc-scrim); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .sc-modal { width: 100%; max-width: 620px; max-height: 88vh; overflow: auto; background: var(--sc-bg2); border-radius: 16px; box-shadow: var(--sc-shadow-pop); display: flex; flex-direction: column; } .sc-modal-hd { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--sc-border); } .sc-modal-ic { flex: none; } .sc-modal-hd-tx { flex: 1; min-width: 0; } .sc-modal-title { font-size: 15px; font-weight: 700; } .sc-modal-sub { font-size: 12px; color: var(--sc-hint); margin-top: 2px; } .sc-modal-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 14px; } .sc-modal-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--sc-border); } /* ── toast (TK.41 — kết quả cụ thể) ── */ .sc-toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; } .sc-toast { background: var(--sc-text); color: var(--sc-bg); font-size: 13px; padding: 10px 16px; border-radius: 10px; box-shadow: var(--sc-shadow-pop); } /* ── countdown (TK.43) ── */ .sc-countdown { font-size: 12px; color: var(--sc-hint); } .sc-countdown-due { color: var(--sc-danger); font-weight: 600; } /* ── spinner ── */ .sc-spinner { display: inline-block; border-radius: 50%; border: 2px solid var(--sc-border); border-top-color: var(--sc-accent); animation: sc-spin 0.7s linear infinite; } @keyframes sc-spin { to { transform: rotate(360deg); } } /* ── notification bell ── */ .sc-bell-wrap { position: relative; } .sc-bell { position: relative; border: 0; background: transparent; color: var(--sc-text); cursor: pointer; padding: 7px; border-radius: 8px; } .sc-bell:hover { background: var(--sc-bg-hover); } .sc-ic { display: block; } .sc-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--sc-danger); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .sc-bell-dd { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; max-height: 360px; overflow: auto; background: var(--sc-bg2); border: 1px solid var(--sc-border); border-radius: 12px; box-shadow: var(--sc-shadow-pop); padding: 6px; z-index: 50; } .sc-bell-item { padding: 9px 10px; border-radius: 8px; font-size: 13px; } .sc-bell-item.unread { background: var(--sc-bg-hover); font-weight: 600; } .sc-bell-empty { padding: 16px; text-align: center; color: var(--sc-hint); font-size: 13px; } /* ── Task 14 — my-tickets / create-ticket / ticket-detail ── */ /* screen header (title + primary action) */ .sc-screenhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .sc-screenhead h1 { font-size: 18px; font-weight: 700; margin: 0 0 4px; } .sc-screenhead p { font-size: 13px; color: var(--sc-hint); margin: 0; } .sc-row-id { font-weight: 700; color: var(--sc-hint); } .sc-row-meta { display: flex; align-items: center; gap: 10px; flex: none; font-size: 12px; color: var(--sc-hint); } /* dynamic form (create-ticket) */ .sc-form { display: flex; flex-direction: column; gap: 14px; } .sc-field { display: flex; flex-direction: column; gap: 5px; } .sc-field label { font-size: 12px; font-weight: 600; color: var(--sc-hint); } .sc-req { color: var(--sc-danger); } .sc-err { font-size: 12px; color: var(--sc-danger); } .sc-hint-inline { font-weight: 400; color: var(--sc-hint); } .sc-typepick { display: flex; flex-direction: column; gap: 8px; } .sc-typeopt { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: inherit; } .sc-typeopt.on { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 10%, var(--sc-bg)); } .sc-typeopt-ic { font-size: 18px; flex: none; } .sc-typeopt-tx { display: flex; flex-direction: column; gap: 2px; } .sc-typeopt-tx b { font-size: 13px; } .sc-typeopt-tx span { font-size: 12px; color: var(--sc-hint); } .sc-chiprow { display: flex; gap: 8px; flex-wrap: wrap; } .sc-chip { border: 1px solid var(--sc-border); background: var(--sc-bg); color: var(--sc-text); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .sc-chip.on { border-color: var(--sc-accent); background: var(--sc-accent); color: var(--sc-on-accent); } .sc-forecast { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--sc-hint); background: var(--sc-bg); border: 1px dashed var(--sc-border); border-radius: 10px; padding: 10px 12px; } .sc-forecast b { color: var(--sc-text); } .sc-attlist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .sc-att { display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 8px; padding: 6px 10px; } .sc-att-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-att-sz { color: var(--sc-hint); flex: none; } /* ticket-detail */ .sc-detail-top { display: flex; gap: 8px; margin-bottom: 4px; } .sc-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 4px; } .sc-strip-node { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; } .sc-strip-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--sc-bg); border: 2px solid var(--sc-border); color: var(--sc-hint); } .sc-strip-node.active .sc-strip-dot { border-color: var(--sc-accent); color: var(--sc-accent); } .sc-strip-node.done .sc-strip-dot { border-color: var(--sc-success); background: var(--sc-success); color: #fff; } .sc-strip-lbl { font-size: 11px; color: var(--sc-hint); text-align: center; } .sc-strip-node.active .sc-strip-lbl { color: var(--sc-text); font-weight: 600; } .sc-strip-bar { flex: 1; height: 2px; background: var(--sc-border); margin: 0 -4px 20px; min-width: 20px; } .sc-strip-bar.on { background: var(--sc-success); } .sc-strip-flag { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--sc-flag-c, var(--sc-hint)); background: color-mix(in srgb, var(--sc-flag-c, var(--sc-hint)) 16%, transparent); border-radius: 999px; padding: 4px 10px; } .sc-metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .sc-meta { display: flex; flex-direction: column; gap: 2px; } .sc-meta-k { font-size: 11px; color: var(--sc-hint); } .sc-meta-v { font-size: 13px; font-weight: 600; } .sc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .sc-kv-row { display: flex; flex-direction: column; gap: 2px; } .sc-kv-row.wide { grid-column: 1 / -1; } .sc-kv-k { font-size: 11px; color: var(--sc-hint); } .sc-kv-v { font-size: 13px; white-space: pre-wrap; } .sc-sec-lbl { font-size: 12px; font-weight: 700; color: var(--sc-hint); text-transform: uppercase; letter-spacing: 0.02em; } .sc-thread { display: flex; flex-direction: column; gap: 10px; } .sc-msg { display: flex; } .sc-msg-body { max-width: 88%; } .sc-msg.me { justify-content: flex-end; } .sc-msg.me .sc-msg-body { align-items: flex-end; } .sc-msg-hd { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sc-hint); margin-bottom: 3px; } .sc-msg-hd b { color: var(--sc-text); } .sc-msg-bub { background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 12px; padding: 8px 12px; font-size: 13px; white-space: pre-wrap; } .sc-msg.me .sc-msg-bub { background: var(--sc-accent); color: var(--sc-on-accent); border-color: transparent; } .sc-msg-viamcp { font-size: 10px; font-weight: 700; color: var(--sc-accent); border: 1px solid var(--sc-accent); border-radius: 999px; padding: 1px 6px; } .sc-log { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sc-hint); padding: 2px 0; } .sc-log-tx { flex: 1; } .sc-log-tx b { color: var(--sc-text); } .sc-banner { font-size: 12px; color: var(--sc-text); background: var(--sc-bg); border: 1px solid var(--sc-border); border-left: 3px solid var(--sc-accent); border-radius: 8px; padding: 8px 12px; } .sc-composer { display: flex; flex-direction: column; gap: 8px; } .sc-composer-att { display: flex; align-items: center; gap: 10px; } .sc-composer-att .sc-icon-btn { width: auto; font-size: 12px; font-weight: 600; padding: 6px 10px; } .sc-composer-ft { display: flex; justify-content: flex-end; } .sc-confirm { display: flex; flex-direction: column; gap: 8px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 12px; padding: 12px 14px; } .sc-confirm-hd { font-size: 13px; font-weight: 700; } .sc-confirm-sub { font-size: 12px; color: var(--sc-hint); } .sc-confirm-act { display: flex; gap: 8px; justify-content: flex-end; } .sc-reopen { display: flex; flex-direction: column; gap: 8px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 12px; padding: 12px 14px; } .sc-reopen-hd { font-size: 13px; font-weight: 700; } .sc-reopen-note { font-size: 12px; color: var(--sc-hint); } .sc-csat { display: flex; flex-direction: column; gap: 8px; } .sc-csat-q { font-size: 13px; } .sc-csat-stars { display: flex; gap: 4px; font-size: 20px; color: var(--sc-border); } .sc-csat-stars .on { color: var(--sc-accent); } .sc-csat-stars.pick button { border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--sc-border); padding: 0; } .sc-csat-stars.pick button.on { color: var(--sc-accent); } .sc-csat-cmt { font-size: 12px; color: var(--sc-hint); font-style: italic; } /* ── Task 15 — queue-inbox / admin-types / admin-type-editor / admin-queues / reports ── */ /* agent action bar (ticket-detail, mode='agent') */ .sc-agentbar { display: flex; flex-direction: column; gap: 10px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 12px; padding: 12px 14px; } .sc-agentbar-hd { font-size: 12px; font-weight: 700; color: var(--sc-hint); text-transform: uppercase; letter-spacing: 0.02em; } .sc-agentrow-act { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .sc-agentrow-act .sc-input { width: auto; min-width: 160px; } .sc-actsel { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--sc-hint); } /* queue-inbox — widget + chips + rows */ .sc-widget { background: var(--sc-bg2); border: 1px solid var(--sc-border); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .sc-widget-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sc-widget-ttl { font-size: 14px; font-weight: 700; } .sc-seg { display: inline-flex; background: var(--sc-bg); border-radius: 8px; padding: 3px; gap: 2px; } .sc-seg button { border: 0; background: transparent; color: var(--sc-hint); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; cursor: pointer; } .sc-seg button.on { background: var(--sc-bg2); color: var(--sc-text); box-shadow: var(--sc-shadow); } .sc-widget-stats { display: flex; gap: 10px; } .sc-stat-sm { padding: 8px 12px; } .sc-stat-sm .sc-stat-n { font-size: 18px; } .sc-widget-byagent { display: flex; flex-direction: column; gap: 6px; } .sc-agentrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--sc-border); } .sc-agentrow-nm { font-weight: 600; } .sc-agentrow-n { color: var(--sc-hint); } .sc-chipbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 6px; border-radius: 999px; background: var(--sc-danger); color: #fff; font-size: 10px; font-weight: 700; } .sc-subtab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 999px; background: var(--sc-bg-hover); color: var(--sc-text); font-size: 10px; font-weight: 700; } .sc-subtab.on .sc-subtab-badge { background: color-mix(in srgb, var(--sc-accent) 20%, transparent); color: var(--sc-accent); } .sc-rowwrap { display: flex; align-items: stretch; gap: 8px; } .sc-rowwrap .sc-row { flex: 1; } .sc-claim { flex: none; border: 0; border-radius: 9px; padding: 0 16px; font-size: 12px; font-weight: 700; cursor: pointer; background: var(--sc-accent); color: var(--sc-on-accent); } .sc-claim:disabled { opacity: 0.5; cursor: default; } /* admin — shared card list (types + queues) */ .sc-cardlist { display: flex; flex-direction: column; gap: 10px; } .sc-flowcard { display: flex; gap: 12px; background: var(--sc-bg2); border: 1px solid var(--sc-border); border-radius: 12px; padding: 14px 16px; } .sc-flowcard-ic { font-size: 22px; flex: none; } .sc-flowcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .sc-flowcard-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sc-flowcard-nm { font-size: 14px; font-weight: 700; } .sc-flowcard-desc { font-size: 12px; color: var(--sc-hint); } .sc-flowcard-act { display: flex; flex-direction: column; gap: 6px; flex: none; justify-content: center; } .sc-typemeta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--sc-hint); } .sc-typestatus { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .sc-typestatus.draft { background: color-mix(in srgb, #f0a516 16%, transparent); color: #f0a516; } .sc-typestatus.active { background: color-mix(in srgb, var(--sc-success) 16%, transparent); color: var(--sc-success); } .sc-typestatus.inactive { background: var(--sc-bg-hover); color: var(--sc-hint); } .sc-openbadge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sc-accent) 14%, transparent); color: var(--sc-accent); } .sc-fixedtag { font-size: 10px; font-weight: 700; color: var(--sc-hint); border: 1px solid var(--sc-border); border-radius: 999px; padding: 1px 8px; } .sc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--sc-hint); background: var(--sc-bg); border-radius: 4px; padding: 1px 5px; } .sc-leadtag { font-size: 11px; font-weight: 700; color: var(--sc-accent); border: 1px solid var(--sc-accent); border-radius: 999px; padding: 1px 8px; } .sc-lockguide { background: color-mix(in srgb, var(--sc-danger) 8%, transparent); border-radius: 8px; padding: 8px 10px; } .sc-lockguide-hd { font-size: 12px; font-weight: 700; color: var(--sc-danger); margin-bottom: 3px; } .sc-eligible-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--sc-hint); } .sc-conseq-list { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; } .sc-memberavatars { display: flex; flex-wrap: wrap; gap: 6px; } .sc-memberav { font-size: 12px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 999px; padding: 3px 10px; } /* admin-queues — member editor modal */ .sc-addrow { display: flex; gap: 8px; align-items: center; } .sc-memberlist { display: flex; flex-direction: column; gap: 6px; } .sc-memberrow { display: flex; align-items: center; gap: 8px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 8px; padding: 6px 10px; } .sc-leadradio { display: flex; align-items: center; } .sc-memberrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; } .sc-memberrow-tx span { font-size: 11px; color: var(--sc-hint); } /* admin-type-editor — wizard */ .sc-stepbar { display: flex; align-items: center; gap: 0; margin-bottom: 6px; flex-wrap: wrap; } .sc-stepbar-bar { flex: 1; height: 2px; background: var(--sc-border); margin: 0 6px; min-width: 12px; } .sc-stepbar-node { border: 0; background: transparent; color: var(--sc-hint); font-size: 12px; padding: 4px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .sc-stepbar-node.on { background: var(--sc-bg-hover); color: var(--sc-text); font-weight: 700; } .sc-stepbar-node.blocked b { color: var(--sc-danger); } .sc-stepbar-node.ready b { color: var(--sc-success); } .sc-fieldeditor { display: flex; flex-direction: column; gap: 8px; } .sc-fldrow { display: flex; align-items: center; gap: 6px; } .sc-fldrow .sc-input { flex: 1; min-width: 0; } .sc-fldrow select.sc-input { flex: none; width: 130px; } .sc-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sc-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; } .sc-tag button { border: 0; background: transparent; cursor: pointer; color: var(--sc-hint); padding: 2px; } .sc-taginput { border: 0; background: transparent; font-size: 12px; outline: none; color: var(--sc-text); min-width: 120px; } .sc-memberpick { display: flex; flex-wrap: wrap; gap: 6px; } .sc-memberopt { border: 1px solid var(--sc-border); background: var(--sc-bg); color: var(--sc-text); font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; } .sc-memberopt.on { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 12%, var(--sc-bg)); color: var(--sc-accent); font-weight: 600; } .sc-handlerlist { display: flex; flex-direction: column; gap: 6px; } .sc-handlerrow { display: flex; align-items: center; gap: 8px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 8px; padding: 6px 10px; font-size: 13px; } .sc-handlerrow-no { font-weight: 700; color: var(--sc-hint); width: 18px; text-align: center; } .sc-handlerrow-nm { flex: 1; } .sc-modepick { display: flex; flex-direction: column; gap: 8px; } .sc-modeopt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; background: var(--sc-bg); border: 1px solid var(--sc-border); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .sc-modeopt span { font-size: 12px; color: var(--sc-hint); font-weight: 400; } .sc-rostatus { display: flex; flex-wrap: wrap; gap: 8px; } .sc-statuschip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sc, var(--sc-hint)); background: color-mix(in srgb, var(--sc, var(--sc-hint)) 14%, transparent); padding: 4px 10px; border-radius: 999px; } .sc-reviewgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .sc-reviewgrid > div { display: flex; flex-direction: column; gap: 2px; } .sc-eligible { border-radius: 10px; padding: 10px 12px; } .sc-eligible.ok { background: color-mix(in srgb, var(--sc-success) 10%, transparent); } .sc-eligible.blocked { background: color-mix(in srgb, var(--sc-danger) 8%, transparent); } .sc-eligible-hd { font-size: 13px; font-weight: 700; } .sc-wizard-ft { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } /* reports */ .sc-tablewrap { width: 100%; overflow-x: auto; } .sc-tablewrap .sc-table { min-width: 900px; } .sc-cellbtn { border: 0; background: transparent; color: var(--sc-text); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; } .sc-cellbtn:hover { text-decoration: underline; } .sc-cellsub { font-size: 11px; color: var(--sc-hint); margin-top: 2px; } .sc-cellsub.good { color: var(--sc-success); } .sc-cellsub.bad { color: var(--sc-danger); } .sc-comparetoggle { display: flex; flex-direction: row !important; align-items: center; gap: 6px; font-size: 12px; color: var(--sc-text) !important; }