/* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS All colors live here as CSS custom properties. Rules below reference tokens only — adding a theme means adding one override block, never touching component styles. Dark is the default (:root); other themes override via [data-theme="..."] set on (see src/theme.js). Soft badge tints are derived with color-mix() from the hue tokens so each theme defines ~6 hues instead of 40 badge colors. ═══════════════════════════════════════════════════════════════════ */ :root { /* Dark (default) */ --bg: #0b1220; /* app background */ --surface: #151e2e; /* cards, panels, modals */ --surface-2: #1b2537; /* headers, alt fills */ --surface-3: #26334a; /* hover fills */ --border: #2a3850; --border-soft: #1f2b3f; --text: #e2e8f0; --text-2: #a9b6c9; /* secondary */ --text-3: #6f7f96; /* muted */ --accent: #3b82f6; --accent-hover: #5b96f8; --on-accent: #ffffff; --danger: #ef4444; --danger-hover: #dc2626; --success: #10b981; --warning: #f59e0b; /* Top nav — its own tokens so it can stay dark in the light theme */ --nav-bg: #101a2b; --nav-surface: #243349; --nav-surface-2: #2e4059; --nav-text: #e2e8f0; --nav-text-2: #8fa0b8; /* Hues for soft badges (brighter than accent shades so they read on dark) */ --hue-blue: #60a5fa; --hue-green: #34d399; --hue-amber: #fbbf24; --hue-red: #f87171; --hue-pink: #f472b6; --hue-slate: #94a3b8; --shadow-1: 0 1px 3px rgba(0,0,0,0.35); --shadow-2: 0 2px 8px rgba(0,0,0,0.45); --shadow-3: 0 10px 25px rgba(0,0,0,0.55); color-scheme: dark; /* native scrollbars/inputs match the theme */ } [data-theme="light"] { --bg: #f8fafc; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #e2e8f0; --border: #e2e8f0; --border-soft: #f1f5f9; --text: #334155; --text-2: #4b5563; --text-3: #9ca3af; --accent: #3b82f6; --accent-hover: #2563eb; --nav-bg: #1e293b; --nav-surface: #334155; --nav-surface-2: #475569; --nav-text: #e2e8f0; --nav-text-2: #94a3b8; --hue-blue: #1d4ed8; --hue-green: #065f46; --hue-amber: #92400e; --hue-red: #dc2626; --hue-pink: #9d174d; --hue-slate: #475569; --shadow-1: 0 1px 3px rgba(0,0,0,0.1); --shadow-2: 0 2px 8px rgba(0,0,0,0.08); --shadow-3: 0 10px 25px rgba(0,0,0,0.25); color-scheme: light; } [data-theme="ocean"] { --bg: #081a1e; --surface: #0f262c; --surface-2: #132e35; --surface-3: #1d3f48; --border: #1f414a; --border-soft: #16333b; --text: #dcf0f2; --text-2: #9fbfc4; --text-3: #64858c; --accent: #14b8a6; --accent-hover: #2dd4bf; --nav-bg: #0a2126; --nav-surface: #1a3d45; --nav-surface-2: #234c56; --nav-text: #dcf0f2; --nav-text-2: #7fa3aa; --hue-blue: #22d3ee; --hue-green: #34d399; --hue-amber: #fbbf24; --hue-red: #f87171; --hue-pink: #f472b6; --hue-slate: #94b0b6; } [data-theme="forest"] { --bg: #0c1510; --surface: #14211a; --surface-2: #182a20; --surface-3: #23392c; --border: #27402f; --border-soft: #1c3023; --text: #e2efe6; --text-2: #a6bfae; --text-3: #6b8573; --accent: #22c55e; --accent-hover: #4ade80; --nav-bg: #101c15; --nav-surface: #223a2b; --nav-surface-2: #2c4a37; --nav-text: #e2efe6; --nav-text-2: #86a190; --hue-blue: #60a5fa; --hue-green: #4ade80; --hue-amber: #fbbf24; --hue-red: #f87171; --hue-pink: #f472b6; --hue-slate: #9ab0a1; } [data-theme="crimson"] { --bg: #170c0e; --surface: #241317; --surface-2: #2b171c; --surface-3: #3b2027; --border: #402229; --border-soft: #2f181e; --text: #f0e2e5; --text-2: #c4a9b0; --text-3: #96707a; --accent: #ef4444; --accent-hover: #f87171; /* danger needs to stay readable against the red accent — shift it deeper */ --danger: #b91c1c; --danger-hover: #991b1b; --nav-bg: #1d0f13; --nav-surface: #3a1e25; --nav-surface-2: #4a2630; --nav-text: #f0e2e5; --nav-text-2: #b88f98; --hue-blue: #60a5fa; --hue-green: #34d399; --hue-amber: #fbbf24; --hue-red: #f87171; --hue-pink: #f472b6; --hue-slate: #b09aa0; } /* Derived soft tints — badge backgrounds computed from hue + surface */ :root { --soft-blue: color-mix(in srgb, var(--hue-blue) 16%, var(--surface)); --soft-green: color-mix(in srgb, var(--hue-green) 16%, var(--surface)); --soft-amber: color-mix(in srgb, var(--hue-amber) 16%, var(--surface)); --soft-red: color-mix(in srgb, var(--hue-red) 16%, var(--surface)); --soft-pink: color-mix(in srgb, var(--hue-pink) 16%, var(--surface)); --soft-slate: color-mix(in srgb, var(--hue-slate) 16%, var(--surface)); --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface)); --focus-ring: color-mix(in srgb, var(--accent) 20%, transparent); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; } /* ── Login ── */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); overflow: auto; color: white; } .login-card { background: var(--surface); border-radius: 0.75rem; padding: 3rem; width: 100%; max-width: 420px; box-shadow: 0 25px 60px rgba(0,0,0,0.4); color: var(--text); } .login-logo { text-align: center; margin-bottom: 2rem; } /* Logo is an of assets/logo.svg — the badge background is baked into the SVG */ .login-logo-mark { width: 72px; height: 72px; display: inline-block; margin-bottom: 1rem; filter: drop-shadow(0 4px 12px rgba(59,130,246,0.35)); } .login-logo h1 { font-size: 1.375rem; font-weight: 700; color: var(--text); } .login-logo p { font-size: 0.8rem; color: var(--text-3); margin-top: 0.25rem; letter-spacing: 0.05em; text-transform: uppercase; } .login-card h2 { font-size: 1.125rem; font-weight: 600; color: var(--text-2); margin-bottom: 1.5rem; } .login-error { background: var(--soft-red); border: 1px solid color-mix(in srgb, var(--hue-red) 35%, var(--surface)); color: var(--hue-red); padding: 0.75rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .login-submit { width: 100%; padding: 0.875rem; background: var(--accent); color: var(--on-accent); border: none; border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 0.5rem; } .login-submit:hover { background: var(--accent-hover); } .login-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* ── Layout ── */ .crm-container { height: 100vh; display: flex; flex-direction: column; } .top-nav { background: var(--nav-bg); color: var(--nav-text); padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-1); z-index: 100; gap: 1rem; } .top-nav-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .nav-logo-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; } .top-nav h1 { font-size: 1.125rem; font-weight: 600; white-space: nowrap; } .top-nav-center { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; flex: 1; justify-content: center; } .top-nav-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .nav-user { font-size: 0.8125rem; color: var(--nav-text-2); white-space: nowrap; } .nav-user strong { color: var(--nav-text); } .btn-logout { background: var(--nav-surface-2); border: none; color: var(--nav-text); padding: 0.375rem 0.75rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; } .btn-logout:hover { background: var(--danger); color: white; } .panel-toggle-btn { background: var(--nav-surface-2); border: none; color: var(--nav-text); padding: 0.25rem 0.5rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem; transition: all 0.2s; white-space: nowrap; } .panel-toggle-btn:hover { background: var(--nav-surface); } .panel-toggle-btn.active { background: var(--accent); } .main-content { flex: 1; display: flex; overflow: hidden; } .sidebar { width: 320px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-header { padding: 1rem; border-bottom: 1px solid var(--border); background: var(--surface-2); } .search-box { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; background: var(--surface); color: var(--text); } .search-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .sidebar-content { flex: 1; overflow-y: auto; padding: 1rem; } .quick-actions { margin-bottom: 1.5rem; } .quick-actions h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .action-btn { width: 100%; padding: 0.75rem; background: var(--accent); color: var(--on-accent); border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; transition: all 0.2s; display: flex; align-items: center; gap: 0.5rem; } .action-btn:hover { background: var(--accent-hover); } .action-btn.secondary { background: var(--surface-3); color: var(--text); } .action-btn.secondary:hover { background: var(--border); } .action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sidebar-stats { margin-bottom: 1.5rem; } .sidebar-stats h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; font-size: 0.875rem; color: var(--text-2); border-bottom: 1px solid var(--border-soft); } .stat-row:last-child { border-bottom: none; } .stat-value { font-weight: 600; color: var(--text); } .stat-value.danger { color: var(--danger); } .workspace { flex: 1; background: var(--bg); position: relative; overflow: hidden; } .panel-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; gap: 1rem; padding: 1rem; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } /* ── Panels ── */ .panel { background: var(--surface); border-radius: 0.5rem; box-shadow: var(--shadow-1); display: flex; flex-direction: column; overflow: hidden; transition: all 0.3s ease; } .panel.maximized { grid-row: span 2; grid-column: span 2; } .panel-header { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 0.875rem 1rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .panel-title { font-weight: 600; font-size: 0.9375rem; } .panel-controls { display: flex; gap: 0.5rem; } .panel-control-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: all 0.2s; } .panel-control-btn:hover { background: var(--surface-3); color: var(--text); } .panel-content { flex: 1; overflow-y: auto; } .panel-content-scrollable { padding: 1rem; } /* ── Accounts ── */ .account-list { display: flex; flex-direction: column; gap: 0.75rem; } .account-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; cursor: pointer; transition: all 0.2s; } .account-item:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .account-item.selected { border-color: var(--accent); background: var(--accent-soft); } .account-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; } .account-icon { width: 2.5rem; height: 2.5rem; background: var(--accent); color: var(--on-accent); border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .account-info { flex: 1; min-width: 0; } .account-name { font-weight: 600; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-meta { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .account-details { font-size: 0.875rem; color: var(--text-3); margin-bottom: 0.5rem; } .contact-detail { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.25rem; } .contact-detail i { width: 1rem; color: var(--text-3); flex-shrink: 0; } .account-notes { font-size: 0.75rem; color: var(--text-3); line-height: 1.4; } .account-type { font-size: 0.75rem; color: var(--text-3); } .contact-tags { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .tag, .badge { background: var(--accent); color: var(--on-accent); padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; } .badge.secondary { background: var(--surface-3); color: var(--text-2); } .badge.success { background: var(--success); color: white; } .tag.priority-high { background: #ef4444; color: white; } .tag.priority-urgent { background: #dc2626; color: white; } /* ── Tasks ── */ .task-item { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 1rem; border-radius: 0.375rem; margin-bottom: 0.75rem; transition: all 0.2s; } .task-item.overdue { border-left-color: var(--danger); background: var(--soft-red); } .task-item.today { border-left-color: var(--warning); background: var(--soft-amber); } .task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; } .task-customer { font-weight: 600; } .task-date { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; } .task-note { font-size: 0.875rem; color: var(--text-2); margin-bottom: 0.5rem; } /* ── Empty / Loading states ── */ .empty-state { text-align: center; padding: 2rem; color: var(--text-3); } .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; display: block; } .empty-state-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-2); } .empty-state-message { margin-bottom: 1.5rem; } .loading-state { text-align: center; padding: 2rem; color: var(--text-3); } .loading-state i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; } /* ── Buttons ── */ .btn { padding: 0.75rem 1.5rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); } .btn-secondary { background: var(--surface-3); color: var(--text); } .btn-secondary:hover { background: var(--border); } .btn-danger { background: var(--danger); color: white; } .btn-danger:hover { background: var(--danger-hover); } .btn-small { padding: 0.5rem 0.75rem; font-size: 0.75rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-group { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.5rem; } /* ── Modals ── */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal { background: var(--surface); border-radius: 0.5rem; max-width: 90vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-3); } .modal-medium { max-width: 600px; width: 90%; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid var(--border); } .modal-title { font-size: 1.25rem; font-weight: 600; margin: 0; } .modal-close-btn { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-3); padding: 0.25rem; line-height: 1; } .modal-close-btn:hover { color: var(--text); } .modal-body { padding: 2rem; } /* ── Forms ── */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: span 2; } .form-label { font-weight: 500; margin-bottom: 0.5rem; color: var(--text-2); font-size: 0.875rem; } .form-input { padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.875rem; transition: all 0.2s; width: 100%; background: var(--surface); color: var(--text); } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .form-input:read-only { background: var(--surface-2); color: var(--text-3); cursor: default; } .form-textarea { min-height: 100px; resize: vertical; } .form-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .form-section:last-child { border-bottom: none; margin-bottom: 0; } .form-section h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-2); margin-bottom: 1rem; } .api-error { background: var(--soft-red); border: 1px solid color-mix(in srgb, var(--hue-red) 35%, var(--surface)); color: var(--hue-red); padding: 0.75rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; margin-bottom: 1rem; } /* ── Responsive ── */ @media (max-width: 768px) { .sidebar { width: 100%; } .panel-container { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .form-grid { grid-template-columns: 1fr; } .form-group.full-width { grid-column: span 1; } .top-nav-center { display: none; } } /* ── Admin Panel ── */ .admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: stretch; justify-content: flex-end; } .admin-drawer { background: var(--surface); width: min(780px, 100vw); display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.35); } .admin-header { background: var(--nav-bg); color: var(--nav-text); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .admin-header h2 { font-size: 1.125rem; font-weight: 600; } .admin-close { background: none; border: none; color: var(--nav-text-2); cursor: pointer; font-size: 1.25rem; padding: 0.25rem; } .admin-close:hover { color: var(--nav-text); } .admin-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .admin-tab { padding: 0.875rem 1.5rem; border: none; background: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--text-3); border-bottom: 2px solid transparent; transition: all 0.15s; } .admin-tab:hover { color: var(--text); } .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); } .admin-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .user-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .user-table th { text-align: left; padding: 0.75rem 1rem; background: var(--surface-2); border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text-2); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } .user-table td { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .user-table tr:hover td { background: var(--surface-2); } .user-table tr.inactive td { opacity: 0.5; } .role-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .role-badge.rep { background: var(--soft-blue); color: var(--hue-blue); } .role-badge.manager { background: var(--soft-green); color: var(--hue-green); } .role-badge.admin { background: var(--soft-pink); color: var(--hue-pink); } .inline-select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.8125rem; background: var(--surface); color: var(--text); cursor: pointer; } .inline-select:focus { outline: none; border-color: var(--accent); } .btn-icon-sm { background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 0.25rem; font-size: 0.8125rem; transition: all 0.15s; color: var(--text-3); } .btn-icon-sm:hover { background: var(--surface-3); color: var(--text); } .btn-icon-sm.danger:hover { background: var(--soft-red); color: var(--hue-red); } .reassign-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1.25rem; margin-top: 1.5rem; } .reassign-box h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-2); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .reassign-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; } .my-accounts-toggle { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 0.375rem; overflow: hidden; margin-bottom: 1rem; } .toggle-btn { flex: 1; padding: 0.5rem; border: none; background: var(--surface); cursor: pointer; font-size: 0.8125rem; color: var(--text-3); transition: all 0.15s; text-align: center; } .toggle-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 500; } .toggle-btn:not(.active):hover { background: var(--surface-2); } .assigned-to-row { display: flex; align-items: center; gap: 0.5rem; } /* ── Contacts ── */ .contact-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.875rem 1rem; margin-bottom: 0.625rem; } .contact-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .contact-card-name { font-weight: 600; font-size: 0.9375rem; } .contact-card-title { font-size: 0.8125rem; color: var(--text-3); } .contact-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } .contact-card-detail { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-2); margin-bottom: 0.2rem; } .contact-card-detail i { width: 1rem; color: var(--text-3); flex-shrink: 0; font-size: 0.75rem; } .contact-card-detail a { color: var(--accent); text-decoration: none; } .contact-card-detail a:hover { text-decoration: underline; } .primary-badge { display: inline-block; background: var(--soft-blue); color: var(--hue-blue); font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.375rem; } /* ── Inline email/phone editor ── */ .ep-row { display: flex; gap: 0.375rem; align-items: center; margin-bottom: 0.375rem; } .ep-row input, .ep-row select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.8125rem; background: var(--surface); color: var(--text); } .ep-row input { flex: 1; } .ep-row select { width: 90px; } /* ── Attachments ── */ .attachments-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .attachments-section h4 { font-size: 0.9375rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; justify-content: space-between; } .attachment-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.375rem; margin-bottom: 0.5rem; } .attachment-icon { width: 2.25rem; height: 2.25rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.875rem; } .attachment-icon.img { background: var(--soft-pink); color: var(--hue-pink); } .attachment-icon.pdf { background: var(--soft-red); color: var(--hue-red); } .attachment-icon.doc { background: var(--soft-blue); color: var(--hue-blue); } .attachment-icon.xls { background: var(--soft-green); color: var(--hue-green); } .attachment-icon.zip { background: var(--soft-amber); color: var(--hue-amber); } .attachment-icon.file { background: var(--soft-slate); color: var(--hue-slate); } .attachment-info { flex: 1; min-width: 0; } .attachment-name { font-weight: 500; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-meta { font-size: 0.7rem; color: var(--text-3); margin-top: 0.1rem; } .upload-zone { border: 2px dashed var(--border); border-radius: 0.5rem; padding: 1.25rem; text-align: center; cursor: pointer; transition: all 0.2s; color: var(--text-3); font-size: 0.875rem; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .upload-zone input[type=file] { display: none; } /* ── View Navigation ── */ .view-nav { display: flex; gap: 0.25rem; } .view-nav-btn { background: var(--nav-surface); border: none; color: var(--nav-text-2); padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.8125rem; font-weight: 500; transition: all 0.2s; display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; } .view-nav-btn:hover { background: var(--nav-surface-2); color: var(--nav-text); } .view-nav-btn.active { background: var(--accent); color: var(--on-accent); } /* ── Nav right-side icons + user chip ── */ .nav-icon-btn { background: none; border: none; color: var(--nav-text-2); cursor: pointer; padding: 0.375rem 0.5rem; border-radius: 0.375rem; font-size: 1rem; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .nav-icon-btn:hover { background: var(--nav-surface); color: var(--nav-text); } .nav-user-chip { display: flex; align-items: center; gap: 0.375rem; background: var(--nav-surface); border-radius: 999px; padding: 0.25rem 0.625rem 0.25rem 0.25rem; cursor: default; } .nav-avatar { width: 1.625rem; height: 1.625rem; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 0.6875rem; font-weight: 700; flex-shrink: 0; letter-spacing: 0; } .nav-user-name { font-size: 0.8125rem; font-weight: 500; color: var(--nav-text); white-space: nowrap; } .nav-role-tag { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nav-text-2); background: var(--nav-bg); padding: 0.1rem 0.375rem; border-radius: 999px; white-space: nowrap; } /* ── Sidebar panel toggles ── */ .panel-toggles { margin-bottom: 1.5rem; } .panel-toggles h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .panel-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; } .panel-toggle-pill { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.375rem; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 0.75rem; font-weight: 500; color: var(--text-2); transition: all 0.15s; } .panel-toggle-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .panel-toggle-pill.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .panel-toggle-pill i { font-size: 0.7rem; flex-shrink: 0; } /* ── Global Search Overlay ── */ .search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 3000; display: flex; flex-direction: column; align-items: center; padding-top: 5rem; } .search-overlay-box { background: var(--surface); border-radius: 0.75rem; width: 90%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; } .search-overlay-input-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .search-overlay-input-row i { color: var(--text-3); font-size: 1rem; flex-shrink: 0; } .search-overlay-input { flex: 1; border: none; outline: none; font-size: 1rem; color: var(--text); background: transparent; } .search-overlay-input::placeholder { color: var(--text-3); } .search-results { max-height: 60vh; overflow-y: auto; } .search-section { border-bottom: 1px solid var(--border-soft); } .search-section-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 0.75rem 1.25rem 0.25rem; } .search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1.25rem; cursor: pointer; transition: background 0.1s; } .search-result-item:hover { background: var(--surface-2); } .search-result-icon { width: 2rem; height: 2rem; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; } .search-result-icon.account { background: var(--soft-blue); color: var(--hue-blue); } .search-result-icon.contact { background: var(--soft-green); color: var(--hue-green); } .search-result-icon.task { background: var(--soft-amber); color: var(--hue-amber); } .search-result-icon.comm { background: var(--soft-pink); color: var(--hue-pink); } .search-result-main { flex: 1; min-width: 0; } .search-result-name { font-weight: 500; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-sub { font-size: 0.75rem; color: var(--text-3); } .search-empty { padding: 2rem; text-align: center; color: var(--text-3); font-size: 0.875rem; } /* ── Dashboard ── */ .view-content { flex: 1; overflow-y: auto; padding: 1.5rem; } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { background: var(--surface); border-radius: 0.5rem; padding: 1.25rem; box-shadow: var(--shadow-2); border: 1px solid var(--border); } .stat-card-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 0.5rem; } .stat-card-value { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; } .stat-card-value.danger { color: var(--danger); } .stat-card-value.warning { color: var(--warning); } .stat-card-value.success { color: var(--success); } .stat-card-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 0.375rem; } .dashboard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; } .dashboard-card { background: var(--surface); border-radius: 0.5rem; box-shadow: var(--shadow-2); border: 1px solid var(--border); overflow: hidden; } .dashboard-card-header { padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.875rem; color: var(--text-2); display: flex; align-items: center; gap: 0.5rem; } .dashboard-list-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.625rem 1rem; border-bottom: 1px solid var(--border-soft); font-size: 0.8125rem; gap: 0.5rem; } .dashboard-list-item:last-child { border-bottom: none; } .dashboard-list-item-main { flex: 1; min-width: 0; } .dashboard-list-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard-list-item-sub { font-size: 0.75rem; color: var(--text-3); } .dashboard-list-item-right { flex-shrink: 0; text-align: right; } /* ── Tags ── */ .account-tags-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.5rem; } .tag-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; } /* Sidebar tag filter — clickable chips, OR-match across selected tags */ .tag-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; } .tag-filter-chip { cursor: pointer; font-family: inherit; } .tag-filter-chip:hover { filter: brightness(1.2); } .tag-filter-clear { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 0.7rem; text-decoration: underline; padding: 0; } .tag-filter-clear:hover { color: var(--text-2); } .tag-pill-remove { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 0; line-height: 1; font-size: 0.75rem; } .tag-pill-remove:hover { opacity: 1; } .tag-selector { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; } .tag-selector select { flex: 1; padding: 0.375rem 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8125rem; background: var(--surface); color: var(--text); cursor: pointer; } .tag-selector select:focus { outline: none; border-color: var(--accent); } /* ── Merge Modal ── */ .merge-target-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 0.375rem; margin-top: 0.5rem; } .merge-target-item { padding: 0.75rem 1rem; cursor: pointer; border-bottom: 1px solid var(--border-soft); display: flex; gap: 0.75rem; align-items: center; transition: background 0.1s; } .merge-target-item:last-child { border-bottom: none; } .merge-target-item:hover { background: var(--surface-2); } .merge-target-item.selected { background: var(--accent-soft); border-color: var(--accent); } /* ── Products / List Views ── */ .list-view-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; } .list-view-title { font-size: 1.25rem; font-weight: 700; color: var(--text); } .list-view-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--surface); border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow-2); } .data-table th { text-align: left; padding: 0.75rem 1rem; background: var(--surface-2); border-bottom: 2px solid var(--border); font-weight: 600; color: var(--text-2); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .data-table tbody tr:hover td { background: var(--surface-2); } .data-table tbody tr:last-child td { border-bottom: none; } /* ── Status badges ── */ .status-badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .status-badge.draft { background: var(--soft-slate); color: var(--hue-slate); } .status-badge.sent { background: var(--soft-blue); color: var(--hue-blue); } .status-badge.accepted { background: var(--soft-green); color: var(--hue-green); } .status-badge.declined { background: var(--soft-red); color: var(--hue-red); } .status-badge.expired { background: var(--soft-amber); color: var(--hue-amber); } .status-badge.paid { background: var(--soft-green); color: var(--hue-green); } .status-badge.partial { background: var(--soft-amber); color: var(--hue-amber); } .status-badge.overdue { background: var(--soft-red); color: var(--hue-red); } .status-badge.void { background: var(--soft-slate); color: var(--hue-slate); } .status-badge.active { background: var(--soft-green); color: var(--hue-green); } .status-badge.inactive { background: var(--soft-slate); color: var(--hue-slate); } /* ── Quote / Invoice Builder ── */ .builder-modal { max-width: 860px; width: 95vw; } .line-items-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin-bottom: 0.75rem; } .line-items-table th { text-align: left; padding: 0.5rem; background: var(--surface-2); border-bottom: 2px solid var(--border); font-size: 0.75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } .line-items-table td { padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .line-items-table td input, .line-items-table td select { width: 100%; padding: 0.35rem 0.4rem; border: 1px solid var(--border); border-radius: 0.25rem; font-size: 0.8125rem; background: var(--surface); color: var(--text); } .line-items-table td input:focus, .line-items-table td select:focus { outline: none; border-color: var(--accent); } .totals-block { margin-left: auto; width: 260px; } .totals-row { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; color: var(--text-2); border-bottom: 1px solid var(--border-soft); } .totals-row.total-final { font-weight: 700; color: var(--text); font-size: 1rem; border-bottom: none; padding-top: 0.5rem; } .filter-bar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .filter-bar select, .filter-bar input { padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 0.375rem; font-size: 0.8125rem; background: var(--surface); color: var(--text); } .filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--accent); } /* ── Customer Number ── */ .customer-number-badge { font-size: 0.7rem; font-weight: 700; font-family: 'SF Mono', 'Fira Code', monospace; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.1rem 0.4rem; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .customer-number-lg { font-size: 0.8125rem; padding: 0.2rem 0.6rem; } /* ── Activity Feed ── */ .activity-item { display: flex; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid var(--border-soft); align-items: flex-start; } .activity-item:last-child { border-bottom: none; } .activity-item.completed-task { background: var(--soft-green); border-radius: 0.375rem; padding: 0.875rem; margin-bottom: 0.375rem; border-bottom: none; border: 1px solid color-mix(in srgb, var(--hue-green) 35%, var(--surface)); } .activity-icon { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8125rem; } .activity-icon.comm { background: var(--soft-blue); color: var(--hue-blue); } .activity-icon.task-done { background: var(--soft-green); color: var(--hue-green); } .activity-body { flex: 1; min-width: 0; } .activity-title { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 0.2rem; } .activity-sub { font-size: 0.8rem; color: var(--text-3); margin-bottom: 0.2rem; } .activity-content { font-size: 0.8125rem; color: var(--text-2); margin-bottom: 0.375rem; line-height: 1.4; } .activity-meta { display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; } .activity-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex-shrink: 0; } .activity-date { font-size: 0.75rem; color: var(--text-3); white-space: nowrap; } /* ── Tasks Page ── */ .tasks-page { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } .tasks-page-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .tasks-page-title { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; } .tasks-page-sub { font-size: 0.8125rem; color: var(--text-3); margin-top: 0.2rem; } .tasks-filter-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.625rem 1.5rem; display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; } .filter-chip { padding: 0.3rem 0.875rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); color: var(--text-3); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .filter-chip:hover { border-color: var(--accent); color: var(--accent); } .filter-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .filter-chip.danger { border-color: color-mix(in srgb, var(--hue-red) 50%, var(--surface)); color: var(--hue-red); } .tasks-list { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .task-row { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; display: flex; align-items: stretch; overflow: hidden; transition: box-shadow 0.15s; } .task-row:hover { box-shadow: var(--shadow-2); border-color: var(--surface-3); } .task-row.overdue { border-color: color-mix(in srgb, var(--hue-red) 45%, var(--surface)); background: color-mix(in srgb, var(--hue-red) 7%, var(--surface)); } .task-row.today { border-color: color-mix(in srgb, var(--hue-amber) 45%, var(--surface)); background: color-mix(in srgb, var(--hue-amber) 7%, var(--surface)); } .task-row-priority { width: 5px; flex-shrink: 0; } .task-row-body { flex: 1; padding: 0.875rem 1rem; min-width: 0; } .task-row-main { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.375rem; flex-wrap: wrap; } .task-account-link { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 0.875rem; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 0.3rem; transition: color 0.15s; flex-shrink: 0; } .task-account-link:hover { color: var(--accent-hover); text-decoration: underline; } .task-row-divider { color: var(--text-3); font-size: 0.75rem; } .task-row-title { font-size: 0.9rem; color: var(--text); font-weight: 500; } .task-row-notes { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 0.4rem; } .task-row-meta { display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; } .task-prio-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; color: white; text-transform: capitalize; } .task-due-label { font-size: 0.75rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 0.25rem; } .task-due-label.overdue { color: var(--hue-red); font-weight: 600; } .task-due-label.today { color: var(--hue-amber); font-weight: 600; } .task-row-actions { display: flex; gap: 0.5rem; align-items: center; padding: 0 1rem; flex-shrink: 0; } /* ── CRM empty workspace ── */ .crm-empty-workspace { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; } .crm-empty-icon { font-size: 3.5rem; color: var(--surface-3); } .crm-empty-title { font-size: 1.25rem; font-weight: 600; color: var(--text-2); margin: 0; } .crm-empty-message { font-size: 0.9rem; color: var(--text-3); text-align: center; max-width: 320px; margin: 0; } @media (max-width: 768px) { .dashboard-cols { grid-template-columns: 1fr; } .view-nav-btn span { display: none; } .builder-modal { width: 100vw; max-width: 100vw; border-radius: 0; } } /* ── Account Detail View ── */ .account-detail-view { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } .account-detail-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .account-detail-back { background: none; border: 1px solid var(--border); color: var(--text-3); padding: 0.375rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 0.375rem; transition: all 0.15s; } .account-detail-back:hover { background: var(--surface-2); color: var(--text); border-color: var(--surface-3); } .account-detail-title { font-size: 1.125rem; font-weight: 700; color: var(--text); flex: 1; } .account-detail-actions { display: flex; gap: 0.5rem; } .account-detail-tabs { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 1.5rem; display: flex; gap: 0; flex-shrink: 0; } .account-detail-tab { padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--text-3); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; display: flex; align-items: center; gap: 0.375rem; } .account-detail-tab:hover { color: var(--text); } .account-detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .account-detail-body { flex: 1; overflow-y: auto; padding: 1.5rem; } /* ── Sidebar account list ── */ .sidebar-account-list { display: flex; flex-direction: column; gap: 0.5rem; } .sidebar-account-item { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; cursor: pointer; transition: all 0.15s; } .sidebar-account-item:hover { border-color: var(--accent); background: var(--accent-soft); } .sidebar-account-item.selected { border-color: var(--accent); background: var(--accent-soft); } .sidebar-account-name { font-weight: 600; font-size: 0.875rem; color: var(--text); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-account-meta { font-size: 0.75rem; color: var(--text-3); display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .sidebar-new-btn { width: 100%; padding: 0.5rem; background: var(--accent); color: var(--on-accent); border: none; border-radius: 0.375rem; cursor: pointer; font-size: 0.8125rem; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-bottom: 0.75rem; transition: background 0.15s; } .sidebar-new-btn:hover { background: var(--accent-hover); } /* ── Account detail info grid ── */ .detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .detail-info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; } .detail-info-label { font-size: 0.75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; } .detail-info-value { font-size: 0.9375rem; color: var(--text); } .detail-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .detail-section-title { font-size: 1rem; font-weight: 600; color: var(--text); } /* ── Team cards (Admin > Teams tab) ── */ .team-card { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; overflow: hidden; margin-bottom: 0.75rem; } .team-card-bar { width: 6px; flex-shrink: 0; } .team-card-body { flex: 1; padding: 0.875rem 1rem; } .team-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.625rem; } .team-card-info { display: flex; flex-direction: column; gap: 0.125rem; } .team-card-name { font-weight: 600; font-size: 0.9375rem; color: var(--text); } .team-card-desc { font-size: 0.8125rem; color: var(--text-3); } .team-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } .team-members-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-top: 0.5rem; } .team-member-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9999px; padding: 0.125rem 0.5rem 0.125rem 0.625rem; font-size: 0.75rem; color: var(--text-2); } .team-member-remove { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 0.875rem; line-height: 1; padding: 0; margin-left: 0.125rem; display: flex; align-items: center; } .team-member-remove:hover { color: var(--danger); } .team-add-member-select { font-size: 0.75rem; border: 1px dashed var(--border); border-radius: 9999px; padding: 0.125rem 0.5rem; color: var(--text-3); background: var(--surface); cursor: pointer; } .team-add-member-select:focus { outline: none; border-color: var(--accent); color: var(--text); } /* ── Settings modal (theme picker) ── */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; } .theme-swatch { border: 2px solid var(--border); border-radius: 0.5rem; padding: 0.625rem; cursor: pointer; background: var(--surface); transition: all 0.15s; text-align: left; } .theme-swatch:hover { border-color: var(--accent-hover); } .theme-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .theme-swatch-preview { height: 44px; border-radius: 0.375rem; margin-bottom: 0.5rem; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,0.2); } .theme-swatch-preview span { flex: 1; } .theme-swatch-name { font-size: 0.8125rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 0.375rem; } .theme-swatch-name i { color: var(--accent); font-size: 0.75rem; } .settings-hint { font-size: 0.8125rem; color: var(--text-3); margin-top: 1rem; }