/* Enterprise Email SaaS themes — Admin + User Admin (data-rs-theme on ) */ html[data-rs-theme="mailbox"] { --accent: #5b7cff; --accent-deep: #3d5bd6; --accent-hover: #4a6af0; --signal: #5b7cff; --danger: #ef4444; --warn: #f5c518; --selected: #eef2ff; --hover: #f5f7fc; --canvas: #f4f6fb; --bg: #f4f6fb; --panel: #ffffff; --panel-strong: #fafbff; --sidebar: #eef1f8; --line: #e6eaf2; --text: #1e293b; --muted: #64748b; --ink: #1e293b; --ink-2: #334155; --radius: 14px; --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); } html[data-rs-theme="suite"] { --accent: #5d87ff; --accent-deep: #3a5fcc; --accent-hover: #4570ea; --signal: #5d87ff; --danger: #fa896b; --warn: #ffae1f; --selected: #ecf2ff; --hover: #f6f9fc; --canvas: #f4f7fb; --bg: #f4f7fb; --panel: #ffffff; --panel-strong: #ffffff; --line: #eaeef4; --text: #2a3547; --muted: #7c8fac; --ink: #2a3547; --ink-2: #5a6a85; --shadow: 0 0 1px rgba(42, 53, 71, 0.08), 0 8px 24px rgba(42, 53, 71, 0.04); } html[data-rs-theme="workspace"] { --accent: #111827; --accent-deep: #030712; --accent-hover: #1f2937; --signal: #ef4444; --danger: #ef4444; --warn: #f59e0b; --selected: #f3f4f6; --hover: #f9fafb; --canvas: #f9fafb; --bg: #f9fafb; --panel: #ffffff; --panel-strong: #ffffff; --line: #eceff3; --text: #111827; --muted: #6b7280; --ink: #111827; --ink-2: #374151; --shadow: none; } html[data-rs-theme="mailbox"] body, html[data-rs-theme="suite"] body, html[data-rs-theme="workspace"] body { background: var(--canvas, var(--bg)) !important; } html[data-rs-theme="mailbox"] .nav-btn.active { outline: 2px solid color-mix(in srgb, var(--nav-deep, #5c4033) 55%, #fff); outline-offset: 1px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important; background: transparent !important; color: inherit !important; } html[data-rs-theme="suite"] .nav-btn.active { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important; background: transparent !important; color: inherit !important; } html[data-rs-theme="workspace"] .nav-btn.active { outline: 2px solid var(--accent-deep, #334155); outline-offset: 1px; background: transparent !important; color: inherit !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14) !important; } html[data-rs-theme="mailbox"] .nav-btn .nav-icon, html[data-rs-theme="suite"] .nav-btn .nav-icon, html[data-rs-theme="workspace"] .nav-btn .nav-icon, html[data-rs-theme="royal"] .nav-btn .nav-icon { background: var(--nav-deep) !important; color: #fff !important; } html[data-rs-theme="mailbox"] .nav-btn .nav-label, html[data-rs-theme="suite"] .nav-btn .nav-label, html[data-rs-theme="workspace"] .nav-btn .nav-label, html[data-rs-theme="royal"] .nav-btn .nav-label { background: var(--nav-soft) !important; color: var(--nav-fg) !important; } html[data-rs-theme="mailbox"] .btn-primary, html[data-rs-theme="suite"] .btn-primary, html[data-rs-theme="workspace"] .btn-primary, html[data-rs-theme="mailbox"] button.btn.primary, html[data-rs-theme="suite"] button.btn.primary { background: var(--accent) !important; border-color: var(--accent) !important; } html[data-rs-theme="mailbox"] .btn-primary:hover, html[data-rs-theme="suite"] .btn-primary:hover { background: var(--accent-hover) !important; } /* Theme picker */ .rs-ent-theme-picker { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0.65rem 0.75rem; padding: 0.4rem; border-radius: 12px; background: var(--panel-strong, #f8fafc); border: 1px solid var(--line, #e5e7eb); } .rs-ent-theme-picker button { appearance: none; border: 1px solid var(--line, #e5e7eb); background: var(--panel, #fff); border-radius: 999px; padding: 0.25rem 0.55rem; font-size: 0.7rem; font-weight: 650; color: var(--muted, #64748b); cursor: pointer; font-family: inherit; } .rs-ent-theme-picker button.is-active { border-color: var(--accent, #5b7cff); color: var(--accent-deep, #3d5bd6); background: var(--selected, #eef2ff); } /* Storage upgrade card (user admin sidebar) */ .rs-ent-storage { margin: 0.5rem 0.65rem 0.75rem; padding: 0.75rem 0.8rem; border-radius: 12px; background: var(--selected, #f8fafc); border: 1px solid var(--line, #e5e7eb); } .rs-ent-storage .rs-ent-storage-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.4rem; } .rs-ent-storage .rs-ent-storage-bar { height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin-bottom: 0.4rem; } .rs-ent-storage .rs-ent-storage-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); width: 40%; } .rs-ent-storage .rs-ent-storage-meta { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.45rem; } .rs-ent-storage a, .rs-ent-storage button.rs-ent-upgrade { display: inline-flex; appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent) !important; cursor: pointer; text-decoration: none; } .rs-ent-storage a:hover, .rs-ent-storage button.rs-ent-upgrade:hover { text-decoration: underline; } html[data-rs-theme="workspace"] .rs-ent-storage a, html[data-rs-theme="workspace"] .rs-ent-storage button.rs-ent-upgrade { color: #ef4444 !important; } /* Classic Royal red */ html[data-rs-theme="royal"] { --accent: #e30613; --accent-deep: #9a040d; --accent-hover: #c10510; --signal: #e30613; --danger: #e30613; --warn: #f5c518; --selected: #fde8ea; --hover: #f7f7f8; --canvas: #f4f4f5; --bg: #f3f4f6; --panel: #ffffff; --panel-strong: #fafafa; --line: #e4e4e7; --text: #111111; --muted: #5c5c66; --ink: #111111; --ink-2: #1a1a1a; }