/* ================================================================================ Rain City Maids Design System File: /Content/css/rcm-design-system.css Loaded site-wide via Site.Master . NAMING: All classes prefixed `rcm-` to avoid Bootstrap/DevExpress collisions. LAYERING: Wraps DevExpress controls; doesn't replace them. Existing pages keep working — new/touched pages adopt the wrappers and tokens. DOCS: /Documentation/Design-System/README.md (live catalog). WHEN ADDING TO THIS FILE: - Only ship classes that something actually uses today (organic growth). - Document new classes in the README before reuse on another page. - Light theme only. Never hardcode dark-mode colors here. - No dependency on jQuery/JS — design system is pure CSS. ================================================================================ */ /* ============================================================================== TOKENS CSS custom properties consumed by every component class below. Scoped to :root so existing pages aren't affected unless they reference these tokens. ============================================================================== */ :root { /* Brand palette */ --rcm-color-brand: #00AEEF; --rcm-color-brand-dark: #0098d3; --rcm-color-brand-darker: #0080c0; --rcm-color-brand-tint: #e0f4fc; /* Neutrals (light theme) */ --rcm-color-bg: #ffffff; --rcm-color-bg-subtle: #fafbfc; --rcm-color-bg-muted: #f5f7fa; --rcm-color-bg-hover: #f7f9fc; --rcm-color-border: #e8ecf1; --rcm-color-border-strong: #d8dde3; --rcm-color-divider: #ecf0f3; /* Text */ --rcm-color-text: #1f2937; --rcm-color-text-muted: #4b5563; --rcm-color-text-subtle: #6b7280; --rcm-color-text-faint: #9ca3af; /* Semantic */ --rcm-color-success: #047857; --rcm-color-success-bg: #ecfdf5; --rcm-color-info: #075985; --rcm-color-info-bg: #e0f2fe; --rcm-color-warning: #92400e; --rcm-color-warning-bg: #fef3c7; --rcm-color-danger: #b91c1c; --rcm-color-danger-bg: #fee2e2; --rcm-color-purple: #6d28d9; --rcm-color-purple-bg: #ede9fe; /* Channel colors (Communications + future channel indicators) */ --rcm-channel-email-fg: #0288d1; --rcm-channel-email-bg: #e7f4fb; --rcm-channel-sms-fg: #2e7d32; --rcm-channel-sms-bg: #e8f5e9; --rcm-channel-call-fg: #c2410c; --rcm-channel-call-bg: #fff4e5; /* Spacing scale */ --rcm-space-1: 4px; --rcm-space-2: 8px; --rcm-space-3: 12px; --rcm-space-4: 16px; --rcm-space-5: 24px; --rcm-space-6: 32px; /* Radius */ --rcm-radius-sm: 4px; --rcm-radius-md: 6px; --rcm-radius-lg: 8px; --rcm-radius-pill: 999px; /* Shadows */ --rcm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --rcm-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.04); --rcm-shadow-focus: 0 0 0 3px rgba(0, 174, 239, 0.10); /* Type sizes (font-family inherited from existing body styles) */ --rcm-font-xs: 10.5px; --rcm-font-sm: 12px; --rcm-font-md: 13px; --rcm-font-base: 14px; --rcm-font-lg: 16px; --rcm-font-xl: 18px; /* Transitions */ --rcm-transition-fast: 0.1s ease; --rcm-transition-base: 0.15s ease; } /* ============================================================================== PAGE HEADER Generic page-header pattern with avatar + name + meta + actions. Use on CustomerEdit, EmployeeEdit, ContactEdit, etc. ============================================================================== */ .rcm-page-header { padding: 18px 28px; border-bottom: 1px solid var(--rcm-color-divider); display: flex; align-items: center; gap: 14px; background: var(--rcm-color-bg); } .rcm-page-header-title { flex: 1; min-width: 0; } .rcm-page-header-name { font-size: var(--rcm-font-xl); font-weight: 600; color: var(--rcm-color-text); line-height: 1.3; } .rcm-page-header-meta { color: var(--rcm-color-text-subtle); font-size: 12.5px; margin-top: 2px; } .rcm-page-header-actions { display: flex; gap: var(--rcm-space-2); flex-shrink: 0; } /* ============================================================================== AVATAR Gradient circle with initials (or icon). ============================================================================== */ .rcm-avatar { width: 44px; height: 44px; background: linear-gradient(135deg, var(--rcm-color-brand), var(--rcm-color-brand-darker)); border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--rcm-font-lg); box-shadow: 0 2px 6px rgba(0, 174, 239, 0.30); flex-shrink: 0; } .rcm-avatar-sm { width: 32px; height: 32px; font-size: 13px; } .rcm-avatar-lg { width: 56px; height: 56px; font-size: 20px; } /* ============================================================================== PILL — small status indicator (Active, Inactive, etc.) Modifier class controls color: .rcm-pill-success | .rcm-pill-info | etc. ============================================================================== */ .rcm-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: var(--rcm-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; background: var(--rcm-color-bg-muted); color: var(--rcm-color-text-muted); } .rcm-pill-success { background: var(--rcm-color-success-bg); color: var(--rcm-color-success); } .rcm-pill-info { background: var(--rcm-color-info-bg); color: var(--rcm-color-info); } .rcm-pill-warning { background: var(--rcm-color-warning-bg); color: var(--rcm-color-warning); } .rcm-pill-danger { background: var(--rcm-color-danger-bg); color: var(--rcm-color-danger); } /* ============================================================================== TAB STRIP Generic tab navigation. Use with `` or `