/* ============================================================ Infowise Data Collection — Main-site wrapper overrides Maps platform light/blue tokens to the Infowise corporate dark graphite (#0f1115) and amber (#f59e0b) design system. Loaded by site-wrapped.php and the authenticated app shell. ============================================================ */ /* ── Global design tokens (also available to ) ── */ :root { --ifp-bg: #0f1115; --ifp-elevated: #181b21; --ifp-light: #22262e; --ifp-lighter: #2c313c; --ifp-text: #eef0f5; --ifp-text-secondary: #9ba3b0; --ifp-text-muted: #5f6877; --ifp-border: rgba(255, 255, 255, 0.08); --ifp-primary: #f59e0b; --ifp-primary-dark: #d97706; --ifp-primary-light: rgba(245, 158, 11, 0.16); --ifp-secondary: #2dd4bf; --ifp-secondary-light: rgba(45, 212, 191, 0.12); } /* ── Design tokens scoped to platform pages ── */ .ifp-theme, .public-layout { --ifp-bg: #0f1115; --ifp-elevated: #181b21; --ifp-light: #22262e; --ifp-lighter: #2c313c; --ifp-text: #eef0f5; --ifp-text-secondary: #9ba3b0; --ifp-text-muted: #5f6877; --ifp-border: rgba(255, 255, 255, 0.08); --ifp-primary: #f59e0b; --ifp-primary-dark: #d97706; --ifp-primary-light: rgba(245, 158, 11, 0.16); --ifp-secondary: #2dd4bf; --ifp-secondary-light: rgba(45, 212, 191, 0.12); } /* Restore the main-site dark background (platform app.css makes it light) */ body { background: var(--ifp-bg) !important; color: var(--ifp-text) !important; } /* ── Polished custom scrollbars (no default grey/out-of-order bars) ── */ html::-webkit-scrollbar, html::-webkit-scrollbar-corner, .ifp-theme::-webkit-scrollbar, .ifp-theme ::-webkit-scrollbar, .ifp-theme::-webkit-scrollbar-corner, .ifp-theme ::-webkit-scrollbar-corner { width: 10px; height: 10px; } html::-webkit-scrollbar-track, .ifp-theme::-webkit-scrollbar-track, .ifp-theme ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 8px; } html::-webkit-scrollbar-thumb, .ifp-theme::-webkit-scrollbar-thumb, .ifp-theme ::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.55); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } html::-webkit-scrollbar-thumb:hover, .ifp-theme::-webkit-scrollbar-thumb:hover, .ifp-theme ::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.85); } html, .ifp-theme, .ifp-theme body { scrollbar-width: thin; scrollbar-color: rgba(245, 158, 11, 0.7) rgba(255, 255, 255, 0.06); } /* ── Corporate header / footer fixes on platform pages ── */ .ifp-theme header .navbar { background: transparent; border-bottom-color: transparent; height: 72px; } .ifp-theme footer .footer-content { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: 3rem; margin-bottom: 3rem; max-width: none; } @media (max-width: 992px) { .ifp-theme footer .footer-content { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .ifp-theme footer .footer-content { grid-template-columns: 1fr; gap: 2rem; } } .ifp-theme footer .footer-links { display: block; justify-content: initial; gap: 0; margin: 0; } .ifp-theme footer .footer-links a { color: var(--ifp-text-muted); } .ifp-theme footer .footer-links a:hover { color: var(--ifp-text); } /* Logo ticker */ .ifp-theme .logo-ticker { background: var(--ifp-bg); border-color: var(--ifp-border); } .ifp-theme .logo-ticker h3 { color: var(--ifp-text-muted); } .ifp-theme .ticker-item { color: var(--ifp-text-secondary); opacity: 0.75; } .ifp-theme .ticker-item:hover { opacity: 1; } .ifp-theme .ticker-wrapper::before { background: linear-gradient(90deg, var(--ifp-bg), transparent); } .ifp-theme .ticker-wrapper::after { background: linear-gradient(270deg, var(--ifp-bg), transparent); } /* CTA section */ .ifp-theme .cta-section { background: linear-gradient(135deg, var(--ifp-primary-dark), var(--ifp-primary)); } .ifp-theme .cta-content, .ifp-theme .cta-content h2, .ifp-theme .cta-content p { color: #fff; } .ifp-theme .cta-content .btn { background: #fff; color: var(--ifp-primary-dark); } .ifp-theme .cta-content .btn:hover { background: var(--ifp-bg); color: #fff; } /* ── Pricing page ── */ .ifp-theme .pricing-header h1 { color: var(--ifp-text); } .ifp-theme .pricing-header p { color: var(--ifp-text-secondary); } .ifp-theme .pricing-card .price { color: var(--ifp-text); } .ifp-theme .pricing-card .price span { color: var(--ifp-text-muted); } .ifp-theme .pricing-card .description { color: var(--ifp-text-secondary); } .ifp-theme .pricing-card .price-equivalent { color: var(--ifp-text-muted); } .ifp-theme .pricing-features li.not-included { color: var(--ifp-text-muted); } .ifp-theme .pricing-card .contact-sales { background: var(--ifp-light); color: var(--ifp-text); } .ifp-theme .pricing-page [style*="--gray-50"] { background: var(--ifp-elevated) !important; } .ifp-theme .pricing-page [style*="--gray-50"] h3 { color: var(--ifp-text); } .ifp-theme .pricing-page [style*="--gray-50"] p { color: var(--ifp-text-secondary) !important; } /* ── Layout spacing ── */ .ifp-theme { background: transparent; padding-top: 80px; /* clear fixed corporate header */ min-height: calc(100vh - 260px); } .ifp-theme:has(.hero) { padding-top: 0; /* public hero already clears header */ } /* ── Typography ── */ .ifp-theme h1, .ifp-theme h2, .ifp-theme h3, .ifp-theme h4, .ifp-theme h5, .ifp-theme h6, .ifp-theme .page-header h1, .ifp-theme .section-title, .ifp-theme .hero-title, .ifp-theme .feature-title, .ifp-theme .pricing-title, .ifp-theme .verify-title, .ifp-theme .auth-logo h2 { color: var(--ifp-text); font-family: var(--font-display, 'Barlow Condensed', sans-serif); } .ifp-theme p, .ifp-theme .hero-subtitle, .ifp-theme .section-subtitle, .ifp-theme .feature-desc, .ifp-theme .verify-text { color: var(--ifp-text-secondary); } .ifp-theme .platform-main a:not(.btn):not(.nav-item), .ifp-theme .main-content a:not(.btn):not(.nav-item) { color: var(--ifp-primary); } .ifp-theme .platform-main a:not(.btn):not(.nav-item):hover, .ifp-theme .main-content a:not(.btn):not(.nav-item):hover { color: var(--ifp-primary-dark); } /* ── Auth pages ── */ .ifp-theme .auth-page { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } .ifp-theme .auth-card, .ifp-theme .verify-card { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); color: var(--ifp-text); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .ifp-theme .verify-card { max-width: 520px; width: 100%; padding: 2.5rem; text-align: center; } .ifp-theme .auth-logo i, .ifp-theme .verify-icon { color: var(--ifp-primary); } .ifp-theme .verify-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin: 0 auto 1.5rem; background: var(--ifp-primary-light); } .ifp-theme .auth-footer { color: var(--ifp-text-secondary); } .ifp-theme .verify-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .ifp-theme .verify-alert { padding: 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.9rem; text-align: left; } /* ── Forms ── */ .ifp-theme .form-control, .ifp-theme .admin-form-control, .ifp-theme input[type="text"], .ifp-theme input[type="email"], .ifp-theme input[type="password"], .ifp-theme input[type="number"], .ifp-theme input[type="tel"], .ifp-theme input[type="url"], .ifp-theme input[type="search"], .ifp-theme textarea, .ifp-theme select { background: var(--ifp-light) !important; border: 1px solid var(--ifp-border) !important; color: var(--ifp-text) !important; border-radius: 8px; } .ifp-theme .form-control:focus, .ifp-theme .admin-form-control:focus, .ifp-theme input:focus, .ifp-theme textarea:focus, .ifp-theme select:focus { border-color: var(--ifp-primary) !important; box-shadow: 0 0 0 3px var(--ifp-primary-light) !important; outline: none; } .ifp-theme .form-control::placeholder, .ifp-theme input::placeholder, .ifp-theme textarea::placeholder { color: var(--ifp-text-muted); } .ifp-theme input:-webkit-autofill, .ifp-theme input:-webkit-autofill:hover, .ifp-theme input:-webkit-autofill:focus, .ifp-theme textarea:-webkit-autofill, .ifp-theme textarea:-webkit-autofill:hover, .ifp-theme textarea:-webkit-autofill:focus, .ifp-theme select:-webkit-autofill, .ifp-theme select:-webkit-autofill:hover, .ifp-theme select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--ifp-light) inset !important; -webkit-text-fill-color: var(--ifp-text) !important; transition: background-color 5000s ease-in-out 0s; } .ifp-theme .form-label, .ifp-theme .admin-form-label { color: var(--ifp-text-secondary); } .ifp-theme .form-text, .ifp-theme .form-hint { color: var(--ifp-text-muted); } /* ── Buttons ── */ .ifp-theme .btn-primary, .ifp-theme .admin-btn-primary { background: var(--ifp-primary) !important; border-color: var(--ifp-primary) !important; color: #fff !important; } .ifp-theme .btn-primary:hover, .ifp-theme .admin-btn-primary:hover { background: var(--ifp-primary-dark) !important; border-color: var(--ifp-primary-dark) !important; box-shadow: 0 4px 20px rgba(245, 158, 11, 0.35); } .ifp-theme .btn-secondary, .ifp-theme .admin-btn-secondary { background: var(--ifp-light) !important; border-color: var(--ifp-border) !important; color: var(--ifp-text) !important; } .ifp-theme .btn-outline, .ifp-theme .admin-btn-ghost { background: transparent !important; border-color: var(--ifp-border) !important; color: var(--ifp-text) !important; } .ifp-theme .btn-outline:hover, .ifp-theme .admin-btn-ghost:hover { border-color: var(--ifp-primary) !important; color: var(--ifp-primary) !important; background: var(--ifp-primary-light) !important; } .ifp-theme .btn-danger, .ifp-theme .admin-btn-danger { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; } /* ── Cards ── */ .ifp-theme .card, .ifp-theme .stat-card, .ifp-theme .feature-card, .ifp-theme .feature-card-pub, .ifp-theme .preview-card, .ifp-theme .step-card, .ifp-theme .sector-card, .ifp-theme .testimonial-card, .ifp-theme .pricing-card, .ifp-theme .question-item, .ifp-theme .dashboard-card, .ifp-theme .kpi-card, .ifp-theme .admin-card, .ifp-theme .admin-stat-card { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); color: var(--ifp-text); border-radius: 12px; } .ifp-theme .card-header, .ifp-theme .card-footer, .ifp-theme .admin-card-header, .ifp-theme .admin-card-footer { border-color: var(--ifp-border); color: var(--ifp-text); } .ifp-theme .card-header h3, .ifp-theme .admin-card-header h3 { color: var(--ifp-text); } /* ── Dashboard readability ── */ .ifp-theme .kpi-label, .ifp-theme .kpi-trend, .ifp-theme .dashboard-subtitle { color: var(--ifp-text-secondary); } .ifp-theme .kpi-value, .ifp-theme .activity-title, .ifp-theme .plan-usage-name, .ifp-theme .attention-text, .ifp-theme .attention-empty p { color: var(--ifp-text); } .ifp-theme .activity-meta, .ifp-theme .plan-usage-value, .ifp-theme .text-muted { color: var(--ifp-text-secondary); } .ifp-theme .activity-list li { border-bottom-color: var(--ifp-border); } .ifp-theme .plan-usage-bar-bg { background: rgba(255, 255, 255, 0.12); } /* Stat cards must always be readable on dark cards */ .ifp-theme .stat-label, .ifp-theme .stat-change { color: var(--ifp-text-secondary); } .ifp-theme .stat-value { color: var(--ifp-text); } /* Table row hover: keep text visible, don't flash white */ .ifp-theme .table tr:hover td, .ifp-theme .admin-table tr:hover td { background: var(--ifp-light); color: var(--ifp-text); } .ifp-theme .feature-icon, .ifp-theme .step-icon { background: var(--ifp-primary-light); color: var(--ifp-primary); } /* ── Tables ── */ .ifp-theme .table, .ifp-theme .admin-table { color: var(--ifp-text); } .ifp-theme .table th, .ifp-theme .admin-table th { background: var(--ifp-light); color: var(--ifp-text); border-color: var(--ifp-border); } .ifp-theme .table td, .ifp-theme .admin-table td, .ifp-theme .table tr, .ifp-theme .admin-table tr { border-color: var(--ifp-border); } .ifp-theme .table tbody tr:hover, .ifp-theme .admin-table tbody tr:hover { background: var(--ifp-primary-light); } /* ── Alerts ── */ .ifp-theme .alert, .ifp-theme .admin-alert { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); color: var(--ifp-text); } .ifp-theme .alert-success, .ifp-theme .admin-alert-success { background: rgba(22, 163, 74, 0.12); color: #86efac; border-color: rgba(22, 163, 74, 0.25); } .ifp-theme .alert-error, .ifp-theme .alert-danger, .ifp-theme .admin-alert-error { background: rgba(220, 38, 38, 0.12); color: #fca5a5; border-color: rgba(220, 38, 38, 0.25); } .ifp-theme .alert-warning { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.25); } .ifp-theme .alert-info { background: rgba(8, 145, 178, 0.12); color: #67e8f9; border-color: rgba(8, 145, 178, 0.25); } /* ── Badges ── */ .ifp-theme .badge-ai, .ifp-theme .tier-pro, .ifp-theme .user-avatar, .ifp-theme .ai-usage-fill { background: var(--ifp-primary); } .ifp-theme .status-badge, .ifp-theme .role-badge, .ifp-theme .tier-badge, .ifp-theme .admin-badge { background: var(--ifp-light); color: var(--ifp-text-secondary); border: 1px solid var(--ifp-border); } /* ── Page header ── */ .ifp-theme .page-header, .ifp-theme .admin-page-header, .ifp-theme .dashboard-header { background: var(--ifp-elevated); border-bottom: 1px solid var(--ifp-border); } .ifp-theme .page-header h1, .ifp-theme .dashboard-header h1 { color: var(--ifp-text); } .ifp-theme .dashboard-subtitle, .ifp-theme .page-header p { color: var(--ifp-text-secondary); } /* ── Authenticated app shell (main-site header + sidebar) ── */ .app-wrapped.ifp-theme { display: flex; padding-top: 72px; /* main-site fixed header height */ min-height: auto; } .app-wrapped .sidebar { position: fixed; top: 72px; left: 0; height: calc(100vh - 72px); width: var(--sidebar-width, 260px); background: var(--ifp-bg); border-right: 1px solid var(--ifp-border); z-index: 100; } .ifp-sidebar-logo { align-items: center; gap: 0.75rem; } .ifp-sidebar-logo .fa-th-large { color: var(--ifp-primary); font-size: 1.25rem; } .ifp-logo-text { display: flex; flex-direction: column; line-height: 1.15; } .ifp-logo-title { font-size: 1rem; font-weight: 700; color: var(--ifp-text); } .ifp-logo-subtitle { font-size: 0.75rem; font-weight: 500; color: var(--ifp-primary); letter-spacing: 0.02em; } .app-wrapped .main-content, .app-wrapped .platform-app-content { margin-left: var(--sidebar-width, 260px); margin-top: 0; min-height: calc(100vh - 72px); width: calc(100% - var(--sidebar-width, 260px)); padding: 1.5rem; background: var(--ifp-bg); color: var(--ifp-text); } /* Keep the corporate footer to the right of the fixed sidebar on portal pages */ .app-wrapped ~ footer { margin-left: var(--sidebar-width, 260px); width: calc(100% - var(--sidebar-width, 260px)); background: var(--ifp-elevated); border-top: 1px solid var(--ifp-border); } /* Hide the floating WhatsApp button so it doesn't overlap the sidebar user menu */ .app-wrapped ~ .floating-whatsapp { display: none !important; } @media (max-width: 1024px) { .app-wrapped .main-content, .app-wrapped .platform-app-content { margin-left: 0; width: 100%; } .app-wrapped ~ footer { margin-left: 0; width: 100%; } } .app-wrapped .mobile-header { display: none; } /* Sidebar nav restyle */ .app-wrapped .sidebar-nav { padding-bottom: 8.5rem; /* keep last nav items above the fixed footer */ } .app-wrapped .nav-item { color: var(--ifp-text-secondary); } .app-wrapped .nav-item:hover { color: var(--ifp-text); background: rgba(255, 255, 255, 0.05); } .app-wrapped .nav-item.active { color: var(--ifp-primary); background: var(--ifp-primary-light); } .app-wrapped .nav-item i { color: var(--ifp-primary); } .app-wrapped .nav-section-title { color: var(--ifp-text-muted); } .app-wrapped .user-info .user-name { color: var(--ifp-text); } .app-wrapped .user-menu { padding: 0.75rem; } .app-wrapped .user-dropdown { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); } .app-wrapped .user-dropdown a { color: var(--ifp-text-secondary); } .app-wrapped .user-dropdown a:hover { color: var(--ifp-primary); background: var(--ifp-primary-light); } /* ── Survey builder palette (left sidebar) readability ── */ .ifp-theme .question-palette, .ifp-theme .builder-sidebar { background: var(--ifp-elevated); border-color: var(--ifp-border); } .ifp-theme .palette-title, .ifp-theme .builder-sidebar h4 { color: var(--ifp-text); border-bottom-color: var(--ifp-border); } .ifp-theme .palette-item { color: var(--ifp-text-secondary); } .ifp-theme .palette-item:hover { background: var(--ifp-primary-light); color: var(--ifp-primary); } .ifp-theme .palette-item i { color: var(--ifp-text-muted); } .ifp-theme .palette-item:hover i { color: var(--ifp-primary); } /* ── Public marketing page sections ── */ .ifp-theme .hero, .ifp-theme .stats-bar, .ifp-theme .section-pub, .ifp-theme .cta-section, .ifp-theme .faq-section { background: transparent; color: var(--ifp-text); } .ifp-theme .features-pub, .ifp-theme .sectors-pub, .ifp-theme .testimonials-pub, .ifp-theme .pricing-section, .ifp-theme .faq-section { background: var(--ifp-bg); } .ifp-theme .section-header h2, .ifp-theme .feature-card-pub h3, .ifp-theme .pricing-title, .ifp-theme .sector-card h3, .ifp-theme .testimonial-card .author-name, .ifp-theme .faq-question { color: var(--ifp-text); } .ifp-theme .section-header p, .ifp-theme .feature-card-pub p, .ifp-theme .feature-desc, .ifp-theme .sector-card p, .ifp-theme .testimonial-card p, .ifp-theme .testimonial-card .author-role, .ifp-theme .faq-answer { color: var(--ifp-text-secondary); } .ifp-theme .feature-card-pub, .ifp-theme .testimonial-card, .ifp-theme .sector-card, .ifp-theme .step-card, .ifp-theme .pricing-card { background: var(--ifp-elevated); border-color: var(--ifp-border); } .ifp-theme .section-label { background: var(--ifp-primary-light); color: var(--ifp-primary); } .ifp-theme .faq-section.alt { background: var(--ifp-elevated); } .ifp-theme .stats-bar, .ifp-theme .section-pub.alt { background: var(--ifp-elevated); } .ifp-theme .hero-badge { background: var(--ifp-primary-light); color: var(--ifp-primary); } .ifp-theme .stat-pub .number { color: var(--ifp-primary); } .ifp-theme .stat-pub .label { color: var(--ifp-text-secondary); } /* ── Admin portal dark/orange overrides ── */ .admin-layout.ifp-theme { min-height: auto; padding-top: 0; } .admin-layout { --admin-sidebar: var(--ifp-bg); --admin-sidebar-hover: rgba(255, 255, 255, 0.06); --admin-sidebar-active: var(--ifp-primary-light); --admin-accent: var(--ifp-primary); --admin-accent-hover: var(--ifp-primary-dark); --admin-accent-light: var(--ifp-primary-light); --admin-bg: var(--ifp-bg); --admin-surface: var(--ifp-elevated); --admin-surface-hover: var(--ifp-light); --admin-border: var(--ifp-border); --admin-text: var(--ifp-text); --admin-text-muted: var(--ifp-text-secondary); --admin-text-inverse: var(--ifp-text); --admin-success-bg: rgba(22, 163, 74, 0.15); --admin-danger-bg: rgba(220, 38, 38, 0.15); --admin-warning-bg: rgba(245, 158, 11, 0.15); --admin-info-bg: rgba(8, 145, 178, 0.15); } .admin-layout .admin-sidebar { border-right-color: var(--ifp-border); } .admin-layout .admin-nav-item { color: var(--ifp-text-secondary); } .admin-layout .admin-nav-item:hover { color: var(--ifp-text); background: var(--admin-sidebar-hover); } .admin-layout .admin-nav-item.active { color: var(--ifp-primary); background: var(--ifp-primary-light); } .admin-layout .admin-nav-item.active i { color: var(--ifp-primary); } .admin-layout .admin-header { background: var(--ifp-elevated); border-bottom-color: var(--ifp-border); } .admin-layout .admin-content { background: var(--ifp-bg); } .admin-layout .admin-footer { background: var(--ifp-elevated); border-top-color: var(--ifp-border); color: var(--ifp-text-secondary); } .admin-layout .admin-breadcrumbs a { color: var(--ifp-text-secondary); } .admin-layout .admin-breadcrumbs span { color: var(--ifp-text); } .admin-layout .admin-card { background: var(--ifp-elevated); border-color: var(--ifp-border); } .admin-layout .admin-table th { background: var(--ifp-light); } .admin-layout .admin-table td { border-color: var(--ifp-border); } .admin-layout .admin-form-control { background: var(--ifp-light); border-color: var(--ifp-border); color: var(--ifp-text); } .admin-layout .admin-btn-primary { background: var(--ifp-primary); border-color: var(--ifp-primary); } .admin-layout .admin-btn-primary:hover { background: var(--ifp-primary-dark); border-color: var(--ifp-primary-dark); } /* ── Misc ── */ .ifp-theme hr, .ifp-theme .divider { border-color: var(--ifp-border); } .ifp-theme .empty-state, .ifp-theme .placeholder { color: var(--ifp-text-muted); } .ifp-theme ::selection { background: rgba(245, 158, 11, 0.25); } /* ── Authenticated app variable remap ── Re-map app.css's light gray/blue scale to the dark graphite palette only inside the authenticated portal so we don't break public pages. */ .app-wrapped { --primary: var(--ifp-primary); --primary-dark: var(--ifp-primary-dark); --primary-light: var(--ifp-primary-light); --secondary: var(--ifp-secondary); --success: #34d399; --success-light: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-light: rgba(251, 191, 36, 0.12); --danger: #f87171; --danger-light: rgba(248, 113, 113, 0.12); --info: #38bdf8; --dark: var(--ifp-text); --gray-50: var(--ifp-bg); --gray-100: var(--ifp-elevated); --gray-200: var(--ifp-light); --gray-300: var(--ifp-lighter); --gray-400: var(--ifp-text-muted); --gray-500: var(--ifp-text-secondary); --gray-600: var(--ifp-text-secondary); --gray-700: var(--ifp-text); --gray-800: var(--ifp-text); --gray-900: var(--ifp-text); } /* ── Status badges (avoid white-on-white tints) ── */ .app-wrapped .status-badge.status-published { background: rgba(52, 211, 153, 0.12); color: #34d399; border-color: rgba(52, 211, 153, 0.25); } .app-wrapped .status-badge.status-draft { background: var(--ifp-light); color: var(--ifp-text-secondary); border-color: var(--ifp-border); } .app-wrapped .status-badge.status-paused { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border-color: rgba(251, 191, 36, 0.25); } .app-wrapped .status-badge.status-closed { background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.25); } /* ── Survey builder canvas / questions (no white surfaces) ── */ .app-wrapped .builder-canvas { background: var(--ifp-elevated); border-color: var(--ifp-border); color: var(--ifp-text); } .app-wrapped .question-item.active, .app-wrapped .question-item:hover { border-color: var(--ifp-primary); } .app-wrapped .question-item.active { background: var(--ifp-light); box-shadow: 0 0 0 3px var(--ifp-primary-light); } .app-wrapped .question-number { background: var(--ifp-primary-light); color: var(--ifp-primary); } .app-wrapped .question-type-badge { background: var(--ifp-light); color: var(--ifp-text-secondary); } .app-wrapped .question-actions button { color: var(--ifp-text-muted); } .app-wrapped .question-actions button:hover { background: var(--ifp-lighter); color: var(--danger); } .app-wrapped .builder-sidebar { background: var(--ifp-elevated); border-color: var(--ifp-border); color: var(--ifp-text); } .app-wrapped .palette-item { color: var(--ifp-text-secondary); } .app-wrapped .palette-item:hover { background: var(--ifp-primary-light); color: var(--ifp-primary); } .app-wrapped .palette-item i { color: var(--ifp-text-muted); } .app-wrapped .palette-item:hover i { color: var(--ifp-primary); } /* Utility to hide the old public navbar/footer when they are still rendered */ .public-layout > .navbar, .public-layout > .public-footer { display: none; } /* AI Survey Studio wizard styling */ .app-wrapped .ai-generator, .ai-generator { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); color: var(--ifp-text); } .app-wrapped .ai-generator h4, .ai-generator h4 { color: var(--ifp-text); } .app-wrapped .ai-generator > p, .ai-generator > p { color: var(--ifp-text-secondary); } .ai-field { margin-bottom: 0.75rem; } .ai-field label { display: block; font-size: 0.75rem; color: var(--ifp-text-secondary); margin-bottom: 0.25rem; font-weight: 500; } .ai-field input, .ai-field select, .ai-field textarea { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--ifp-border); background: var(--ifp-bg); color: var(--ifp-text); font-size: 0.8125rem; font-family: inherit; } .ai-field input:focus, .ai-field select:focus, .ai-field textarea:focus { outline: none; border-color: var(--ifp-primary); } .ai-field input::placeholder, .ai-field textarea::placeholder { color: var(--ifp-text-muted); } .ai-row { display: flex; gap: 0.75rem; } .ai-row .ai-field { flex: 1; } .ai-type-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; } .ai-type-chips label { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; background: var(--ifp-light); border: 1px solid var(--ifp-border); border-radius: 999px; font-size: 0.75rem; color: var(--ifp-text-secondary); cursor: pointer; user-select: none; transition: all 0.15s ease; } .ai-type-chips input { width: auto; margin: 0; } .ai-type-chips label:hover { border-color: var(--ifp-primary); color: var(--ifp-text); } .ai-row-checks { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--ifp-text-secondary); } .ai-row-checks label { display: inline-flex; align-items: center; cursor: pointer; } .ai-row-checks input { width: auto; margin-right: 0.375rem; } /* AI assistant modal for edit page */ .ai-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .ai-modal { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); border-radius: 0.75rem; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; color: var(--ifp-text); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .ai-modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ifp-border); display: flex; align-items: center; justify-content: space-between; } .ai-modal-header h4 { margin: 0; font-size: 1rem; } .ai-modal-close { background: none; border: none; color: var(--ifp-text-muted); font-size: 1.25rem; cursor: pointer; } .ai-modal-close:hover { color: var(--ifp-text); } .ai-modal-body { padding: 1.25rem; } .ai-modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--ifp-border); display: flex; justify-content: flex-end; gap: 0.75rem; } .ai-modal .ai-field input, .ai-modal .ai-field select, .ai-modal .ai-field textarea { background: var(--ifp-light); } /* Custom toast notifications */ .ifp-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 10001; display: flex; flex-direction: column; gap: 0.625rem; pointer-events: none; } .ifp-toast { pointer-events: auto; background: var(--ifp-elevated); color: var(--ifp-text); border: 1px solid var(--ifp-border); border-left: 4px solid var(--ifp-primary); border-radius: 0.625rem; padding: 0.875rem 1rem; min-width: 300px; max-width: 440px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); display: flex; align-items: flex-start; gap: 0.875rem; animation: ifpToastIn 0.3s ease forwards; } .ifp-toast.ifp-toast-success { border-left-color: var(--success, #22c55e); } .ifp-toast.ifp-toast-error { border-left-color: var(--danger, #ef4444); } .ifp-toast.ifp-toast-warning { border-left-color: var(--warning, #f59e0b); } .ifp-toast.ifp-toast-info { border-left-color: var(--ifp-primary, #f59e0b); } .ifp-toast-icon { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--ifp-light); color: var(--ifp-primary); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; } .ifp-toast-success .ifp-toast-icon { color: var(--success, #22c55e); } .ifp-toast-error .ifp-toast-icon { color: var(--danger, #ef4444); } .ifp-toast-warning .ifp-toast-icon { color: var(--warning, #f59e0b); } .ifp-toast-content { flex: 1; min-width: 0; } .ifp-toast-title { font-weight: 600; font-size: 0.875rem; color: var(--ifp-text); margin-bottom: 0.125rem; } .ifp-toast-message { font-size: 0.8125rem; color: var(--ifp-text-secondary); line-height: 1.4; word-break: break-word; } .ifp-toast-close { background: none; border: none; color: var(--ifp-text-muted); cursor: pointer; padding: 0.125rem; font-size: 0.8125rem; line-height: 1; } .ifp-toast-close:hover { color: var(--ifp-text); } @keyframes ifpToastIn { from { transform: translateX(1rem); } to { transform: translateX(0); } } @keyframes ifpToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(1rem); } } /* Custom modal dialogs */ .ifp-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: ifpModalIn 0.2s ease forwards; } .ifp-modal-overlay.ifp-modal-closing { animation: ifpModalOut 0.2s ease forwards; } .ifp-modal { background: var(--ifp-elevated); border: 1px solid var(--ifp-border); border-radius: 0.75rem; width: 100%; max-width: 420px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55); overflow: hidden; } .ifp-modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ifp-border); } .ifp-modal-header h4 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ifp-text); display: flex; align-items: center; gap: 0.5rem; } .ifp-modal-body { padding: 1.25rem; color: var(--ifp-text-secondary); font-size: 0.9375rem; line-height: 1.55; white-space: pre-wrap; } .ifp-modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--ifp-border); display: flex; justify-content: flex-end; gap: 0.75rem; } .ifp-modal-btn { padding: 0.625rem 1.125rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease; } .ifp-modal-btn:hover { transform: translateY(-1px); } .ifp-modal-btn-primary { background: var(--ifp-primary); color: #0f1115; } .ifp-modal-btn-primary:hover { background: var(--ifp-primary-dark, #d97706); } .ifp-modal-btn-secondary { background: transparent; border-color: var(--ifp-border); color: var(--ifp-text); } .ifp-modal-btn-secondary:hover { background: var(--ifp-light); } @keyframes ifpModalIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ifpModalOut { from { opacity: 1; } to { opacity: 0; } }