/** * Recon theme — inspired by revenue-reconciliation (finance dashboard). * Test variants: html.theme-recon-dark | html.theme-recon-light * Disable standard html.dark / html.light when a recon theme is active. */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"); /* ========== Shared recon tokens ========== */ html.theme-recon-dark, html.theme-recon-light { --recon-accent: #13b5ea; --recon-accent-2: #ff6b35; --recon-accent-deep: #0891b2; --recon-positive: #22c55e; --recon-negative: #ef4444; --recon-warning: #f59e0b; --recon-radius: 12px; --recon-radius-lg: 16px; --recon-font: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, monospace; } /* ========== Recon Dark ========== */ html.theme-recon-dark { color-scheme: dark; --recon-bg: #0b1220; --recon-bg-elevated: #0f172a; --recon-surface: #1e293b; --recon-surface-2: #334155; --recon-border: rgba(255, 255, 255, 0.08); --recon-border-strong: rgba(255, 255, 255, 0.14); --recon-text: #f8fafc; --recon-text-muted: #94a3b8; --recon-label: #64748b; --recon-input-bg: rgba(15, 23, 42, 0.85); --recon-card-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%); --recon-header-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); --recon-shell-gradient: linear-gradient(180deg, #0b1220 0%, #0f172a 40%, #0b1220 100%); /* Remap Unfold primary (purple) → recon cyan for Tailwind utilities */ --color-primary-50: rgba(19, 181, 234, 0.12); --color-primary-100: rgba(19, 181, 234, 0.2); --color-primary-200: rgba(19, 181, 234, 0.35); --color-primary-300: #67d4f7; --color-primary-400: #3cc9f0; --color-primary-500: #13b5ea; --color-primary-600: #13b5ea; --color-primary-700: #0891b2; --color-primary-800: #0e7490; --color-primary-900: #155e75; --color-primary-950: rgba(19, 181, 234, 0.08); } html.theme-recon-dark, html.theme-recon-light { /* Tailwind layout utilities on */ background: var(--recon-shell-gradient) !important; } html.theme-recon-dark body, html.theme-recon-dark .ope-shell { font-family: var(--recon-font); background: var(--recon-shell-gradient); color: var(--recon-text-muted); } html.theme-recon-dark .ope-shell__main, html.theme-recon-dark main { background: transparent; } html.theme-recon-dark .ope-shell__sidebar { background: var(--recon-bg-elevated) !important; border-right-color: var(--recon-border-strong) !important; } html.theme-recon-dark .ope-shell__sidebar .border-b { border-color: var(--recon-border) !important; } html.theme-recon-dark .ope-shell__sidebar a { color: var(--recon-text-muted) !important; } html.theme-recon-dark .ope-shell__sidebar a:hover { background: rgba(19, 181, 234, 0.1) !important; color: var(--recon-accent) !important; } html.theme-recon-dark .ope-shell__sidebar a.bg-primary-50, html.theme-recon-dark .ope-shell__sidebar a[class*="bg-primary"], html.theme-recon-dark .ope-shell__sidebar a[class*="primary-50"] { background: rgba(19, 181, 234, 0.12) !important; color: var(--recon-accent) !important; box-shadow: inset 2px 0 0 var(--recon-accent); } html.theme-recon-dark .ope-shell__sidebar p { color: var(--recon-label) !important; } html.theme-recon-dark header.border-b { background: var(--recon-bg-elevated) !important; border-bottom-color: var(--recon-border) !important; } html.theme-recon-dark header h1 { color: var(--recon-text) !important; } html.theme-recon-dark main { color: var(--recon-text-muted); } html.theme-recon-dark .card, html.theme-recon-dark .ui-surface { background: var(--recon-card-bg) !important; border: 1px solid var(--recon-border) !important; border-radius: var(--recon-radius) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important; color: var(--recon-text-muted); position: relative; overflow: hidden; } html.theme-recon-dark .card::before, html.theme-recon-dark .ui-surface::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--recon-accent), var(--recon-accent-2)); opacity: 0.85; } html.theme-recon-dark .card-header { background: rgba(15, 23, 42, 0.5) !important; border-bottom-color: var(--recon-border) !important; color: var(--recon-text) !important; } html.theme-recon-dark .card-header h5, html.theme-recon-dark .card-header h4 { color: var(--recon-text) !important; font-weight: 600; letter-spacing: -0.02em; } html.theme-recon-dark .card-body, html.theme-recon-dark .card-block { color: var(--recon-text-muted); } html.theme-recon-dark .form-control, html.theme-recon-dark .input-unfold, html.theme-recon-dark select.form-control { background: var(--recon-input-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-text) !important; border-radius: 8px !important; font-family: var(--recon-font); } html.theme-recon-dark .form-control:focus { border-color: var(--recon-accent) !important; box-shadow: 0 0 0 3px rgba(19, 181, 234, 0.15) !important; } html.theme-recon-dark .input-group-text { background: var(--recon-input-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-label) !important; font-family: var(--recon-font); font-weight: 600; } html.theme-recon-dark .input-group > .input-group-text:first-child + .form-control, html.theme-recon-dark .input-group-prepend + .form-control { border-left-color: var(--recon-border) !important; } html.theme-recon-dark .input-group > .form-control:not(:last-child) + .input-group-text, html.theme-recon-dark .input-group-append .input-group-text { border-right-color: var(--recon-border) !important; } html.theme-recon-dark .form-group label, html.theme-recon-dark .form-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--recon-label) !important; } html.theme-recon-dark .form-check-label { color: var(--recon-text-muted) !important; font-size: 0.875rem; text-transform: none; letter-spacing: normal; } html.theme-recon-dark .form-select { background: var(--recon-input-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-text) !important; border-radius: 8px !important; } html.theme-recon-dark .alert-info { background: color-mix(in oklab, var(--recon-accent) 14%, var(--recon-surface)) !important; border-color: var(--recon-border-strong) !important; color: var(--recon-text) !important; } html.theme-recon-dark .btn-primary { background: linear-gradient(135deg, var(--recon-accent) 0%, var(--recon-accent-deep) 100%) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 8px rgba(19, 181, 234, 0.35); font-weight: 600; } html.theme-recon-dark .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(19, 181, 234, 0.45); } html.theme-recon-dark .btn-secondary, html.theme-recon-dark .btn-light { background: var(--recon-input-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-text-muted) !important; } html.theme-recon-dark .table th { background: rgba(15, 23, 42, 0.8) !important; color: var(--recon-label) !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } html.theme-recon-dark .table td { color: var(--recon-text-muted) !important; border-color: var(--recon-border) !important; } html.theme-recon-dark .table-hover tbody tr:hover { background: rgba(19, 181, 234, 0.06) !important; } html.theme-recon-dark .page_header h2, html.theme-recon-dark h2.text-xl { color: var(--recon-text) !important; letter-spacing: -0.025em; } html.theme-recon-dark .breadcrumbs a { color: var(--recon-accent); } html.theme-recon-dark .alert-primary { background: rgba(19, 181, 234, 0.12) !important; border-color: rgba(19, 181, 234, 0.35) !important; color: var(--recon-accent) !important; } html.theme-recon-dark details.ope-details > summary.card-header { background: rgba(15, 23, 42, 0.5) !important; } /* Page header component */ html.theme-recon-dark .mb-6 h2 { color: var(--recon-text) !important; } /* ========== Recon Light ========== */ html.theme-recon-light { color-scheme: light; --recon-bg: #e8eef4; --recon-bg-elevated: #f8fafc; --recon-surface: #ffffff; --recon-surface-2: #f1f5f9; --recon-border: rgba(15, 23, 42, 0.1); --recon-border-strong: rgba(15, 23, 42, 0.16); --recon-text: #0f172a; --recon-text-muted: #475569; --recon-label: #64748b; --recon-input-bg: #ffffff; --recon-card-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); --recon-header-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%); --recon-shell-gradient: linear-gradient(180deg, #e8eef4 0%, #f1f5f9 50%, #e8eef4 100%); --color-primary-600: #0891b2; --color-primary-700: #0e7490; --color-primary-500: #13b5ea; } html.theme-recon-light body, html.theme-recon-light .ope-shell { font-family: var(--recon-font); background: var(--recon-shell-gradient); color: var(--recon-text-muted); } html.theme-recon-light .ope-shell__main, html.theme-recon-light main { background: transparent; } html.theme-recon-light .ope-shell__sidebar { background: var(--recon-surface) !important; border-right-color: var(--recon-border-strong) !important; box-shadow: 2px 0 12px rgba(15, 23, 42, 0.04); } html.theme-recon-light .ope-shell__sidebar a { color: var(--recon-text-muted) !important; } html.theme-recon-light .ope-shell__sidebar a:hover { background: rgba(8, 145, 178, 0.08) !important; color: var(--recon-accent-deep) !important; } html.theme-recon-light .ope-shell__sidebar a.bg-primary-50, html.theme-recon-light .ope-shell__sidebar a[class*="bg-primary"] { background: rgba(19, 181, 234, 0.12) !important; color: var(--recon-accent-deep) !important; } html.theme-recon-light header.border-b { background: var(--recon-surface) !important; border-bottom-color: var(--recon-border) !important; } html.theme-recon-light header h1 { color: var(--recon-text) !important; } html.theme-recon-light .card, html.theme-recon-light .ui-surface { background: var(--recon-card-bg) !important; border: 1px solid var(--recon-border) !important; border-radius: var(--recon-radius) !important; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important; position: relative; overflow: hidden; } html.theme-recon-light .card::before, html.theme-recon-light .ui-surface::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--recon-accent), var(--recon-accent-2)); } html.theme-recon-light .card-header { background: var(--recon-surface-2) !important; border-bottom-color: var(--recon-border) !important; color: var(--recon-text) !important; } html.theme-recon-light .card-body { color: var(--recon-text-muted); } html.theme-recon-light .form-control, html.theme-recon-light select.form-control { background: var(--recon-input-bg) !important; border: 1px solid var(--recon-border-strong) !important; color: var(--recon-text) !important; font-family: var(--recon-font); } html.theme-recon-light .form-control:focus { border-color: var(--recon-accent) !important; box-shadow: 0 0 0 3px rgba(19, 181, 234, 0.12) !important; } html.theme-recon-light .input-group-text { background: var(--recon-surface-2, var(--recon-input-bg)) !important; border: 1px solid var(--recon-border-strong) !important; color: var(--recon-label) !important; font-family: var(--recon-font); font-weight: 600; } html.theme-recon-light .form-group label, html.theme-recon-light .form-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--recon-label) !important; } html.theme-recon-light .btn-primary { background: linear-gradient(135deg, var(--recon-accent) 0%, var(--recon-accent-deep) 100%) !important; border: none !important; color: #fff !important; box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25); } html.theme-recon-light .btn-secondary { background: var(--recon-surface-2) !important; border: 1px solid var(--recon-border-strong) !important; color: var(--recon-text-muted) !important; } html.theme-recon-light .table th { background: var(--recon-surface-2) !important; color: var(--recon-label) !important; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } html.theme-recon-light .table td { border-color: var(--recon-border) !important; color: var(--recon-text-muted) !important; } html.theme-recon-light .table-hover tbody tr:hover { background: rgba(19, 181, 234, 0.05) !important; } html.theme-recon-light .mb-6 h2 { color: var(--recon-text) !important; } /* Header dropdowns (theme + user menu) */ .header-dropdown > summary { list-style: none; } .header-dropdown > summary::-webkit-details-marker { display: none; } .header-dropdown__trigger { color: var(--color-base-600, #475569); background: transparent; border-color: var(--color-base-200, #e2e8f0); } .header-dropdown__trigger:hover { background: var(--color-base-100, #f1f5f9); } html.dark .header-dropdown__trigger { color: var(--color-base-300, #cbd5e1); border-color: var(--color-base-700, #334155); } html.dark .header-dropdown__trigger:hover { background: var(--color-base-800, #1e293b); } .header-dropdown__chevron { opacity: 0.5; } .header-dropdown__menu { border-color: var(--color-base-200, #e2e8f0); background: var(--color-white, #fff); } html.dark .header-dropdown__menu { border-color: var(--color-base-700, #334155); background: var(--color-base-900, #0f172a); } .header-dropdown__label { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-base-500, #64748b); } .header-dropdown__label--divider { border-color: var(--color-base-200, #e2e8f0); } html.dark .header-dropdown__label--divider { border-color: var(--color-base-700, #334155); } .header-dropdown__option { display: flex; width: 100%; align-items: center; gap: 0.5rem; border: none; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; color: var(--color-base-800, #1e293b); background: transparent; box-sizing: border-box; } .header-dropdown li form { margin: 0; } .header-dropdown__option:hover { background: var(--color-base-100, #f1f5f9); } html.dark .header-dropdown__option { color: var(--color-base-100, #f1f5f9); } html.dark .header-dropdown__option:hover { background: var(--color-base-800, #1e293b); } .header-dropdown__option .theme-active-check { color: var(--color-primary-600, #7c3aed); } /* Theme menu on recon themes */ html.theme-recon-dark .header-dropdown__trigger, html.theme-recon-light .header-dropdown__trigger { background: var(--recon-input-bg); border-color: var(--recon-border) !important; color: var(--recon-text-muted) !important; } html.theme-recon-dark .header-dropdown__trigger:hover, html.theme-recon-light .header-dropdown__trigger:hover { border-color: var(--recon-accent) !important; color: var(--recon-text) !important; } html.theme-recon-dark .header-dropdown__menu, html.theme-recon-light .header-dropdown__menu { background: var(--recon-bg-elevated, #0f172a) !important; border-color: var(--recon-border) !important; font-family: var(--recon-font); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } html.theme-recon-light .header-dropdown__menu { background: var(--recon-surface, #fff) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } html.theme-recon-dark .header-dropdown__label, html.theme-recon-light .header-dropdown__label { color: var(--recon-label, #64748b) !important; } html.theme-recon-dark .header-dropdown__label--divider, html.theme-recon-light .header-dropdown__label--divider { border-color: var(--recon-border) !important; } html.theme-recon-dark .header-dropdown__option, html.theme-recon-light .header-dropdown__option { color: var(--recon-text, #f8fafc) !important; } html.theme-recon-light .header-dropdown__option { color: var(--recon-text, #0f172a) !important; } html.theme-recon-dark .header-dropdown__option:hover, html.theme-recon-light .header-dropdown__option:hover { background: rgba(19, 181, 234, 0.1) !important; color: var(--recon-text) !important; } html.theme-recon-dark .header-dropdown__option .theme-active-check, html.theme-recon-light .header-dropdown__option .theme-active-check { color: var(--recon-accent, #13b5ea) !important; } /* ========== Tailwind / migrated pages (dashboard, links, etc.) ========== */ html.theme-recon-dark .bg-white, html.theme-recon-dark .bg-white\/95 { background: var(--recon-card-bg) !important; } html.theme-recon-dark main .rounded-xl.border.bg-white, html.theme-recon-dark section.rounded-xl.bg-white { border-color: var(--recon-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important; position: relative; overflow: hidden; } html.theme-recon-dark main .rounded-xl.border.bg-white::before, html.theme-recon-dark section.rounded-xl.bg-white::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--recon-accent), var(--recon-accent-2)); opacity: 0.9; z-index: 1; } html.theme-recon-dark .border-base-200, html.theme-recon-dark .divide-base-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--recon-border) !important; } html.theme-recon-dark .bg-base-50 { background-color: rgba(15, 23, 42, 0.65) !important; } html.theme-recon-dark .bg-base-200 { background-color: rgba(51, 65, 85, 0.55) !important; } html.theme-recon-dark .text-base-900, html.theme-recon-dark .text-base-800 { color: var(--recon-text) !important; } html.theme-recon-dark .text-base-100, html.theme-recon-dark .text-base-200 { color: var(--recon-text) !important; } html.theme-recon-dark .text-base-600, html.theme-recon-dark .text-base-500, html.theme-recon-dark .text-base-400 { color: var(--recon-text-muted) !important; } html.theme-recon-dark .text-primary-700, html.theme-recon-dark .text-primary-600 { color: var(--recon-accent) !important; } html.theme-recon-dark .text-primary-300, html.theme-recon-dark .text-primary-400 { color: #67d4f7 !important; } html.theme-recon-dark .hover\:text-primary-600:hover, html.theme-recon-dark .hover\:text-primary-200:hover { color: #3cc9f0 !important; } html.theme-recon-dark .bg-primary-600, html.theme-recon-dark .bg-primary-500 { background: linear-gradient(90deg, var(--recon-accent), var(--recon-accent-deep)) !important; } html.theme-recon-dark .bg-orange-500 { background: linear-gradient(90deg, var(--recon-accent-2), var(--recon-warning)) !important; } html.theme-recon-dark tbody.bg-white, html.theme-recon-dark section .border-b { background: transparent !important; border-color: var(--recon-border) !important; } html.theme-recon-dark tr.hover\:bg-base-50:hover, html.theme-recon-dark .hover\:bg-base-50:hover { background-color: rgba(19, 181, 234, 0.08) !important; } html.theme-recon-dark .shadow-sm { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; } html.theme-recon-dark .mb-6 h2, html.theme-recon-dark .text-xl.font-semibold { color: var(--recon-text) !important; letter-spacing: -0.02em; } html.theme-recon-dark .mb-6 p.text-sm { color: var(--recon-label) !important; } html.theme-recon-dark input[type="checkbox"] { border-color: var(--recon-border-strong) !important; background-color: var(--recon-input-bg) !important; } /* Native modals (shared ui_dialog component) */ html.theme-recon-dark .ui-dialog__panel { background: var(--recon-card-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-text-muted) !important; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px var(--recon-border) !important; } html.theme-recon-dark .ui-dialog__header { background: rgba(15, 23, 42, 0.5) !important; border-bottom-color: var(--recon-border) !important; } html.theme-recon-dark .ui-dialog__title { color: var(--recon-text) !important; } html.theme-recon-dark .ui-dialog__body, html.theme-recon-dark .ui-dialog__footer { color: var(--recon-text-muted) !important; border-color: var(--recon-border) !important; } html.theme-recon-dark .ui-dialog__close { background: var(--recon-input-bg) !important; border-color: var(--recon-border) !important; color: var(--recon-text-muted) !important; } html.theme-recon-dark .ui-dialog__close:hover { border-color: var(--recon-accent) !important; color: var(--recon-text) !important; } html.theme-recon-light .ui-dialog__panel { background: var(--recon-card-bg) !important; border-color: var(--recon-border) !important; } html.theme-recon-light .ui-dialog__header { background: var(--recon-surface-2) !important; border-bottom-color: var(--recon-border) !important; } html.theme-recon-light .ui-dialog__title { color: var(--recon-text) !important; } /* Dialogs on dashboard */ html.theme-recon-dark .dash-dialog .ui-dialog__panel { background: var(--recon-card-bg) !important; border: 1px solid var(--recon-border) !important; color: var(--recon-text-muted); } html.theme-recon-dark .dash-dialog::backdrop { background: rgba(0, 0, 0, 0.6) !important; } /* Recon light: tailwind surfaces */ html.theme-recon-light .bg-white { background: var(--recon-card-bg) !important; } html.theme-recon-light main .rounded-xl.border.bg-white, html.theme-recon-light section.rounded-xl.bg-white { border-color: var(--recon-border) !important; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important; } html.theme-recon-light .text-base-900 { color: var(--recon-text) !important; }