/* ══════════════════════════════════════════════════════════════════════════ Perfect Communication CRM — Theme Engine Default / Mountains / Rivers / Sky with Stars / Sky with Clouds Every theme overrides the SAME design-token set app.css already builds every component on (sidebar, topbar, cards, tables, forms, badges, modals, dropdowns, charts via app.js's getThemeChartColors()) — so re-skinning the whole CRM is a matter of redefining variables here, never touching individual pages. Selectors are attribute-only (`[data-app-theme="x"]`, not `html[data-app-theme="x"]`) so the exact same rule applies whether the attribute sits on the real `` element or on a `.theme-mock` preview thumbnail nested inside the Settings page (see the bottom of this file) — the mini previews are always pixel-accurate because they're driven by the real tokens, not a separate hand-drawn swatch. ══════════════════════════════════════════════════════════════════════════ */ [data-app-theme] #page-content, [data-app-theme] body { transition: var(--theme-transition, background-color .2s ease); } /* ─── MOUNTAINS — natural, cool, earthy green ───────────────────────────── */ [data-app-theme="mountains"] { --primary: #2f6d4f; --primary-rgb: 47,109,79; --primary-light: #4c9a71; --primary-dark: #1e4a35; --primary-bg: #e6f2ea; --secondary: #8a6d3b; --secondary-bg: #f3ebd9; --card-bg: #ffffff; --topbar-bg: #ffffff; --surface-tint: #eef6ef; --border: #d7e5db; --border-light: #e8f1ea; --text-primary: #1c2e22; --text-secondary: #3f5b48; --text-muted: #7c9483; --sidebar-bg: linear-gradient(180deg, #1e4a35 0%, #2f6d4f 55%, #4c9a71 100%); --sidebar-text: #eaf5ee; --sidebar-hover: rgba(255,255,255,.10); --sidebar-active: rgba(255,255,255,.20); --sidebar-border: rgba(47,109,79,.25); --sidebar-shadow: rgba(47,109,79,.18); --auth-gradient: linear-gradient(135deg, #1e4a35 0%, #2f6d4f 55%, #4c9a71 100%); --auth-accent: url("../themes/mountains/accent.svg"); --auth-accent-repeat: no-repeat; --auth-accent-size: cover; --body-bg: radial-gradient(ellipse 55% 26% at 15% 100%, rgba(30,74,53,.16) 0%, transparent 70%), radial-gradient(ellipse 65% 32% at 50% 100%, rgba(76,154,113,.18) 0%, transparent 70%), radial-gradient(ellipse 50% 24% at 85% 100%, rgba(138,109,59,.14) 0%, transparent 70%), linear-gradient(180deg, #dfeee3 0%, #eef6ee 45%, #f8f3e8 100%); } [data-app-theme="mountains"] .theme-emoji::before { content: "🏔️"; } /* ─── RIVERS — fluid, fresh, cyan/blue ───────────────────────────────────── */ [data-app-theme="rivers"] { --primary: #0e7490; --primary-rgb: 14,116,144; --primary-light: #22a6c9; --primary-dark: #0b5568; --primary-bg: #e0f7fa; --secondary: #0891b2; --secondary-bg: #cffafe; --card-bg: #ffffff; --topbar-bg: #ffffff; --surface-tint: #eafbfd; --border: #cdeef4; --border-light: #e5f7fa; --text-primary: #0b2b30; --text-secondary: #2c5a63; --text-muted: #6b98a1; --sidebar-bg: linear-gradient(180deg, #0b5568 0%, #0e7490 55%, #22a6c9 100%); --sidebar-text: #e6fbff; --sidebar-hover: rgba(255,255,255,.10); --sidebar-active: rgba(255,255,255,.20); --sidebar-border: rgba(14,116,144,.25); --sidebar-shadow: rgba(14,116,144,.18); --auth-gradient: linear-gradient(135deg, #0b5568 0%, #0e7490 55%, #22a6c9 100%); --auth-accent: url("../themes/rivers/accent.svg"); --auth-accent-repeat: no-repeat; --auth-accent-size: cover; --body-bg: radial-gradient(ellipse 85% 22% at 25% 25%, rgba(34,166,201,.14) 0%, transparent 70%), radial-gradient(ellipse 90% 26% at 75% 55%, rgba(14,116,144,.14) 0%, transparent 70%), radial-gradient(ellipse 80% 20% at 40% 85%, rgba(11,85,104,.12) 0%, transparent 70%), linear-gradient(180deg, #e3f6fb 0%, #eefcff 45%, #f5fbfa 100%); } [data-app-theme="rivers"] .theme-emoji::before { content: "🌊"; } /* ─── SKY WITH STARS — premium dark, indigo/purple night ────────────────── */ [data-app-theme="stars"] { --primary: #6366f1; --primary-rgb: 99,102,241; --primary-light: #818cf8; --primary-dark: #4338ca; --primary-bg: #24215a; --secondary: #a855f7; --secondary-bg: #2c1f4a; /* Status colors keep the SAME text colors as every other theme (semantic meaning must never change), only the badge -bg tint darkens so pills stay legible on a dark card instead of washing out. */ --success-bg: #113827; --warning-bg: #3a2a0a; --danger-bg: #2e0e0e; --info-bg: #0d2f38; --card-bg: #201c4d; --topbar-bg: #17142f; --surface-tint: #2b2660; --border: rgba(255,255,255,.10); --border-light: rgba(255,255,255,.06); --text-primary: #f3f2ff; --text-secondary: #c7c2f0; --text-muted: #8f89c4; --sidebar-bg: linear-gradient(180deg, #14103a 0%, #241b52 55%, #362a6b 100%); --sidebar-text: #e6e3ff; --sidebar-hover: rgba(255,255,255,.10); --sidebar-active: rgba(255,255,255,.20); --sidebar-border: rgba(255,255,255,.08); --sidebar-shadow: rgba(0,0,0,.40); --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 2px 8px rgba(0,0,0,.40); --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 8px 32px rgba(0,0,0,.55); --auth-gradient: linear-gradient(135deg, #14103a 0%, #241b52 50%, #362a6b 100%); --auth-accent: url("../themes/stars/accent.svg"); --auth-accent-repeat: repeat; --auth-accent-size: 360px 220px; --body-bg: radial-gradient(circle at 12% 22%, rgba(255,255,255,.85) 0 1px, transparent 1.6px), radial-gradient(circle at 62% 55%, rgba(255,255,255,.70) 0 1px, transparent 1.6px), radial-gradient(circle at 38% 80%, rgba(255,255,255,.75) 0 1px, transparent 1.6px), radial-gradient(circle at 85% 30%, rgba(255,255,255,.6) 0 1px, transparent 1.6px), linear-gradient(180deg, #2b2360 0%, #362a6b 45%, #453a86 100%); --body-bg-repeat: repeat, repeat, repeat, repeat, no-repeat; --body-bg-size: 170px 170px, 210px 210px, 240px 240px, 260px 260px, cover; } [data-app-theme="stars"] body, [data-app-theme="stars"] #page-content { background-repeat: var(--body-bg-repeat); background-size: var(--body-bg-size); } [data-app-theme="stars"] .theme-emoji::before { content: "✨"; } /* Icons/illustrations that ship as dark-on-transparent PNGs/SVGs would vanish on this theme's dark surfaces — anything marked .icon-auto-invert flips. */ [data-app-theme="stars"] .icon-auto-invert { filter: invert(1) brightness(1.6); } /* The real company logo is solid brand-blue ink on a transparent PNG — never recolored (the logo itself must stay untouched), but on this theme's dark cards it needs a light backing plate to stay crisp, same as any app would give a colored-ink logo a white chip on a dark navbar. */ [data-app-theme="stars"] .auth-logo-img, [data-app-theme="stars"] .sidebar-brand .brand-logo-img { background: #ffffff; padding: 8px; border-radius: var(--radius-lg); box-shadow: 0 4px 16px rgba(0,0,0,.25); } /* ─── SKY WITH CLOUDS — bright, airy, sky blue ───────────────────────────── */ [data-app-theme="clouds"] { --primary: #2563eb; --primary-rgb: 37,99,235; --primary-light: #60a5fa; --primary-dark: #1d4ed8; --primary-bg: #eff6ff; --secondary: #0ea5e9; --secondary-bg: #e0f2fe; --card-bg: #ffffff; --topbar-bg: #ffffff; --surface-tint: #eef6fd; --border: #d7e9fb; --border-light: #eaf4fd; --text-primary: #0f2542; --text-secondary: #33587e; --text-muted: #7a9ac2; --sidebar-bg: linear-gradient(180deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%); --sidebar-text: #eaf2ff; --sidebar-hover: rgba(255,255,255,.10); --sidebar-active: rgba(255,255,255,.20); --sidebar-border: rgba(37,99,235,.25); --sidebar-shadow: rgba(37,99,235,.16); --auth-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #60a5fa 100%); --auth-accent: url("../themes/clouds/accent.svg"); --auth-accent-repeat: no-repeat; --auth-accent-size: cover; --body-bg: radial-gradient(ellipse 130px 42px at 12% 18%, rgba(255,255,255,.85) 0%, transparent 72%), radial-gradient(ellipse 160px 50px at 55% 32%, rgba(255,255,255,.75) 0%, transparent 72%), radial-gradient(ellipse 140px 46px at 85% 12%, rgba(255,255,255,.8) 0%, transparent 72%), radial-gradient(ellipse 150px 48px at 30% 78%, rgba(255,255,255,.65) 0%, transparent 72%), linear-gradient(180deg, #cfe8fb 0%, #e8f4fd 45%, #f5fafd 100%); } [data-app-theme="clouds"] .theme-emoji::before { content: "☁️"; } /* ─── Shared: sidebar text/hover/active contrast for every colored theme ── */ [data-app-theme="mountains"] #sidebar, [data-app-theme="rivers"] #sidebar, [data-app-theme="stars"] #sidebar, [data-app-theme="clouds"] #sidebar, [data-app-theme="mountains"] .sidebar-link, [data-app-theme="rivers"] .sidebar-link, [data-app-theme="stars"] .sidebar-link, [data-app-theme="clouds"] .sidebar-link { color: var(--sidebar-text); } [data-app-theme="mountains"] .sidebar-link:hover, [data-app-theme="rivers"] .sidebar-link:hover, [data-app-theme="stars"] .sidebar-link:hover, [data-app-theme="clouds"] .sidebar-link:hover { background: var(--sidebar-hover); color: #ffffff; } [data-app-theme="mountains"] .sidebar-link.active, [data-app-theme="rivers"] .sidebar-link.active, [data-app-theme="stars"] .sidebar-link.active, [data-app-theme="clouds"] .sidebar-link.active { background: var(--sidebar-active); color: #ffffff; box-shadow: none; } [data-app-theme="mountains"] .nav-section-title, [data-app-theme="rivers"] .nav-section-title, [data-app-theme="stars"] .nav-section-title, [data-app-theme="clouds"] .nav-section-title { color: rgba(255,255,255,.55); } [data-app-theme="mountains"] .sidebar-brand small, [data-app-theme="rivers"] .sidebar-brand small, [data-app-theme="stars"] .sidebar-brand small, [data-app-theme="clouds"] .sidebar-brand small { color: rgba(255,255,255,.65) !important; } [data-app-theme="mountains"] .sidebar-brand h5, [data-app-theme="rivers"] .sidebar-brand h5, [data-app-theme="stars"] .sidebar-brand h5, [data-app-theme="clouds"] .sidebar-brand h5 { color: #ffffff !important; } /* ══════════════════════════════════════════════════════════════════════════ Subtle theme motion — decorative only, never on real content, opacity/ transform-only (compositor-cheap), fully suppressed for users who ask for reduced motion. Default and Mountains stay still by design (a light "elevation breathing" cue is easy to misread as UI jitter on a corporate theme, so Mountains skips motion despite the brief allowing it). ══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { [data-app-theme="stars"] #page-content::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1.4px, transparent 2px), radial-gradient(circle at 70% 65%, rgba(255,255,255,.8) 0 1.4px, transparent 2px), radial-gradient(circle at 45% 85%, rgba(255,255,255,.85) 0 1.4px, transparent 2px); background-size: 220px 220px, 260px 260px, 300px 300px; animation: star-twinkle 5s ease-in-out infinite; } @keyframes star-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .8; } } [data-app-theme="clouds"] #page-content::before { content: ""; position: fixed; top: 6%; left: -10%; width: 120%; height: 140px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90px 30px at 15% 40%, rgba(255,255,255,.55) 0%, transparent 75%), radial-gradient(ellipse 110px 34px at 55% 55%, rgba(255,255,255,.45) 0%, transparent 75%), radial-gradient(ellipse 95px 30px at 85% 35%, rgba(255,255,255,.5) 0%, transparent 75%); animation: cloud-drift 60s linear infinite; } @keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(4%); } } [data-app-theme="rivers"] #page-content::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(120deg, transparent 0%, rgba(34,166,201,.05) 45%, transparent 55%); background-size: 200% 200%; animation: river-shimmer 14s ease-in-out infinite; } @keyframes river-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } } [data-app-theme="stars"] #page-content, [data-app-theme="clouds"] #page-content, [data-app-theme="rivers"] #page-content { position: relative; } [data-app-theme="stars"] #page-content > *, [data-app-theme="clouds"] #page-content > *, [data-app-theme="rivers"] #page-content > * { position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════════════════ Theme picker (Settings → Theme) — mini "live" mockup preview. `.theme-mock` itself carries the real [data-app-theme] attribute, so every rule above this point already applies to it automatically; these rules just lay out miniature sidebar/header/card/button shapes at thumbnail scale using the exact same tokens as the real app. ══════════════════════════════════════════════════════════════════════════ */ .theme-pick-card { position: relative; border: 2px solid var(--border, #e2e8f0); border-radius: var(--radius-lg, 16px); overflow: hidden; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; background: #fff; padding-bottom: 4px; } .theme-pick-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .theme-pick-card.active { border-color: var(--primary, #3182ce); box-shadow: 0 0 0 3px rgba(49,130,206,.18); } .theme-pick-active-badge { position: absolute; top: 8px; right: 8px; z-index: 3; background: var(--primary, #3182ce); color: #fff; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; display: flex; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .theme-mock { height: 132px; display: flex; flex-direction: column; background: var(--body-bg); overflow: hidden; } .theme-mock-header { height: 22px; flex-shrink: 0; background: var(--topbar-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 5px; padding: 0 8px; } .theme-mock-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border); } .theme-mock-dot-a { background: var(--primary); } .theme-mock-search { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-tint); margin: 0 6px; } .theme-mock-avatar { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .theme-mock-body { flex: 1; display: flex; min-height: 0; } .theme-mock-sidebar { width: 30px; flex-shrink: 0; background: var(--sidebar-bg); display: flex; flex-direction: column; gap: 5px; padding: 8px 6px; } .theme-mock-brand { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.9); margin-bottom: 2px; } .theme-mock-navline { display: block; height: 3px; border-radius: 2px; background: var(--sidebar-text); opacity: .45; } .theme-mock-navline.short { width: 60%; } .theme-mock-navline.active { opacity: 1; background: #fff; } .theme-mock-content { flex: 1; background: var(--body-bg); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .theme-mock-title { display: block; width: 45%; height: 6px; border-radius: 3px; background: var(--text-secondary); opacity: .5; } .theme-mock-cards { display: flex; gap: 5px; } .theme-mock-card { flex: 1; height: 26px; border-radius: 4px; background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } .theme-mock-btn { width: 34px; height: 9px; border-radius: 5px; background: var(--primary); align-self: flex-end; margin-top: auto; } .theme-pick-label { padding: 10px 12px 2px; font-weight: 700; font-size: .88rem; display: flex; align-items: center; gap: 8px; color: var(--text-primary, #0f172a); } .theme-pick-card.active .theme-pick-label { color: var(--primary, #3182ce); } .theme-pick-desc { padding: 0 12px 10px; font-size: .78rem; color: var(--text-muted, #94a3b8); margin: 0; line-height: 1.4; } /* Empty states: the shared .empty-state class in app.css already wraps its icon in a --primary-bg accent circle, so every existing "no data" block across the app (customers, invoices, bookings, notifications, …) re-skins automatically. Stars only needs its accent circle a little more visible against a dark card, since --primary-bg there is a solid dark indigo rather than a pale tint. */ [data-app-theme="stars"] .empty-state i { background: rgba(255,255,255,.07); opacity: 1; }