/** * Soft SaaS theme (inspired by soft insight dashboards) * Activate with: or body[data-ka-theme="soft"] */ [data-ka-theme="soft"] { --ka-ink: #1c1917; --ka-ink-soft: #292524; --ka-muted: #78716c; --ka-soft: #a8a29e; --ka-line: #ebe4dc; --ka-line-strong: #e0d7cc; --ka-bg: #f6f1eb; --ka-bg-soft: #f1ebe3; --ka-card: #ffffff; --ka-sidebar: #f8f4ef; --ka-sidebar-hover: rgba(232, 162, 122, 0.12); --ka-sidebar-active: #ffffff; --ka-sidebar-ink: #1c1917; --ka-sidebar-muted: #78716c; --ka-sidebar-soft: #a8a29e; --ka-sidebar-border: #ebe4dc; --ka-sidebar-indicator: #1c1917; --ka-sidebar-shadow: 0 1px 2px rgba(61, 42, 28, 0.04), 0 8px 18px rgba(61, 42, 28, 0.06); --ka-accent: #e8a27a; --ka-accent-strong: #d97757; --ka-accent-soft: #fce8dc; --ka-accent-ink: #7c3f24; --ka-warn: #c4853a; --ka-danger: #c45c5c; --ka-success: #3d8b6e; --ka-info: #6b7280; --ka-radius: 16px; --ka-radius-sm: 12px; --ka-shadow: 0 1px 2px rgba(61, 42, 28, 0.04), 0 10px 28px rgba(61, 42, 28, 0.06); --ka-shadow-lg: 0 4px 10px rgba(61, 42, 28, 0.05), 0 18px 40px rgba(61, 42, 28, 0.08); --ka-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --blue: var(--ka-accent-strong); --primary: var(--ka-accent-strong); --indigo: #a67c52; --info: #8b7355; } [data-ka-theme="soft"] body#page-top, [data-ka-theme="soft"] body { background: var(--ka-bg); color: var(--ka-ink); } [data-ka-theme="soft"] a { color: var(--ka-accent-ink); } [data-ka-theme="soft"] a:hover { color: var(--ka-accent-strong); } [data-ka-theme="soft"] #content-wrapper, [data-ka-theme="soft"] #content { background: radial-gradient(1100px 420px at 8% -8%, rgba(232, 162, 122, 0.16), transparent 55%), radial-gradient(900px 340px at 92% 0%, rgba(232, 162, 122, 0.08), transparent 50%), var(--ka-bg); } /* Soft light sidebar — inherits shared pill/indicator layout from theme.css */ [data-ka-theme="soft"] .sidebar .sidebar-brand-icon { background: var(--ka-accent-strong); } [data-ka-theme="soft"] .sidebar .nav-item.active .nav-link i { color: var(--ka-accent-strong); } [data-ka-theme="soft"] .sidebar .collapse-item:hover, [data-ka-theme="soft"] .sidebar .collapse-item.active { background: var(--ka-accent-soft) !important; color: var(--ka-accent-ink) !important; } [data-ka-theme="soft"] .sidebar #sidebarToggle, [data-ka-theme="soft"] .sidebar-dark #sidebarToggle { background: #fff !important; border: 1.5px solid #e0d5c8 !important; box-shadow: 0 1px 2px rgba(61, 42, 28, 0.06), 0 4px 12px rgba(61, 42, 28, 0.08); } [data-ka-theme="soft"] .sidebar #sidebarToggle::after, [data-ka-theme="soft"] .sidebar-dark #sidebarToggle::after, [data-ka-theme="soft"] .sidebar.toggled #sidebarToggle::after, [data-ka-theme="soft"] .sidebar-dark.toggled #sidebarToggle::after { color: var(--ka-accent-ink) !important; opacity: 1 !important; } [data-ka-theme="soft"] .sidebar #sidebarToggle:hover, [data-ka-theme="soft"] .sidebar-dark #sidebarToggle:hover { background: var(--ka-accent-soft) !important; border-color: var(--ka-accent) !important; } [data-ka-theme="soft"] .sidebar #sidebarToggle:hover::after, [data-ka-theme="soft"] .sidebar-dark #sidebarToggle:hover::after { color: var(--ka-accent-strong) !important; } [data-ka-theme="soft"] .topbar { background: rgba(255, 250, 246, 0.88) !important; border-bottom: 1px solid var(--ka-line) !important; backdrop-filter: blur(10px); } [data-ka-theme="soft"] .card, [data-ka-theme="soft"] .dash-card { border-color: var(--ka-line) !important; box-shadow: var(--ka-shadow) !important; border-radius: var(--ka-radius) !important; } [data-ka-theme="soft"] .btn-primary, [data-ka-theme="soft"] .btn-success, [data-ka-theme="soft"] .dash-btn-dark, [data-ka-theme="soft"] .ka-notice-mark:hover, [data-ka-theme="soft"] .ka-notice-pill.is-active { background: var(--ka-accent-strong) !important; border-color: var(--ka-accent-strong) !important; color: #fff !important; } [data-ka-theme="soft"] .btn-outline-secondary { border-color: var(--ka-line-strong) !important; color: var(--ka-muted) !important; } [data-ka-theme="soft"] .btn-outline-secondary:hover { background: var(--ka-accent-soft) !important; border-color: var(--ka-accent) !important; color: var(--ka-accent-ink) !important; } [data-ka-theme="soft"] .ka-user-avatar { background: var(--ka-accent-strong); border-color: var(--ka-accent-soft); } [data-ka-theme="soft"] .ka-customer-list-avatar, [data-ka-theme="soft"] .ka-notice-row.is-open .ka-notice-icon { background: var(--ka-accent-strong) !important; color: #fff !important; } [data-ka-theme="soft"] .ka-notice-shell, [data-ka-theme="soft"] .ka-customer-list-row:hover { border-color: var(--ka-line); } [data-ka-theme="soft"] .ka-notice-row:hover .ka-notice-shell, [data-ka-theme="soft"] a.ka-notice-hit:hover { background: #fffaf6; border-color: #f0d8c6; } [data-ka-theme="soft"] .ka-tag-multi-chip, [data-ka-theme="soft"] .badge-primary, [data-ka-theme="soft"] .badge-secondary { background: var(--ka-accent-strong) !important; color: #fff !important; } [data-ka-theme="soft"] .dash-progress-bar, [data-ka-theme="soft"] .dash-progress-bar--accent { background: linear-gradient(90deg, var(--ka-accent), var(--ka-accent-strong)) !important; } [data-ka-theme="soft"] .dash-gauge-track { stroke: #ebe4dc; } [data-ka-theme="soft"] .dash-gauge-arc { stroke: var(--ka-accent-strong); } /* Match chart legend dots to Soft diagram colors */ [data-ka-theme="soft"] .dash-dot--dark { background: #d97757; } [data-ka-theme="soft"] .dash-dot--muted { background: #e8c4b0; } [data-ka-theme="soft"] .dash-delta.is-up { background: #e8f6ef !important; color: var(--ka-success) !important; } [data-ka-theme="soft"] .dash-delta.is-down { background: #fbebea !important; color: var(--ka-danger) !important; } [data-ka-theme="soft"] .dash-year-pill.is-active { background: var(--ka-accent-strong) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(217, 119, 87, 0.28); } [data-ka-theme="soft"] .dash-year-pill { color: var(--ka-muted) !important; } [data-ka-theme="soft"] .dash-year-pill:hover { background: var(--ka-accent-soft) !important; color: var(--ka-accent-ink) !important; } [data-ka-theme="soft"] .ka-notice-pill.is-active .ka-pill-count { background: rgba(255, 255, 255, 0.22); } [data-ka-theme="soft"] .dash-icon-box { background: var(--ka-accent-soft) !important; color: var(--ka-accent-strong) !important; } [data-ka-theme="soft"] .dash-kpi { border-top: 3px solid var(--ka-accent); } [data-ka-theme="soft"] .dash-card { background: var(--ka-card); } [data-ka-theme="soft"] .dash-btn-ghost { background: #fff !important; border-color: var(--ka-line-strong) !important; color: var(--ka-ink) !important; } [data-ka-theme="soft"] .dash-btn-ghost:hover { border-color: var(--ka-accent) !important; color: var(--ka-accent-ink) !important; } [data-ka-theme="soft"] .form-control:focus { border-color: var(--ka-accent) !important; box-shadow: 0 0 0 3px rgba(232, 162, 122, 0.2) !important; } [data-ka-theme="soft"] .ka-search-kbd kbd { background: #fffaf6; border-color: var(--ka-line-strong); color: var(--ka-muted); } [data-ka-theme="soft"] .ka-notice-badge.is-done, [data-ka-theme="soft"] .ka-customer-list-badge.is-contract { background: #e8f6ef; border-color: #b7e4cf; color: var(--ka-success); } [data-ka-theme="soft"] .text-primary { color: var(--ka-accent-strong) !important; } [data-ka-theme="soft"] .bg-primary, [data-ka-theme="soft"] .bg-success { background-color: var(--ka-accent-strong) !important; } [data-ka-theme="soft"] .badge-success, [data-ka-theme="soft"] .badge-dark, [data-ka-theme="soft"] .badge-primary, [data-ka-theme="soft"] .badge-info, [data-ka-theme="soft"] .badge-secondary, [data-ka-theme="soft"] .badge-fortnox, [data-ka-theme="soft"] .badge-contracts { background-color: var(--ka-accent-strong) !important; color: #fff !important; } [data-ka-theme="soft"] .btn-dark, [data-ka-theme="soft"] .btn-dark:hover, [data-ka-theme="soft"] .btn-dark:focus, [data-ka-theme="soft"] .btn-dark:not(:disabled):not(.disabled):active, [data-ka-theme="soft"] .show > .btn-dark.dropdown-toggle { background-color: var(--ka-accent-strong) !important; border-color: var(--ka-accent-strong) !important; color: #fff !important; box-shadow: none !important; } /* Customer detail — soft accents instead of charcoal leftovers */ [data-ka-theme="soft"] .ka-back-btn, [data-ka-theme="soft"] .ka-back-btn:hover { background: var(--ka-accent-strong) !important; color: #fff !important; } [data-ka-theme="soft"] .ka-sales-stat { background: #fffaf6; border-color: var(--ka-line); } [data-ka-theme="soft"] .ka-sales-stat--year { background: linear-gradient(145deg, #e8a27a 0%, #d97757 100%); border-color: transparent; box-shadow: 0 10px 24px rgba(217, 119, 87, 0.24); } [data-ka-theme="soft"] .ka-sales-stat--year::after { background: rgba(255, 255, 255, 0.12); } [data-ka-theme="soft"] .ka-sales-badge { background: rgba(255, 255, 255, 0.28); color: #fff; border: 0; box-shadow: none; } [data-ka-theme="soft"] .ka-sales-stat--year .ka-sales-label { color: rgba(255, 255, 255, 0.78); } [data-ka-theme="soft"] .ka-sales-stat--year .ka-sales-unit { color: rgba(255, 255, 255, 0.68); } [data-ka-theme="soft"] .ka-customer-avatar, [data-ka-theme="soft"] .ka-contact-avatar { background: var(--ka-accent-strong); color: #fff; } [data-ka-theme="soft"] .ka-meta-item { background: #fffaf6; border-color: var(--ka-line); } [data-ka-theme="soft"] .ka-contract-chip, [data-ka-theme="soft"] .ka-contract-chip:hover:not(:disabled) { background: var(--ka-accent-strong); border-color: var(--ka-accent-strong); color: #fff; } [data-ka-theme="soft"] .ka-contract-team-box, [data-ka-theme="soft"] .ka-contract-notes, [data-ka-theme="soft"] .ka-contract-logs { background: #fffaf6; border-color: var(--ka-line); } [data-ka-theme="soft"] .ka-contract-status.is-active { background: #e8f6ef; color: var(--ka-success); } [data-ka-theme="soft"] .ka-contract-status.is-team { background: var(--ka-accent-soft); color: var(--ka-accent-ink); } [data-ka-theme="soft"] .ka-contract-team-hint { color: var(--ka-accent-strong); } [data-ka-theme="soft"] .ka-contract-logs-count { background: var(--ka-accent-strong); color: #fff; } [data-ka-theme="soft"] .ka-contact-row:hover { background: #fffaf6; } [data-ka-theme="soft"] .ka-contact-role { background: var(--ka-accent-soft); border-color: #f0d8c6; color: var(--ka-accent-ink); } /* Theme switcher control */ .ka-theme-switch { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; margin-right: 0.35rem; border: 1px solid var(--ka-line); border-radius: 999px; background: #fff; box-shadow: var(--ka-shadow); } .ka-theme-switch-btn { border: 0; background: transparent; color: var(--ka-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; font-family: inherit; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .ka-theme-switch-btn.is-active { background: #111827; color: #fff; } [data-ka-theme="soft"] .ka-alerts-icon.is-success { background: #3d8b6e; } [data-ka-theme="soft"] .ka-alerts-icon.is-warn { background: #d97757; } [data-ka-theme="soft"] .ka-alerts-icon.is-info { background: #a67c52; } [data-ka-theme="soft"] .ka-alerts-icon.is-muted { background: #a8a29e; } [data-ka-theme="soft"] .ka-alerts-footer:hover { background: #fce8dc; color: var(--ka-accent-ink) !important; } [data-ka-theme="soft"] .ka-theme-switch-btn.is-active { background: var(--ka-accent-strong); color: #fff; } @media (max-width: 575.98px) { .ka-theme-switch { margin-right: 0.15rem; } .ka-theme-switch-btn { padding: 0.3rem 0.5rem; font-size: 0.65rem; } }