/* ConnexiFi Theme Framework v18 One active theme only: Visual/theme layer only. No route/API/workflow logic. */ :root, html[data-cx-theme="connexifi-dark"] { color-scheme: dark; --cx-bg: #06111f; --cx-bg-2: #081827; --cx-bg-3: #0b1f33; --cx-surface: rgba(12, 27, 46, 0.96); --cx-surface-2: rgba(15, 36, 61, 0.96); --cx-surface-3: rgba(18, 45, 76, 0.94); --cx-sidebar: rgba(5, 15, 28, 0.98); --cx-header: rgba(7, 19, 34, 0.92); --cx-border: rgba(148, 163, 184, 0.18); --cx-border-strong: rgba(148, 163, 184, 0.32); --cx-text: #e5eefb; --cx-text-strong: #f8fafc; --cx-muted: #94a3b8; --cx-subtle: #64748b; --cx-primary: #38bdf8; --cx-primary-strong: #0ea5e9; --cx-primary-soft: rgba(56, 189, 248, 0.16); --cx-success: #22c55e; --cx-warning: #f59e0b; --cx-danger: #ef4444; --cx-info: #38bdf8; --cx-radius: 16px; --cx-radius-sm: 10px; --cx-radius-lg: 24px; --cx-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.20); --cx-shadow: 0 22px 70px rgba(0, 0, 0, 0.34); --cx-blur: 10px; --cx-glow: 0 0 0 rgba(0,0,0,0); --cx-input-bg: rgba(15, 23, 42, 0.70); --cx-input-border: rgba(148, 163, 184, 0.28); --cx-table-head: rgba(15, 23, 42, 0.92); --cx-table-row-hover: rgba(148, 163, 184, 0.07); --cx-nav-active: rgba(56, 189, 248, 0.16); --cx-nav-hover: rgba(148, 163, 184, 0.10); } html[data-cx-theme="liquid-glass"] { color-scheme: dark; --cx-bg: #061220; --cx-bg-2: #0a1c31; --cx-bg-3: #102d4a; --cx-surface: rgba(255, 255, 255, 0.105); --cx-surface-2: rgba(255, 255, 255, 0.145); --cx-surface-3: rgba(255, 255, 255, 0.18); --cx-sidebar: rgba(5, 18, 34, 0.58); --cx-header: rgba(255, 255, 255, 0.10); --cx-border: rgba(255, 255, 255, 0.20); --cx-border-strong: rgba(255, 255, 255, 0.38); --cx-text: #eef7ff; --cx-text-strong: #ffffff; --cx-muted: #c7d2e5; --cx-subtle: #9fb0c7; --cx-primary: #7dd3fc; --cx-primary-strong: #38bdf8; --cx-primary-soft: rgba(125, 211, 252, 0.22); --cx-success: #4ade80; --cx-warning: #fbbf24; --cx-danger: #fb7185; --cx-info: #7dd3fc; --cx-radius: 22px; --cx-radius-sm: 14px; --cx-radius-lg: 30px; --cx-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.26); --cx-shadow: 0 28px 90px rgba(0, 0, 0, 0.42); --cx-blur: 24px; --cx-glow: 0 0 44px rgba(125, 211, 252, 0.13); --cx-input-bg: rgba(255, 255, 255, 0.10); --cx-input-border: rgba(255, 255, 255, 0.22); --cx-table-head: rgba(255, 255, 255, 0.12); --cx-table-row-hover: rgba(255, 255, 255, 0.08); --cx-nav-active: rgba(125, 211, 252, 0.22); --cx-nav-hover: rgba(255, 255, 255, 0.12); } html[data-cx-theme="executive-slate"] { color-scheme: dark; --cx-bg: #0a0f1a; --cx-bg-2: #111827; --cx-bg-3: #1f2937; --cx-surface: rgba(17, 24, 39, 0.96); --cx-surface-2: rgba(31, 41, 55, 0.96); --cx-surface-3: rgba(51, 65, 85, 0.92); --cx-sidebar: rgba(8, 13, 23, 0.98); --cx-header: rgba(17, 24, 39, 0.94); --cx-border: rgba(203, 213, 225, 0.16); --cx-border-strong: rgba(203, 213, 225, 0.30); --cx-text: #e2e8f0; --cx-text-strong: #f8fafc; --cx-muted: #aab6c5; --cx-subtle: #7b8798; --cx-primary: #cbd5e1; --cx-primary-strong: #f8fafc; --cx-primary-soft: rgba(203, 213, 225, 0.13); --cx-success: #34d399; --cx-warning: #fbbf24; --cx-danger: #f87171; --cx-info: #93c5fd; --cx-radius: 14px; --cx-radius-sm: 9px; --cx-radius-lg: 20px; --cx-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.24); --cx-shadow: 0 22px 70px rgba(0, 0, 0, 0.42); --cx-blur: 8px; --cx-glow: none; --cx-input-bg: rgba(15, 23, 42, 0.82); --cx-input-border: rgba(203, 213, 225, 0.22); --cx-table-head: rgba(15, 23, 42, 0.96); --cx-table-row-hover: rgba(203, 213, 225, 0.06); --cx-nav-active: rgba(203, 213, 225, 0.13); --cx-nav-hover: rgba(203, 213, 225, 0.08); } html[data-cx-theme="fibre-neon"] { color-scheme: dark; --cx-bg: #020617; --cx-bg-2: #04111f; --cx-bg-3: #071b31; --cx-surface: rgba(3, 18, 33, 0.94); --cx-surface-2: rgba(5, 31, 55, 0.94); --cx-surface-3: rgba(8, 47, 73, 0.90); --cx-sidebar: rgba(1, 8, 18, 0.98); --cx-header: rgba(4, 18, 33, 0.94); --cx-border: rgba(45, 212, 191, 0.20); --cx-border-strong: rgba(45, 212, 191, 0.42); --cx-text: #dffdf8; --cx-text-strong: #ffffff; --cx-muted: #8fd9d0; --cx-subtle: #5aa69f; --cx-primary: #2dd4bf; --cx-primary-strong: #14b8a6; --cx-primary-soft: rgba(45, 212, 191, 0.16); --cx-success: #22c55e; --cx-warning: #eab308; --cx-danger: #f43f5e; --cx-info: #22d3ee; --cx-radius: 16px; --cx-radius-sm: 10px; --cx-radius-lg: 24px; --cx-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.24); --cx-shadow: 0 22px 70px rgba(0, 0, 0, 0.40); --cx-blur: 12px; --cx-glow: 0 0 38px rgba(45, 212, 191, 0.14); --cx-input-bg: rgba(2, 10, 22, 0.76); --cx-input-border: rgba(45, 212, 191, 0.28); --cx-table-head: rgba(2, 10, 22, 0.95); --cx-table-row-hover: rgba(45, 212, 191, 0.075); --cx-nav-active: rgba(45, 212, 191, 0.16); --cx-nav-hover: rgba(45, 212, 191, 0.09); } html[data-cx-theme="clean-light"] { color-scheme: light; --cx-bg: #f6f8fb; --cx-bg-2: #eef3f8; --cx-bg-3: #e2e8f0; --cx-surface: rgba(255, 255, 255, 0.96); --cx-surface-2: rgba(248, 250, 252, 0.98); --cx-surface-3: rgba(241, 245, 249, 0.96); --cx-sidebar: rgba(255, 255, 255, 0.98); --cx-header: rgba(255, 255, 255, 0.94); --cx-border: rgba(15, 23, 42, 0.12); --cx-border-strong: rgba(15, 23, 42, 0.22); --cx-text: #0f172a; --cx-text-strong: #020617; --cx-muted: #475569; --cx-subtle: #64748b; --cx-primary: #0284c7; --cx-primary-strong: #0369a1; --cx-primary-soft: rgba(2, 132, 199, 0.12); --cx-success: #16a34a; --cx-warning: #d97706; --cx-danger: #dc2626; --cx-info: #0284c7; --cx-radius: 16px; --cx-radius-sm: 10px; --cx-radius-lg: 24px; --cx-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08); --cx-shadow: 0 18px 55px rgba(15, 23, 42, 0.14); --cx-blur: 10px; --cx-glow: none; --cx-input-bg: rgba(255, 255, 255, 0.98); --cx-input-border: rgba(15, 23, 42, 0.16); --cx-table-head: rgba(241, 245, 249, 0.98); --cx-table-row-hover: rgba(2, 132, 199, 0.055); --cx-nav-active: rgba(2, 132, 199, 0.12); --cx-nav-hover: rgba(15, 23, 42, 0.055); } /* Base inheritance */ html[data-cx-theme] { background: var(--cx-bg); } html[data-cx-theme] body { background: radial-gradient(circle at top left, color-mix(in srgb, var(--cx-primary) 16%, transparent), transparent 34rem), radial-gradient(circle at top right, color-mix(in srgb, var(--cx-success) 10%, transparent), transparent 30rem), linear-gradient(135deg, var(--cx-bg), var(--cx-bg-2) 48%, var(--cx-bg)); color: var(--cx-text); transition: background 220ms ease, color 220ms ease; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html[data-cx-theme] main, html[data-cx-theme] .main, html[data-cx-theme] .content, html[data-cx-theme] .content-area, html[data-cx-theme] .page, html[data-cx-theme] .dashboard, html[data-cx-theme] .dashboard-shell, html[data-cx-theme] .portal-main, html[data-cx-theme] .intranet-main, html[data-cx-theme] .studio-main, html[data-cx-theme] .workflow-main { color: var(--cx-text); } /* Surfaces */ html[data-cx-theme] .card, html[data-cx-theme] .panel, html[data-cx-theme] .widget, html[data-cx-theme] .box, html[data-cx-theme] .tile, html[data-cx-theme] .metric-card, html[data-cx-theme] .stat-card, html[data-cx-theme] .summary-card, html[data-cx-theme] .workflow-card, html[data-cx-theme] .proposal-card, html[data-cx-theme] .order-card, html[data-cx-theme] .project-card, html[data-cx-theme] .service-card, html[data-cx-theme] .reseller-card, html[data-cx-theme] .feasibility-card, html[data-cx-theme] .source-card, html[data-cx-theme] .result-card, html[data-cx-theme] [class*="Card"], html[data-cx-theme] [class*="Panel"] { background: var(--cx-surface); color: var(--cx-text); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow-soft), var(--cx-glow); backdrop-filter: blur(var(--cx-blur)); -webkit-backdrop-filter: blur(var(--cx-blur)); transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 160ms ease; } html[data-cx-theme] .card:hover, html[data-cx-theme] .panel:hover, html[data-cx-theme] .workflow-card:hover, html[data-cx-theme] .proposal-card:hover, html[data-cx-theme] .order-card:hover, html[data-cx-theme] .project-card:hover, html[data-cx-theme] .service-card:hover, html[data-cx-theme] .reseller-card:hover, html[data-cx-theme] .feasibility-card:hover, html[data-cx-theme] .source-card:hover, html[data-cx-theme] .result-card:hover { border-color: var(--cx-border-strong); box-shadow: var(--cx-shadow), var(--cx-glow); } /* Page headers */ html[data-cx-theme] .page-header, html[data-cx-theme] .header-card, html[data-cx-theme] .hero, html[data-cx-theme] .toolbar, html[data-cx-theme] .action-bar { background: var(--cx-header); color: var(--cx-text); border: 1px solid var(--cx-border); border-radius: var(--cx-radius); box-shadow: var(--cx-shadow-soft); backdrop-filter: blur(var(--cx-blur)); -webkit-backdrop-filter: blur(var(--cx-blur)); } /* Navigation */ html[data-cx-theme] aside, html[data-cx-theme] .sidebar, html[data-cx-theme] .side-nav, html[data-cx-theme] .nav-panel { background: var(--cx-sidebar); color: var(--cx-text); border-color: var(--cx-border); backdrop-filter: blur(var(--cx-blur)); -webkit-backdrop-filter: blur(var(--cx-blur)); } html[data-cx-theme] nav a, html[data-cx-theme] .sidebar a, html[data-cx-theme] .side-nav a, html[data-cx-theme] .nav-panel a { color: var(--cx-muted); border-radius: 12px; } html[data-cx-theme] nav a:hover, html[data-cx-theme] .sidebar a:hover, html[data-cx-theme] .side-nav a:hover, html[data-cx-theme] .nav-panel a:hover { color: var(--cx-text-strong); background: var(--cx-nav-hover); } html[data-cx-theme] nav a.active, html[data-cx-theme] .sidebar a.active, html[data-cx-theme] .side-nav a.active, html[data-cx-theme] .nav-panel a.active, html[data-cx-theme] nav a[aria-current="page"], html[data-cx-theme] .sidebar a[aria-current="page"], html[data-cx-theme] .side-nav a[aria-current="page"] { color: var(--cx-text-strong); background: var(--cx-nav-active); } /* Typography */ html[data-cx-theme] h1, html[data-cx-theme] h2, html[data-cx-theme] h3, html[data-cx-theme] h4, html[data-cx-theme] h5, html[data-cx-theme] h6 { color: var(--cx-text-strong); letter-spacing: -0.025em; } html[data-cx-theme] p, html[data-cx-theme] small, html[data-cx-theme] .muted, html[data-cx-theme] .subtle, html[data-cx-theme] .description, html[data-cx-theme] .help-text { color: var(--cx-muted); } html[data-cx-theme] a { color: var(--cx-primary); } html[data-cx-theme] a:hover { color: var(--cx-primary-strong); } /* Forms */ html[data-cx-theme] input, html[data-cx-theme] select, html[data-cx-theme] textarea { background: var(--cx-input-bg); color: var(--cx-text); border: 1px solid var(--cx-input-border); border-radius: var(--cx-radius-sm); box-shadow: none; } html[data-cx-theme] input::placeholder, html[data-cx-theme] textarea::placeholder { color: var(--cx-subtle); } html[data-cx-theme] input:focus, html[data-cx-theme] select:focus, html[data-cx-theme] textarea:focus { outline: none; border-color: var(--cx-primary); box-shadow: 0 0 0 3px var(--cx-primary-soft); } html[data-cx-theme] label { color: var(--cx-text-strong); font-weight: 700; } html[data-cx-theme] fieldset { border-color: var(--cx-border); border-radius: var(--cx-radius); } /* Buttons */ html[data-cx-theme] button, html[data-cx-theme] .button, html[data-cx-theme] .btn, html[data-cx-theme] a.button, html[data-cx-theme] a.btn, html[data-cx-theme] [role="button"], html[data-cx-theme] input[type="submit"] { border-radius: 999px; border: 1px solid var(--cx-border); font-weight: 800; letter-spacing: -0.01em; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease; } html[data-cx-theme] button:hover, html[data-cx-theme] .button:hover, html[data-cx-theme] .btn:hover, html[data-cx-theme] a.button:hover, html[data-cx-theme] a.btn:hover, html[data-cx-theme] [role="button"]:hover, html[data-cx-theme] input[type="submit"]:hover { transform: translateY(-1px); box-shadow: var(--cx-shadow-soft); } html[data-cx-theme] .primary, html[data-cx-theme] .btn-primary, html[data-cx-theme] button.primary, html[data-cx-theme] button[type="submit"], html[data-cx-theme] input[type="submit"] { background: linear-gradient(135deg, var(--cx-primary), var(--cx-primary-strong)); color: #ffffff; border-color: color-mix(in srgb, var(--cx-primary) 70%, #ffffff 10%); } /* Tables */ html[data-cx-theme] table { border-collapse: separate; border-spacing: 0; color: var(--cx-text); } html[data-cx-theme] thead th { background: var(--cx-table-head); color: var(--cx-muted); border-bottom: 1px solid var(--cx-border); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; } html[data-cx-theme] tbody td { border-bottom: 1px solid var(--cx-border); } html[data-cx-theme] tbody tr:hover { background: var(--cx-table-row-hover); } html[data-cx-theme] .table-wrap, html[data-cx-theme] .table-container, html[data-cx-theme] .data-table-wrap, html[data-cx-theme] .overflow-table { border: 1px solid var(--cx-border); border-radius: var(--cx-radius); overflow: auto; box-shadow: var(--cx-shadow-soft); } /* Badges / chips */ html[data-cx-theme] .badge, html[data-cx-theme] .status, html[data-cx-theme] .tag, html[data-cx-theme] .chip, html[data-cx-theme] .pill, html[data-cx-theme] .label, html[data-cx-theme] [class*="badge"], html[data-cx-theme] [class*="Badge"], html[data-cx-theme] [class*="status"], html[data-cx-theme] [class*="Status"] { border-radius: 999px; border: 1px solid var(--cx-border); background: var(--cx-primary-soft); color: var(--cx-text-strong); font-weight: 800; } /* Alerts */ html[data-cx-theme] .alert, html[data-cx-theme] .notice, html[data-cx-theme] .toast, html[data-cx-theme] .flash, html[data-cx-theme] .message { border-radius: var(--cx-radius-sm); border: 1px solid var(--cx-border); background: var(--cx-surface-2); color: var(--cx-text); } /* Timeline / updates */ html[data-cx-theme] .timeline, html[data-cx-theme] .project-updates, html[data-cx-theme] .updates, html[data-cx-theme] .activity-feed, html[data-cx-theme] .audit-trail, html[data-cx-theme] .history-list { display: grid; gap: 0.85rem; } html[data-cx-theme] .timeline-item, html[data-cx-theme] .update-item, html[data-cx-theme] .activity-item, html[data-cx-theme] .history-item, html[data-cx-theme] .note-card { background: var(--cx-surface-2); color: var(--cx-text); border: 1px solid var(--cx-border); border-radius: var(--cx-radius-sm); padding: 0.9rem 1rem; } /* Empty states */ html[data-cx-theme] .empty-state, html[data-cx-theme] .no-results, html[data-cx-theme] .blank-state { background: var(--cx-surface); border: 1px dashed var(--cx-border-strong); border-radius: var(--cx-radius); color: var(--cx-muted); padding: 2rem; text-align: center; } /* Theme selector */ .cx-theme-switcher { position: fixed; right: 18px; bottom: 18px; z-index: 99999; display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: var(--cx-surface); border: 1px solid var(--cx-border-strong); border-radius: 999px; box-shadow: var(--cx-shadow); backdrop-filter: blur(var(--cx-blur)); -webkit-backdrop-filter: blur(var(--cx-blur)); } .cx-theme-switcher label { font-size: 12px; font-weight: 800; color: var(--cx-muted); padding-left: 6px; white-space: nowrap; } .cx-theme-switcher select { min-width: 168px; height: 34px; padding: 0 34px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--cx-input-bg); color: var(--cx-text); border: 1px solid var(--cx-input-border); } .cx-theme-switcher button { height: 34px; padding: 0 12px; border-radius: 999px; background: var(--cx-primary-soft); color: var(--cx-text-strong); border: 1px solid var(--cx-border); font-size: 13px; font-weight: 900; } .cx-theme-switcher button:hover { background: var(--cx-nav-hover); } /* Mobile */ @media (max-width: 760px) { .cx-theme-switcher { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; } .cx-theme-switcher select { min-width: 0; flex: 1; } html[data-cx-theme] table { min-width: 760px; } } /* Print/export */ @media print { .cx-theme-switcher { display: none !important; } html[data-cx-theme] body { background: #ffffff !important; color: #111827 !important; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html[data-cx-theme] *, html[data-cx-theme] *::before, html[data-cx-theme] *::after { transition: none !important; animation: none !important; } }