/* ============================================================
BACFUTURES PLATFORM — style.css
Version: PLATFORM-V1.0 · 2026-10-17 (Conv 17-A: Contact Detail Zone Layout)
Architecture: Tokens → Reset → Base → Layout → Components → Modules → Responsive
Brand: #00a859 · Font: Inter · Icons: Bootstrap Icons
Conv 16: Design Token Consolidation + Component Audit + Responsive 3BP
Conv 17: Contacts Pattern Library — 10 patterns defined, dead code purge,
KPI variant consolidation, empty-state-inline + empty-state-cell
============================================================ */
/* ────────────────────────────────────────────────────────────
PATTERN LIBRARY (Conv 17 — Contacts as Reference Module)
────────────────────────────────────────────────────────────
10 canonical patterns. All class names below are the standard
for every module (Finance, Pool, Contracts, Tickets, Dashboard).
Conv 18-21 MUST use these exact classes.
P01 LIST VIEW
.filter-bar, .filter-group, .filter-divider, .filter-spacer
.table-wrapper.scrollable, .table.table-hover.table-sticky
.pagination, .page-btn, .page-btn.active
.bulk-bar, .bulk-bar-count, .bulk-bar-actions
KPI badges: .kpi-bar, .kpi-badge (Conv 17 rename from .ticket-kpi-*)
Backward-compat aliases removed (Conv 19)
P02 DETAIL HEADER (Action Bar)
.action-bar
.action-bar-identity (avatar + name + badges + completeness + health)
.action-bar-next (checklist or next-action, boxed)
.action-bar-actions (status-flow buttons)
.profile-360-name, .profile-360-roles
.profile-completeness-bar, .profile-completeness-fill, .profile-completeness-text
.health-indicator, .health-dot
P03 KPI BAR (Summary Cards)
.grid-auto + --grid-min:220px (Conv 19 — was .kpi-summary-grid)
.kpi-summary-card (border-top 3px accent, hover lift)
.kpi-summary-header, .kpi-summary-value, .kpi-summary-label, .kpi-summary-sub
.kpi-trend (.up / .down / .flat)
.kpi-view-btn (ghost link to detail)
Variants: .kpi-investor, .kpi-partner, .kpi-crm, .kpi-relationship,
.kpi-wallet-investor, .kpi-wallet-commission,
.kpi-kyc, .kpi-value
P04 ACCORDION
.accordion-stack (flex column, gap sp-3)
.panel-accordion (.open state: brand-light border)
.panel-header (icon + title + summary + chevron, role=button, aria-expanded)
.panel-body (padding sp-4, border-top)
.grid (3-col → 2-col tablet → 1-col mobile via --grid-cols)
.section-label (uppercase, semibold, text-secondary, border-bottom)
P05 EDITABLE FIELD (Inline Edit)
.field > .field-label + .field-text (read-only display)
.field > .field-label + .field-input.inline-edit (single-line edit)
.field > .field-label + .field-textarea.inline-edit.inline-edit-note (multiline)
JS: UI.field(), UI.fieldEditable(), UI.fieldMultiline()
P06 CONTENT CARD (inside accordion body)
.section-label (sub-section divider)
.grid (field grid via --grid-cols)
.compact-list > .compact-list-item / .compact-list-block
JS: UI.sectionLabel(), UI.fieldGrid(), UI.compactList()
.table-wrapper > .table (tabular data)
JS: UI.tableSection()
P07 ACTION BAR (Status Flow)
.action-bar-actions (flex, gap, wrap)
.btn, .btn-primary, .btn-danger, .btn-warning, .btn-info, .btn-success
.btn-sm, .btn-xs
.action-bar-next-value (.danger / .warning / .info / .success)
P08 MODAL
.modal-overlay, .modal (max-width scale: sm/md/lg)
.modal-header, .modal-body, .modal-footer
.form-section, .form-section-header, .form-section-body
.form-grid, .form-row, .form-group, .form-label
P09 EMPTY STATE
.empty-state (full-page: icon 48px + text + hint, centered)
.empty-state-inline (inside accordion body: icon 24px + text, centered)
.empty-state-cell (inside table cell: text only, centered)
JS migration (Conv 22): text-muted pad-y-2 → empty-state-inline
P10 BADGE SYSTEM
UI.badge(text, variant) → .badge.badge-{variant}
Variants: default, brand, success, warning, danger, info, muted
.profile-360-roles (flex gap container for badges)
──────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
1. :ROOT — DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {
/* ── Brand Colors ─────────────────────────────────────────── */
--brand: #00a859;
--brand-hover: #009150;
--brand-light: #e6f7ef;
--brand-light-hover: #d4f2e0;
--brand-dark: #007a3d;
/* ── Neutral Colors ────────────────────────────────────────── */
--bg: #f8f9fa;
--surface: #ffffff;
--surface-hover: #f1f3f5;
--border: #e0e4e8;
--border-light: #f0f2f4;
--border-strong: #94a3b8;
--surface-editable: #f8fafc;
--surface-editable-hover: #f1f5f9;
/* ── Text Colors ───────────────────────────────────────────── */
--text: #1a1d21;
--text-secondary: #5a6470;
--text-muted: #8b95a3;
--text-inverse: #ffffff;
/* ── Semantic Colors ───────────────────────────────────────── */
--success: #00a859;
--success-light: #e6f7ef;
--warning: #f59e0b;
--warning-light: #fef3e2;
--danger: #e53e3e;
--danger-light: #fce8e8;
--danger-hover: #c53030;
--info: #3182ce;
--info-light: #ebf5fc;
/* Conv 17 Phase 5: Feature-specific tokens scoped to components.
Removed from :root: --onboarding-bg/text (dead), --gray-600 (dead),
--doc-text/cell-border/print-border (→ .doc-layout),
--var-highlight-bg (→ .md-preview),
--perm-yes-bg/no-bg (→ .perm-matrix) */
/* ── Chart Palette (Conv 17 Phase 6 — semantic naming) ────── */
--chart-1: #8b5cf6;
--chart-2: #ec4899;
--chart-3: #14b8a6;
--chart-4: #f97316;
--chart-5: #6366f1;
/* Conv 17 Phase 5: Document layout tokens scoped to .doc-layout component. */
/* ── Overlay & Special Backgrounds ─────────────────────────── */
--overlay-bg: rgba(0,0,0,0.4);
--shadow-inset: inset 0 2px 4px rgba(0,0,0,0.18);
/* Conv 17 Phase 3: Alias tokens removed — all usages replaced with canonical names. */
/* ── Spacing (4px base — Cloudflare standard) ────────────── */
/* All spacing derives from 4px base. Use directly: sp-N. */
/* */
/* SPACING RULES (apply consistently across ALL modules): */
/* */
/* sp-1 (4px) micro: badge pad-y, section-label pad-b */
/* sp-2 (8px) tight: label→input gap, btn-to-btn gap, */
/* badge pad-x, inline-edit pad-y */
/* sp-3 (12px) standard: grid gap, field-display pad, */
/* section-label→fields, filter-bar, */
/* table cell pad-y, inline-edit pad-x */
/* sp-4 (16px) comfort: panel pad, field→field, */
/* actions→content, action-bar pad, */
/* KPI card pad, table cell pad-x, */
/* modal-body pad, section→section */
/* sp-5 (20px) loose: (reserved for future use) */
/* sp-6 (24px) page: content area padding */
/* sp-8 (32px) major: empty-state vertical */
/* sp-12 (48px) hero: empty-state full */
/* */
/* RULE: 1 mechanism per gap. Flex gap OR margin, never both. */
/* RULE: All values are multiples of 4px. No arbitrary px. */
/* RULE: Same purpose → same sp-N across all components. */
--sp-0: 0px;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* ── Typography ───────────────────────────────────────────── */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
--fs-2xs: 10px;
--fs-xs: 12px;
--fs-sm: 13px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 17px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 36px;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
--lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.625;
/* ── Radii ────────────────────────────────────────────────── */
--radius-sm: 4px;
--radius: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ── Shadows ──────────────────────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
/* ── Transitions ──────────────────────────────────────────── */
--transition: 150ms ease;
--transition-fast: 100ms ease;
--transition-slow: 250ms ease;
/* ── Focus Ring (Conv 16 — unified brand focus indicator) ── */
--focus-ring: 0 0 0 2px var(--brand);
/* ── Z-Index Scale (Conv 16) ──────────────────────────────── */
--z-base: 1;
--z-sticky-header: 10;
--z-sticky: 50;
--z-bulk-bar: 90;
--z-sidebar: 100;
--z-dropdown: 150;
--z-search: 160;
--z-modal: 200;
--z-toast: 300;
/* ── Layout ───────────────────────────────────────────────── */
--sidebar-width: 240px;
--sidebar-collapsed: 64px;
--topbar-height: 56px;
--bottom-nav-height: 56px;
--content-max: 1400px;
--touch-target: 44px;
--logo-size: 64px;
--login-width: 400px;
--icon-size-sm: 20px;
--sidebar-logo-height: var(--sidebar-logo-height);
}
/* ════════════════════════════════════════════════════════════
2. RESET
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Conv 17: Global focus-visible — Cloudflare standard.
Every interactive element gets a visible 2px brand outline with 2px offset.
Field inputs override with outline:none + box-shadow:focus-ring + border-color. */
*:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Elements with custom focus (box-shadow ring) suppress the global outline */
/* Conv 17 fix: added .inline-edit-textarea — prevents double outline when editing */
.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible,
.inline-edit:focus-visible,
.inline-edit-textarea:focus-visible {
outline: none;
}
html {
font-size: var(--fs-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ════════════════════════════════════════════════════════════
3. BASE
════════════════════════════════════════════════════════════ */
body {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-normal);
color: var(--text);
background: var(--bg);
min-height: 100vh;
}
a {
color: var(--brand);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--brand-hover); }
button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
border: none;
background: none;
}
input, select, textarea {
font-family: inherit;
font-size: inherit;
}
.hidden { display: none !important; }
/* ════════════════════════════════════════════════════════════
4. LAYOUT — APP SHELL
════════════════════════════════════════════════════════════ */
.app-shell {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-width);
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: var(--z-sidebar);
transition: transform var(--transition);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--border-light);
height: var(--topbar-height);
overflow: hidden;
}
.sidebar-logo-full {
max-width: 100%;
max-height: 100%;
height: var(--sidebar-logo-height);
width: auto;
object-fit: contain;
flex-shrink: 0;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: var(--sp-2) var(--sp-2);
}
.sidebar-footer {
padding: var(--sp-2) var(--sp-3);
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.sidebar-user {
display: flex;
align-items: center;
gap: var(--sp-2);
min-width: 0;
}
.sidebar-user-info {
min-width: 0;
}
.sidebar-user-name {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-role {
font-size: var(--fs-xs);
color: var(--text-muted);
text-transform: capitalize;
}
/* ── Nav Items ─────────────────────────────────────────────── */
.nav-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
color: var(--text-secondary);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
transition: all var(--transition-fast);
min-height: var(--sidebar-logo-height);
cursor: pointer;
}
.nav-item:hover {
background: var(--surface-hover);
color: var(--text);
}
.nav-item.active {
background: var(--brand-light);
color: var(--brand);
}
.nav-item i {
font-size: var(--fs-md);
width: var(--icon-size-sm);
text-align: center;
}
.nav-section-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
/* ── Content ────────────────────────────────────────────────── */
.content {
flex: 1;
margin-left: var(--sidebar-width);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
height: var(--topbar-height);
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0 var(--sp-4);
position: sticky;
top: 0;
z-index: var(--z-sticky);
}
.topbar-title {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text);
flex: 1;
}
.topbar-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.sidebar-toggle { display: none; }
/* ── Module Container ───────────────────────────────────────── */
.module-container {
flex: 1;
padding: var(--sp-6);
width: 100%;
}
/* ── Bottom Nav (mobile) ───────────────────────────────────── */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bottom-nav-height);
background: var(--surface);
border-top: 1px solid var(--border);
z-index: var(--z-sidebar);
align-items: stretch;
justify-content: space-around;
}
.bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
flex: 1;
color: var(--text-muted);
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
min-width: var(--touch-target);
min-height: var(--touch-target);
}
.bottom-nav-item.active {
color: var(--brand);
}
.bottom-nav-item i {
font-size: var(--fs-lg);
}
/* ════════════════════════════════════════════════════════════
5. LOGIN SCREEN
════════════════════════════════════════════════════════════ */
.login-screen {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
padding: var(--sp-4);
}
.login-card {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: var(--sp-12) var(--sp-8);
width: 100%;
max-width: var(--login-width);
text-align: center;
}
.login-logo {
width: auto;
height: var(--logo-size);
margin: 0 auto var(--sp-4);
}
.login-logo-img {
height: var(--logo-size);
width: auto;
}
.login-title {
font-size: var(--fs-2xl);
font-weight: var(--fw-extrabold);
color: var(--text);
letter-spacing: -0.5px;
}
.login-subtitle {
font-size: var(--fs-sm);
color: var(--text-muted);
margin-bottom: var(--sp-6);
}
.login-form {
text-align: left;
}
.login-footer {
text-align: center;
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid var(--border-light);
}
.login-footer a {
font-size: var(--fs-sm);
color: var(--text-muted);
text-decoration: none;
transition: color var(--transition);
font-weight: var(--fw-medium);
}
.login-footer a:hover {
color: var(--brand);
}
.login-hint {
font-size: var(--fs-sm);
color: var(--text-muted);
text-align: center;
margin-bottom: var(--sp-4);
line-height: var(--lh-normal);
}
.login-success-icon {
text-align: center;
font-size: 3rem;
color: var(--brand);
margin: var(--sp-4) 0;
}
.twofa-code-center {
text-align: center;
font-size: 1.5em;
letter-spacing: 0.3em;
}
/* ════════════════════════════════════════════════════════════
6. BUTTONS
════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1.4;
transition: all var(--transition-fast);
border: 1px solid transparent;
white-space: nowrap;
min-height: 36px;
}
.btn:active {
filter: brightness(0.95);
transform: scale(0.98);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Conv 6: active/pressed state for toggle action buttons (NAV Entry, Contribute, Redeem) */
.btn.active {
filter: brightness(0.85);
box-shadow: var(--shadow-inset);
}
.btn i { font-size: var(--fs-md); }
.btn-primary {
background: var(--brand);
color: var(--text-inverse);
}
.btn-primary:hover { background: var(--brand-hover); }
.btn-secondary {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-hover); }
.btn-danger {
background: var(--danger);
color: var(--text-inverse);
}
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
/* Conv 16: Missing button variants — used in JS but not previously defined */
.btn-success {
background: var(--success);
color: var(--text-inverse);
}
.btn-success:hover { background: var(--brand-hover); }
.btn-warning {
background: var(--warning);
color: var(--text-inverse);
}
.btn-warning:hover { filter: brightness(0.9); }
.btn-link {
background: transparent;
color: var(--brand);
text-decoration: underline;
border: none;
padding: var(--sp-1) var(--sp-2);
min-height: auto;
}
.btn-link:hover { color: var(--brand-hover); }
.btn-sm {
padding: var(--sp-1) var(--sp-2);
font-size: var(--fs-xs);
min-height: 28px;
}
.btn-lg {
padding: var(--sp-3) var(--sp-6);
font-size: var(--fs-md);
min-height: var(--touch-target);
}
/* Conv 16: btn-xs standalone (was only inside .action-checklist-item) */
.btn-xs {
padding: 0 var(--sp-1);
font-size: var(--fs-2xs);
line-height: 1.4;
min-height: 22px;
}
.btn-block { width: 100%; }
/* ── Btn Loading State ─────────────────────────────────────── */
.btn-loading {
pointer-events: none;
opacity: 0.7;
}
.btn-loading .btn-spinner {
animation: btn-spin 600ms linear infinite;
}
@keyframes btn-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ════════════════════════════════════════════════════════════
7. CARDS
════════════════════════════════════════════════════════════ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.card-header {
padding: var(--sp-4) var(--sp-4) var(--sp-2);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.card-header h3 {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
}
.card-body { padding: var(--sp-4); }
/* ════════════════════════════════════════════════════════════
8. TABLES
════════════════════════════════════════════════════════════ */
.table-wrapper {
overflow-x: auto;
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.table th {
text-align: left;
padding: var(--sp-3) var(--sp-4);
font-weight: var(--fw-semibold);
color: var(--text-secondary);
background: var(--bg);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border-light);
color: var(--text);
}
.table tr:last-child td { border-bottom: none; }
.table-hover tbody tr {
transition: background var(--transition-fast);
cursor: pointer;
}
.table-hover tbody tr:hover { background: var(--surface-hover); }
/* ── Sticky Table Header ──────────────────────────────────── */
.table-wrapper.scrollable {
max-height: calc(110vh - 320px);
min-height: 300px;
overflow-y: auto;
}
.table-sticky thead th {
position: sticky;
top: 0;
z-index: var(--z-sticky-header);
background: var(--surface);
box-shadow: inset 0 -1px 0 var(--border);
}
.table-sticky thead th::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: var(--border);
}
/* ════════════════════════════════════════════════════════════
9. BADGES
════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--sp-2);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1.5;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-default { background: var(--surface-hover); color: var(--text-secondary); }
/* Conv 16: badge-secondary — used in kyc.js (OPC, Has File) */
.badge-secondary { background: var(--surface-hover); color: var(--text-secondary); }
/* ════════════════════════════════════════════════════════════
10. FORMS
════════════════════════════════════════════════════════════ */
.form-group {
margin-bottom: var(--sp-4);
}
.form-label {
display: block;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
margin-bottom: var(--sp-1);
}
/* Conv 17 Phase 2: Unified input system — .form-* and .field-* share base styles.
.form-label (prominent) vs .field-label (metadata) — intentionally different.
.form-group (margin-bottom) vs .field (flex column gap) — intentionally different. */
.form-input,
.form-select,
.form-textarea,
.field-input,
.field-select,
.field-textarea {
width: 100%;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--fs-sm);
color: var(--text);
background: var(--surface);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 36px;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
outline: none;
box-shadow: var(--focus-ring);
border-color: var(--brand);
}
.form-textarea,
.field-textarea {
resize: vertical;
min-height: 80px;
line-height: var(--lh-normal);
}
.form-row {
display: flex;
gap: var(--sp-3);
}
.form-row > .form-group { flex: 1; }
.form-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
/* ── Form Grid ────────────────────────────────────────────── */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--sp-3);
}
.form-grid .form-group {
margin-bottom: 0;
}
/* ── Form Section (3-tier create form) ──────────────────────── */
.form-section {
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: var(--sp-4);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.form-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-4);
background: var(--bg);
cursor: pointer;
user-select: none;
transition: background var(--transition-fast);
}
.form-section-header:hover {
background: var(--surface-hover);
}
.form-section-header h4 {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.form-section-header .bi {
font-size: var(--fs-md);
color: var(--text-muted);
transition: transform var(--transition);
}
.form-section.collapsed .form-section-header .bi {
transform: rotate(-90deg);
}
.form-section-body {
padding: var(--sp-4);
}
.form-section.collapsed .form-section-body {
display: none;
}
/* ════════════════════════════════════════════════════════════
11. MODALS
════════════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
background: var(--overlay-bg);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
padding: var(--sp-4);
}
.modal {
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 600px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-sm { max-width: var(--login-width); }
.modal-lg { max-width: 900px; }
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-4);
border-bottom: 1px solid var(--border-light);
}
.modal-title {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
}
.modal-body {
padding: var(--sp-4);
overflow-y: auto;
flex: 1;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border-light);
}
.modal-close {
padding: var(--sp-1);
min-width: auto;
min-height: auto;
}
/* ── Confirm Dialog ────────────────────────────────────────── */
.confirm-icon {
text-align: center;
margin-bottom: var(--sp-3);
}
.confirm-icon i {
font-size: 40px;
color: var(--warning);
}
.confirm-message {
text-align: center;
font-size: var(--fs-md);
color: var(--text);
}
/* ════════════════════════════════════════════════════════════
12. TOASTS
════════════════════════════════════════════════════════════ */
.toast-container {
position: fixed;
top: var(--sp-4);
right: var(--sp-4);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--sp-2);
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
pointer-events: auto;
animation: toast-in 200ms ease;
max-width: 360px;
}
.toast i { font-size: var(--fs-md); }
.toast-success { background: var(--success); color: var(--text-inverse); }
.toast-error { background: var(--danger); color: var(--text-inverse); }
.toast-info { background: var(--info); color: var(--text-inverse); }
.toast-warning { background: var(--warning); color: var(--text-inverse); }
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ════════════════════════════════════════════════════════════
13. SKELETON
════════════════════════════════════════════════════════════ */
.skeleton {
background: linear-gradient(90deg, var(--surface-hover) 25%, var(--border-light) 50%, var(--surface-hover) 75%);
background-size: 200% 100%;
border-radius: var(--radius);
animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-text {
height: 14px;
margin-bottom: var(--sp-2);
}
.skeleton-text:last-child { width: 60%; }
.skeleton-card {
height: 80px;
margin-bottom: var(--sp-3);
}
.skeleton-container { padding: var(--sp-2) 0; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ════════════════════════════════════════════════════════════
14. TABS
════════════════════════════════════════════════════════════ */
.tabs {
display: flex;
gap: var(--sp-1);
border-bottom: 2px solid var(--border);
margin-bottom: var(--sp-4);
overflow-x: auto;
}
.tab {
padding: var(--sp-2) var(--sp-4);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-secondary);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all var(--transition-fast);
white-space: nowrap;
cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active {
color: var(--brand);
border-bottom-color: var(--brand);
}
.tab-content { display: none; }
.tab-content.active { display: block; }
/* ════════════════════════════════════════════════════════════
15. PAGINATION
════════════════════════════════════════════════════════════ */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
padding: var(--sp-4) 0;
}
.page-btn {
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-secondary);
transition: all var(--transition-fast);
cursor: pointer;
}
.page-btn:hover { background: var(--surface-hover); color: var(--text); }
.page-btn.active {
background: var(--brand);
color: var(--text-inverse);
}
.page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.page-info {
font-size: var(--fs-sm);
color: var(--text-muted);
padding: 0 var(--sp-3);
}
/* ════════════════════════════════════════════════════════════
16. AVATAR
════════════════════════════════════════════════════════════ */
.avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--brand);
color: var(--text-inverse);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar { width: 36px; height: 36px; }
.avatar-lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.avatar-xs { width: 22px; height: 22px; font-size: var(--fs-xs); min-width: 22px; }
.avatar-img {
width: 100%;
height: 100%;
border-radius: var(--radius-full);
object-fit: cover;
}
/* ════════════════════════════════════════════════════════════
17. DROPDOWN
════════════════════════════════════════════════════════════ */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--sp-1);
z-index: var(--z-dropdown);
display: none;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
font-size: var(--fs-sm);
color: var(--text);
cursor: pointer;
transition: background var(--transition-fast);
}
.dropdown-item:hover { background: var(--surface-hover); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-light); }
/* ════════════════════════════════════════════════════════════
18. ALERTS
════════════════════════════════════════════════════════════ */
.alert {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-md);
font-size: var(--fs-sm);
margin-bottom: var(--sp-3);
}
.alert i { font-size: var(--fs-md); margin-top: 1px; }
.alert-warning { background: var(--warning-light); color: var(--warning); }
.alert-danger { background: var(--danger-light); color: var(--danger); }
.alert-info { background: var(--info-light); color: var(--info); }
.alert-success { background: var(--success-light); color: var(--success); }
/* Conv 16: Removed dead .tooltip class (0 uses in JS — no data-tooltip attributes) */
/* ════════════════════════════════════════════════════════════
20. EMPTY STATE
════════════════════════════════════════════════════════════ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--sp-12) var(--sp-4);
text-align: center;
}
.empty-icon {
font-size: 48px;
color: var(--text-muted);
margin-bottom: var(--sp-3);
}
.empty-text {
font-size: var(--fs-md);
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.empty-hint {
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* ── Empty State Inline (inside accordion body / table cell) ── */
/* Pattern: lighter version of .empty-state for constrained spaces. */
/* Usage: */
/* No records yet
*/
/* JS migration (Conv 22): replace text-muted pad-y-2 → empty-state-inline */
.empty-state-inline {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-4) var(--sp-2);
text-align: center;
color: var(--text-muted);
font-size: var(--fs-sm);
}
.empty-state-inline i {
font-size: 24px;
opacity: 0.5;
}
.empty-state-inline span {
line-height: 1.4;
}
/* ── Empty State in Table Cell ── */
/* Pattern: for empty rows inside tables. */
/* Usage: | No transactions | */
.empty-state-cell {
text-align: center;
padding: var(--sp-4) var(--sp-2);
color: var(--text-muted);
font-size: var(--fs-sm);
}
/* ════════════════════════════════════════════════════════════
21. UTILITIES
════════════════════════════════════════════════════════════ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.text-2xl { font-size: var(--fs-2xl); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-brand { color: var(--brand); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold { font-weight: var(--fw-bold); }
.font-mono { font-family: var(--font-mono); }
/* Clickable navigation text — cross-module links */
.nav-link { color: var(--brand); cursor: pointer; }
.nav-link:hover { text-decoration: underline; }
/* KYC document preview image */
.kyc-preview-img { max-width: 100%; max-height: 500px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.w-full { width: 100%; }
.overflow-x-auto { overflow-x: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-truncate { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Width utilities (replace inline styles) */
/* Conv 17 Phase 4: Removed !important — use specificity, not force */
.input-sm, .input-md, .input-lg { width: 100%; }
.td-label { width: 200px; }
.td-label-sm { width: 100px; }
.td-label-md { width: 140px; }
.text-info { color: var(--info); }
/* Conv 16: Removed duplicate .text-brand — already defined in utilities section above */
.cert-header { text-align: center; margin-bottom: var(--sp-4); }
.cert-legal { margin-top: var(--sp-3); }
.eod-list { margin-top: var(--sp-2); }
.svg-spark { width: 100%; height: 80px; display: block; }
.svg-stop { stop-color: var(--brand); }
.preview-hidden { display: none; }
.list-gap { display: flex; flex-direction: column; gap: var(--sp-1); }
.list-gap-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.card-no-pad { padding: 0; }
.card-no-border { border: none; }
/* Conv 18: Aliases for migrated class names */
.panel-no-pad { padding: 0; }
.panel-no-border { border: none; }
.icon-danger { color: var(--danger); }
.icon-brand { color: var(--brand); }
.icon-muted { color: var(--text-muted); }
.icon-warning { color: var(--warning); }
.icon-lg { font-size: var(--fs-lg); }
.icon-2xl { font-size: var(--fs-2xl); }
.chip-close { cursor: pointer; margin-left: var(--sp-1); }
.white-space-pre { white-space: pre-wrap; }
.auth-center { max-width: 500px; margin: 0 auto; }
.table-fs-xs { font-size: var(--fs-xs); }
.text-center-pad { text-align: center; padding: var(--sp-3); }
.flex-col-stretch { flex-direction: column; align-items: stretch; }
.pad-y-2 { padding: var(--sp-2) 0; }
.mt-sp-3 { margin-top: var(--sp-3); }
.mt-sp-4 { margin-top: var(--sp-4); }
.flex-col-gap-1 { display: flex; flex-direction: column; gap: var(--sp-1); }
.flex-col-gap-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.flex-row-gap-2 { display: flex; align-items: center; gap: var(--sp-2); }
.fs-xs-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.fs-xs-block { font-size: var(--fs-xs); }
/* ── P06b. COMPACT LIST (Conv 17 — formalized from flex-col-gap-1 + fs-xs-row/block) ── */
/* Used for: investor transactions, partner downstream, UTM links inside accordion sections */
.compact-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.compact-list-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.compact-list-block { font-size: var(--fs-xs); }
/* Aliases (Conv 22: remove after all modules migrate to compact-list) */
/* .flex-col-gap-1 = .compact-list, .fs-xs-row = .compact-list-item, .fs-xs-block = .compact-list-block */
.role-cb-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.role-cb-label { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.role-cb-input { margin-top: 2px; accent-color: var(--brand); }
.type-selector { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.type-btn { flex: 1; border-radius: 0; border: none; }
.type-btn + .type-btn { border-left: 1px solid var(--border); }
.readonly-bg { background: var(--bg); }
.import-textarea { min-height: 200px; }
.textarea-lg { min-height: 300px; }
.trash-item { opacity: 0.5; }
.trash-badge { margin-left: var(--sp-2); }
.inline-block { display: inline-block; }
.mt-sp-3-wrapper { margin-top: var(--sp-3); }
.chip-container-mt { margin-top: var(--sp-2); }
.spin-icon { animation: btn-spin 600ms linear infinite; }
.gear-mr { margin-right: 4px; }
.multi-list {
position: relative;
margin-top: var(--sp-1);
max-height: 240px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
z-index: var(--z-search);
}
/* Audit detail row (expandable) */
.audit-detail-row { display: none; }
.audit-detail-row.expanded { display: table-row; }
.audit-detail-row > td { background: var(--bg); padding: var(--sp-3) var(--sp-4); }
/* ════════════════════════════════════════════════════════════
22. FILTER BAR
════════════════════════════════════════════════════════════ */
.filter-bar {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
padding: var(--sp-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: var(--sp-4);
box-shadow: var(--shadow-xs);
}
/* D8: filter-bar-left takes all available width, wraps filters independently
from action buttons. min-width:0 prevents flex blowout. */
.filter-bar .filter-bar-left {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
flex: 1 1 auto;
min-width: 0;
}
/* D8: filter-bar-right holds action buttons — never wraps with filters */
.filter-bar .filter-bar-right {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
margin-left: auto;
}
.filter-bar .form-input,
.filter-bar .form-select,
.filter-bar .field-input,
.filter-bar .field-select {
width: auto;
min-width: 140px;
max-width: 220px;
}
/* D8: selects with many options (audit action: 20+) need tighter max-width */
.filter-bar .form-select,
.filter-bar .field-select {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
}
/* D8: date inputs — compact, no label bloat */
.filter-bar input[type="date"] {
min-width: 130px;
max-width: 150px;
}
/* D8: filter-bar labels — inline, compact, no extra width */
.filter-bar .filter-bar-left > label {
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
}
.filter-bar .filter-spacer {
flex: 1;
}
.filter-bar .filter-divider {
width: 1px;
height: 28px;
background: var(--border);
margin: 0 var(--sp-1);
flex-shrink: 0;
}
/* Fix: input-sm/input-md inside filter-bar should be compact, not 100% width.
The global .input-sm { width: 100%; } is for form inputs in cards/tables.
Inside a flex filter-bar, they need width: auto to sit inline with other filters.
This override fixes date inputs, selects, and period inputs across all modules
(Audit, Finance, Wallets, Contacts, Leads, Tickets) — Conv 1-7. */
.filter-bar .input-sm,
.filter-bar .input-md {
width: auto;
min-width: 120px;
max-width: 180px;
}
/* ════════════════════════════════════════════════════════════
23. KPI CARDS — Unified system
Two variants: kpi-grid (border-left accent) + kpi-summary-grid (border-top accent)
════════════════════════════════════════════════════════════ */
/* ── Variant A: kpi-card (finance/pool/wallet modules) ────── */
/* Container migrated to .grid-auto + --grid-min:220px (Conv 19) */
/* Child styles kept — kpi-card/label/value/sub used inside grid-auto */
.kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-4);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kpi-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.kpi-label {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--sp-2);
}
.kpi-value {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--text);
line-height: var(--lh-tight);
}
.kpi-sub {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
/* ── Variant B: kpi-summary-card (contacts/dashboard modules) ── */
/* Container migrated to .grid-auto + --grid-min:220px (Conv 19) */
/* Child styles kept — kpi-summary-card + variants used inside grid-auto */
.kpi-summary-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-4);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
box-shadow: var(--shadow-xs);
}
.kpi-summary-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* ── KPI Summary Card Variants (border-top accent) ────────── */
.kpi-summary-card.kpi-investor { border-top: 3px solid var(--info); }
.kpi-summary-card.kpi-partner { border-top: 3px solid var(--brand); }
.kpi-summary-card.kpi-crm { border-top: 3px solid var(--text-muted); }
/* .kpi-relationship removed Conv 17-A — card deleted, relationships in Identity accordion */
.kpi-summary-card.kpi-wallet-investor { border-top: 3px solid var(--info); }
.kpi-summary-card.kpi-wallet-commission { border-top: 3px solid var(--success); }
.kpi-summary-card.kpi-kyc { border-top: 3px solid var(--brand); }
.kpi-summary-card.kpi-value { border-top: 3px solid var(--success); }
.kpi-summary-card.kpi-kyc .kpi-summary-header i,
.kpi-summary-card.kpi-value .kpi-summary-header i {
color: var(--brand);
}
.kpi-summary-card.kpi-value .kpi-summary-header i {
color: var(--success);
}
/* ── KPI Summary Card Content ─────────────────────────────── */
.kpi-summary-header {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--sp-2);
}
.kpi-summary-header i {
font-size: var(--fs-md);
color: var(--text-muted);
}
.kpi-investor .kpi-summary-header i { color: var(--info); }
.kpi-partner .kpi-summary-header i { color: var(--brand); }
.kpi-wallet-investor .kpi-summary-header i { color: var(--info); }
.kpi-wallet-commission .kpi-summary-header i { color: var(--success); }
.kpi-summary-value {
font-size: var(--fs-2xl);
font-weight: var(--fw-extrabold);
color: var(--text);
line-height: var(--lh-tight);
letter-spacing: -0.5px;
}
.kpi-summary-label {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
.kpi-summary-sub {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: var(--sp-2);
line-height: var(--lh-normal);
}
.kpi-view-btn {
margin-top: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
font-size: var(--fs-xs);
min-height: 28px;
color: var(--brand);
}
.kpi-view-btn:hover {
background: var(--brand-light);
}
/* ── KPI Trend Indicator (shared) ─────────────────────────── */
.kpi-trend {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
margin-top: var(--sp-1);
}
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }
.kpi-trend.flat { color: var(--text-muted); }
.kpi-trend i { font-size: var(--fs-xs); }
/* ════════════════════════════════════════════════════════════
24. CHAT BUBBLE
════════════════════════════════════════════════════════════ */
.chat-container {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-4);
overflow-y: auto;
}
.chat-bubble {
display: flex;
flex-direction: column;
max-width: 70%;
}
.chat-bubble-in {
align-self: flex-start;
}
.chat-bubble-out {
align-self: flex-end;
}
.chat-bubble-content {
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius-lg);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
word-wrap: break-word;
}
.chat-bubble-in .chat-bubble-content {
background: var(--surface-hover);
color: var(--text);
border-top-left-radius: var(--radius-sm);
}
.chat-bubble-out .chat-bubble-content {
background: var(--brand);
color: var(--text-inverse);
border-top-right-radius: var(--radius-sm);
}
.chat-bubble-meta {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-1);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.chat-bubble-out .chat-bubble-meta {
justify-content: flex-end;
}
.chat-bubble-avatar {
width: 28px;
height: 28px;
font-size: var(--fs-xs);
margin-right: var(--sp-2);
flex-shrink: 0;
}
.chat-bubble-row {
display: flex;
align-items: flex-start;
gap: 0;
}
.chat-bubble-in .chat-bubble-row {
flex-direction: row;
}
.chat-bubble-out .chat-bubble-row {
flex-direction: row-reverse;
}
/* ── Scroll-to-bottom button ───────────────────────────────── */
.chat-scroll-btn {
position: absolute;
bottom: var(--sp-4);
right: var(--sp-4);
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
cursor: pointer;
z-index: var(--z-sticky-header);
transition: all var(--transition-fast);
}
.chat-scroll-btn:hover {
background: var(--surface-hover);
color: var(--brand);
}
/* ════════════════════════════════════════════════════════════
25. TIMELINE
════════════════════════════════════════════════════════════ */
.timeline {
position: relative;
padding-left: var(--sp-6);
}
.timeline::before {
content: '';
position: absolute;
left: 11px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border);
}
.timeline-item {
position: relative;
padding-bottom: var(--sp-4);
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -25px;
top: 2px;
width: 12px;
height: 12px;
border-radius: var(--radius-full);
background: var(--surface);
border: 2px solid var(--brand);
z-index: var(--z-base);
}
.timeline-item.warning .timeline-dot { border-color: var(--warning); }
.timeline-item.danger .timeline-dot { border-color: var(--danger); }
.timeline-item.info .timeline-dot { border-color: var(--info); }
.timeline-content {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: var(--sp-3);
}
.timeline-title {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
margin-bottom: var(--sp-1);
}
.timeline-meta {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.timeline-body {
font-size: var(--fs-sm);
color: var(--text-secondary);
margin-top: var(--sp-2);
}
/* ════════════════════════════════════════════════════════════
26. JSON DIFF
════════════════════════════════════════════════════════════ */
.json-diff {
font-family: var(--font-mono);
font-size: var(--fs-xs);
line-height: var(--lh-relaxed);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-3);
overflow-x: auto;
}
.json-diff-line {
display: block;
white-space: pre;
}
.json-diff-added {
background: var(--success-light);
color: var(--success);
}
.json-diff-removed {
background: var(--danger-light);
color: var(--danger);
text-decoration: line-through;
}
.json-diff-unchanged {
color: var(--text-muted);
}
/* ── Side-by-side diff ──────────────────────────────────────── */
.json-diff-side-by-side {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
}
.json-diff-side {
font-family: var(--font-mono);
font-size: var(--fs-xs);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-3);
overflow-x: auto;
max-height: 400px;
overflow-y: auto;
}
.json-diff-side-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
/* ════════════════════════════════════════════════════════════
27. SEARCH SELECT
════════════════════════════════════════════════════════════ */
.search-select {
position: relative;
}
.search-select-input {
width: 100%;
padding: var(--sp-2) var(--sp-3);
padding-right: 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--fs-sm);
color: var(--text);
background: var(--surface);
min-height: 36px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-select-input:focus {
outline: none;
box-shadow: var(--focus-ring);
}
.search-select-input::after {
content: '\F282'; /* bi-chevron-down */
font-family: 'bootstrap-icons';
position: absolute;
right: var(--sp-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
pointer-events: none;
}
.search-select-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: var(--sp-1);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
max-height: 240px;
overflow-y: auto;
z-index: var(--z-search);
display: none;
}
.search-select-results.open { display: block; }
.search-select-item {
padding: var(--sp-2) var(--sp-3);
cursor: pointer;
transition: background var(--transition-fast);
border-bottom: 1px solid var(--border-light);
}
.search-select-item:last-child { border-bottom: none; }
.search-select-item:hover,
.search-select-item.highlighted {
background: var(--brand-light);
}
.search-select-item-name {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
}
.search-select-item-sub {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
.search-select-empty {
padding: var(--sp-3);
font-size: var(--fs-sm);
color: var(--text-muted);
text-align: center;
}
/* ── Chip container (multi-recipient broadcast) ──────────── */
.chip-container {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
min-height: 0;
}
.chip-container:empty { display: none; }
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
background: var(--brand-light);
border: 1px solid var(--brand);
border-radius: var(--radius-full, 9999px);
font-size: var(--fs-xs);
color: var(--text);
white-space: nowrap;
}
.chip-removable { padding-right: var(--sp-1); }
.chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: var(--fs-xs);
padding: 0;
line-height: 1;
}
.chip-remove:hover { color: var(--danger); }
/* ── Form check (inline radio/checkbox) ───────────────────── */
.form-check {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
margin-bottom: var(--sp-1);
}
.form-check input[type="radio"],
.form-check input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
.form-check label {
margin: 0;
cursor: pointer;
font-size: var(--fs-sm);
color: var(--text);
}
.form-check-inline {
margin-right: var(--sp-3);
}
.search-select-loading {
padding: var(--sp-3);
text-align: center;
color: var(--text-muted);
font-size: var(--fs-sm);
}
/* ── Search Results (Transfer Modal) ───────────────────────── */
.search-results {
border: 1px solid var(--border);
border-radius: var(--radius);
max-height: 240px;
overflow-y: auto;
margin-top: var(--sp-1);
background: var(--surface);
box-shadow: var(--shadow-md);
}
.search-result-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
cursor: pointer;
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover {
background: var(--surface-hover);
}
.search-result-item .text-muted {
font-size: var(--fs-xs);
margin-left: auto;
}
/* ════════════════════════════════════════════════════════════
28. SORT INDICATOR
════════════════════════════════════════════════════════════ */
.sort-indicator {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
cursor: pointer;
user-select: none;
}
.sort-indicator i {
font-size: var(--fs-xs);
color: var(--text-muted);
opacity: 0.4;
transition: opacity var(--transition-fast);
}
.sort-asc i,
.sort-desc i {
opacity: 1;
color: var(--brand);
}
.sort-asc .sort-icon::before { content: '\F286'; } /* bi-arrow-up */
.sort-desc .sort-icon::before { content: '\F282'; } /* bi-arrow-down */
/* ════════════════════════════════════════════════════════════
29. BULK ACTION BAR
════════════════════════════════════════════════════════════ */
.bulk-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: var(--shadow-lg);
padding: var(--sp-3) var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
z-index: var(--z-bulk-bar);
animation: bulk-bar-slide-up 200ms ease;
}
@keyframes bulk-bar-slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.bulk-bar-count {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.bulk-bar-count .badge {
background: var(--brand);
color: var(--text-inverse);
min-width: 24px;
justify-content: center;
}
.bulk-bar-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* ════════════════════════════════════════════════════════════
30. RELATIVE TIME BADGE
════════════════════════════════════════════════════════════ */
.rel-time {
display: inline;
font-size: var(--fs-xs);
color: var(--text-muted);
font-weight: var(--fw-normal);
}
.rel-time.urgent {
color: var(--danger);
font-weight: var(--fw-semibold);
}
.rel-time.warning {
color: var(--warning);
font-weight: var(--fw-semibold);
}
/* ════════════════════════════════════════════════════════════
31. INLINE EDIT — "nét kiến bò" (dotted field affordance)
- Notes/comment fields: border 4 cạnh (full enclosure)
- Inline-edit fields: border-bottom (subtle, trong container)
- Luôn visible — không cần hover
════════════════════════════════════════════════════════════ */
.inline-edit {
cursor: pointer;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--transition-fast), background var(--transition-fast);
padding: var(--sp-2) var(--sp-3);
min-height: 36px;
display: block;
position: relative;
font-size: var(--fs-sm);
color: var(--text);
line-height: 1.4;
}
/* Notes & comment fields — full 4-sided enclosure, no colored border */
.inline-edit.inline-edit-note {
min-height: 48px;
padding: var(--sp-2);
}
.inline-edit::after {
content: '\F4CB'; /* bi-pencil */
font-family: 'bootstrap-icons';
position: absolute;
right: var(--sp-2);
top: 50%;
transform: translateY(-50%);
font-size: 11px;
color: var(--text-muted);
opacity: 0;
transition: opacity var(--transition-fast);
}
/* Conv 16: Hover = subtle bg + pencil icon only. */
.inline-edit:hover {
background: var(--surface-hover);
}
.inline-edit:hover::after {
opacity: 0.6;
}
.inline-edit.empty {
color: var(--text-muted);
font-style: italic;
}
/* Conv 16: Editing = brand color outline. Background stays neutral. */
.inline-edit.editing {
cursor: default;
background: var(--surface);
border-color: var(--brand);
box-shadow: var(--focus-ring);
}
.inline-edit.editing::after {
display: none;
}
.inline-edit-textarea {
width: 100%;
min-height: 60px;
padding: var(--sp-2) var(--sp-3);
border: none;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
font-family: var(--font-sans);
color: var(--text);
background: var(--surface);
resize: vertical;
line-height: var(--lh-normal);
outline: none;
}
.inline-edit-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: var(--sp-1);
display: flex;
align-items: center;
gap: var(--sp-1);
}
.inline-edit-hint kbd {
font-family: var(--font-mono);
font-size: var(--fs-2xs);
padding: 1px var(--sp-1);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-secondary);
}
/* ════════════════════════════════════════════════════════════
32. TREE CONNECTOR
════════════════════════════════════════════════════════════ */
/* ── Affiliate Tree — Professional text-tree style ─────────── */
.aff-tree-node {
position: relative;
}
.aff-tree-root > .aff-tree-line > .aff-tree-node-content {
background: var(--brand-light);
border: 1px solid var(--brand);
font-weight: var(--fw-semibold);
}
.aff-tree-line {
display: flex;
align-items: center;
white-space: nowrap;
}
.aff-tree-connector {
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
font-size: var(--fs-sm);
color: var(--border);
line-height: 1;
letter-spacing: 0;
white-space: pre;
user-select: none;
}
.aff-tree-node-content {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border-light);
transition: all var(--transition-fast);
cursor: pointer;
margin: 2px 0;
}
.aff-tree-node-content:hover {
background: var(--surface-hover);
border-color: var(--brand);
}
.aff-tree-current {
cursor: default;
}
.aff-tree-name {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
}
.aff-tree-code {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--brand);
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
}
.aff-tree-rate {
font-size: var(--fs-xs);
color: var(--text-muted);
padding: 1px 6px;
background: var(--surface-hover);
border-radius: var(--radius);
}
.aff-tree-count {
font-size: var(--fs-xs);
color: var(--text-muted);
font-weight: var(--fw-normal);
}
.aff-tree-children {
margin-left: 0;
}
/* ════════════════════════════════════════════════════════════
33. GROUP CARD — REMOVED Conv 17 (dead CSS, 0 usage in current modules)
════════════════════════════════════════════════════════════ */
/* Conv 16→17: group-card, group-card-header, group-card-body, group-card-field removed.
.field (§40c) + .field-label (§40d) are the canonical replacements.
.group-card-field-label aliased to .field-label for leads.js backward compat. */
/* Conv 16→17: accordion-grid removed — dead CSS, current JS uses .grid with --grid-cols */
/* ════════════════════════════════════════════════════════════
34. VIEW MODE DROPDOWN
════════════════════════════════════════════════════════════ */
.view-mode-dropdown {
position: relative;
display: inline-block;
}
.view-mode-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
background: var(--surface);
cursor: pointer;
transition: all var(--transition-fast);
min-height: 36px;
}
.view-mode-btn:hover {
background: var(--surface-hover);
border-color: var(--text-muted);
}
.view-mode-btn i {
font-size: var(--fs-sm);
color: var(--text-muted);
}
.view-mode-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: var(--sp-1);
min-width: 240px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--sp-1);
z-index: var(--z-search);
display: none;
}
.view-mode-dropdown.open .view-mode-menu { display: block; }
.view-mode-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
font-size: var(--fs-sm);
color: var(--text);
cursor: pointer;
transition: background var(--transition-fast);
}
.view-mode-item:hover { background: var(--surface-hover); }
.view-mode-item.active {
background: var(--brand-light);
color: var(--brand);
font-weight: var(--fw-semibold);
}
.view-mode-item .bi-check {
font-size: var(--fs-sm);
color: var(--brand);
}
.view-mode-item:not(.active) .bi-check { display: none; }
.view-mode-divider {
height: 1px;
background: var(--border-light);
margin: var(--sp-1) 0;
}
/* ── Column Selector (for custom view mode) ────────────────── */
.column-selector {
max-height: 560px;
overflow-y: auto;
padding: var(--sp-2);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
align-items: start;
}
.column-selector-group {
margin-bottom: 0;
}
.column-selector-group-label {
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--sp-1);
padding-bottom: var(--sp-1);
border-bottom: 1px solid var(--border-light);
}
.column-selector-group-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--sp-1);
}
.column-selector-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius);
cursor: pointer;
transition: background var(--transition-fast);
font-size: var(--fs-sm);
color: var(--text);
}
.column-selector-item:hover { background: var(--surface-hover); }
.column-selector-item input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--brand);
cursor: pointer;
}
/* ════════════════════════════════════════════════════════════
35. ANIMATIONS
════════════════════════════════════════════════════════════ */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Conv 16: Removed dead @keyframes fade-in + .animate-fade-in (0 uses in JS) */
/* ════════════════════════════════════════════════════════════
36. PROFILE 360° — Action Bar + Accordions
════════════════════════════════════════════════════════════ */
/* ── Profile 360° identity elements (used inside .action-bar-identity) ── */
.profile-360-name {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--text);
}
.profile-360-roles {
display: flex;
gap: var(--sp-1);
margin-top: var(--sp-1);
}
/* ── Zone 1: Action Bar ────────────────────────────────────── */
.action-bar {
display: flex;
align-items: center;
gap: var(--sp-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-4);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
box-shadow: var(--shadow-xs);
}
.action-bar-identity {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
flex: 1;
}
.action-bar-identity .profile-360-name {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
color: var(--text);
}
.action-bar-identity .profile-360-roles {
display: flex;
gap: var(--sp-1);
margin-top: var(--sp-1);
flex-wrap: wrap;
}
.action-bar-next {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--sp-2) var(--sp-3);
min-width: 240px;
max-width: 320px;
}
.action-bar-next-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--sp-1);
}
.action-bar-next-value {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.action-bar-next-value.danger { color: var(--danger); }
.action-bar-next-value.warning { color: var(--warning); }
.action-bar-next-value.info { color: var(--info); }
.action-bar-next-value.success { color: var(--success); }
.action-bar-next-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
.action-bar-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
/* ── Health Indicator ─────────────────────────────────────── */
.health-indicator {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 2px var(--sp-2);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
margin-left: var(--sp-2);
}
.health-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.health-healthy { background: var(--success-light); color: var(--success); }
.health-healthy .health-dot { background: var(--success); }
.health-atrisk { background: var(--warning-light); color: var(--warning); }
.health-atrisk .health-dot { background: var(--warning); }
.health-critical { background: var(--danger-light); color: var(--danger); }
.health-critical .health-dot { background: var(--danger); }
.health-inactive { background: var(--surface-hover); color: var(--text-muted); }
.health-inactive .health-dot { background: var(--text-muted); }
/* Conv 16: Removed dead .stage-indicator + .stage-* classes (0 uses in JS) */
/* Conv 16: Removed dead .target-badge class (0 uses in JS) */
/* ── Quick Actions ────────────────────────────────────────── */
.quick-actions {
display: flex;
gap: var(--sp-1);
margin-top: var(--sp-2);
flex-wrap: wrap;
}
/* Conv 16: scoped to .quick-actions to avoid conflict with Dashboard .quick-action-btn */
.quick-actions .quick-action-btn {
padding: var(--sp-1) var(--sp-2);
font-size: var(--fs-xs);
min-height: 26px;
}
/* ── Relationship Card — REMOVED Conv 17-A (dead CSS, relationships moved to Identity accordion) ── */
/* ── Quick Info Grid — REMOVED Conv 17 (dead CSS, 0 usage in current modules) ── */
/* ── Zone 3: Accordions ────────────────────────────────────── */
.accordion-stack {
display: flex;
flex-direction: column;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
/* Conv 17: accordion-section/header/body/title/summary/chevron removed — dead CSS.
Current JS uses .panel-accordion + .panel-header + .panel-body + .panel-chevron. */
/* Conv 16→17: accordion-grid + card wrappers removed — dead CSS, current JS uses .grid */
/* ── Financial Workspace ──────────────────────────────────── */
.financial-workspace {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-3);
background: var(--surface-editable);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
}
/* .financial-wallet-bar — REMOVED Conv 17-A (replaced by .fin-status-bar) */
/* ── Old wallet pill classes — REMOVED Conv 17-A (replaced by .fin-status-pill) ── */
.fin-wallet-actions {
margin-left: auto;
display: flex;
gap: var(--sp-1);
}
/* ── Conv 17-A: Financial Workspace 4-Layer Intelligence Panel ── */
/* Layer 1: Financial Status Bar — 4 pills */
.fin-status-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--surface-hover);
border-radius: var(--radius-md);
}
.fin-status-pill {
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.fin-status-pill-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.fin-status-pill-value {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text);
}
.fin-status-pill-sub {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
/* Health indicator variants */
.fin-health-healthy { border-left: 3px solid var(--success); }
.fin-health-review { border-left: 3px solid var(--warning); }
.fin-health-alert { border-left: 3px solid var(--danger); }
.fin-health-icon {
font-size: var(--fs-md);
}
.fin-health-healthy .fin-health-icon { color: var(--success); }
.fin-health-review .fin-health-icon { color: var(--warning); }
.fin-health-alert .fin-health-icon { color: var(--danger); }
/* Layer 2: Flow Breakdown — metric grid */
.fin-flow-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-2);
}
.fin-flow-item {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--sp-2);
border-radius: var(--radius-sm);
background: var(--surface);
border: 1px solid var(--border-light);
}
.fin-flow-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.fin-flow-value {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text);
}
.fin-flow-value.positive { color: var(--success); }
.fin-flow-value.negative { color: var(--danger); }
/* Commission status line */
.fin-commission-status {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-secondary);
padding: var(--sp-1) var(--sp-2);
}
.fin-commission-status .badge { font-size: var(--fs-2xs); }
/* Reconciliation badge */
.fin-recon {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
padding: var(--sp-1) 0;
}
/* Transaction status icons in table */
.tx-locked { color: var(--success); }
.tx-open { color: var(--warning); }
/* Responsive: Tablet — status bar 2-col, flow grid 3-col */
@media (max-width: 1023px) {
.fin-status-bar { grid-template-columns: repeat(2, 1fr); }
.fin-flow-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Responsive: Mobile — status bar 1-col, flow grid 2-col */
@media (max-width: 767px) {
.fin-status-bar { grid-template-columns: 1fr; }
.fin-flow-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── Zone 4: Audit Line ────────────────────────────────────── */
.audit-line {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-muted);
padding: var(--sp-2) var(--sp-4);
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
}
.audit-line i {
font-size: var(--fs-sm);
color: var(--text-muted);
}
/* ════════════════════════════════════════════════════════════
37. LEADS CONVERT UX
════════════════════════════════════════════════════════════ */
/* ── Lead Stepper (RAW → LEAD → CONVERTED) ─────────────────── */
.lead-stepper {
display: flex;
align-items: center;
margin: var(--sp-3) 0 var(--sp-4);
}
.lead-step {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-shrink: 0;
}
.lead-step-dot {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
border: 2px solid var(--border);
color: var(--text-muted);
background: var(--surface);
transition: all var(--transition-fast);
}
.lead-step-dot i { font-size: 14px; }
.lead-step.done .lead-step-dot {
background: var(--brand);
border-color: var(--brand);
color: var(--text-inverse);
}
.lead-step.current .lead-step-dot {
color: var(--brand);
box-shadow: var(--focus-ring);
}
.lead-step-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
white-space: nowrap;
}
.lead-step.done .lead-step-label,
.lead-step.current .lead-step-label {
color: var(--text);
}
.lead-step-line {
flex: 1;
height: 2px;
background: var(--border);
min-width: 24px;
margin: 0 var(--sp-2);
}
.lead-step-line.filled {
background: var(--brand);
}
/* ── Contact Preview (convert dialog) ──────────────────────── */
.lead-preview {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg);
margin-bottom: var(--sp-2);
}
.lead-preview-info {
flex: 1;
min-width: 0;
}
.lead-preview-name {
font-size: var(--fs-md);
font-weight: var(--fw-bold);
color: var(--text);
}
.lead-preview-meta {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
.lead-preview-roles {
display: flex;
gap: var(--sp-1);
margin-top: var(--sp-1);
flex-wrap: wrap;
}
/* ── Role Selector (segmented control) ─────────────────────── */
.lead-role-selector {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.lead-role-btn {
flex: 1;
border-radius: 0;
border: none;
padding: var(--sp-2) var(--sp-3);
}
.lead-role-btn + .lead-role-btn {
border-left: 1px solid var(--border);
}
.lead-role-btn.active {
background: var(--brand-light);
color: var(--brand);
font-weight: var(--fw-semibold);
}
/* ── Role Preview Panel ────────────────────────────────────── */
.lead-role-preview {
margin: var(--sp-2) 0 var(--sp-3);
padding: var(--sp-3);
border: 1px dashed var(--border);
border-radius: var(--radius-md);
background: var(--surface);
font-size: var(--fs-xs);
color: var(--text-secondary);
}
.lead-role-preview-title {
font-weight: var(--fw-semibold);
color: var(--text);
margin-bottom: var(--sp-1);
}
.lead-role-preview ul {
margin: 0;
padding-left: var(--sp-4);
display: flex;
flex-direction: column;
gap: 3px;
}
/* ── Expandable Row ────────────────────────────────────────── */
.lead-expand-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius);
cursor: pointer;
transition: transform var(--transition-fast), background var(--transition-fast);
}
.lead-expand-btn:hover {
background: var(--bg);
color: var(--text);
}
.lead-expand-btn.open {
transform: rotate(90deg);
color: var(--brand);
}
.lead-detail-row td {
background: var(--bg);
padding: var(--sp-3) var(--sp-4);
}
.lead-detail-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sp-4);
}
.lead-detail-note {
font-size: var(--fs-sm);
color: var(--text-secondary);
white-space: pre-wrap;
}
.lead-detail-actions {
display: flex;
align-items: flex-end;
gap: var(--sp-2);
}
/* ════════════════════════════════════════════════════════════
37.5. MARKDOWN EDITOR
════════════════════════════════════════════════════════════ */
.md-editor {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.md-toolbar {
display: flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: var(--radius-md);
flex-wrap: wrap;
}
.md-toolbar-btn {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-secondary);
font-size: var(--fs-sm);
cursor: pointer;
transition: all 150ms ease;
}
.md-toolbar-btn:hover {
background: var(--border-light);
color: var(--text);
border-color: var(--border);
}
.md-toolbar-spacer {
flex: 1;
}
.md-vars-hint {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--sp-1);
font-size: var(--fs-xs);
color: var(--text-muted);
text-align: left;
}
.md-var-btn {
padding: 2px var(--sp-1);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--border-light);
color: var(--brand);
font-size: var(--fs-xs);
font-family: var(--font-mono, monospace);
cursor: pointer;
transition: all 150ms ease;
}
.md-var-btn:hover {
background: var(--brand);
color: white;
}
.md-preview {
min-height: 120px;
padding: var(--sp-3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow-y: auto;
max-height: 400px;
}
.md-preview h1 { font-size: var(--fs-xl); margin: var(--sp-2) 0 var(--sp-1); }
.md-preview h2 { font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-1); }
.md-preview h3 { font-size: var(--fs-md); margin: var(--sp-2) 0 var(--sp-1); }
.md-preview p { margin-bottom: var(--sp-2); }
.md-preview ul, .md-preview ol { margin-left: var(--sp-4); margin-bottom: var(--sp-2); }
.md-preview li { margin-bottom: var(--sp-1); }
.md-preview pre {
background: var(--border-light);
padding: var(--sp-2);
border-radius: var(--radius-sm);
overflow-x: auto;
}
.md-preview code {
background: var(--border-light);
padding: 2px 4px;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.md-preview pre code { background: transparent; padding: 0; }
.md-preview .md-var {
--var-highlight-bg: rgba(240, 140, 50, 0.12);
background: var(--var-highlight-bg);
color: var(--brand);
padding: 1px 4px;
border-radius: var(--radius-sm);
font-family: var(--font-mono, monospace);
font-size: var(--fs-sm);
}
.md-preview .md-checklist {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-1);
}
.md-preview .md-checklist input[type="checkbox"] {
margin: 0;
}
.md-preview .md-ol { list-style: decimal; }
.md-table-grid {
display: flex;
flex-direction: column;
gap: var(--sp-1);
margin-bottom: var(--sp-2);
}
.md-table-row {
display: flex;
gap: var(--sp-1);
align-items: center;
}
.md-table-cell {
flex: 1;
min-width: 80px;
}
.md-table-header {
font-weight: var(--fw-semibold);
background: var(--border-light);
}
.md-table-del-row {
flex-shrink: 0;
color: var(--danger);
}
/* ════════════════════════════════════════════════════════════
38. RESPONSIVE
════════════════════════════════════════════════════════════ */
/* ── Tablet (768-1199px) ──────────────────────────────────── */
@media (max-width: 1199px) {
:root {
--sidebar-width: 200px;
}
.module-container { padding: var(--sp-4); }
.group-card-body {
grid-template-columns: repeat(2, 1fr);
}
.json-diff-side-by-side {
grid-template-columns: 1fr;
}
/* Conv 16: Tablet additions — module coverage */
.dashboard-bottom-row {
grid-template-columns: 1fr;
}
.dashboard-charts-row {
grid-template-columns: 1fr 1fr;
}
.dashboard-charts-row .card:first-child {
grid-column: 1 / -1;
}
.security-grid {
grid-template-columns: 1fr 1fr;
}
.tx-detail-grid {
grid-template-columns: 1fr;
}
.network-table th:nth-child(n+4),
.network-table td:nth-child(n+4) {
display: none;
}
.form-grid {
grid-template-columns: 1fr;
}
.editor-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-layout .doc-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
}
.chat-bubble {
max-width: 85%;
}
.kpi-bar {
flex-wrap: wrap;
gap: var(--sp-2);
}
.lead-detail-grid {
grid-template-columns: 1fr;
}
.action-bar {
flex-wrap: wrap;
gap: var(--sp-2);
}
.action-bar-next {
flex-wrap: wrap;
}
.contract-builder {
grid-template-columns: 1fr;
}
.builder-section {
border-right: none;
border-bottom: 1px solid var(--border);
}
.quick-action-btn span {
display: none;
}
.quick-action-btn {
padding: var(--sp-2) var(--sp-3);
}
}
/* ── Mobile (<768px) ───────────────────────────────────────── */
@media (max-width: 767px) {
.sidebar {
transform: translateX(-100%);
box-shadow: var(--shadow-lg);
}
.sidebar.open { transform: translateX(0); }
.content {
margin-left: 0;
padding-bottom: var(--bottom-nav-height);
}
.sidebar-toggle { display: inline-flex; }
.bottom-nav { display: flex; }
.module-container { padding: var(--sp-2); }
.topbar-title { font-size: var(--fs-md); }
.kpi-value { font-size: var(--fs-lg); }
.kpi-summary-value { font-size: var(--fs-xl); }
.form-row { flex-direction: column; }
.table { font-size: var(--fs-xs); }
.table th, .table td { padding: var(--sp-2); }
.modal { max-width: 100%; border-radius: var(--radius-md); }
.toast-container { left: var(--sp-2); right: var(--sp-2); }
.toast { max-width: 100%; }
.pagination { flex-wrap: wrap; }
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.filter-bar .form-input,
.filter-bar .form-select {
width: 100%;
}
.filter-bar .input-sm,
.filter-bar .input-md {
width: 100%;
}
.input-sm, .input-md { width: 100%; }
.td-label, .td-label-sm, .td-label-md { width: auto; }
.filter-bar .filter-divider { display: none; }
.group-card-body {
grid-template-columns: 1fr;
}
.action-bar {
flex-direction: column;
align-items: stretch;
}
.action-bar-identity {
flex-wrap: wrap;
}
.action-bar-next {
max-width: 100%;
}
.action-bar-actions {
width: 100%;
justify-content: flex-end;
}
/* Conv 17: .accordion-summary removed — dead CSS */
.chat-bubble { max-width: 85%; }
.bulk-bar {
padding: var(--sp-3) var(--sp-4);
flex-wrap: wrap;
}
.bulk-bar-actions {
width: 100%;
justify-content: flex-end;
}
.json-diff-side-by-side {
grid-template-columns: 1fr;
}
.column-selector {
grid-template-columns: 1fr;
}
.column-selector-group-items {
grid-template-columns: 1fr;
}
.form-grid {
grid-template-columns: 1fr;
}
.lead-stepper {
flex-wrap: wrap;
}
.lead-step-line {
min-width: 12px;
}
.lead-detail-grid {
grid-template-columns: 1fr;
gap: var(--sp-3);
}
.lead-detail-actions {
flex-wrap: wrap;
}
}
/* ============================================================
Conv 3: Contract Builder + Terms Builder — 7 Section Styles
============================================================ */
.contract-builder-section,
.terms-builder-section {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--sp-3);
margin-bottom: var(--sp-3);
background: var(--surface);
}
.builder-section-header {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
flex-wrap: wrap;
}
.builder-section-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand);
color: var(--text-inverse);
font-size: var(--fs-sm);
font-weight: 600;
flex-shrink: 0;
}
.builder-section-title {
font-weight: 600;
font-size: var(--fs-base);
color: var(--text);
}
.builder-section-editor {
width: 100%;
font-family: var(--font-mono, monospace);
font-size: var(--fs-sm);
resize: vertical;
}
/* ════════════════════════════════════════════════════════════
30b. KPI BAR + BADGES (Conv 17 — semantic rename from ticket-kpi-*)
════════════════════════════════════════════════════════════ */
.kpi-bar {
display: flex;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.kpi-badge {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
min-width: 90px;
box-shadow: var(--shadow-xs);
}
.kpi-badge:hover {
border-color: var(--brand);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.kpi-badge.active {
border-color: var(--brand);
background: var(--brand-light);
}
.kpi-badge-num {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--text);
line-height: 1.2;
}
.kpi-badge-label {
font-size: var(--fs-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.kpi-badge-danger .kpi-badge-num {
color: var(--danger);
}
.kpi-badge-danger {
border-color: var(--danger-light);
cursor: default;
}
.kpi-badge-danger:hover {
border-color: var(--danger);
}
/* ── Internal Notes ─────────────────────────────────────────── */
.internal-note {
padding: var(--sp-3) var(--sp-4);
border-left: 3px solid var(--warning);
background: var(--surface-hover);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin-bottom: var(--sp-2);
}
.internal-note-meta {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-muted);
margin-bottom: var(--sp-1);
}
.internal-note-content {
font-size: var(--fs-sm);
color: var(--text);
white-space: pre-wrap;
word-wrap: break-word;
}
/* ════════════════════════════════════════════════════════════
39. NETWORK PERFORMANCE TABLE (Conv 2)
════════════════════════════════════════════════════════════ */
.network-table-wrapper {
overflow-x: auto;
margin-top: var(--sp-2);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-xs);
}
.network-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.network-table thead th {
background: var(--surface-hover);
padding: var(--sp-2);
text-align: left;
font-weight: var(--fw-semibold);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.network-table tbody td {
padding: var(--sp-2);
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
.network-table-row {
cursor: pointer;
transition: background 0.15s;
}
.network-table-row:hover {
background: var(--surface-hover);
}
.network-table-contact {
display: flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
}
.network-table tfoot td {
padding: var(--sp-2);
border-top: 2px solid var(--border);
background: var(--surface-hover);
}
.network-table-total td {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
}
/* ── Money Flow: Transaction detail card (Conv 20 D8: list→drop card) ─── */
/* Selected row in transaction table */
.row-selected {
background: var(--surface-hover);
border-left: 3px solid var(--brand);
}
.row-selected td:first-child {
font-weight: var(--fw-semibold);
}
/* tx-detail-grid: reused inside .panel — auto-fill grid for detail fields */
.tx-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-1) var(--sp-3);
font-size: var(--fs-sm);
}
.tx-detail-grid > div {
padding: 2px 0;
}
.tx-detail-actions {
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--border);
}
/* ============================================================
Conv 9.5: Document Layout — professional contract/T&C preview
Used in Settings → Contract Templates & T&C editor Preview tab
============================================================ */
.doc-layout {
--doc-text: #1a1a1a;
--doc-cell-border: #ddd;
--print-border: #ccc;
max-width: 800px;
margin: 0 auto;
background: var(--surface);
padding: 2.5rem 3rem;
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: 'Times New Roman', 'Georgia', serif;
line-height: 1.8;
color: var(--doc-text);
}
.doc-header {
text-align: center;
border-bottom: 2px solid var(--doc-text);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.doc-brand {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--brand);
}
.doc-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0.5rem 0 0.25rem;
}
.doc-meta {
font-size: 0.875rem;
color: var(--text-muted);
}
.doc-body { margin-bottom: 2rem; }
.doc-body h1 { font-size: 1.25rem; text-align: center; margin: 1rem 0; }
.doc-body h2 { font-size: 1.1rem; margin: 1rem 0 0.5rem; }
.doc-body h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; }
.doc-body p { margin-bottom: 0.75rem; text-align: justify; }
.doc-body ul, .doc-body ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
.doc-body li { margin-bottom: 0.25rem; }
.doc-body table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; }
.doc-body td, .doc-body th { border: 1px solid var(--doc-cell-border); padding: 0.375rem 0.5rem; }
.doc-body strong { font-weight: 700; }
.doc-footer {
border-top: 1px solid var(--border);
padding-top: 1rem;
margin-top: 2rem;
}
.doc-signature {
display: flex;
justify-content: space-between;
gap: 2rem;
}
.doc-sig-block {
flex: 1;
text-align: center;
}
.doc-sig-label {
font-weight: 600;
margin-bottom: 2.5rem;
}
.doc-sig-line {
border-top: 1px solid var(--doc-text);
padding-top: 0.25rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.doc-footer-text {
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 1rem;
}
/* ── HTML Editor (contenteditable) ── */
.html-editor-toolbar {
display: flex;
gap: 0.25rem;
padding: 0.5rem;
border: 1px solid var(--border);
border-bottom: none;
border-radius: var(--radius) var(--radius) 0 0;
background: var(--surface-hover);
}
.html-editor {
min-height: 300px;
max-height: 500px;
overflow-y: auto;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 0 0 var(--radius) var(--radius);
font-family: var(--font-mono);
font-size: var(--fs-sm);
line-height: 1.6;
outline: none;
background: var(--surface);
}
.html-editor:focus { outline: none; box-shadow: var(--focus-ring); }
.html-editor:empty::before {
content: attr(data-placeholder);
color: var(--text-muted);
}
/* ── Variable Reference Panel ── */
.var-ref-panel {
background: var(--surface-hover);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem;
margin-bottom: 0.75rem;
}
.var-ref-label {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.var-ref-chips {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.var-chip {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--brand);
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
.var-chip:hover {
background: var(--brand);
color: var(--text-inverse);
border-color: var(--brand);
}
/* ── Editor Tabs (Edit / Preview / Variables) ── */
.editor-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 1rem;
}
.editor-tab {
padding: 0.5rem 1rem;
cursor: pointer;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.15s ease;
user-select: none;
}
.editor-tab:hover { color: var(--text); }
.editor-tab.active {
color: var(--brand);
border-bottom-color: var(--brand);
font-weight: 600;
}
.editor-tab-content { display: none; }
.editor-tab-content.active { display: block; }
/* ── Variable Reference Table (Variables tab) ── */
.var-ref-table {
width: 100%;
}
.var-ref-table td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.var-ref-table .var-token {
font-family: var(--font-mono);
font-size: var(--fs-sm);
color: var(--brand);
font-weight: 600;
white-space: nowrap;
}
.var-ref-table .var-desc {
color: var(--text-muted);
font-size: var(--fs-sm);
}
.var-ref-table .var-example {
font-family: var(--font-mono);
font-size: var(--fs-xs);
color: var(--text-muted);
background: var(--surface-hover);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
white-space: nowrap;
}
/* Conv 16: Removed dead .badge-draft/.badge-published (0 uses in JS — settings.js uses UI.badge('Draft','default')) */
/* ════════════════════════════════════════════════════════════
Conv 11 — Contacts Deep Update CSS
New components: kyc-progress, context-banner, cross-module-nav, kpi-kyc
════════════════════════════════════════════════════════════ */
/* ── Context Banner (cross-module arrival indicator) ── */
.context-banner {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
margin-bottom: var(--sp-3);
background: var(--info-light);
border-left: 3px solid var(--info);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.context-banner-text {
color: var(--text-secondary);
}
.context-banner-text strong {
color: var(--info);
}
/* ── Cross-Module Navigation Bar ── */
.cross-module-nav {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
margin-bottom: var(--sp-3);
padding: var(--sp-2);
background: var(--surface);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.cross-module-nav .btn {
font-size: var(--fs-xs);
}
/* ── KYC Progress Grid ── */
.kyc-progress {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--sp-2);
}
.kyc-progress-item {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: var(--shadow-xs);
}
.kyc-progress-item i {
font-size: var(--fs-lg);
flex-shrink: 0;
}
.kyc-progress-info {
flex: 1;
min-width: 0;
}
.kyc-progress-type {
font-weight: 600;
font-size: var(--fs-sm);
margin-bottom: 2px;
}
.kyc-progress-status {
font-size: var(--fs-xs);
}
.kyc-progress-count {
font-size: var(--fs-xs);
color: var(--text-muted);
white-space: nowrap;
}
/* KYC status color coding */
.kyc-status-verified {
border-color: var(--success);
background: var(--success-light);
}
.kyc-status-verified i {
color: var(--success);
}
.kyc-status-pending {
border-color: var(--warning);
background: var(--warning-light);
}
.kyc-status-pending i {
color: var(--warning);
}
.kyc-status-rejected {
border-color: var(--danger);
background: var(--danger-light);
}
.kyc-status-rejected i {
color: var(--danger);
}
.kyc-status-submitted {
border-color: var(--info);
background: var(--info-light);
}
.kyc-status-submitted i {
color: var(--info);
}
.kyc-status-missing {
border-color: var(--border);
background: var(--surface-hover);
}
.kyc-status-missing i {
color: var(--text-muted);
}
/* ── Responsive: cross-module nav + KYC progress ── */
@media (max-width: 767px) {
.cross-module-nav {
flex-direction: column;
}
.cross-module-nav .btn {
width: 100%;
text-align: left;
}
.kyc-progress {
grid-template-columns: 1fr;
}
.context-banner {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-1);
}
}
/* ── Profile Completeness Bar ── */
.profile-completeness-bar {
position: relative;
width: 100%;
max-width: 200px;
height: 6px;
background: var(--border-light);
border-radius: 3px;
margin-top: var(--sp-1);
overflow: hidden;
}
.profile-completeness-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
background: linear-gradient(90deg, var(--warning) 0%, var(--success) 100%);
}
.profile-completeness-text {
position: relative;
margin-top: var(--sp-1);
font-size: var(--fs-xs);
color: var(--text-muted);
white-space: nowrap;
}
/* ── Action Checklist ── */
.action-checklist {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: var(--sp-1);
}
.action-checklist-item {
display: flex;
align-items: center;
gap: var(--sp-1);
padding: 4px var(--sp-2);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
transition: background 0.15s;
}
.action-checklist-item.danger {
background: var(--danger-light);
color: var(--danger);
}
.action-checklist-item.warning {
background: var(--warning-light);
color: var(--warning);
}
.action-checklist-item.done {
color: var(--text-muted);
text-decoration: line-through;
}
.action-checklist-item.done i {
color: var(--success);
}
.action-checklist-item .btn-xs {
padding: 0 6px;
font-size: var(--fs-2xs);
line-height: 1.4;
}
/* ── Note Field — nét kiến bò 4 cạnh (platform-wide signature) ── */
/* Applied to ALL note/comment/description display areas across modules */
.note-field {
border: 1px dotted var(--border-strong);
background: var(--surface-editable);
border-radius: var(--radius-sm);
padding: var(--sp-2);
min-height: var(--sidebar-logo-height);
display: block;
margin-top: 2px;
}
.note-field:empty::before {
content: '—';
color: var(--text-muted);
}
/* Table cell variant — for notes in table rows */
td.note-field {
min-height: auto;
padding: var(--sp-1) var(--sp-2);
}
/* Conv 17: banking-grid removed — dead CSS, current JS uses .grid with --grid-cols */
/* ── Cursor pointer for table rows ── */
.table tr.cursor-pointer {
cursor: pointer;
}
.table tr.cursor-pointer:hover {
background: var(--surface-hover);
}
/* ============================================================
Conv 12: Security Core CSS
============================================================ */
/* ── 2FA QR + backup codes ────────────────────────────────── */
.twofa-qr-section {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
margin: 16px 0;
}
.twofa-qr-img {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
background: var(--surface);
}
.twofa-manual {
flex: 1;
min-width: 200px;
}
.twofa-secret {
display: block;
font-family: monospace;
font-size: 0.9em;
padding: 8px 12px;
background: var(--surface-editable);
border: 1px dashed var(--border);
border-radius: var(--radius);
word-break: break-all;
user-select: all;
}
.twofa-code-input {
text-align: center;
font-size: 1.5em;
letter-spacing: 0.3em;
}
.twofa-backup-toggle {
margin: 12px 0;
}
.twofa-backup-toggle summary {
cursor: pointer;
font-size: 0.875em;
}
.backup-codes-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 16px 0;
}
.backup-code {
font-family: monospace;
font-size: 1em;
padding: 8px 12px;
background: var(--surface-editable);
border: 1px solid var(--border);
border-radius: var(--radius);
text-align: center;
user-select: all;
letter-spacing: 0.1em;
}
/* ── Security tabs ────────────────────────────────────────── */
#security-tabs .tab {
display: flex;
align-items: center;
gap: 6px;
}
/* ── Login 2FA step ───────────────────────────────────────── */
.login-card .twofa-code-input {
text-align: center;
font-size: 1.5em;
letter-spacing: 0.3em;
}
/* ── Admin user management ───────────────────────────────── */
.btn-group-sm {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.btn-group-sm .btn {
padding: 4px 8px;
font-size: 0.8em;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
.twofa-qr-section {
flex-direction: column;
align-items: stretch;
}
.twofa-qr-img {
align-self: center;
}
.backup-codes-grid {
grid-template-columns: 1fr;
}
}
/* ── Conv 13: Utility classes (replace inline styles) ────── */
.flex-1 { flex: 1; }
.td-truncate-md { max-width: var(--login-width); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-group-wrap { flex-wrap: wrap; gap: 8px; }
.code-lg { font-size: 1.2em; }
/* ════════════════════════════════════════════════════════════
CONV 13: User Management — Permission Matrix + User Detail
════════════════════════════════════════════════════════════ */
/* ── User Detail: Info Grid ───────────────────────────────── */
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
background: var(--surface-editable);
border: 1px solid var(--border);
border-radius: 8px;
}
.info-label {
font-size: var(--fs-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.info-value {
font-size: var(--fs-md);
color: var(--text);
font-weight: 500;
}
/* ── Permission Matrix ─────────────────────────────────────── */
.perm-matrix-wrapper {
overflow-x: auto;
max-width: 100%;
}
.perm-matrix {
min-width: 700px;
}
.perm-matrix th.perm-role-header {
text-align: center;
font-size: var(--fs-xs);
text-transform: capitalize;
white-space: nowrap;
padding: 8px 12px;
}
.perm-matrix .perm-cell {
text-align: center;
padding: 10px 12px;
font-size: 1.1rem;
}
.perm-matrix .perm-cell .bi {
font-size: 1.1rem;
}
.perm-matrix {
--perm-yes-bg: rgba(0, 168, 89, 0.06);
--perm-no-bg: rgba(239, 68, 68, 0.04);
}
.perm-matrix .perm-yes {
background: var(--perm-yes-bg);
}
.perm-matrix .perm-no {
background: var(--perm-no-bg);
}
.perm-matrix .td-label {
white-space: nowrap;
font-weight: 500;
}
.perm-matrix .td-label i {
color: var(--brand);
margin-right: 6px;
}
/* ── Permission Summary ───────────────────────────────────── */
.perm-summary {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.perm-summary-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--surface-editable);
border: 1px solid var(--border);
border-radius: 8px;
font-size: var(--fs-sm);
}
/* ── User detail responsive ────────────────────────────────── */
@media (max-width: 767px) {
.grid-2col {
grid-template-columns: 1fr;
}
.perm-matrix {
min-width: 500px;
}
.perm-summary {
flex-direction: column;
}
}
/* ── Print: Permission Matrix Reference Card ───────────────── */
@media print {
body * {
visibility: hidden;
}
#perm-matrix-table,
#perm-matrix-table * {
visibility: visible;
}
#perm-matrix-table {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.perm-matrix {
min-width: 100%;
font-size: 0.8rem;
}
.perm-matrix th,
.perm-matrix td {
border: 1px solid var(--print-border);
padding: 6px 8px;
}
}
/* ════════════════════════════════════════════════════════════
CONV 14: Dashboard Enhancement — Charts, Security, Activity
════════════════════════════════════════════════════════════ */
/* ── Quick Actions Bar ────────────────────────────────────── */
.dashboard-quick-actions {
display: flex;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.quick-action-btn {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text);
font-family: var(--font-sans);
}
.quick-action-btn:hover {
background: var(--brand-light);
border-color: var(--brand);
color: var(--brand);
}
.quick-action-btn i {
font-size: var(--fs-md);
}
/* ── Charts Row ────────────────────────────────────────────── */
.dashboard-charts-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.dashboard-charts-row .card {
margin-top: 0;
}
.chart-body {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.chart-svg {
width: 100%;
height: auto;
max-height: 220px;
}
.chart-donut-body {
flex-direction: column;
gap: var(--sp-3);
align-items: center;
}
.chart-donut-svg {
width: 140px;
height: 140px;
}
/* ── Chart Legend ──────────────────────────────────────────── */
.chart-legend {
display: flex;
gap: var(--sp-3);
font-size: var(--fs-xs);
color: var(--text-muted);
}
.chart-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.chart-legend-dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
.chart-legend-dot[data-color="brand"] { background: var(--brand); }
.chart-legend-dot[data-color="info"] { background: var(--info); }
.chart-legend-dot[data-color="warning"] { background: var(--warning); }
.chart-legend-dot[data-color="danger"] { background: var(--danger); }
.chart-legend-dot[data-color="muted"] { background: var(--text-muted); }
.chart-legend-dot[data-color="purple"] { background: var(--chart-1); }
.chart-legend-dot[data-color="pink"] { background: var(--chart-2); }
.chart-legend-dot[data-color="teal"] { background: var(--chart-3); }
.chart-legend-dot[data-color="orange"] { background: var(--chart-4); }
.chart-legend-dot[data-color="indigo"] { background: var(--chart-5); }
/* ── SVG Chart Elements ───────────────────────────────────── */
.chart-grid-line {
stroke: var(--border-light);
stroke-width: 1;
stroke-dasharray: 2, 3;
}
.chart-axis-text {
font-size: var(--fs-2xs);
fill: var(--text-muted);
font-family: var(--font-sans);
}
.chart-line {
stroke-width: 2;
fill: none;
}
.chart-line-brand { stroke: var(--brand); }
.chart-line-info { stroke: var(--info); }
.chart-dot { r: 3; }
.chart-dot-brand { fill: var(--brand); }
.chart-dot-info { fill: var(--info); }
.chart-legend-vertical {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.chart-legend-vertical .chart-legend-item {
justify-content: space-between;
font-size: var(--fs-xs);
}
.chart-legend-label {
color: var(--text-secondary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: var(--sp-2);
}
.chart-legend-value {
font-weight: var(--fw-semibold);
color: var(--text);
white-space: nowrap;
}
/* ── Chart Empty State ─────────────────────────────────────── */
.chart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 160px;
color: var(--text-muted);
}
.chart-empty i {
font-size: 2rem;
opacity: 0.4;
}
.chart-empty p {
font-size: var(--fs-sm);
margin: 0;
}
/* ── Bottom Row: Security + Activity ──────────────────────── */
.dashboard-bottom-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
margin-top: var(--sp-4);
}
.dashboard-bottom-row-single {
grid-template-columns: 1fr;
}
/* ── Security Overview ────────────────────────────────────── */
.security-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.security-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--sp-3);
background: var(--surface-hover);
border-radius: var(--radius-md);
text-align: center;
}
.security-icon {
font-size: var(--fs-xl);
color: var(--brand);
margin-bottom: 2px;
}
.security-value {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--text);
line-height: 1;
}
.security-total {
font-size: var(--fs-sm);
font-weight: var(--fw-normal);
color: var(--text-muted);
}
.security-label {
font-size: var(--fs-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.security-sessions {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-sm);
}
/* ── Activity Feed ────────────────────────────────────────── */
.activity-feed {
max-height: 320px;
overflow-y: auto;
}
.activity-item {
display: flex;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-light);
transition: background var(--transition);
}
.activity-item:hover {
background: var(--surface-hover);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--surface-hover);
flex-shrink: 0;
font-size: var(--fs-md);
}
.activity-content {
flex: 1;
min-width: 0;
}
.activity-text {
font-size: var(--fs-sm);
color: var(--text);
line-height: var(--lh-tight);
}
.activity-action {
font-size: var(--fs-xs);
color: var(--text-muted);
margin: 0 2px;
}
.activity-entity {
font-size: var(--fs-xs);
color: var(--brand);
margin-left: 4px;
}
.activity-time {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
}
/* ── Dashboard Responsive (Conv 16: consolidated into main tablet/mobile sections) ── */
/* Tablet rules moved to main @media (max-width: 1199px) block above */
/* Mobile: charts collapse to single column (bottom-row & security-grid already 1fr/2col from tablet) */
@media (max-width: 767px) {
.dashboard-charts-row {
grid-template-columns: 1fr;
}
.dashboard-charts-row .card:first-child {
grid-column: auto;
}
/* Conv 16: additional mobile coverage */
.security-grid {
grid-template-columns: 1fr;
}
.network-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.editor-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-layout .doc-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
}
.kpi-bar {
flex-direction: column;
align-items: stretch;
}
.contract-builder {
grid-template-columns: 1fr;
}
.builder-section {
border-right: none;
border-bottom: 1px solid var(--border);
}
.activity-feed {
max-height: 200px;
}
.quick-action-btn {
padding: var(--sp-2) var(--sp-3);
}
}
/* ============================================================
39. MODULE-SPECIFIC RESPONSIVE (Conv 16)
Per-module @media blocks for layouts needing individual treatment
Breakpoints: tablet ≤1199px · mobile ≤767px
============================================================ */
/* ── Dashboard Module ─────────────────────────────────────── */
@media (max-width: 1199px) {
.dashboard-top-row {
grid-template-columns: 1fr 1fr;
}
.dashboard-bottom-row-single {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.dashboard-top-row {
grid-template-columns: 1fr;
}
.dashboard-bottom-row-single {
grid-template-columns: 1fr;
}
}
/* ── Pool / Wallet / Finance Module ──────────────────────── */
@media (max-width: 1199px) {
.pool-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.finance-summary-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px) {
.pool-stats-grid {
grid-template-columns: 1fr;
}
.finance-summary-grid {
grid-template-columns: 1fr;
}
.tx-detail-grid {
grid-template-columns: 1fr;
}
.network-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ── Contracts Module ─────────────────────────────────────── */
@media (max-width: 1199px) {
.contract-list-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.contract-builder {
grid-template-columns: 1fr;
}
.builder-section {
border-right: none;
border-bottom: 1px solid var(--border);
}
.contract-meta-row {
flex-direction: column;
align-items: stretch;
}
}
/* ── Email Module ─────────────────────────────────────────── */
@media (max-width: 1199px) {
.email-layout {
grid-template-columns: 200px 1fr;
}
.email-preview {
display: none;
}
}
@media (max-width: 767px) {
.email-layout {
grid-template-columns: 1fr;
}
.email-sidebar {
display: none;
}
.chat-bubble {
max-width: 90%;
}
.chip-container {
flex-wrap: wrap;
}
}
/* ── Tickets Module ───────────────────────────────────────── */
@media (max-width: 1199px) {
.ticket-layout {
grid-template-columns: 1fr;
}
.ticket-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
@media (max-width: 767px) {
.kpi-bar {
flex-direction: column;
align-items: stretch;
}
.kpi-badge {
width: 100%;
}
.internal-note {
margin-left: 0;
}
}
/* ── Settings / Editor Module ─────────────────────────────── */
@media (max-width: 1199px) {
.settings-layout {
grid-template-columns: 200px 1fr;
}
}
@media (max-width: 767px) {
.settings-layout {
grid-template-columns: 1fr;
}
.settings-nav {
flex-direction: row;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.editor-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-layout .doc-sidebar {
border-right: none;
border-bottom: 1px solid var(--border);
}
}
/* ── Compliance / Audit Module ─────────────────────────────── */
@media (max-width: 1199px) {
.audit-trail-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.audit-filters {
flex-direction: column;
align-items: stretch;
}
.audit-timeline {
padding-left: var(--sp-4);
}
}
/* ── Leads Module ─────────────────────────────────────────── */
@media (max-width: 1199px) {
.lead-board-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.lead-board-grid {
grid-template-columns: 1fr;
}
.lead-stepper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ════════════════════════════════════════════════════════════
40. VARIABLE-DRIVEN DESIGN SYSTEM (Conv 17 Phase 2)
────────────────────────────────────────────────────────────
"Class là API, Variable là Configuration."
5 subsystem: Grid, Panel, Field, Label, Actions.
Mỗi subsystem có 1 generic class đọc CSS custom properties.
Context chỉ set variables — không viết CSS mới.
Conv 22 sẽ migrate HTML từ existing classes sang new classes.
──────────────────────────────────────────────────────────── */
/* ── 40a. GRID ─────────────────────────────────────────────── */
/* Fixed-column grid. Set --grid-cols and --grid-gap. */
/* For custom ratios (e.g. 2fr 1fr 1fr), set --grid-template. */
.grid {
display: grid;
grid-template-columns: var(--grid-template, repeat(var(--grid-cols, 3), 1fr));
gap: var(--grid-gap, var(--sp-3));
}
/* Auto-fit grid. Items stretch to fill. Set --grid-min and --grid-gap. */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 200px), 1fr));
gap: var(--grid-gap, var(--sp-3));
}
/* Auto-fill grid. Items keep fixed width, empty tracks remain. */
.grid-auto-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 200px), 1fr));
gap: var(--grid-gap, var(--sp-3));
}
/* KPI grid responsive — maintains 2-col on mobile for KPI card grids.
Targets .grid-auto containing .kpi-card or .kpi-summary-card children.
Replaces legacy .kpi-grid / .kpi-summary-grid responsive overrides (Conv 19). */
@media (max-width: 1199px) {
.grid-auto:has(.kpi-card),
.grid-auto:has(.kpi-summary-card) {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
}
@media (max-width: 767px) {
.grid-auto:has(.kpi-card),
.grid-auto:has(.kpi-summary-card) {
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-2);
}
}
/* ── 40b. PANEL ────────────────────────────────────────────── */
/* Base container — shared visual DNA with .card/.form-section/.accordion. */
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-4);
background: var(--bg);
border-bottom: 1px solid var(--border-light);
}
.panel-title {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.panel-title i {
color: var(--brand);
font-size: var(--fs-md);
}
.panel-body {
padding: var(--panel-pad, var(--sp-4));
}
/* Collapsible variant — chevron rotates, body hides when collapsed. */
.panel-collapse .panel-header {
cursor: pointer;
user-select: none;
transition: background var(--transition-fast);
}
.panel-collapse .panel-header:hover {
background: var(--surface-hover);
}
.panel-chevron {
font-size: var(--fs-xs);
color: var(--text-muted);
transition: transform var(--transition);
}
.panel-collapse.collapsed .panel-body {
display: none;
}
.panel-collapse.collapsed .panel-chevron {
transform: rotate(-90deg);
}
/* Open state — brand accent border + shadow lift (accordion style). */
.panel-open {
border-color: var(--brand-light);
box-shadow: var(--shadow);
}
/* Static variant — form-section visual, no collapse toggle. */
.panel-static .panel-header {
cursor: default;
}
.panel-static .panel-header:hover {
background: var(--bg);
}
.panel-static .panel-chevron {
display: none;
}
/* Clickable panel — subtle hover lift for interactive cards. */
.panel.clickable {
cursor: pointer;
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.panel.clickable:hover {
box-shadow: var(--shadow);
border-color: var(--border);
}
/* ── 40c. FIELD ───────────────────────────────────────────── */
/* Editable field — label + input/select/textarea stack. */
.field {
display: flex;
flex-direction: column;
gap: var(--field-gap, var(--sp-2));
margin-bottom: var(--sp-4);
}
/* Display field — label + value in a bordered card. */
/* Field text — read-only display value. Conv 17: added subtle bg+border */
/* so .field-text has same visual weight as .field-input.inline-edit when */
/* placed side-by-side in a grid. Difference: no hover, no pencil icon. */
.field-text {
padding: var(--sp-2) var(--sp-3);
font-size: var(--fs-sm);
color: var(--text);
min-height: 36px;
display: flex;
align-items: center;
line-height: 1.4;
background: var(--surface-editable);
border: 1px solid var(--border-light);
border-radius: var(--radius);
}
.field-text.empty {
color: var(--text-muted);
}
/* Conv 17 Phase 2: .field-input/select/textarea base styles unified with .form-* above.
Only hover + textarea variants remain here (not in .form-* system). */
.field-input:hover,
.field-select:hover,
.field-textarea:hover {
border-color: var(--border-strong);
}
.field-textarea-sm {
min-height: 60px;
}
.field-textarea-lg {
min-height: 120px;
}
.field-error {
font-size: var(--fs-xs);
color: var(--danger);
margin-top: var(--sp-1);
}
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
border-color: var(--danger);
box-shadow: 0 0 0 1px var(--danger);
}
/* ── 40d. LABEL ───────────────────────────────────────────── */
/* Unified metadata label — 1 typography for ALL field labels. */
/* Conv 17: .group-card-field-label aliased here for leads.js backward compat. */
.field-label,
.group-card-field-label {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* ── 40e. ACTIONS ──────────────────────────────────────────── */
/* Unified action button row — replaces flex gap-2 mt-3. */
.actions {
display: flex;
align-items: center;
gap: var(--actions-gap, var(--sp-2));
margin-top: var(--sp-4);
}
.actions-end {
justify-content: flex-end;
}
.actions-center {
justify-content: center;
}
.actions-between {
justify-content: space-between;
}
/* Column variant — for stacked controls (textarea + button row). */
.actions-col {
flex-direction: column;
align-items: stretch;
}
/* Panel footer — actions as direct child of .panel gets padding to align
with panel-body. Replaces legacy .card-footer (Conv 19). */
.panel > .actions {
padding: var(--sp-2) var(--sp-4) var(--sp-4);
margin-top: 0;
}
/* ── 40f. VALUE FIXES (existing classes) ──────────────────── */
/* Fix 2: card-header padding asymmetric → symmetric (match panel-header) */
.card-header {
padding: var(--sp-3) var(--sp-4);
}
/* Fix 3: action-bar-next-label → unified field-label typography */
.action-bar-next-label {
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.3px;
}
/* Fix 4: relationship-label — REMOVED Conv 17-A (dead CSS, .relationship-label deleted) */
/* Fix 7: kpi-bar auto-fill → auto-fit (stretch to fill) */
.kpi-bar {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Fix 8: kyc-progress auto-fill → auto-fit (stretch to fill) */
.kyc-progress {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* ── 40g. ACCORDION MODE + SUPPORT CLASSES ─────────────────── */
/* Panel-accordion: body hidden by default, shown when .open. */
/* Use for accordion-style panels (one open at a time). */
.panel-accordion .panel-body {
display: none;
}
.panel-accordion.open .panel-body {
display: block;
}
.panel-accordion.open .panel-chevron {
transform: rotate(180deg);
}
.panel-accordion.open {
border-color: var(--brand-light);
box-shadow: var(--shadow);
}
/* Panel-summary: right-aligned muted text in header (accordion summary) */
.panel-summary {
flex: 1;
text-align: right;
font-size: var(--fs-xs);
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 var(--sp-3);
}
/* Panel-title icon: brand-colored first icon (accordion style) */
.panel-header > i:first-child {
font-size: var(--fs-md);
color: var(--brand);
}
/* Panel-header h3/h4: title typography for card/form-section style headers */
.panel-header h3,
.panel-header h4 {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text);
margin: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.panel-header h3 i,
.panel-header h4 i {
font-size: var(--fs-md);
color: var(--brand);
}
/* ── 40h. SECTION LABEL + GRID DEFAULTS (Conv 17 standard) ─── */
/* Section label: header within accordion body, groups fields. */
/* Visual weight between field-label and panel-title. */
.section-label {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-1);
border-bottom: 1px solid var(--border-light);
}
/* ════════════════════════════════════════════════════════════
Conv 17-A: Contact Detail Zone Layout
Zone-based layout for Profile 360° — mirrors Dashboard pattern.
5 zones: Header → Action Center → Financial Snapshot →
Profile Details → Activity & History
Each zone separated by spacing + label, not borders.
════════════════════════════════════════════════════════════ */
/* ── Profile Zone: semantic section wrapper ── */
.profile-zone {
margin-bottom: var(--sp-4);
}
/* ── Profile Zone Label: small uppercase header for each zone ── */
.profile-zone-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: var(--sp-2);
padding: 0 var(--sp-1);
}
/* ── Action Bar Nav: cross-module nav integrated into action bar ── */
.action-bar-nav {
display: flex;
gap: var(--sp-1);
flex-wrap: wrap;
width: 100%;
padding-top: var(--sp-2);
border-top: 1px solid var(--border-light);
margin-top: var(--sp-1);
}
.action-bar-nav .btn {
font-size: var(--fs-xs);
padding: var(--sp-1) var(--sp-2);
}
.action-bar-nav .btn i {
font-size: var(--fs-sm);
}
/* ── Responsive: cross-module nav buttons fill width on mobile ── */
@media (max-width: 767px) {
.action-bar-nav .btn {
flex: 1;
justify-content: center;
}
}
/* ── Conv 17-A: Intelligence Column Styles (contacts list) ── */
/* Multi-line table cells for intelligence columns (kyc_intel, partner_intel) */
.table td br + span {
display: inline-block;
margin-top: 2px;
}
/* Urgency indicator icon alignment in table cells */
.table td .font-semibold > .bi {
margin-left: 2px;
font-size: var(--fs-xs);
}
/* ── Conv 17-A: OPC Intelligence Column Styles ── */
/* Value Score star indicator */
.table td .bi-star-fill { color: var(--warning); }
.table td .bi-star-half { color: var(--warning); }
/* Financial engagement dot indicator */
.badge .bi-circle-fill,
.badge .bi-circle-half,
.badge .bi-circle,
.badge .bi-dash-circle {
margin-right: 2px;
}
/* Money flow pattern icon */
.table td .bi-graph-up-arrow,
.table td .bi-graph-down-arrow,
.table td .bi-arrow-left-right {
margin-right: 2px;
font-size: var(--fs-xs);
}
/* Investment momentum arrow */
.table td .bi-arrow-up,
.table td .bi-arrow-down,
.table td .bi-arrow-right {
margin-right: 2px;
font-size: var(--fs-xs);
}
/* ════════════════════════════════════════════════════════════
CONV 18: CONTACT CONTEXT BAR — 5 metric pills for module details
Displays: Client Type, Wallet Balance, Financial Engagement,
Contact Value Score, Action Urgency
Visual DNA: same as .fin-status-bar (grid + surface + border + shadow)
════════════════════════════════════════════════════════════ */
.contact-context-bar {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--surface-hover);
border-radius: var(--radius-md);
margin-bottom: var(--sp-3);
}
.ctx-pill {
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.ctx-pill-label {
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ctx-pill-value {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text);
}
.ctx-pill-value .badge {
font-size: var(--fs-2xs);
}
/* Smart alert indicator — red left border */
.ctx-pill-alert {
border-left: 3px solid var(--danger);
}
/* Responsive: Tablet — 3-col */
@media (max-width: 1023px) {
.contact-context-bar { grid-template-columns: repeat(3, 1fr); }
}
/* Responsive: Mobile — 2-col */
@media (max-width: 767px) {
.contact-context-bar { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════════════════════════════════════════════
CONV 18: OPC INTELLIGENCE WIDGETS — Dashboard 2.0
════════════════════════════════════════════════════════════ */
.intel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.intel-widget {
padding: var(--sp-3);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: var(--shadow-xs);
}
.intel-widget-title {
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
color: var(--text);
margin-bottom: var(--sp-2);
display: flex;
align-items: center;
gap: var(--sp-1);
}
.intel-leaderboard {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.intel-leaderboard-row {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.15s;
}
.intel-leaderboard-row:hover {
background: var(--surface-hover);
}
.intel-rank {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--border);
font-size: var(--fs-2xs);
font-weight: var(--fw-bold);
color: var(--text-muted);
flex-shrink: 0;
}
.intel-leaderboard-row .intel-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.intel-leaderboard-row .intel-value {
flex-shrink: 0;
}
.intel-fes-row {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.intel-donut {
width: 120px;
height: 120px;
flex-shrink: 0;
}
.intel-fes-legend {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.intel-alert-list {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.intel-alert-row {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius);
cursor: pointer;
transition: background 0.15s;
}
.intel-alert-row:hover {
background: var(--surface-hover);
}
.intel-alert-row .intel-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.intel-velocity-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-2);
}
.intel-velocity-stat {
text-align: center;
padding: var(--sp-2);
border-radius: var(--radius);
background: var(--surface-hover);
}
.intel-velocity-value {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
}
.intel-velocity-label {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
.intel-flow-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-2);
}
.intel-flow-stat {
text-align: center;
padding: var(--sp-2);
border-radius: var(--radius);
background: var(--surface-hover);
}
.intel-flow-value {
font-size: var(--fs-lg);
font-weight: var(--fw-bold);
}
.intel-flow-label {
font-size: var(--fs-2xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
.intel-flow-net {
text-align: center;
padding-top: var(--sp-2);
border-top: 1px solid var(--border);
}
.row-danger {
border-left: 3px solid var(--danger);
}
.row-warning {
border-left: 3px solid var(--warning);
}
@media (max-width: 1023px) {
.intel-grid { grid-template-columns: repeat(2, 1fr); }
.intel-flow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.intel-grid { grid-template-columns: 1fr; }
.intel-velocity-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Password toggle — login form */
.input-password-wrapper { position: relative; }
.input-password-wrapper .form-input { padding-right: 44px; }
.password-toggle {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer; padding: 4px;
color: var(--text-muted, #6b7280); font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
}
.password-toggle:hover { color: var(--text-primary, #1f2937); }