/* ===================================================
Control Admin — Shared Component Styles
Source of truth: dchdesign-en.insided.com (live-verified)
Figma: CC Design System — Control (c61O5o9s4KOuQgpToyWO6f)
Last verified: 2026-09-08
=================================================== */
/* --- Base reset --- */
* { box-sizing: border-box; }
/* ===================================================
SIDE NAVIGATION — Figma node 13012-38358
Usage: include side-nav.js, set
=================================================== */
.side-nav {
display: flex;
flex-shrink: 0;
height: 100vh;
box-shadow: 0 0 1px 0 rgba(24,31,38,.12), 1px 1px 3px 0 rgba(24,31,38,.2);
}
/* Icon rail */
.side-nav__rail {
width: 48px;
height: 100%;
background: #25313B;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.side-nav__logo {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.side-nav__logo svg { width: 28px; height: 16px; }
.side-nav__icon-btn {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
border: none;
cursor: pointer;
transition: background 0.1s;
padding: 0;
color: rgba(255,255,255,0.7);
}
.side-nav__icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-nav__icon-btn.active { background: #43474A; color: #fff; }
.side-nav__icon-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Collapse / expand button at rail bottom */
.side-nav__collapse-btn {
margin-top: auto;
width: 48px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: rgba(255,255,255,.5);
transition: color 0.1s;
padding: 0;
flex-shrink: 0;
}
.side-nav__collapse-btn:hover { color: #fff; }
.side-nav__collapse-btn svg { width: 16px; height: 16px; }
/* Collapsed state — hide the drawer */
.side-nav--collapsed .side-nav__drawer { display: none; }
/* Drawer panel */
.side-nav__drawer {
width: 240px;
height: 100%;
background: #F6F6F6;
border-right: 1px solid #C8C9C9;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow-y: auto;
}
.side-nav__drawer::-webkit-scrollbar { width: 6px; }
.side-nav__drawer::-webkit-scrollbar-track { background: transparent; }
.side-nav__drawer::-webkit-scrollbar-thumb { background: #C2C2C2; border-radius: 3px; }
.side-nav__panel {
display: none;
flex-direction: column;
padding: 16px 0 24px;
gap: 0;
}
.side-nav__panel.active { display: flex; }
.side-nav__section-title {
font-size: 18px;
font-weight: 600;
color: #181F26;
line-height: 1.4;
padding: 0 24px 16px;
}
/* L2 group */
.side-nav__group { display: flex; flex-direction: column; }
.side-nav__group-heading {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 12px 16px 4px 24px;
font-size: 12px;
font-weight: 400;
color: #3C4A57;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 16px;
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.side-nav__group-heading:hover { color: #181F26; }
.side-nav__group-chevron { display: flex; align-items: center; color: #3C4A57; flex-shrink: 0; }
.side-nav__group-heading:hover .side-nav__group-chevron { color: #181F26; }
.side-nav__group-items { display: flex; flex-direction: column; }
.side-nav__group.is-collapsed .side-nav__group-items { display: none; }
.side-nav__item {
display: block;
width: 100%;
height: 36px;
padding: 0 24px;
font-size: 14px;
font-weight: 400;
color: #181F26;
line-height: 36px;
background: none;
border: none;
text-align: left;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
font-family: inherit;
transition: background 0.1s, color 0.1s;
overflow: hidden;
text-overflow: ellipsis;
}
.side-nav__item:hover { background: rgba(3,105,233,.06); color: #0369E9; }
.side-nav__item.active { background: #EBF3FE; color: #0369E9; font-weight: 600; }
/* --- Shell layout --- */
html, body { margin: 0; height: 100%; }
body { display: flex; font-family: var(--hz-font-family); }
/* Icon rail (48px dark sidebar) — live-verified #25313B bg, #43474A active bg, no border accent */
.icon-rail {
width: 48px;
flex: 0 0 48px;
background: var(--hz-bg-color-strong);
box-shadow: rgba(24,31,38,.2) 1px 1px 3px 0, rgba(24,31,38,.12) 0 0 1px 0;
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
}
.icon-rail__logo {
color: #E85D9A;
font-weight: 700;
font-size: 18px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-rail__item {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: #fff; cursor: pointer;
box-sizing: border-box;
}
.icon-rail__item svg { stroke: currentColor; }
.icon-rail__item:hover { background: rgba(255,255,255,.06); }
.icon-rail__item.active { background: #43474A; }
/* Secondary nav panel (flyout) — 239px, #F6F6F6, live-verified */
.nav-panel {
width: 239px;
flex: 0 0 239px;
background: #F6F6F6;
border-right: 1px solid var(--hz-border-color-base);
display: flex;
flex-direction: column;
gap: 2px;
padding: 16px 0;
overflow-y: auto;
z-index: 1;
transition: width .15s ease, flex-basis .15s ease;
}
.nav-panel.is-hidden { width: 0; flex: 0 0 0; overflow: hidden; padding: 0; }
.nav-panel__title { font-size: 18px; font-weight: 600; color: #181F26; padding: 0 24px 10px; }
.nav-panel__section { display: flex; flex-direction: column; }
.nav-panel__group-label {
font-size: 12px; font-weight: 400; letter-spacing: 1px;
text-transform: uppercase; color: #3C4A57; padding: 0 24px 8px;
}
.nav-panel__link { display: block; padding: 8px 24px; border-radius: 2px; font-size: 14px; font-weight: 400; color: #181F26; text-decoration: none; }
.nav-panel__link:hover { background: var(--hz-bg-color-base-hover); }
.nav-panel__link.active {
background: #E6E9EC;
color: var(--hz-primary-color);
}
/* Main column */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
/* Topbar */
.topbar {
height: 48px; flex: 0 0 48px;
display: flex; align-items: center; justify-content: space-between;
padding: 0 40px;
background: #fff;
border-bottom: 1px solid #D5D9DE;
font-size: 14px;
color: #181F26;
}
.topbar__greeting { display: flex; align-items: center; gap: 0; }
.topbar__actions { display: flex; align-items: center; gap: 24px; color: #181F26; }
.avatar {
width: 24px; height: 24px; border-radius: 50%;
background: var(--hz-primary-color); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600;
}
/* Page header — large standalone heading used on settings/detail pages */
.page-header { padding: 16px 40px; background: #fff; border-bottom: 1px solid #c7c7c7; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-header h1 { font-size: 26px; font-weight: 700; color: #181F26; margin: 0; line-height: 1.3; }
/* Content area */
.content { flex: 1; overflow-y: auto; padding: 24px; background: #fff; }
/* Settings page variant (verified against live product 2026-09-09)
White bg, centered column, max-width 640px, 24px horizontal padding.
Section spacing: dirty-section__title mb=16px (title→card), dirty-section mb=24px (card→next title). */
.content--settings { background: #fff; padding: 0 24px 80px; display: flex; flex-direction: column; align-items: center; }
.content--settings > * { width: 100%; max-width: 640px; }
.placeholder-card {
background: var(--hz-component-background);
border: 1px solid var(--hz-border-color-light);
border-radius: var(--hz-border-radius-base);
padding: 40px;
color: var(--hz-text-color-secondary);
text-align: center;
}
/* ===== BUTTONS — Current (Horizon) generation ===== */
.btn-new {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--hz-font-family);
font-weight: var(--hz-font-weight-semibold);
border-radius: var(--hz-border-radius-xsmall);
cursor: pointer;
border: 1px solid transparent;
}
.btn-new--medium { height: 40px; padding: 8px 16px; font-size: 14px; }
.btn-new--small { height: 32px; padding: 2px 8px; font-size: 12px; }
.btn-new--secondary { background: #fff; color: var(--hz-text-color-primary); border-color: var(--hz-border-color-base); }
.btn-new--secondary:hover { background: var(--hz-bg-color-base-hover); }
.btn-new--primary { background: var(--hz-primary-color); color: #fff; border-color: var(--hz-primary-color); }
.btn-new--primary:hover { background: #034AA3; }
.btn-new--danger { background: var(--hz-bg-color-notify); color: #fff; border-color: var(--hz-bg-color-notify); }
.btn-new--success { background: #13AD68; color: #fff; border-color: #13AD68; }
.btn-new--warning-outline { background: #fff; color: var(--hz-bg-color-notify); border-color: var(--hz-border-color-base); }
.btn-new--brand { background: var(--hz-primary-color); color: #fff; border-color: var(--hz-primary-color); }
.btn-new--ghost { background: transparent; color: var(--hz-text-color-primary); border-color: transparent; }
.btn-new--ghost:hover { background: var(--hz-bg-color-base-hover); }
.btn-new--danger-subtle { background: #fff; color: #dc3626; border-color: var(--hz-border-color-base); }
.btn-new--danger-subtle:hover { background: #fff5f5; }
.btn-new:disabled, .btn-new--disabled { background: var(--hz-border-color-base); color: #fff; border-color: var(--hz-border-color-base); cursor: not-allowed; }
.btn-split { display: inline-flex; }
.btn-split .btn-new:first-child { border-radius: 4px 0 0 4px; border-right: 1px solid rgba(255,255,255,.3); }
.btn-split .btn-new:last-child { border-radius: 0 4px 4px 0; padding: 0 8px; }
/* Filter pill */
.filter-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(0,0,0,.2); border-radius: 4px; padding: 12px; font-size: 14px; }
.filter-pill .filter-type { color: var(--hz-text-color-primary); }
.filter-pill .filter-value { font-weight: 600; margin-left: 4px; }
.filter-pill .dismiss { color: var(--hz-text-color-secondary); cursor: pointer; margin-left: 4px; }
/* Breadcrumb */
.breadcrumb { font-size: 14px; font-weight: 400; color: #3C4A57; margin-bottom: 8px; cursor: pointer; text-decoration: none; }
.breadcrumb:hover { text-decoration: underline; }
/* Modal */
.modal { background: #fff; border-radius: 6px; width: 528px; padding: 24px; }
.modal--medium { width: 728px; }
.modal--large { width: 880px; }
.modal__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.modal__title-group { display: flex; flex-direction: column; gap: 2px; }
/* modal__label: optional eyebrow above the title — e.g. "EDIT RULE". Keep to one line, all-caps. */
/* Rule: use EITHER modal__label + modal__title, OR modal__title alone — never two title-level elements */
.modal__label { font-size: 11px; font-weight: 600; color: var(--hz-text-color-secondary); text-transform: uppercase; letter-spacing: .06em; }
.modal__title { font-size: 18px; font-weight: 700; color: var(--hz-text-color-primary); margin: 0; }
.modal__close { cursor: pointer; color: var(--hz-text-color-secondary); border: none; background: none; font-size: 16px; flex-shrink: 0; margin-left: 16px; }
.modal__body { font-size: 14px; color: var(--hz-text-color-primary); margin-bottom: 24px; line-height: 1.5; }
.modal__label + .modal__title { margin-top: 0; }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; }
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay[hidden] { display: none; }
/* Toast — live-verified: position fixed top-right, z-index 999999 */
.toast-container { position: fixed; top: 55px; right: 12px; z-index: 999999; width: 300px; display: flex; flex-direction: column; gap: 8px; }
.toast { width: 300px; background: #51A351; color: #fff; padding: 15px 15px 15px 50px; border-radius: 3px; box-shadow: rgba(0,0,0,.3) 0 1px 1px; font-size: 12px; font-weight: 400; position: relative; }
.toast--error { background: var(--hz-error-color); }
/* Kebab dropdown */
.kebab-menu { position: relative; display: inline-block; }
.kebab-menu__trigger { border: none; background: none; font-size: 18px; color: var(--hz-text-color-secondary); cursor: pointer; padding: 4px 8px; }
.kebab-menu__list {
position: absolute; top: 100%; left: 0;
background: #fff; border-radius: 2px;
box-shadow: rgba(0,0,0,.16) 0 1px 4px 0;
padding: 8px 0; min-width: 160px;
display: none; z-index: 50;
}
.kebab-menu__list.is-open { display: block; }
.kebab-menu__item { display: block; padding: 8px 16px; font-size: 12px; color: var(--hz-text-sub-title-color); text-decoration: none; cursor: pointer; }
.kebab-menu__item:hover { background: var(--hz-bg-color-base-hover); }
.kebab-menu__item--danger { color: var(--hz-bg-color-notify); }
/* Rich text editor — wrapper alias (design system); real library is CKEditor4 */
.rte { border: 1px solid var(--hz-border-color-base); border-radius: 4px; overflow: hidden; }
.rte__toolbar { display: flex; align-items: center; gap: 2px; padding: 4px 4px 0; border-bottom: 1px solid var(--hz-border-color-base); background: rgb(207,209,207); flex-wrap: wrap; border-radius: 4px 4px 0 0; height: 33px; box-shadow: rgba(255,255,255,1) 0 1px 0 inset; }
.rte__toolbar button { border: none; background: none; width: 20px; height: 20px; border-radius: 3px; color: var(--hz-text-color-primary); cursor: pointer; font-size: 13px; padding: 4px; }
.rte__toolbar button:hover { background: var(--hz-bg-color-base-hover); }
.rte__toolbar .sep { width: 1px; height: 18px; background: #D5D9DE; box-shadow: rgba(255,255,255,.5) 1px 0 1px; margin: 0 4px; }
.rte__toolbar select { border: none; background: none; font-size: 12px; color: var(--hz-text-color-primary); }
.rte__body { min-height: 120px; padding: 12px; font-size: 14px; color: var(--hz-text-color-placeholder); border-radius: 0 0 4px 4px; }
/* Real CKEditor4 class names (live-verified) */
.cke_top { height: 33px; padding: 4px 4px 0; background: rgb(207,209,207); box-shadow: rgba(255,255,255,1) 0 1px 0 inset; border-radius: 4px 4px 0 0; }
.cke_button { width: 20px; height: 20px; padding: 4px; border-radius: 3px; }
.cke_toolbar_separator { width: 1px; height: 18px; background: #D5D9DE; box-shadow: rgba(255,255,255,.5) 1px 0 1px; margin: 0 4px; display: inline-block; }
/* CodeMirror — live-verified values (email editor + scripts page) */
.CodeMirror { font-family: monospace; font-size: 14px; line-height: 20px; background: #fff; color: #000; border: 1px solid #D5D9DE; border-radius: 4px; }
.CodeMirror-gutters { background: #F7F7F7; border-right: 1px solid #DDD; width: 29px; }
.CodeMirror-linenumber { color: #999; padding: 0 3px 0 5px; }
/* AI panel */
.ai-panel {
border-radius: 8px; padding: 24px; border: 1px solid transparent;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(to right top, #FF8F6B, #B972FF, #55ADFF) border-box;
}
.ai-panel__label {
font-weight: 600; font-size: 14px; margin-bottom: 12px;
display: flex; align-items: center; gap: 6px;
background: linear-gradient(to right top, #FF8F6B, #B972FF, #55ADFF);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ai-panel__label svg { width: 16px; height: 16px; flex: none; }
.ai-panel__label .grad-icon { fill: #B972FF; }
.ai-panel textarea { width: 100%; border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 12px; font-size: 14px; font-family: var(--hz-font-family); margin-bottom: 12px; resize: none; }
/* File upload */
.upload-field .hint { font-size: 12px; color: var(--hz-text-color-secondary); margin: 4px 0 8px; }
.upload-btn { border: 1px solid #C7C7C7; background: #fff; color: #34383A; border-radius: 2px; padding: 6px 10px; font-size: 12px; font-weight: 400; cursor: pointer; width: 100%; }
/* Tags input */
.tags-input { border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--hz-text-color-placeholder); width: 100%; }
/* Nested tree (category/section list) */
.tree { border: 1px solid var(--hz-border-color-light); border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.tree__header { display: flex; align-items: center; gap: 10px; background: var(--hz-control-bg-base); padding: 12px 16px; font-weight: 600; font-size: 14px; }
.tree__header .drag-handle { color: var(--hz-text-color-disabled); cursor: grab; }
.tree__header .spacer { flex: 1; }
.tree__header .icon-btn { border: none; background: none; color: var(--hz-text-color-secondary); cursor: pointer; font-size: 14px; }
.tree__row { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 40px; font-size: 14px; border-top: 1px solid var(--hz-border-color-light); }
.tree__add-link { display: block; padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--hz-primary-color); cursor: pointer; }
/* Rule card */
.rule-card { border: 1px solid var(--hz-border-color-light); border-radius: 6px; margin-bottom: 12px; }
.rule-card__header { display: flex; align-items: center; gap: 10px; padding: 16px; cursor: pointer; }
.rule-card__header .title { font-weight: 700; font-size: 14px; flex: 1; }
.status-badge { font-size: 11px; font-weight: 700; background: var(--hz-bg-color-secondary); color: var(--hz-text-color-secondary); padding: 2px 8px; border-radius: 4px; }
.status-badge--on { background: var(--hz-bg-color-success); color: var(--hz-success-color); }
.rule-card__body { padding: 0 16px 16px 46px; font-size: 14px; line-height: 1.9; }
.rule-card__body input { width: 60px; border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 6px 12px; font-size: 12px; margin: 0 4px; }
.info-callout { display: flex; gap: 8px; background: #F6F6F6; border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 8px 12px; font-size: 13px; margin-top: 12px; }
.info-callout a { color: var(--hz-primary-color); }
/* ===== BUTTONS — mid generation (.button-control, 2px radius) ===== */
.btn-mid { display: inline-flex; align-items: center; height: 32px; padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); cursor: pointer; }
.btn-mid--success { background: #A2CF6B; color: #fff; }
.btn-mid--danger { background: #F75D4F; color: #fff; }
.btn-mid--secondary { background: #fff; color: var(--hz-text-color-primary); }
/* ===== BUTTONS — legacy (bootstrap-era .btn) ===== */
.btn-legacy { display: inline-flex; align-items: center; height: 31px; padding: 6px 10px; font-size: 12px; border-radius: 2px; cursor: pointer; }
.btn-legacy--primary { background: #1E9CDF; color: #fff; border: 1px solid #228BC2; }
.btn-legacy--default { background: #fff; color: #34383A; border: 1px solid #C7C7C7; box-shadow: rgba(0,0,0,.3) 0 1px 0 0; }
/* ===== FORM CONTROLS ===== */
.field { margin-bottom: 20px; max-width: 420px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--hz-text-color-secondary); margin-bottom: 6px; }
/* ── Legacy generic input (used in template-topic, moderate etc.) ── */
.input, .textarea {
width: 100%; border: 1px solid var(--hz-border-color-base);
border-radius: var(--hz-border-radius-xsmall);
padding: 6px 10px; font-size: 14px; font-family: var(--hz-font-family); color: var(--hz-text-color-primary);
}
.textarea { padding: 12px; min-height: 90px; resize: vertical; }
.char-count { text-align: right; font-size: 11px; color: var(--hz-text-color-placeholder); margin-top: 4px; }
.input:focus, .textarea:focus { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
/* ── .select-trigger — inline compact dropdown button (32px, used in action-bars/settings) ── */
.select-trigger { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; }
/* ===== FORM FIELD COMPONENTS (verified on live edit panels) ===== */
/* ds-field: label wrapper */
/* ds-input: text input — 40px, 14px, all states */
/* ds-select: full-width dropdown trigger — same height as ds-input */
/* ds-select--searchable: opens a search panel (JS required) */
/* ds-tags-field: tag chip container with inline text input */
.ds-field { display: flex; flex-direction: column; gap: 8px; }
.ds-field__label { font-size: 14px; font-weight: 600; color: var(--hz-text-color-primary); margin: 0; }
.ds-field__hint { font-size: 12px; color: var(--hz-text-color-secondary); margin: -4px 0 0; }
/* Text input — 40px tall */
.ds-input {
width: 100%;
border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall);
padding: 8px 12px; font-size: 14px; font-family: var(--hz-font-family);
color: var(--hz-text-color-primary); background: #fff;
transition: border-color .15s;
}
.ds-input::placeholder { color: var(--hz-text-color-placeholder); }
.ds-input:focus { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
.ds-input:disabled { background: var(--hz-input-disabled-bg); color: var(--hz-text-color-disabled); cursor: not-allowed; }
.ds-input--error { border-color: var(--hz-error-color) !important; }
.ds-input--error:focus { outline-color: #FCBEB9; }
/* Textarea */
.ds-textarea {
width: 100%;
border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall);
padding: 10px 12px; font-size: 14px; font-family: var(--hz-font-family);
color: var(--hz-text-color-primary); background: #fff;
min-height: 96px; resize: vertical; transition: border-color .15s;
}
.ds-textarea::placeholder { color: var(--hz-text-color-placeholder); }
.ds-textarea:focus { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
.ds-textarea:disabled { background: var(--hz-input-disabled-bg); color: var(--hz-text-color-disabled); cursor: not-allowed; }
/* Full-width select / dropdown trigger — 40px, matches ds-input height */
.ds-select {
display: flex; align-items: center; justify-content: space-between;
width: 100%; height: 40px;
border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall);
padding: 0 12px; font-size: 14px; font-family: var(--hz-font-family);
color: var(--hz-text-color-primary); background: #fff; cursor: pointer;
transition: border-color .15s;
}
.ds-select:hover { border-color: var(--hz-text-color-secondary); }
.ds-select:focus { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
.ds-select--placeholder { color: var(--hz-text-color-placeholder); }
.ds-select__chevron { flex-shrink: 0; color: var(--hz-text-color-secondary); transition: transform .15s; }
.ds-select.is-open .ds-select__chevron { transform: rotate(180deg); }
/* Dropdown panel (shared by ds-select and ds-select--searchable) */
.ds-dropdown {
position: absolute; z-index: 200; margin-top: 4px;
background: #fff; border: 1px solid var(--hz-border-color-base);
border-radius: var(--hz-border-radius-xsmall);
box-shadow: 0 4px 12px rgba(0,0,0,.12);
min-width: 100%; max-height: 280px; overflow-y: auto;
}
.ds-dropdown__search {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-bottom: 1px solid var(--hz-border-color-light);
}
.ds-dropdown__search-input {
flex: 1; border: none; outline: none; font-size: 14px; font-family: var(--hz-font-family);
color: var(--hz-text-color-primary);
}
.ds-dropdown__search-input::placeholder { color: var(--hz-text-color-placeholder); }
.ds-dropdown__option {
padding: 8px 12px; font-size: 14px; cursor: pointer;
color: var(--hz-text-color-primary);
}
.ds-dropdown__option:hover { background: var(--hz-bg-color-base-hover); }
.ds-dropdown__option.is-selected { color: var(--hz-primary-color); font-weight: 600; }
.ds-dropdown__option.is-selected::after { content: '✓'; float: right; font-size: 12px; }
.ds-dropdown__empty { padding: 16px 12px; font-size: 14px; color: var(--hz-text-color-secondary); text-align: center; }
/* Select wrapper (position:relative container for trigger + panel) */
.ds-select-wrap { position: relative; }
/* Tag chip input — chips + inline text input */
.ds-tags-field {
display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start;
min-height: 40px; padding: 6px;
border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall);
background: #fff; cursor: text; transition: border-color .15s;
}
.ds-tags-field:focus-within { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
.ds-tag {
display: inline-flex; align-items: center; gap: 4px;
background: #E8E8E8; border-radius: 2px;
padding: 4px 8px; font-size: 14px; color: var(--hz-text-color-primary);
white-space: nowrap;
}
.ds-tag__remove {
border: none; background: none; padding: 0; cursor: pointer;
color: var(--hz-text-color-secondary); font-size: 14px; line-height: 1;
display: flex; align-items: center;
}
.ds-tag__remove:hover { color: var(--hz-text-color-primary); }
.ds-tags-field__input {
flex: 1; min-width: 120px; border: none; outline: none;
font-size: 12px; font-family: var(--hz-font-family); color: var(--hz-text-color-primary);
background: transparent; padding: 0;
}
.ds-tags-field__input::placeholder { color: var(--hz-text-color-placeholder); }
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
input[type="checkbox"], input[type="radio"] { width: 14px; height: 14px; accent-color: var(--hz-primary-color); }
/* Toggle switch — replaced by .ds-toggle (see above) */
/* Permission toggle */
.perm-toggle { display: inline-flex; border: 1px solid var(--hz-border-color-base); border-radius: 4px; overflow: hidden; }
.perm-toggle button { width: 28px; height: 26px; border: none; background: #fff; color: #ACB4BD; cursor: pointer; font-size: 12px; }
.perm-toggle button.granted { background: #EBFBEE; color: var(--hz-success-color); }
.perm-toggle button.denied { background: #FFF2F1; color: var(--hz-error-color); }
.perm-toggle button:first-child { border-right: 1px solid var(--hz-border-color-base); }
/* Tabs */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--hz-border-color-light); }
.tab { padding: 12px 0; font-size: 14px; font-weight: 600; color: #3C4A57; cursor: pointer; border-bottom: 2px solid transparent; }
.tab.active { color: var(--hz-text-color-primary); border-bottom-color: var(--hz-text-color-primary); }
.tab-panel[hidden] { display: none; }
/* Summary card */
.summary-card { background: #fff; border-radius: 8px; padding: 24px 24px 0; box-shadow: rgba(52,56,58,.06) 0 2px 4px 0, rgba(52,56,58,.24) 0 0 1px 0; }
.summary-card__title { font-size: 18px; font-weight: 600; color: var(--hz-text-color-primary); }
.summary-card__subtitle { font-size: 14px; color: #5F6C7A; margin-bottom: 8px; }
.summary-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 0 24px; }
.metric { border: none; background: none; text-align: left; cursor: pointer; }
.metric__title { font-size: 18px; font-weight: 600; color: #25313B; display: flex; align-items: center; gap: 4px; }
.metric__count { font-size: 32px; font-weight: 600; margin: 4px 0; }
.metric__delta { font-size: 14px; color: var(--hz-text-color-secondary); }
/* Data table — live-verified: rows separated by border-bottom, no column separators */
table.dt { border-collapse: collapse; width: 100%; font-size: 14px; }
table.dt th { text-align: left; padding: 8px 12px; height: 54px; font-weight: 700; border-bottom: 1px solid var(--hz-border-color-base); }
table.dt td { padding: 8px 12px; vertical-align: middle; border-bottom: 1px solid var(--hz-border-color-base); }
table.dt tbody tr { height: 56px; }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt tr.row--selected td { background: #F5F9FE; }
.avatar-sm { width: 24px; height: 24px; border-radius: 50%; background: var(--hz-primary-color); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; margin-right: 8px; vertical-align: middle; }
/* Bulk action toolbar — hidden by default; JS adds .is-visible when rows are checked */
.bulk-toolbar { display: none; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bulk-toolbar.is-visible { display: flex; }
.bulk-toolbar__left { display: flex; flex-direction: column; gap: 2px; }
.bulk-toolbar__count { font-size: 14px; font-weight: 500; }
.bulk-toolbar__clear { border: none; background: none; padding: 0; font-size: 14px; color: #828080; text-decoration: underline; cursor: pointer; }
.bulk-toolbar__actions { display: flex; gap: 12px; }
/* Pagination — Figma-verified 2026-09-09 (node 19624:3598) */
.pagination { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--hz-text-color-primary); margin-left: auto; }
.pagination__info { font-weight: 600; }
.pagination__item { display: flex; align-items: center; gap: 8px; color: var(--hz-text-color-primary); }
.pagination__item.disabled { color: var(--hz-border-color-base); cursor: default; }
.pagination__item.active { color: var(--hz-primary-color); cursor: pointer; }
.pagination__item.chevron { cursor: pointer; }
.pagination__item.chevron.disabled { cursor: default; }
.pagination__item svg { width: 16px; height: 16px; }
.pagination__page-box { width: 40px; height: 32px; border: 1px solid var(--hz-border-color-base); border-radius: 4px; text-align: center; font-size: 14px; font-family: var(--hz-font-family); }
/* Search box */
.search-box { display: flex; align-items: center; border: 1px solid var(--hz-border-color-base); border-radius: var(--hz-border-radius-xsmall); padding: 8px 12px; max-width: 360px; color: var(--hz-text-color-placeholder); font-size: 14px; gap: 8px; }
/* Flyout / dropdown panel */
.flyout { border: 1px solid var(--hz-border-color-light); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.08); width: 220px; padding: 8px 0; }
.flyout__group-label { font-size: 11px; text-transform: uppercase; color: var(--hz-text-color-secondary); padding: 8px 16px 4px; font-weight: 700; }
.flyout__item { padding: 8px 16px; font-size: 14px; cursor: pointer; }
.flyout__item:hover { background: var(--hz-bg-color-base-hover); }
/* Pill / Lozenge — Horizon DS, Figma-verified 2026-09-08 */
.pill { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 16px; letter-spacing: 0.04em; }
.pill--default { background: #f5f7f9; color: #5f6c7a; }
.pill--info { background: #e6f0fd; color: #035bc6; }
.pill--info-bold { background: #0369e9; color: #fff; }
.pill--success { background: #ebfbee; color: #0f7d4e; }
.pill--success-bold { background: #0f7d4e; color: #fff; }
.pill--warning { background: #fffaeb; color: #a04406; }
.pill--danger { background: #ffeceb; color: #bf210d; }
/* Section Message — Horizon DS, Figma-verified 2026-09-08 */
.section-msg { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 4px; font-size: 14px; line-height: 20px; border: 1px solid; }
.section-msg__icon { width: 20px; height: 20px; flex: none; }
.section-msg--info { background: #e6f0fd; border-color: #a2c7f7; color: #034aa3; }
.section-msg--success { background: #ebfbee; border-color: #98e7b1; color: #0f7d4e; }
.section-msg--warning { background: #fffaeb; border-color: #ffd45c; color: #a04406; }
.section-msg--danger { background: #fff5f5; border-color: #fcbeb9; color: #9a1c0b; }
/* Spinner — Horizon DS, Figma-verified 2026-09-08 */
@keyframes ds-spin { to { transform: rotate(360deg); } }
.spinner { border-radius: 50%; border: 2px solid #d5d9de; border-top-color: #0369e9; animation: ds-spin .7s linear infinite; display: inline-block; flex: none; }
.spinner--xs { width: 12px; height: 12px; }
.spinner--sm { width: 16px; height: 16px; }
.spinner--md { width: 24px; height: 24px; }
.spinner--lg { width: 48px; height: 48px; border-width: 3px; }
.spinner--xl { width: 80px; height: 80px; border-width: 4px; }
/* Empty state — real class .control_empty, verified live 2026-09-08 */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; }
.empty-state__img { max-width: 400px; margin-bottom: 16px; }
.empty-state__title { font-size: 21px; font-weight: 600; color: var(--hz-text-color-primary); margin: 0 0 8px; }
.empty-state__desc { font-size: 14px; line-height: 20px; color: var(--hz-text-color-secondary); margin: 0 0 20px; }
/* Card wrapper */
.card-wrapper { background: #fff; border-radius: 8px; border: 1px solid var(--hz-border-color-light); padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card-wrapper__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-wrapper__title { font-size: 16px; font-weight: 600; color: var(--hz-text-color-primary); margin: 0; }
/* Tooltip */
.has-tooltip { position: relative; display: inline-flex; }
.has-tooltip .tooltip-tip {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
background: #25313B; color: #fff; border-radius: 4px; padding: 4px 8px;
font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .15s; z-index: 200;
}
.has-tooltip:hover .tooltip-tip { opacity: 1; }
.has-tooltip .tooltip-tip::after {
content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 4px solid transparent; border-top-color: #25313B;
}
.has-tooltip .tooltip-tip--bottom { top: calc(100% + 6px); bottom: auto; }
.has-tooltip .tooltip-tip--bottom::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #25313B; }
/* Skeleton loader */
@keyframes skeleton-wave {
0% { background-position: -600px 0; }
100% { background-position: 600px 0; }
}
.skeleton {
background: linear-gradient(90deg, #e6e9ec 25%, #f0f2f4 50%, #e6e9ec 75%);
background-size: 1200px 100%;
animation: skeleton-wave 1.5s ease-in-out infinite;
border-radius: 4px; display: inline-block;
}
.skeleton--text { height: 14px; }
.skeleton--title { height: 20px; }
.skeleton--avatar { border-radius: 50%; }
.skeleton--pill { height: 16px; border-radius: 8px; }
/* Page notification banner */
.page-banner { display: flex; align-items: center; gap: 12px; padding: 12px 24px; font-size: 14px; border-bottom: 1px solid; }
.page-banner__icon { width: 20px; height: 20px; flex: none; }
.page-banner__msg { flex: 1; }
.page-banner__close { border: none; background: none; cursor: pointer; color: currentColor; padding: 0; font-size: 18px; line-height: 1; }
.page-banner--info { background: #e6f0fd; border-color: #a2c7f7; color: #034aa3; }
.page-banner--success { background: #ebfbee; border-color: #98e7b1; color: #0f7d4e; }
.page-banner--warning { background: #fffaeb; border-color: #ffd45c; color: #a04406; }
.page-banner--danger { background: #fff5f5; border-color: #fcbeb9; color: #9a1c0b; }
code.tag { background: #F5F7F9; padding: 1px 6px; border-radius: 4px; font-family: var(--hz-code-family); font-size: 12px; }
/* ===== BUTTON — live class names (.button-control-new) ===== */
/* Real production class names extracted from dchdesign-en.insided.com */
.button-control-new {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--hz-font-family); font-weight: 600; border-radius: 4px;
cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.button-control-new > div { display: flex; align-items: center; }
.button-control-new > div > div { display: flex; align-items: center; }
.button-control__title-text { display: flex; align-items: center; gap: 6px; }
.button-control-new--medium { height: 40px; padding: 8px 16px; font-size: 14px; }
.button-control-new--small { height: 32px; padding: 2px 8px; font-size: 12px; }
.button-control-new--secondary { background: #fff; color: var(--hz-text-color-primary); border-color: var(--hz-border-color-base); }
.button-control-new--secondary:hover { background: var(--hz-bg-color-base-hover); }
.button-control-new--primary { background: var(--hz-primary-color); color: #fff; border-color: var(--hz-primary-color); }
.button-control-new--primary:hover { background: #034AA3; }
.button-control-new--danger { background: var(--hz-bg-color-notify); color: #fff; border-color: var(--hz-bg-color-notify); }
.button-control-new--endIcon { gap: 4px; }
/* Small utility button (used in page-level toolbars) */
.btn-sm {
display: inline-flex; align-items: center; gap: 4px;
height: 32px; padding: 0 12px;
border: 1px solid var(--hz-border-color-base); border-radius: 4px;
background: #fff; font-size: 12px; font-weight: 600;
color: var(--hz-text-color-primary); cursor: pointer; white-space: nowrap;
font-family: var(--hz-font-family);
}
.btn-sm:hover { background: var(--hz-bg-color-base-hover); }
.btn-sm svg { width: 16px; height: 16px; }
/* .control-switcher removed — superseded by .ds-toggle (Figma 16412-3227) */
/* ===== FEAT-TOGGLE — two-button segmented on/off control (settings pages) ===== */
.feat-toggle { display: inline-flex; border: 1px solid var(--hz-border-color-base); border-radius: 6px; overflow: hidden; }
.feat-toggle__btn {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border: none; background: #fff; color: #aeb4bb; cursor: pointer; padding: 0;
}
.feat-toggle__btn svg { width: 14px; height: 14px; display: block; }
.feat-toggle__btn--on[aria-pressed="true"] { background: #0369e9; color: #fff; }
.feat-toggle__btn--off[aria-pressed="true"] { background: #5b6472; color: #fff; }
.feat-toggle__btn .feat-icon--neutral { display: block; }
.feat-toggle__btn .feat-icon--real { display: none; }
.feat-toggle__btn[aria-pressed="true"] .feat-icon--neutral { display: none; }
.feat-toggle__btn[aria-pressed="true"] .feat-icon--real { display: block; }
/* ===== BADGE LABELS ===== */
.badge-beta { display: inline-block; color: var(--hz-primary-color); border: 1px solid var(--hz-primary-color); border-radius: 4px; padding: 0 4px; font-size: 11px; font-weight: 600; }
.badge-new { display: inline-block; background: var(--hz-primary-color); color: #fff; border-radius: 4px; padding: 0 4px; font-size: 11px; font-weight: 600; }
/* ===== DIRTY-SECTION — Settings page card pattern ===== */
/* Source: dchdesign-en.insided.com/ai/settings */
.dirty-section { margin-bottom: 24px; }
/* Type scale — verified against live product (see tokens.css for full reference)
Page title (control-header h2) → 20px / 600 / lh 28px
Section title (dirty-section__title) → 18px / 600
Field label (dirty-section__field-label) → 14px / 600
Field description / body → 14px / 400
Meta / hints → 13px / 400 / lh 20px
*/
.dirty-section__title { font-size: var(--hz-font-size-xl, 18px); font-weight: 600; color: var(--hz-text-color-primary); margin: 0 0 16px; }
.dirty-section__card { background: #fff; border: 1px solid var(--hz-border-color-base); border-radius: 8px; padding: 24px; box-shadow: rgba(0,0,0,.16) 0 1px 2px 0; }
.dirty-section__card-body { display: flex; flex-direction: column; gap: 24px; }
/* Type A: vertical — label/description above full-width control */
.dirty-section__field { display: flex; flex-direction: column; gap: 8px; }
.dirty-section__field-label { font-size: 14px; font-weight: 600; color: var(--hz-text-color-primary); margin: 0; display: flex; align-items: center; gap: 8px; }
.dirty-section__field-description { font-size: 14px; color: #3C4A57; margin: 0; }
.dirty-section__input { width: 100%; border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 6px 10px; font-size: 14px; font-family: var(--hz-font-family); color: var(--hz-text-color-primary); }
.dirty-section__textarea { width: 100%; border: 1px solid var(--hz-border-color-base); border-radius: 4px; padding: 12px; font-size: 14px; font-family: var(--hz-font-family); color: var(--hz-text-color-primary); min-height: 96px; resize: vertical; }
/* Focus */
.dirty-section__input:focus,
.dirty-section__textarea:focus { outline: 2px solid var(--hz-bg-color-active); border-color: var(--hz-primary-color); }
/* Disabled */
.dirty-section__input:disabled,
.dirty-section__textarea:disabled { background: var(--hz-input-disabled-bg); color: var(--hz-text-color-disabled); cursor: not-allowed; border-color: var(--hz-border-color-base); }
/* Error state — add .dirty-section__field--error on the parent .dirty-section__field */
.dirty-section__field--error .dirty-section__input,
.dirty-section__field--error .dirty-section__textarea { border-color: var(--hz-error-color); }
.dirty-section__field--error .dirty-section__input:focus,
.dirty-section__field--error .dirty-section__textarea:focus { outline-color: #FCBEB9; border-color: var(--hz-error-color); }
.dirty-section__field-error { font-size: 12px; color: var(--hz-error-color); margin: 0; display: flex; align-items: center; gap: 4px; }
/* Type B: horizontal — info (label+desc) left, control right */
.dirty-section__field-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.dirty-section__field-row + .dirty-section__field-row { padding-top: 24px; }
.dirty-section__field-info { flex: 1; }
.dirty-section__control { flex: none; }
/* Per-section save row */
.dirty-section__save-row { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--hz-border-color-light); margin-top: 4px; gap: 8px; }
/* ===== TABLE PAGE LAYOUT HELPERS ===== */
/* Source: dchdesign-en.insided.com/users/overview */
/* Filters row (row 1: filter pill + search) */
.filters-row { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.filters-row.is-hidden { display: none; }
/* Search box — table variant (full bg, wider than generic search-box) */
.search-box--table {
display: flex; align-items: center; gap: 8px;
border: 1px solid rgba(0,0,0,.2); border-radius: 4px;
padding: 10px 16px; flex: 1; max-width: 532px; background: #fff;
}
.search-box--table svg { width: 16px; height: 16px; color: var(--hz-text-color-placeholder); flex: none; }
.search-box--table input { border: none; outline: none; font-size: 14px; width: 100%; font-family: var(--hz-font-family); color: var(--hz-text-color-primary); }
.search-box--table input::placeholder { color: var(--hz-text-color-placeholder); }
/* Bulk toolbar show/hide — see definition above; .is-visible added by JS */
/* Table card — wraps action-bar + table-scroll as one bordered card */
.table-card { background: #fff; border: 1px solid var(--hz-border-color-base); border-radius: 4px; overflow: hidden; }
/* Action bar — top toolbar row inside the table card */
.action-bar { display: flex; align-items: center; gap: 8px; padding: 8px; box-shadow: rgba(0,0,0,.16) 0 6px 8px -8px; background: #fff; }
.action-bar .normal-actions { display: flex; align-items: center; gap: 8px; flex: 1; }
.action-bar .batch-actions { display: none; align-items: center; gap: 8px; flex: 1; }
.action-bar.has-selection .normal-actions { display: none; }
.action-bar.has-selection .batch-actions { display: flex; }
.batch-count { font-size: 13px; font-weight: 600; color: var(--hz-text-color-primary); padding-right: 12px; border-right: 1px solid var(--hz-border-color-light); margin-right: 4px; white-space: nowrap; }
/* Reply composer toolbar (rich-text mock) */
.reply-composer__toolbar { display: flex; gap: 2px; padding: 6px 8px; border: 1px solid var(--hz-border-color-base); border-bottom: none; border-radius: 4px 4px 0 0; background: var(--hz-bg-color-base); }
.reply-composer__tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: none; cursor: pointer; border-radius: 3px; color: var(--hz-text-color-secondary); font-size: 13px; font-weight: 700; padding: 0; }
.reply-composer__tool-btn:hover { background: var(--hz-bg-color-base-hover); color: var(--hz-text-color-primary); }
.reply-composer__toolbar + textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Rows-per-page select — Figma-verified */
.pagination__rows { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--hz-border-color-base); border-radius: 4px; font-size: 14px; font-weight: 400; background: #fff; cursor: pointer; }
.pagination__rows svg { width: 16px; height: 16px; flex: none; }
/* Table column widths (live-extracted from dchdesign-en.insided.com/users/overview) */
.col-checkbox { width: 32px; }
.col-m-big { width: 240px; min-width: 240px; }
.col-s { width: 160px; min-width: 160px; }
.col-m-flexible { width: 220px; min-width: 220px; }
.col-xs-right { width: 90px; min-width: 90px; text-align: right; }
.col-s-right { width: 130px; min-width: 130px; text-align: right; }
td.col-xs-right, td.col-s-right { text-align: right; }
/* Sortable column header */
.th-cell { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.th-cell:not(.sortable) { cursor: default; }
.th-cell svg { width: 16px; height: 16px; flex: none; }
.sort-icon { color: #181F26; }
.sort-icon.inactive { opacity: .25; }
.help-icon { color: var(--hz-text-color-secondary); cursor: help; }
/* Primary table cell: avatar + name + external link */
.item-cell { display: flex; align-items: center; gap: 8px; }
.avatar-initial { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 400; flex: none; }
.avatar-photo { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }
.ext-link { color: var(--hz-icon-color-normal); margin-left: auto; display: flex; flex: none; }
.ext-link svg { width: 16px; height: 16px; }
.muted { color: var(--hz-text-color-secondary); }
/* Scrollable table wrapper — border/radius on .table-card, not here */
.table-scroll { overflow-x: auto; }
/* ===== TOPIC / MODERATION PAGE LAYOUT ===== */
/* Source: dchdesign-en.insided.com/…/how-to-contact-support… */
/* Control header — live-verified from dchdesign-en.insided.com 2026-09-08
Simple:
Full:
Breadcrumb: above but preceded by