/* ============================================================ TVS CRM — application styles Three layout variations are exposed by setting: ============================================================ */ * { box-sizing: border-box; } html, body, #root { margin: 0; padding: 0; height: 100%; background: var(--bg-page); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--t-sm); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; } a { color: var(--fg-link); text-decoration: none; } a:hover { text-decoration: underline; } /* ===== APP SHELL ===== */ .app { display: grid; height: 100vh; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--top-h) 1fr; grid-template-areas: "nav top" "nav main"; background: var(--bg-soft); } /* Airy variant: horizontal top nav only */ html[data-variation="airy"] .app { grid-template-columns: 1fr; grid-template-rows: var(--top-h) 1fr; grid-template-areas: "top" "main"; } :root { --nav-w: 240px; --top-h: 60px; } html[data-variation="compact"] { --nav-w: 68px; --top-h: 56px; } html[data-variation="airy"] { --nav-w: 0; --top-h: 88px; } /* ===== SIDEBAR ===== */ .sidebar { grid-area: nav; background: var(--vs-dark-blue); color: var(--vs-white); display: flex; flex-direction: column; position: relative; overflow: hidden; } html[data-variation="airy"] .sidebar { display: none; } .sidebar-brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid rgba(255,255,255,0.08); min-height: var(--top-h); } .sidebar-brand img { height: 28px; width: auto; } .sidebar-brand .brand-mini { display: none; } html[data-variation="compact"] .sidebar-brand { padding: var(--space-4); justify-content: center; } html[data-variation="compact"] .sidebar-brand img { height: 32px; } .sidebar-section { padding: var(--space-4) var(--space-3) var(--space-2); font-size: 10px; letter-spacing: var(--ls-widest); text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: var(--w-bold); } html[data-variation="compact"] .sidebar-section { display: none; } .sidebar-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); margin: 0 var(--space-2); border-radius: var(--radius-md); color: rgba(255,255,255,0.78); cursor: pointer; font-size: var(--t-sm); font-weight: var(--w-medium); transition: background var(--dur-fast), color var(--dur-fast); border: none; background: none; width: calc(100% - var(--space-4)); text-align: left; } .sidebar-item:hover { background: rgba(255,255,255,0.08); color: #fff; } .sidebar-item.active { background: var(--vs-light-blue); color: var(--vs-dark-blue); font-weight: var(--w-bold); } .sidebar-item svg { flex-shrink: 0; } .sidebar-item .label { flex: 1; } .sidebar-item .badge { background: var(--vs-light-blue); color: var(--vs-dark-blue); font-size: 10px; font-weight: var(--w-bold); padding: 2px 6px; border-radius: var(--radius-pill); min-width: 18px; text-align: center; } .sidebar-item.active .badge { background: var(--vs-dark-blue); color: #fff; } html[data-variation="compact"] .sidebar-item { justify-content: center; padding: 12px 0; margin: 2px 8px; } html[data-variation="compact"] .sidebar-item .label, html[data-variation="compact"] .sidebar-item .badge { display: none; } html[data-variation="compact"] .sidebar-item.active { position: relative; } .sidebar-footer { margin-top: auto; padding: var(--space-3); border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: var(--space-3); } .sidebar-footer .avatar { background: var(--vs-light-blue); color: var(--vs-dark-blue); } .sidebar-footer .meta { flex: 1; min-width: 0; } .sidebar-footer .name { color: #fff; font-weight: var(--w-bold); font-size: var(--t-sm); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-footer .role-tag { font-size: var(--t-xs); color: rgba(255,255,255,0.6); } html[data-variation="compact"] .sidebar-footer .meta { display: none; } /* ===== TOPBAR ===== */ .topbar { grid-area: top; background: var(--bg-page); border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); position: relative; z-index: 10; } .topbar .crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--t-sm); color: var(--fg-muted); flex: 1; } .topbar .crumbs .current { color: var(--fg-1); font-weight: var(--w-bold); font-size: var(--t-md); } .topbar .crumbs .sep { color: var(--border-1); } .topbar-actions { display: flex; align-items: center; gap: var(--space-2); } .topbar-search { flex: 0 1 380px; display: flex; align-items: center; gap: var(--space-2); background: var(--bg-soft); border: 1px solid transparent; border-radius: var(--radius-md); padding: 8px var(--space-3); color: var(--fg-2); transition: all var(--dur-fast); } .topbar-search:focus-within { background: var(--bg-page); border-color: var(--vs-light-blue); box-shadow: 0 0 0 3px rgba(65,182,230,0.18); } .topbar-search input { border: none; background: none; outline: none; flex: 1; font-size: var(--t-sm); font-family: inherit; color: var(--fg-2); } .topbar-search kbd { font-family: var(--font-mono); font-size: 10px; background: var(--bg-page); border: 1px solid var(--border-1); border-radius: 3px; padding: 1px 5px; color: var(--fg-muted); } /* Airy variant: top nav with tabs */ .topbar-airy { display: flex; flex-direction: column; padding: 0; } .topbar-airy .row1 { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-6) 0; } .topbar-airy .row2 { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-6); border-bottom: 1px solid var(--border-1); } .topbar-airy .brand-h { display: flex; align-items: center; gap: var(--space-3); } .topbar-airy .brand-h img { height: 32px; } .topbar-airy .tab { padding: 10px var(--space-4); font-weight: var(--w-medium); font-size: var(--t-sm); color: var(--fg-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: var(--space-2); background: none; border-top: none; border-left: none; border-right: none; } .topbar-airy .tab:hover { color: var(--fg-1); } .topbar-airy .tab.active { color: var(--vs-dark-blue); border-bottom-color: var(--vs-dark-blue); font-weight: var(--w-bold); } .topbar-airy .tab .badge { background: var(--vs-light-blue); color: var(--vs-dark-blue); font-size: 10px; font-weight: var(--w-bold); padding: 1px 6px; border-radius: var(--radius-pill); } /* ===== MAIN ===== */ .main { grid-area: main; overflow: auto; padding: var(--space-6); background: var(--bg-soft); } html[data-variation="airy"] .main { padding: var(--space-8) var(--space-10); } html[data-variation="compact"] .main { padding: var(--space-5); } .page-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-5); gap: var(--space-4); flex-wrap: wrap; } .page-header h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 26px; color: var(--fg-1); margin: 0 0 4px; letter-spacing: var(--ls-tight); } .page-header .sub { color: var(--fg-muted); font-size: var(--t-sm); } html[data-variation="airy"] .page-header h1 { font-size: 32px; } /* ===== CARD ===== */ .card { background: var(--bg-page); border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .card-pad { padding: var(--space-5); } .card-pad-lg { padding: var(--space-6); } .card-h { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-1); gap: var(--space-3); } .card-h h3 { font-family: var(--font-sans); font-size: var(--t-md); font-weight: var(--w-bold); color: var(--fg-1); margin: 0; } .card-h .sub { font-size: var(--t-xs); color: var(--fg-muted); } .card-h .actions { display: flex; gap: var(--space-2); align-items: center; } html[data-variation="compact"] .card-pad { padding: var(--space-4); } html[data-variation="compact"] .card-h { padding: var(--space-3) var(--space-4); } /* ===== KPI ===== */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .kpi { background: var(--bg-page); border: 1px solid var(--border-1); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; overflow: hidden; transition: box-shadow var(--dur-fast), transform var(--dur-fast); } .kpi:hover { box-shadow: var(--shadow-2); } .kpi .label { font-size: 11px; letter-spacing: var(--ls-wider); text-transform: uppercase; font-weight: var(--w-bold); color: var(--fg-muted); margin-bottom: var(--space-2); } .kpi .value { font-family: var(--font-display); font-size: 32px; font-weight: var(--w-bold); color: var(--fg-1); line-height: 1; letter-spacing: var(--ls-tight); font-feature-settings: "tnum"; } .kpi .unit { font-size: 14px; color: var(--fg-muted); margin-left: 4px; } .kpi .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: var(--w-bold); margin-top: var(--space-3); padding: 2px 8px; border-radius: var(--radius-pill); } .kpi .delta.up { color: var(--status-success); background: rgba(6,167,125,0.08); } .kpi .delta.down { color: var(--status-sale); background: rgba(191,9,35,0.08); } .kpi .delta.flat { color: var(--fg-muted); background: var(--bg-soft); } .kpi.feature { background: var(--vs-dark-blue); color: var(--vs-white); border-color: transparent; } .kpi.feature .label { color: rgba(255,255,255,0.6); } .kpi.feature .value { color: var(--vs-white); } .kpi.feature .delta.up { background: rgba(65,182,230,0.22); color: var(--vs-light-blue); } html[data-variation="compact"] .kpi { padding: var(--space-4); } html[data-variation="compact"] .kpi .value { font-size: 24px; } html[data-variation="airy"] .kpi { padding: var(--space-6); } html[data-variation="airy"] .kpi .value { font-size: 40px; } /* Progress bar inside KPI */ .kpi-progress { margin-top: var(--space-3); height: 6px; background: var(--bg-soft); border-radius: var(--radius-pill); overflow: hidden; } .kpi-progress > div { height: 100%; background: var(--vs-light-blue); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); } .kpi.feature .kpi-progress { background: rgba(255,255,255,0.12); } .kpi-progress-meta { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--fg-muted); margin-top: 6px; } .kpi.feature .kpi-progress-meta { color: rgba(255,255,255,0.65); } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); padding: 8px var(--space-4); font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-bold); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); white-space: nowrap; } .btn-primary { background: var(--vs-dark-blue); color: var(--vs-white); } .btn-primary:hover { background: #001a52; } .btn-cta { background: var(--vs-light-blue); color: var(--vs-dark-blue); } .btn-cta:hover { background: #2da3d8; color: var(--vs-white); } .btn-secondary { background: var(--bg-page); color: var(--fg-1); border-color: var(--border-1); } .btn-secondary:hover { border-color: var(--vs-dark-blue); } .btn-ghost { background: transparent; color: var(--fg-1); } .btn-ghost:hover { background: var(--bg-soft); } .btn-danger { background: var(--bg-page); color: var(--status-sale); border-color: var(--border-1); } .btn-danger:hover { background: rgba(191,9,35,0.06); } .btn-sm { padding: 4px 10px; font-size: var(--t-xs); } .btn-lg { padding: 12px var(--space-5); font-size: var(--t-md); } .btn-icon { padding: 8px; width: 36px; height: 36px; justify-content: center; } .btn-icon.btn-sm { width: 28px; height: 28px; padding: 4px; } /* ===== AVATAR ===== */ .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-muted); color: var(--fg-1); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--w-bold); font-size: var(--t-sm); flex-shrink: 0; letter-spacing: -0.02em; } .avatar-sm { width: 28px; height: 28px; font-size: var(--t-xs); } .avatar-lg { width: 56px; height: 56px; font-size: var(--t-md); } .avatar-xl { width: 80px; height: 80px; font-size: var(--t-xl); } .avatar.gold { background: linear-gradient(135deg, #f5cf55, #e0a92c); color: #5a3a00; } .avatar.platinum { background: linear-gradient(135deg, #b4c7e7, #6a82a8); color: #fff; } .avatar.silver { background: linear-gradient(135deg, #dde2ea, #98a2b3); color: var(--fg-1); } .avatar.bronze { background: linear-gradient(135deg, #e6b88a, #b07a48); color: #4a2700; } /* ===== BADGES / TAGS ===== */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--w-bold); letter-spacing: var(--ls-wide); background: var(--bg-soft); color: var(--fg-2); border: 1px solid transparent; white-space: nowrap; } .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tag.gold { background: #fff4d6; color: #7c5400; } .tag.platinum { background: #e9eef6; color: #2f4666; } .tag.silver { background: #f2f4f7; color: #475467; } .tag.bronze { background: #f8e9d6; color: #7a4a14; } .tag.success { background: rgba(6,167,125,0.10); color: var(--status-success); } .tag.warning { background: rgba(236,167,44,0.12); color: #8a5a00; } .tag.danger { background: rgba(191,9,35,0.08); color: var(--status-sale); } .tag.info { background: rgba(65,182,230,0.12); color: #006590; } .tag.outline { background: transparent; border-color: var(--border-1); color: var(--fg-2); } /* ===== TABLE ===== */ .table-wrap { overflow-x: auto; } .tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .tbl thead th { text-align: left; padding: var(--space-3) var(--space-4); font-size: 11px; font-weight: var(--w-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-muted); background: var(--bg-soft); border-bottom: 1px solid var(--border-1); white-space: nowrap; } .tbl tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-1); color: var(--fg-2); vertical-align: middle; } .tbl tbody tr { transition: background var(--dur-fast); cursor: pointer; } .tbl tbody tr:hover { background: rgba(65,182,230,0.05); } .tbl tbody tr.selected { background: rgba(65,182,230,0.10); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl .num { text-align: right; font-feature-settings: "tnum"; white-space: nowrap; } .tbl .strong { color: var(--fg-1); font-weight: var(--w-bold); } html[data-variation="compact"] .tbl thead th, html[data-variation="compact"] .tbl tbody td { padding: 8px var(--space-3); } html[data-variation="airy"] .tbl thead th, html[data-variation="airy"] .tbl tbody td { padding: var(--space-4) var(--space-5); } /* ===== UTILITIES ===== */ .row { display: flex; align-items: center; gap: var(--space-3); } .col { display: flex; flex-direction: column; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .flex-1 { flex: 1; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .fg-muted { color: var(--fg-muted); } .text-sm { font-size: var(--t-sm); } .text-xs { font-size: var(--t-xs); } .text-md { font-size: var(--t-md); } .bold { font-weight: var(--w-bold); } .tnum { font-feature-settings: "tnum"; } .eyebrow { font-size: 11px; letter-spacing: var(--ls-widest); text-transform: uppercase; font-weight: var(--w-bold); color: var(--vs-light-blue); } .divider { height: 1px; background: var(--border-1); width: 100%; } /* ===== GRID HELPERS ===== */ .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-12-8 { grid-template-columns: 1fr 380px; } .grid-7-5 { grid-template-columns: 7fr 5fr; } @media (max-width: 1100px) { .grid-12-8, .grid-7-5 { grid-template-columns: 1fr; } } /* ===== INPUTS ===== */ .input, .select, .textarea { width: 100%; background: var(--bg-page); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 8px var(--space-3); font-family: inherit; font-size: var(--t-sm); color: var(--fg-2); outline: none; transition: all var(--dur-fast); } .input:focus, .select:focus, .textarea:focus { border-color: var(--vs-light-blue); box-shadow: 0 0 0 3px rgba(65,182,230,0.18); } .textarea { resize: vertical; min-height: 80px; } .field-label { display: block; font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; } /* ===== SCROLLBAR ===== */ .main::-webkit-scrollbar { width: 8px; height: 8px; } .main::-webkit-scrollbar-thumb { background: rgba(1,33,105,0.18); border-radius: 4px; } .main::-webkit-scrollbar-track { background: transparent; } /* ===== SPECIFIC: Pipeline / Kanban ===== */ .pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .pipeline-col { background: var(--bg-soft); border-radius: var(--radius-md); padding: var(--space-3); min-height: 200px; } .pipeline-col h4 { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); font-weight: var(--w-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-muted); margin: 0 0 var(--space-3); } .pipeline-col h4 .count { background: var(--bg-page); border-radius: var(--radius-pill); padding: 1px 8px; font-weight: var(--w-bold); color: var(--fg-1); font-size: 11px; } .pipeline-card { background: var(--bg-page); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); cursor: pointer; transition: all var(--dur-fast); } .pipeline-card:hover { box-shadow: var(--shadow-2); border-color: var(--vs-light-blue); } .pipeline-card .name { font-weight: var(--w-bold); color: var(--fg-1); font-size: var(--t-sm); margin-bottom: 4px; } .pipeline-card .meta { font-size: var(--t-xs); color: var(--fg-muted); } .pipeline-card .value { font-weight: var(--w-bold); color: var(--vs-dark-blue); font-size: var(--t-sm); margin-top: 6px; font-feature-settings: "tnum"; } /* ===== SPARKLINE ===== */ .spark { display: block; height: 56px; width: 100%; } /* ===== EMPTY ===== */ .empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--fg-muted); } .empty .icon-wrap { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--bg-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--vs-light-blue); } /* ===== CALL CONSOLE ===== */ .callbar { position: sticky; top: 0; background: var(--vs-dark-blue); color: var(--vs-white); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; align-items: center; gap: var(--space-5); box-shadow: var(--shadow-3); } .callbar .ph-status { display: flex; align-items: center; gap: var(--space-3); } .callbar .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--status-success); position: relative; flex-shrink: 0; } .callbar .pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--status-success); animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .callbar .timer { font-family: var(--font-mono); font-size: var(--t-xl); font-weight: var(--w-bold); font-feature-settings: "tnum"; color: var(--vs-light-blue); min-width: 80px; } /* ===== PRODUCT TILE (POS) ===== */ .prod-tile { background: var(--bg-page); border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: var(--space-3); cursor: pointer; transition: all var(--dur-fast); display: flex; flex-direction: column; gap: var(--space-2); min-height: 130px; } .prod-tile:hover { border-color: var(--vs-light-blue); box-shadow: var(--shadow-2); transform: translateY(-2px); } .prod-tile .ph { height: 60px; background: linear-gradient(135deg, #f8f9fb, #edf2f7); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--vs-light-blue); } .prod-tile .name { font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--fg-1); line-height: 1.3; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prod-tile .price { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--vs-dark-blue); font-feature-settings:"tnum"; } .prod-tile .stock { font-size: 10px; color: var(--fg-muted); } /* ===== Notif / toast ===== */ .notif-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: var(--status-sale); border-radius: 50%; border: 2px solid var(--bg-page); } /* Banner / alert */ .banner { display: flex; align-items: center; gap: var(--space-3); background: rgba(65,182,230,0.10); border: 1px solid rgba(65,182,230,0.30); color: var(--vs-dark-blue); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--t-sm); } .banner.warning { background: rgba(236,167,44,0.10); border-color: rgba(236,167,44,0.30); color: #8a5a00; } .banner.danger { background: rgba(191,9,35,0.06); border-color: rgba(191,9,35,0.30); color: var(--status-sale); } /* Tabs (inner) */ .tabs { display: flex; border-bottom: 1px solid var(--border-1); gap: var(--space-1); } .tabs .tab { padding: 10px var(--space-4); font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--fg-muted); cursor: pointer; border: none; background: none; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs .tab:hover { color: var(--fg-1); } .tabs .tab.active { color: var(--vs-dark-blue); font-weight: var(--w-bold); border-bottom-color: var(--vs-light-blue); } /* Activity feed */ .activity { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-1); } .activity:last-child { border-bottom: none; } .activity .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--vs-light-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .activity .body { flex: 1; min-width: 0; } .activity .title { font-size: var(--t-sm); color: var(--fg-1); font-weight: var(--w-medium); } .activity .meta { font-size: var(--t-xs); color: var(--fg-muted); margin-top: 2px; } /* segmented */ .segmented { display: inline-flex; background: var(--bg-soft); border-radius: var(--radius-md); padding: 3px; gap: 2px; } .segmented button { border: none; background: none; font-family: inherit; font-size: var(--t-xs); font-weight: var(--w-bold); padding: 5px 12px; border-radius: 4px; color: var(--fg-2); cursor: pointer; transition: all var(--dur-fast); } .segmented button.active { background: var(--bg-page); color: var(--vs-dark-blue); box-shadow: var(--shadow-1); } /* Hero strip for airy variant */ .hero-strip { background: linear-gradient(135deg, var(--vs-dark-blue) 0%, #00347a 60%, #013189 100%); border-radius: var(--radius-lg); padding: var(--space-8); color: var(--vs-white); margin-bottom: var(--space-6); position: relative; overflow: hidden; } .hero-strip::after { content: ''; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(65,182,230,0.30) 0%, transparent 60%); border-radius: 50%; } .hero-strip h1 { font-family: var(--font-display); font-size: 30px; font-weight: var(--w-bold); margin: 0 0 var(--space-2); position: relative; z-index: 1; } .hero-strip .sub { color: rgba(255,255,255,0.78); position: relative; z-index: 1; font-size: var(--t-md); } /* Status dot */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .status-dot.green { background: var(--status-success); } .status-dot.amber { background: var(--status-warning); } .status-dot.red { background: var(--status-sale); } .status-dot.blue { background: var(--vs-light-blue); } .status-dot.grey { background: var(--fg-muted); } /* Drawer overlay (for customer 360 modal) */ .drawer-overlay { position: fixed; inset: 0; background: rgba(1,33,105,0.45); z-index: 100; display: flex; justify-content: flex-end; animation: fadein 0.2s ease-out; } @keyframes fadein { from {opacity:0} to {opacity:1} } .drawer { background: var(--bg-page); width: min(960px, 92vw); height: 100%; overflow: auto; box-shadow: var(--shadow-pop); animation: slidein 0.28s var(--ease-out); } @keyframes slidein { from {transform:translateX(40px); opacity:0} to {transform:none; opacity:1} } .drawer-h { position: sticky; top: 0; background: var(--vs-dark-blue); color: var(--vs-white); padding: var(--space-5) var(--space-6); display: flex; align-items: center; gap: var(--space-4); z-index: 2; } .drawer-h .close { margin-left: auto; background: rgba(255,255,255,0.10); border: none; color: var(--vs-white); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .drawer-h .close:hover { background: rgba(255,255,255,0.20); } /* Number sparkline cells */ .bar-row { display: flex; align-items: flex-end; gap: 4px; height: 60px; } .bar-row > div { flex: 1; background: var(--vs-light-blue); border-radius: 2px 2px 0 0; min-height: 4px; position: relative; } .bar-row > div.dim { background: var(--bg-muted); } /* Helper for leaderboard */ .leader-row { display: grid; grid-template-columns: 32px 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-1); } .leader-row:last-child { border-bottom: none; } .leader-row .rank { font-family: var(--font-display); font-weight: var(--w-bold); color: var(--fg-muted); font-size: var(--t-md); text-align: center; } .leader-row.self { background: rgba(65,182,230,0.06); margin: 0 -8px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); } .leader-row.self .rank { color: var(--vs-light-blue); } /* Logo footer in compact mode */ .brand-mini { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-md); color: var(--vs-white); } /* ===== MOBILE RESPONSIVE ===== */ .mobile-only { display: none; } .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(1,33,105,0.45); z-index: 50; } @media (max-width: 900px) { :root { --nav-w: 240px; } html, body { overflow-x: hidden; } .app { grid-template-columns: 1fr !important; grid-template-areas: "top" "main" !important; } .sidebar { grid-area: unset !important; position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 60; transform: translateX(-100%); transition: transform 0.24s var(--ease-out); display: flex !important; } .app--nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-pop); } .app--nav-open .mobile-nav-overlay { display: block; } .mobile-only { display: inline-flex; } .hide-on-mobile { display: none !important; } .topbar { padding: 0 var(--space-4); gap: var(--space-2); } .main { padding: var(--space-4); } .page-header { flex-direction: column; align-items: stretch !important; } .page-header > div:last-child { flex-wrap: wrap; } .page-header h1 { font-size: 22px !important; } .kpi-grid { grid-template-columns: 1fr 1fr !important; } .kpi .value { font-size: 22px !important; } .kpi { padding: var(--space-3) !important; } .grid-12-8, .grid-7-5, .grid-2 { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: 1fr 1fr !important; } /* Hide less-important table columns on mobile */ .tbl thead th:nth-child(n+5), .tbl tbody td:nth-child(n+5) { display: none; } /* Pipeline kanban → vertical scroll list */ .pipeline { grid-template-columns: 1fr !important; } /* Drawer fills screen on mobile */ .drawer { width: 100vw !important; } .drawer-h { padding: var(--space-3) var(--space-4) !important; flex-wrap: wrap; gap: var(--space-2) !important; } .drawer-h h2 { font-size: 18px !important; } .drawer-h > .btn { display: none; } .drawer-h > .close { display: inline-flex; } /* Settings sidebar collapses */ .grid[style*="grid-template-columns: 240px"] { grid-template-columns: 1fr !important; } /* Auth screen single column */ div[style*="grid-template-columns: 1fr 1fr"][style*="minHeight:100vh"], div[style*="grid-template-columns:1fr 1fr"][style*="minHeight:100vh"] { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .kpi-grid { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: 1fr !important; } .tbl thead th:nth-child(n+4), .tbl tbody td:nth-child(n+4) { display: none; } .page-header h1 { font-size: 20px !important; } }