/* ==========================================================================
ONBOARDING / ACCOUNT-ACTIVATION — FRONTEND PROTOTYPE STYLES
Scoped styles for: the two-step sign-up page, the dashboard activation
checklist rail, the "sandbox mode" banner Activate link, and the full-page
account-activation flow (/activate). Built on Motion design-system tokens
(var(--color-*)) so views need no inline styles or hardcoded hex.
Auto-included via Sprockets require_tree.
========================================================================== */
/* ---- Shared primitives -------------------------------------------------- */
.op-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary, #0029FF); margin: 0 0 8px; }
.op-title { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--color-mirage, #0D122D); margin: 0; }
.op-subtitle { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-mirage-70, #56596C); }
.op-mb { margin-bottom: 18px; }
.op-text-center { text-align: center; }
.op-disabled { pointer-events: none; opacity: .5; }
.op-divider { height: 1px; background-color: var(--color-link-water, #DFEAF2); border: 0; margin: 22px 0; }
.op-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--color-mirage-70, #56596C); margin-top: 18px; }
.op-note svg { flex: none; margin-top: 1px; }
.op-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.op-col-span-2 { grid-column: 1 / -1; }
.op-invalid { border-color: var(--color-token-red, #FA3A55) !important; box-shadow: 0 0 0 3px var(--color-secondary-token-red-light, #FFE0EB) !important; }
/* The HTML `hidden` attribute must win over flex/inline-flex component classes (buttons, product rows, menus). */
.activate-page [hidden] { display: none !important; }
.op-error-summary { padding: 12px 14px; border-radius: 8px; background-color: var(--color-secondary-token-red-light, #FFE0EB); color: var(--color-token-red, #FA3A55); font-size: 13px; }
.op-error-summary p { margin: 0; }
.op-consent { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--color-link-water, #DFEAF2); cursor: pointer; }
.op-consent:first-child { border-top: 0; }
.op-consent input { margin-top: 3px; flex: none; }
.op-consent-text { font-size: 13.5px; line-height: 1.5; color: var(--color-mirage-80, #3D4157); }
.op-review { border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 12px; overflow: hidden; }
.op-review-row { display: flex; justify-content: space-between; gap: 24px; padding: 12px 16px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.op-review-row:first-child { border-top: 0; }
.op-review-key { font-size: 13.5px; color: var(--color-mirage-70, #56596C); }
.op-review-val { font-size: 13.5px; font-weight: 500; color: var(--color-mirage, #0D122D); text-align: right; }
.op-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.op-step { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.op-step-badge { flex: none; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background-color: var(--color-mirage-05, #F3F3F5); color: var(--color-mirage-70, #56596C); border: 1px solid var(--color-link-water, #DFEAF2); }
.op-step-label { font-size: 14px; font-weight: 500; color: var(--color-mirage-70, #56596C); }
.op-step.is-current .op-step-badge { background-color: var(--color-primary, #0029FF); color: #FFFFFF; border-color: var(--color-primary, #0029FF); }
.op-step.is-current .op-step-label { color: var(--color-mirage, #0D122D); }
.op-step.is-done .op-step-badge { background-color: var(--color-blue-05, #F2F4FF); color: var(--color-primary, #0029FF); border-color: var(--color-blue-05, #F2F4FF); }
.op-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.op-progress-label { font-size: 13px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.op-progress-count { font-size: 13px; color: var(--color-mirage-70, #56596C); }
.op-progress-track { height: 7px; border-radius: 999px; background-color: var(--color-mirage-05, #F3F3F5); overflow: hidden; }
.op-progress-fill { height: 100%; border-radius: 999px; background-color: var(--color-primary, #0029FF); transition: width .3s ease; }
.op-progress-fill.is-0 { width: 0; } .op-progress-fill.is-25 { width: 25%; } .op-progress-fill.is-50 { width: 50%; } .op-progress-fill.is-75 { width: 75%; } .op-progress-fill.is-100 { width: 100%; }
.op-checklist { display: flex; flex-direction: column; gap: 14px; }
.op-check { display: flex; align-items: flex-start; gap: 12px; }
.op-check-badge { flex: none; width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background-color: var(--color-mirage-05, #F3F3F5); color: var(--color-mirage-70, #56596C); }
.op-check.is-done .op-check-badge { background-color: var(--color-token-green, #00DF81); color: #FFFFFF; }
.op-check.is-current .op-check-badge { background-color: var(--color-primary, #0029FF); color: #FFFFFF; }
.op-check.is-locked { opacity: .55; }
.op-check-body { flex: 1 1 auto; min-width: 0; }
.op-check-title { font-size: 13.5px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.op-check-desc { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--color-mirage-70, #56596C); }
.op-check-action { margin-top: 10px; }
.op-actions-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* ---- Sign-up page (two-step, Profound-style) ---------------------------- */
.signup-page { display: flex; min-height: 100vh; background-color: var(--color-white, #FFFFFF); }
.signup-left { flex: 1 1 50%; display: flex; justify-content: center; padding: 48px 40px; overflow-y: auto; }
.signup-left-inner { width: 100%; max-width: 400px; margin: auto 0; }
.signup-logo { height: 30px; width: auto; margin-bottom: 40px; }
.signup-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--color-mirage, #0D122D); margin: 0; }
.signup-subtitle { margin: 10px 0 24px; font-size: 15px; line-height: 1.55; color: var(--color-mirage-70, #56596C); }
.signup-progress { display: flex; gap: 6px; margin-bottom: 24px; }
.signup-progress-seg { flex: 1 1 0; height: 4px; border-radius: 999px; background-color: var(--color-mirage-05, #F3F3F5); transition: background-color .2s; }
.signup-progress-seg.is-active { background-color: var(--color-primary, #0029FF); }
.signup-form { display: flex; flex-direction: column; gap: 16px; }
.signup-form .form-field-group + .form-field-group { margin-top: 16px; }
.signup-submit { margin-top: 8px; }
.signup-actions { display: flex; gap: 12px; margin-top: 8px; }
.signup-submit-grow { flex: 1 1 auto; }
.signup-footer { margin-top: 18px; font-size: 14px; color: var(--color-mirage-70, #56596C); }
.signup-demo-card { margin-top: 36px; padding: 18px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 12px; background-color: var(--color-app-bg, #F7F9FB); }
.signup-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signup-demo-title { font-size: 15px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.signup-demo-sub { margin-top: 2px; font-size: 13px; color: var(--color-mirage-70, #56596C); }
.signup-demo-avatars { display: flex; flex: none; }
.signup-demo-avatars .avatar { margin-left: -8px; border: 2px solid var(--color-white, #FFFFFF); }
.signup-demo-avatars .avatar:first-child { margin-left: 0; }
.signup-demo-avatar { object-fit: cover; padding: 0; }
.signup-demo-btn { margin-top: 14px; width: 100%; box-sizing: border-box; justify-content: center; }
.signup-right { flex: 1 1 50%; position: relative; background-color: var(--color-app-bg, #F7F9FB); background-image: radial-gradient(var(--color-link-water, #DFEAF2) 1.1px, transparent 1.1px); background-size: 22px 22px; display: flex; align-items: center; justify-content: center; padding: 40px 0; overflow: hidden; }
/* Right rail: auto-advancing horizontal testimonial carousel */
@keyframes signup-carousel-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.signup-carousel { width: 100%; animation: signup-carousel-in .7s cubic-bezier(.16, .84, .44, 1) both; }
.signup-carousel-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, black 13%, black 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 13%, black 87%, transparent 100%); }
.signup-carousel-track { display: flex; position: relative; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.signup-carousel-track.no-anim { transition: none; }
.signup-carousel-slide { flex: 0 0 clamp(280px, 62%, 460px); min-width: 0; box-sizing: border-box; margin: 0; padding: 24px; transition: opacity .5s ease; }
.signup-testimonial { position: relative; display: flex; flex-direction: column; min-height: 360px; background-color: var(--color-white, #FFFFFF); border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 16px; padding: 28px; box-shadow: 0 8px 22px rgba(13, 18, 45, .08); }
.signup-quote-mark { display: block; height: 26px; font-size: 52px; font-weight: 700; line-height: 1; color: var(--color-primary, #0029FF); opacity: .18; }
.signup-quote { margin: 12px 0 0; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--color-mirage, #0D122D); }
.signup-author { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--color-mirage-05, #F3F3F5); }
.signup-author-name { font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.signup-author-role { margin-top: 2px; font-size: 13px; color: var(--color-mirage-70, #56596C); }
.signup-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.signup-carousel-dots { display: flex; align-items: center; gap: 8px; }
.signup-carousel-dot { position: relative; overflow: hidden; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background-color: var(--color-mirage-20, #CFD0D5); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.signup-carousel-dot.is-active { width: 30px; background-color: var(--color-primary-light, #E6EAFF); }
.signup-carousel-dot-fill { position: absolute; inset: 0; width: 0; border-radius: 999px; background-color: var(--color-primary, #0029FF); }
.signup-carousel-dot.is-active .signup-carousel-dot-fill { animation: signup-dot-fill var(--sc-interval, 5500ms) linear forwards; }
.signup-carousel.is-paused .signup-carousel-dot.is-active .signup-carousel-dot-fill { animation-play-state: paused; }
@keyframes signup-dot-fill { from { width: 0; } to { width: 100%; } }
.signup-carousel-arrow { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 999px; background-color: var(--color-white, #FFFFFF); color: var(--color-mirage-70, #56596C); cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.signup-carousel-arrow:hover { border-color: var(--color-primary, #0029FF); color: var(--color-primary, #0029FF); background-color: var(--color-primary-light, #E6EAFF); }
@media (prefers-reduced-motion: reduce) { .signup-carousel { animation: none; } .signup-carousel-track { transition: none; } .signup-carousel-slide { transition: none; } .signup-carousel-dot.is-active .signup-carousel-dot-fill { animation: none; width: 100%; } }
@media (max-width: 900px) { .signup-right { display: none; } .signup-left { flex-basis: 100%; } }
/* ---- Dashboard activation rail ------------------------------------------ */
.dashboard-layout { display: flex; align-items: flex-start; gap: 24px; }
.dashboard-main { flex: 1 1 auto; min-width: 0; }
.dashboard-rail { flex: 0 0 320px; width: 320px; }
/* Bold "next step" activation panel (sandbox) — dark panel; the CURRENT step's button glows */
.activation-card { position: sticky; top: 20px; margin-top: 24px; border-radius: 16px; padding: 22px; color: #FFFFFF; background: linear-gradient(158deg, #141B40 0%, var(--color-mirage, #0D122D) 52%, #0C1A49 100%); box-shadow: 0 16px 38px rgba(13, 18, 45, .30); }
.activation-card-title { font-size: 17px; font-weight: 700; color: #FFFFFF; margin: 2px 0 16px; }
.activation-card .op-eyebrow { color: #93B6FF; }
.activation-card .op-progress-label { color: #FFFFFF; }
.activation-card .op-progress-count { color: rgba(255, 255, 255, .72); }
.activation-card .op-progress-track { background-color: rgba(255, 255, 255, .16); }
.activation-card .op-progress-fill { background-color: #FFFFFF; }
.activation-card .op-check-badge { background-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .88); }
.activation-card .op-check.is-current .op-check-badge { background-color: #FFFFFF; color: var(--color-primary, #0029FF); }
.activation-card .op-check.is-done .op-check-badge { background-color: var(--color-token-green, #00DF81); color: #0B1430; }
.activation-card .op-check-title { margin: 0; line-height: 24px; color: #FFFFFF; }
.activation-card .op-check-desc { color: rgba(255, 255, 255, .68); }
.activation-card .btn-primary { background-color: #FFFFFF; color: var(--color-primary, #0029FF); border-color: #FFFFFF; }
.activation-card .btn-primary:hover { background-color: rgba(255, 255, 255, .92); color: var(--color-primary, #0029FF); }
/* Only the current step expands; its CTA spans the card width and glows gently. */
.activation-card .op-check-action { margin-top: 12px; margin-left: -36px; width: calc(100% + 36px); }
.activation-card .op-check.is-current .btn-primary { animation: activation-cta-glow 2s ease-in-out infinite; }
@keyframes activation-cta-glow { 0%, 100% { box-shadow: 0 0 4px 0 rgba(0, 193, 255, .40); } 50% { box-shadow: 0 0 14px 2px rgba(0, 193, 255, .72); } }
.activation-card .btn-secondary { background-color: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .38); }
.activation-card .btn-secondary:hover { background-color: rgba(255, 255, 255, .12); color: #FFFFFF; }
@media (max-width: 1024px) { .dashboard-layout { flex-direction: column; } .dashboard-rail { flex-basis: auto; width: 100%; } .activation-card { position: static; } }
@media (prefers-reduced-motion: reduce) { .activation-card .op-check.is-current .btn-primary { animation: none; box-shadow: 0 0 11px 1px rgba(0, 193, 255, .55); } }
/* ---- "Sandbox mode" banner (+ Activate link) ---------------------------- */
.alert-banner.sandbox-banner { justify-content: space-between; align-items: center; gap: 14px; border-radius: 0; margin: 0; }
.sandbox-banner .sandbox-text { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.sandbox-activate { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 8px; background-color: var(--color-primary, #0029FF); color: #FFFFFF; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.sandbox-activate:hover { background-color: var(--color-blue-90, #1A3EFF); color: #FFFFFF; }
.sandbox-activate svg { width: 15px; height: 15px; }
/* ---- Full-page account-activation flow (/activate) ---------------------- */
.activate-page { min-height: 100vh; background-color: var(--color-app-bg, #F7F9FB); }
.activate-topbar { background-color: var(--color-white, #FFFFFF); border-bottom: 1px solid var(--color-link-water, #DFEAF2); position: sticky; top: 0; z-index: 10; }
.activate-topbar-inner { max-width: 760px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.activate-logo { height: 26px; width: auto; display: block; }
.activate-saved { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 500; color: var(--color-token-green, #00DF81); opacity: 0; transition: opacity .2s; }
.activate-saved.is-visible { opacity: 1; }
.activate-exit { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-mirage-70, #56596C); }
.activate-exit:hover { color: var(--color-primary, #0029FF); }
.activate-container { max-width: 680px; margin: 0 auto; padding: 36px 24px 64px; }
.activate-foot { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.activate-foot-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-mirage-70, #56596C); }
/* Step indicator — vertical badge+label columns so 5 fit any width */
.kyc-steps { gap: 6px; }
.kyc-steps .op-step { flex: 1 1 0; flex-direction: column; gap: 6px; text-align: center; }
.kyc-steps .op-step-label { font-size: 11px; }
@media (max-width: 560px) { .kyc-steps .op-step-label { display: none; } }
.kyc-section-title { font-size: 15px; font-weight: 600; color: var(--color-mirage, #0D122D); margin: 0 0 3px; }
.kyc-section-sub { font-size: 13px; line-height: 1.5; color: var(--color-mirage-70, #56596C); margin: 0 0 16px; }
/* Products */
.kyc-product-list { display: flex; flex-direction: column; gap: 10px; }
.kyc-product { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 10px; cursor: pointer; }
.kyc-product:has(input:checked) { border-color: var(--color-primary, #0029FF); background-color: var(--color-blue-05, #F2F4FF); }
.kyc-product input { flex: none; }
.kyc-product-main { flex: 1 1 auto; min-width: 0; }
.kyc-product-name { font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); }
.kyc-product-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.kyc-product-vendor { font-size: 12px; color: var(--color-mirage-70, #56596C); }
.kyc-cascade-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background-color: var(--color-blue-05, #F2F4FF); color: var(--color-primary, #0029FF); font-size: 11px; font-weight: 600; }
.kyc-product-price { flex: none; font-size: 14px; font-weight: 600; color: var(--color-mirage, #0D122D); white-space: nowrap; }
.kyc-product-price span { font-weight: 400; font-size: 12px; color: var(--color-mirage-70, #56596C); }
.kyc-enterprise { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--color-glaucous, #718EBF); border-radius: 10px; background-color: var(--color-app-bg, #F7F9FB); }
.kyc-enterprise-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--color-mirage-80, #3D4157); }
.kyc-enterprise .btn-secondary { flex: none; white-space: nowrap; }
.kyc-total-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-total-label { font-size: 14px; color: var(--color-mirage-70, #56596C); }
.kyc-total { font-size: 20px; font-weight: 700; color: var(--color-mirage, #0D122D); }
.kyc-total small { font-size: 12px; font-weight: 400; color: var(--color-mirage-70, #56596C); }
/* Added catalog products + "rolodex" picker */
.kyc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kyc-product-added { cursor: default; }
.kyc-product-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 8px; background-color: var(--color-white, #FFFFFF); color: var(--color-mirage-70, #56596C); cursor: pointer; }
.kyc-product-remove:hover { border-color: var(--color-token-red, #FA3A55); color: var(--color-token-red, #FA3A55); }
.kyc-rolodex-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border: 1px dashed var(--color-glaucous, #718EBF); border-radius: 10px; background-color: var(--color-white, #FFFFFF); color: var(--color-primary, #0029FF); font-size: 13px; font-weight: 600; cursor: pointer; }
.kyc-rolodex-toggle:hover { background-color: var(--color-blue-05, #F2F4FF); }
/* Add-products drawer (right sidebar) */
.kyc-drawer-backdrop { position: fixed; inset: 0; z-index: 60; display: none; background-color: rgba(13, 18, 45, .35); }
.kyc-drawer { position: fixed; top: 0; right: 0; z-index: 61; display: none; flex-direction: column; width: 400px; max-width: 92vw; height: 100vh; background-color: var(--color-white, #FFFFFF); box-shadow: -16px 0 44px rgba(13, 18, 45, .20); }
.activate-page.drawer-open .kyc-drawer-backdrop { display: block; animation: kyc-fade-in .2s ease; }
.activate-page.drawer-open .kyc-drawer { display: flex; animation: kyc-drawer-in .28s cubic-bezier(.4, 0, .2, 1); }
@keyframes kyc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kyc-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.kyc-drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-drawer-title { font-size: 16px; font-weight: 700; color: var(--color-mirage, #0D122D); }
.kyc-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background-color: transparent; color: var(--color-mirage-70, #56596C); cursor: pointer; }
.kyc-drawer-close:hover { background-color: var(--color-mirage-05, #F3F3F5); }
.kyc-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.kyc-drawer-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--color-link-water, #DFEAF2); border-radius: 10px; cursor: pointer; }
.kyc-drawer-item:has(input:checked) { border-color: var(--color-primary, #0029FF); background-color: var(--color-blue-05, #F2F4FF); }
.kyc-drawer-item input { flex: none; }
.kyc-drawer-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kyc-drawer-foot { flex: none; padding: 16px 22px; border-top: 1px solid var(--color-link-water, #DFEAF2); }
.kyc-drawer-add { width: 100%; box-sizing: border-box; justify-content: center; }
.kyc-drawer-add:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .activate-page.drawer-open .kyc-drawer, .activate-page.drawer-open .kyc-drawer-backdrop { animation: none; } }
/* Success */
.kyc-done { text-align: center; padding: 48px 16px; }
.kyc-done-icon { width: 72px; height: 72px; border-radius: 999px; background-color: var(--color-token-green, #00DF81); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.kyc-done-icon svg { width: 38px; height: 38px; }
/* ==========================================================================
TenantIQ Design System
--------------------------------------------------------------------------
Self-contained brand system for the TenantIQ (PM tenant-screening) surface
served at pm.cascades.crscreditapi.com. Warm cream-and-ink palette with a
single orange accent, per the TenantIQ brand brief.
This file is INDEPENDENT of the Motion design system (application.css):
it defines its own --tiq-* tokens and its own `tiq-` component classes and
references NOTHING from Motion. PM pages load application.css ONLY for the
shared, palette-agnostic structural utilities (flex / grid / spacing /
sizing); every brand-bearing class on a TenantIQ page is a `tiq-` class
defined here.
Activate the page base by putting `class="tiq"` on . The component
classes are prefixed (`tiq-`) and stand alone — they do not require a
`.tiq` ancestor to render.
Companion docs: documentation/TENANTIQ_DESIGN_SYSTEM.md
Tokens cheatsheet: .claude/skills/tenantiq-design-system/tokens-cheatsheet.md
========================================================================== */
:root {
/* --- Brand surfaces & ink (from the brand brief) --- */
--tiq-cream: #F1ECE3; /* page background — warm paper, never stark white */
--tiq-cream-deep: #E6E0D2; /* inset cards, fills, alternating rows */
--tiq-card: #FBF8F2; /* raised card surface — a touch lighter than cream */
--tiq-hair: #D4CDC0; /* hairline dividers + default borders (warm tan) */
--tiq-ink: #1A1814; /* headings, emphasis — warm near-black */
--tiq-ink-body: #2D2A26; /* body text, tuned warm against cream */
--tiq-ink-soft: #5C574E; /* captions, labels, secondary text */
--tiq-muted: #8A8377; /* placeholders, helper text */
--tiq-disabled: #B5AE9F; /* disabled text */
/* --- The accent. The ONLY color other than ink. Used sparingly:
wordmark, links, active states, focus, numerals, highlights. --- */
--tiq-orange: #FE8742;
--tiq-orange-strong: #E96F2B; /* hover / pressed */
--tiq-orange-tint: #F6E0CC; /* light fills, avatar grounds, tertiary buttons */
/* --- Dark "voice" surface --- */
--tiq-dark-bg: #0A0A0A; /* warm near-black, not pure black */
--tiq-dark-ink: #F5F1E8; /* cream-tinted off-white type on dark — never #FFF */
/* --- Status: derived warm earth-tones (text / pale-bg / accent-dot).
The brief defines no status colors and reserves orange for the brand,
so these are drawn from the brief's earth-tone family. --- */
--tiq-success: #3F6B4E; --tiq-success-bg: #DCE6D2; --tiq-success-dot: #6E9469; /* sage — Pass */
--tiq-warning: #8A6420; --tiq-warning-bg: #F1E4C6; --tiq-warning-dot: #C8922A; /* ochre — Review */
--tiq-error: #8C3A28; --tiq-error-bg: #F0DBD2; --tiq-error-dot: #C0492F; /* sienna— Decline */
--tiq-info: #3D5666; --tiq-info-bg: #DBE3E8; --tiq-info-dot: #5B7689; /* slate — Running */
--tiq-neutral: #5C574E; --tiq-neutral-bg: #E6E0D2; --tiq-neutral-dot: #A89F8E; /* taupe — Revoked */
--tiq-demo: #5E4B6B; --tiq-demo-bg: #E7DEEA; --tiq-demo-dot: #8C74A0; /* muted plum — demo marker */
/* --- Effects --- */
--tiq-focus: 0 0 0 3px rgba(254, 135, 66, 0.30); /* orange focus ring */
--tiq-shadow: 0 4px 16px rgba(26, 24, 20, 0.10);
--tiq-shadow-lg:0 8px 28px rgba(26, 24, 20, 0.16);
/* --- Radii --- */
--tiq-radius-sm: 6px; /* inputs */
--tiq-radius: 9px; /* buttons, cards */
--tiq-radius-lg: 12px; /* page containers */
/* RGB channels for the card surface — for rgba() fades/overlays that need
a transparent stop (CSS can't take a transparent stop from a hex var). */
--tiq-card-rgb: 251, 248, 242;
}
/* ==========================================================================
Page base — applied via
========================================================================== */
.tiq {
background-color: var(--tiq-cream);
color: var(--tiq-ink-body);
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600; /* brand: cream-paper rendering needs 600, not 400 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.tiq h1, .tiq h2, .tiq h3, .tiq h4, .tiq h5 {
color: var(--tiq-ink);
font-weight: 700;
}
/* Unclassed links in body content pick up the accent. Components that style
their own links (topnav, .tiq-link, buttons) are unaffected. */
.tiq a:not([class]) { color: var(--tiq-orange); text-decoration: none; }
.tiq a:not([class]):hover { color: var(--tiq-orange-strong); text-decoration: underline; }
/* ==========================================================================
Typography — wordmark & "voice" headline
========================================================================== */
/* Wordmark IS the mark. "Tenant" orange + "IQ" ink, tight IQ cluster.
Usage: TenantIQ */
.tiq-wordmark {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1;
letter-spacing: -0.01em;
color: var(--tiq-orange);
white-space: nowrap;
}
.tiq-wordmark-iq { color: var(--tiq-ink); letter-spacing: -0.04em; }
/* On dark surfaces, swap IQ to white — orange "Tenant" holds against either ground. */
.tiq-wordmark--on-dark .tiq-wordmark-iq { color: #FFFFFF; }
/* Playfair "voice" headline — reserved for hero / closing / pull-quote
moments ONLY. Never on UI chrome, feature subheads, or body copy. */
.tiq-voice {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 700;
color: var(--tiq-ink);
line-height: 1.1;
letter-spacing: -0.01em;
}
/* ==========================================================================
Color utilities (warm replacements for Motion's text-/bg- token classes)
========================================================================== */
.tiq-text-ink { color: var(--tiq-ink); }
.tiq-text-body { color: var(--tiq-ink-body); }
.tiq-text-soft { color: var(--tiq-ink-soft); }
.tiq-text-muted { color: var(--tiq-muted); }
.tiq-text-disabled{ color: var(--tiq-disabled); }
.tiq-text-accent { color: var(--tiq-orange); }
.tiq-text-success { color: var(--tiq-success); }
.tiq-text-warning { color: var(--tiq-warning); }
.tiq-text-error { color: var(--tiq-error); }
.tiq-text-on-dark { color: var(--tiq-dark-ink); }
.tiq-bg-cream { background-color: var(--tiq-cream); }
.tiq-bg-card { background-color: var(--tiq-card); }
.tiq-bg-cream-deep { background-color: var(--tiq-cream-deep); }
.tiq-bg-accent { background-color: var(--tiq-orange); }
.tiq-bg-orange-tint{ background-color: var(--tiq-orange-tint); }
.tiq-bg-dark { background-color: var(--tiq-dark-bg); }
.tiq-border-hair { border-color: var(--tiq-hair); }
/* ==========================================================================
Buttons
Primary is INK (premium, high-contrast) so the orange accent stays special.
Use .tiq-btn-accent for the rare loud orange CTA.
========================================================================== */
.tiq-btn,
.tiq-btn-secondary,
.tiq-btn-tertiary,
.tiq-btn-accent,
.tiq-btn-danger,
.tiq-btn-danger-outline {
box-sizing: border-box; /* so .w-full buttons stay inside their container */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 14px;
border-radius: var(--tiq-radius);
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 20px;
cursor: pointer;
text-decoration: none;
border: 1px solid transparent;
transition: all 0.18s ease;
}
.tiq-btn:focus-visible,
.tiq-btn-secondary:focus-visible,
.tiq-btn-tertiary:focus-visible,
.tiq-btn-accent:focus-visible,
.tiq-btn-danger:focus-visible,
.tiq-btn-danger-outline:focus-visible {
outline: none;
box-shadow: var(--tiq-focus);
}
/* Primary — ink fill, cream text */
.tiq-btn { background-color: var(--tiq-ink); border-color: var(--tiq-ink); color: var(--tiq-dark-ink); }
.tiq-btn:hover { background-color: var(--tiq-ink-body); border-color: var(--tiq-ink-body); }
/* Secondary — card fill, hair border, ink text */
.tiq-btn-secondary { background-color: var(--tiq-card); border-color: var(--tiq-hair); color: var(--tiq-ink); }
.tiq-btn-secondary:hover { background-color: var(--tiq-cream-deep); border-color: var(--tiq-ink-soft); }
/* Tertiary — orange-tint fill, orange text */
.tiq-btn-tertiary { background-color: var(--tiq-orange-tint); border-color: var(--tiq-orange-tint); color: var(--tiq-orange-strong); }
.tiq-btn-tertiary:hover { background-color: #F0D2B6; border-color: #F0D2B6; }
/* Accent — the loud orange CTA. Ink text for contrast (white fails on orange). */
.tiq-btn-accent { background-color: var(--tiq-orange); border-color: var(--tiq-orange); color: var(--tiq-ink); }
.tiq-btn-accent:hover { background-color: var(--tiq-orange-strong); border-color: var(--tiq-orange-strong); color: var(--tiq-dark-ink); }
/* Danger — sienna fill, cream text */
.tiq-btn-danger { background-color: var(--tiq-error); border-color: var(--tiq-error); color: var(--tiq-dark-ink); }
.tiq-btn-danger:hover { background-color: #74301F; border-color: #74301F; }
/* Danger outline */
.tiq-btn-danger-outline { background-color: var(--tiq-card); border-color: var(--tiq-error); color: var(--tiq-error); }
.tiq-btn-danger-outline:hover { background-color: var(--tiq-error-bg); }
/* Size modifier */
.tiq-btn-sm { padding: 5px 10px; font-size: 12px; line-height: 16px; gap: 4px; border-radius: var(--tiq-radius-sm); }
.tiq-btn[disabled], .tiq-btn-secondary[disabled], .tiq-btn-accent[disabled],
.tiq-btn:disabled, .tiq-btn-secondary:disabled, .tiq-btn-accent:disabled {
opacity: 0.5; cursor: not-allowed;
}
/* ==========================================================================
Form fields
========================================================================== */
.tiq-field { display: flex; flex-direction: column; gap: 6px; }
.tiq-field-label { font-size: 14px; font-weight: 600; color: var(--tiq-ink-soft); transition: color 0.2s ease; }
.tiq-field:focus-within .tiq-field-label { color: var(--tiq-orange-strong); }
.tiq-field-required { color: var(--tiq-error); margin-left: 2px; }
/* Form controls are scoped under .tiq so they out-rank application.css's
global `input[type="…"], textarea { … }` base styles (specificity 0,1,1),
which otherwise leak onto TenantIQ pages and force inputs back to white.
Controls only ever render on a .tiq page, so this scoping is correct. */
.tiq .tiq-field-input,
.tiq .tiq-field-select,
.tiq .tiq-field-textarea {
box-sizing: border-box; /* width:100% + padding must not overflow the card */
width: 100%;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: var(--tiq-ink-body);
background-color: var(--tiq-card);
border: 1px solid var(--tiq-hair);
border-radius: var(--tiq-radius-sm);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tiq .tiq-field-input::placeholder,
.tiq .tiq-field-textarea::placeholder { color: var(--tiq-muted); font-weight: 500; }
.tiq .tiq-field-input:focus,
.tiq .tiq-field-select:focus,
.tiq .tiq-field-textarea:focus {
outline: none;
border-color: var(--tiq-orange);
box-shadow: var(--tiq-focus);
}
.tiq .tiq-field-select { cursor: pointer; }
.tiq .tiq-field-textarea { resize: vertical; min-height: 84px; }
.tiq .tiq-field-input-error { border-color: var(--tiq-error); }
.tiq .tiq-field-input-error:focus { box-shadow: 0 0 0 3px rgba(140, 58, 40, 0.18); }
.tiq-field-checkbox,
.tiq-field-radio {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--tiq-ink-body);
}
.tiq .tiq-field-checkbox input[type="checkbox"],
.tiq .tiq-field-radio input[type="radio"] {
width: 16px; height: 16px;
accent-color: var(--tiq-orange);
cursor: pointer;
}
.tiq-field-helper { font-size: 12px; font-weight: 500; color: var(--tiq-muted); }
.tiq-field-error { font-size: 12px; font-weight: 600; color: var(--tiq-error); }
/* ==========================================================================
Status pills
========================================================================== */
.tiq-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.tiq-pill-sm { padding: 3px 10px; font-size: 12px; }
.tiq-pill-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tiq-pill-success { background-color: var(--tiq-success-bg); color: var(--tiq-success); }
.tiq-pill-success .tiq-pill-dot { background-color: var(--tiq-success-dot); }
.tiq-pill-warning { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); }
.tiq-pill-warning .tiq-pill-dot { background-color: var(--tiq-warning-dot); }
.tiq-pill-error { background-color: var(--tiq-error-bg); color: var(--tiq-error); }
.tiq-pill-error .tiq-pill-dot { background-color: var(--tiq-error-dot); }
.tiq-pill-info { background-color: var(--tiq-info-bg); color: var(--tiq-info); }
.tiq-pill-info .tiq-pill-dot { background-color: var(--tiq-info-dot); }
.tiq-pill-neutral { background-color: var(--tiq-neutral-bg); color: var(--tiq-neutral); }
.tiq-pill-neutral .tiq-pill-dot { background-color: var(--tiq-neutral-dot); }
.tiq-pill-demo { background-color: var(--tiq-demo-bg); color: var(--tiq-demo); }
.tiq-pill-demo .tiq-pill-dot { background-color: var(--tiq-demo-dot); }
/* ==========================================================================
Alerts
========================================================================== */
.tiq-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: var(--tiq-radius);
border: 1px solid transparent;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.tiq-alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.tiq-alert-title { font-weight: 700; margin-bottom: 2px; }
.tiq-alert-info { background-color: var(--tiq-info-bg); border-color: var(--tiq-info-dot); color: var(--tiq-info); }
.tiq-alert-success { background-color: var(--tiq-success-bg); border-color: var(--tiq-success-dot); color: var(--tiq-success); }
.tiq-alert-warning { background-color: var(--tiq-warning-bg); border-color: var(--tiq-warning-dot); color: var(--tiq-warning); }
.tiq-alert-error { background-color: var(--tiq-error-bg); border-color: var(--tiq-error-dot); color: var(--tiq-error); }
/* ==========================================================================
Cards
========================================================================== */
.tiq-card {
box-sizing: border-box;
background-color: var(--tiq-card);
border: 1px solid var(--tiq-hair);
border-radius: var(--tiq-radius);
padding: 24px;
}
.tiq-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--tiq-hair);
}
.tiq-card-title { font-size: 18px; font-weight: 700; color: var(--tiq-ink); }
/* --------------------------------------------------------------------------
Stat cards — compact metric tiles for a dashboard summary row. Drop any
number of .tiq-stat-card into a .tiq-stat-row; they share the row width and
wrap on narrow viewports. Add .is-accent to a value for the one orange
highlight (numerals are an on-brand accent use; keep it to a single tile).
-------------------------------------------------------------------------- */
.tiq-stat-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tiq-stat-card {
box-sizing: border-box;
flex: 1 1 0;
min-width: 150px;
display: flex;
flex-direction: column;
gap: 6px;
background-color: var(--tiq-card);
border: 1px solid var(--tiq-hair);
border-radius: var(--tiq-radius);
padding: 16px 18px;
}
.tiq-stat-card-label {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--tiq-ink-soft);
}
.tiq-stat-card-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--tiq-ink); }
.tiq-stat-card-value.is-accent { color: var(--tiq-orange); }
.tiq-stat-card-sub { font-size: 12px; color: var(--tiq-muted); }
/* ==========================================================================
Outcome banners (Pass / Review / Decline / Running / Neutral)
========================================================================== */
.tiq-outcome {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 18px;
border-radius: var(--tiq-radius);
border: 1px solid transparent;
}
.tiq-outcome-icon { flex-shrink: 0; width: 22px; height: 22px; }
.tiq-outcome-title { font-weight: 700; font-size: 15px; }
.tiq-outcome-blurb { font-size: 13px; font-weight: 500; margin-top: 2px; opacity: 0.9; }
.tiq-outcome-pass { background-color: var(--tiq-success-bg); border-color: var(--tiq-success-dot); color: var(--tiq-success); }
.tiq-outcome-review { background-color: var(--tiq-warning-bg); border-color: var(--tiq-warning-dot); color: var(--tiq-warning); }
.tiq-outcome-fail { background-color: var(--tiq-error-bg); border-color: var(--tiq-error-dot); color: var(--tiq-error); }
.tiq-outcome-running { background-color: var(--tiq-info-bg); border-color: var(--tiq-info-dot); color: var(--tiq-info); }
.tiq-outcome-neutral { background-color: var(--tiq-cream-deep); border-color: var(--tiq-hair); color: var(--tiq-ink-soft); }
/* ==========================================================================
Links
========================================================================== */
.tiq-link { color: var(--tiq-orange); text-decoration: none; transition: color 0.2s ease; }
.tiq-link:hover { color: var(--tiq-orange-strong); text-decoration: underline; }
.tiq-link-muted { color: var(--tiq-ink-soft); text-decoration: none; transition: color 0.2s ease; }
.tiq-link-muted:hover { color: var(--tiq-ink); text-decoration: underline; }
.tiq-link-danger { color: var(--tiq-error); text-decoration: none; transition: color 0.2s ease; }
.tiq-link-danger:hover { color: #74301F; text-decoration: underline; }
/* ==========================================================================
Avatars
========================================================================== */
.tiq-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background-color: var(--tiq-orange-tint);
color: var(--tiq-orange-strong);
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.tiq-avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.tiq-avatar-lg { width: 48px; height: 48px; font-size: 18px; }
.tiq-avatar-wrapper { position: relative; display: inline-block; }
.tiq-avatar-status { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tiq-card); }
.tiq-avatar-status-online { background-color: var(--tiq-success-dot); }
.tiq-avatar-status-offline { background-color: var(--tiq-neutral-dot); }
/* ==========================================================================
Dividers
========================================================================== */
.tiq-divider { border: none; border-top: 1px solid var(--tiq-hair); margin: 16px 0; }
.tiq-divider-sm { margin: 8px 0; }
.tiq-divider-lg { margin: 24px 0; }
.tiq-divider-vertical { width: 1px; align-self: stretch; background-color: var(--tiq-hair); }
/* ==========================================================================
Top navigation
========================================================================== */
.tiq-topnav {
display: flex;
align-items: center;
height: 64px;
padding: 0 24px;
background-color: var(--tiq-cream);
border-bottom: 1px solid var(--tiq-hair);
position: relative;
z-index: 60;
}
.tiq-topnav-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.tiq-topnav-logo-link { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.tiq-topnav-nav { display: flex; align-items: stretch; gap: 32px; height: 100%; flex: 1; padding-left: 40px; }
.tiq-topnav-item {
display: flex; align-items: center; height: 100%;
position: relative;
font-size: 14px; font-weight: 600;
color: var(--tiq-ink-soft);
text-decoration: none;
transition: color 0.2s ease;
}
.tiq-topnav-item:hover, .tiq-topnav-item.active { color: var(--tiq-ink); }
.tiq-topnav-item.active::after {
content: ""; position: absolute; bottom: 0; left: 0; right: 0;
height: 3px; background-color: var(--tiq-orange); border-radius: 3px 3px 0 0;
}
.tiq-topnav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tiq-topnav-user { position: relative; }
.tiq-topnav-user-btn {
display: flex; align-items: center; gap: 8px;
padding: 8px 4px; background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 600; color: var(--tiq-ink);
}
.tiq-topnav-user-btn:hover { opacity: 0.8; }
.tiq-topnav-user-email { white-space: nowrap; }
.tiq-topnav-chevron { width: 20px; height: 20px; color: var(--tiq-ink-soft); }
.tiq-topnav-dropdown {
position: absolute; top: 100%; right: 0; min-width: 160px;
background-color: var(--tiq-card);
border: 1px solid var(--tiq-hair);
border-radius: 10px;
box-shadow: var(--tiq-shadow);
padding: 6px; z-index: 100;
}
.tiq-topnav-dropdown.hidden { display: none; }
.tiq-topnav-dropdown-item {
display: block; width: 100%; padding: 9px 12px;
background: none; border: none; text-align: left;
font-family: inherit; font-size: 14px; font-weight: 600;
color: var(--tiq-ink-soft); cursor: pointer; border-radius: 6px;
text-decoration: none; transition: all 0.15s ease;
}
.tiq-topnav-dropdown-item:hover { background-color: var(--tiq-cream-deep); color: var(--tiq-ink); }
/* ==========================================================================
Toasts
========================================================================== */
.tiq-toast-container {
position: fixed; bottom: 20px; right: 20px; z-index: 9999;
display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.tiq-toast {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 10px;
box-shadow: var(--tiq-shadow-lg);
font-size: 14px; font-weight: 600;
max-width: 380px; pointer-events: auto;
animation: tiq-toast-enter 0.3s ease-out;
}
/* The toast Stimulus controller adds `toast-exit` on dismiss. */
.tiq-toast.toast-exit { animation: tiq-toast-exit 0.3s ease-in forwards; }
@keyframes tiq-toast-enter { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes tiq-toast-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(110%); } }
.tiq-toast-icon { flex-shrink: 0; width: 20px; height: 20px; }
.tiq-toast-message { flex: 1; line-height: 1.4; }
.tiq-toast-dismiss {
flex-shrink: 0; background: none; border: none; cursor: pointer;
padding: 6px; display: flex; align-items: center; justify-content: center;
border-radius: 6px; color: rgba(245, 241, 232, 0.75);
}
.tiq-toast-dismiss:hover { color: var(--tiq-dark-ink); background-color: rgba(245, 241, 232, 0.12); }
.tiq-toast-success { background-color: var(--tiq-success); color: var(--tiq-dark-ink); }
.tiq-toast-error { background-color: var(--tiq-error); color: var(--tiq-dark-ink); }
/* ==========================================================================
Empty state
========================================================================== */
.tiq-empty { text-align: center; padding: 48px 24px; }
.tiq-empty-icon { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--tiq-hair); }
/* ==========================================================================
Wizard progress bar (applicant intake)
========================================================================== */
.tiq-progress { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.tiq-progress-step {
flex: 1 1 0;
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-radius: 10px;
background-color: var(--tiq-cream-deep);
color: var(--tiq-ink-soft);
font-size: 14px; font-weight: 600;
}
.tiq-progress-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 999px;
background-color: var(--tiq-card); color: var(--tiq-ink-soft);
font-size: 12px; font-weight: 700; flex-shrink: 0;
}
/* Current step — orange ground, ink text (white fails contrast on orange) */
.tiq-progress-step.is-current { background-color: var(--tiq-orange); color: var(--tiq-ink); }
.tiq-progress-step.is-current .tiq-progress-badge { background-color: var(--tiq-ink); color: var(--tiq-orange); }
/* Completed step — sage */
.tiq-progress-step.is-done { background-color: var(--tiq-success-bg); color: var(--tiq-success); }
.tiq-progress-step.is-done .tiq-progress-badge { background-color: var(--tiq-success-dot); color: #FFFFFF; }
/* ==========================================================================
Dashboard filter pills
========================================================================== */
.tiq-filter-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 6px 5px 12px; border-radius: 999px;
font-size: 13px; font-weight: 600; text-decoration: none;
background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft);
transition: all 0.15s ease;
}
.tiq-filter-pill:hover { background-color: var(--tiq-hair); }
.tiq-filter-pill-badge {
min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
background-color: var(--tiq-card); color: var(--tiq-ink-soft);
}
/* Inactive status tints — match the row pill's color family. `neutral` is the
base look, named explicitly so the "All" tab's modifier isn't a no-op. */
.tiq-filter-pill-neutral { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); }
.tiq-filter-pill-success { background-color: var(--tiq-success-bg); color: var(--tiq-success); }
.tiq-filter-pill-success .tiq-filter-pill-badge { color: var(--tiq-success); }
.tiq-filter-pill-warning { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); }
.tiq-filter-pill-warning .tiq-filter-pill-badge { color: var(--tiq-warning); }
.tiq-filter-pill-error { background-color: var(--tiq-error-bg); color: var(--tiq-error); }
.tiq-filter-pill-error .tiq-filter-pill-badge { color: var(--tiq-error); }
.tiq-filter-pill-info { background-color: var(--tiq-info-bg); color: var(--tiq-info); }
.tiq-filter-pill-info .tiq-filter-pill-badge { color: var(--tiq-info); }
/* Active — solid ink, regardless of family */
.tiq-filter-pill.is-active { background-color: var(--tiq-ink); color: var(--tiq-dark-ink); }
.tiq-filter-pill.is-active .tiq-filter-pill-badge { background-color: rgba(245, 241, 232, 0.22); color: var(--tiq-dark-ink); }
/* ==========================================================================
Tables (docket-style list rows)
========================================================================== */
.tiq-table-header {
display: flex;
padding: 10px 16px;
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--tiq-ink-soft);
border-bottom: 1px solid var(--tiq-hair);
margin-bottom: 10px;
}
.tiq-table-container { display: flex; flex-direction: column; }
.tiq-table-row {
display: flex;
padding: 14px 16px;
background-color: var(--tiq-card);
border-bottom: 1px solid var(--tiq-hair);
transition: background-color 0.15s ease;
touch-action: manipulation; /* reliable double-tap-to-view on touch (no zoom delay) */
}
.tiq-table-row:hover { background-color: var(--tiq-cream-deep); }
.tiq-table-row:first-child { border-top-left-radius: var(--tiq-radius); border-top-right-radius: var(--tiq-radius); }
.tiq-table-row:last-child { border-bottom: none; border-bottom-left-radius: var(--tiq-radius); border-bottom-right-radius: var(--tiq-radius); }
.tiq-table-container { border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius); overflow: hidden; }
/* ==========================================================================
Dark "voice" panel — for the rare warm-black moment
========================================================================== */
.tiq-dark-panel {
background-color: var(--tiq-dark-bg);
color: var(--tiq-dark-ink);
border-radius: var(--tiq-radius-lg);
padding: 32px;
}
.tiq-dark-panel .tiq-voice { color: var(--tiq-dark-ink); }
/* ==========================================================================
Warm scrollbar utility (for inset scrolling lists)
========================================================================== */
.tiq-scroll { scrollbar-width: thin; scrollbar-color: var(--tiq-hair) var(--tiq-cream-deep); }
.tiq-scroll::-webkit-scrollbar { width: 10px; }
.tiq-scroll::-webkit-scrollbar-track { background: var(--tiq-cream-deep); border-radius: 0 6px 6px 0; }
.tiq-scroll::-webkit-scrollbar-thumb { background: var(--tiq-hair); border-radius: 5px; border: 2px solid var(--tiq-cream-deep); }
.tiq-scroll::-webkit-scrollbar-thumb:hover { background: var(--tiq-ink-soft); }
/* ==========================================================================
Auth — PM portal sign-in (full-screen split shell)
Rendered by app/views/users/sessions/new.html.erb on the pm.* host. The
operator (apex) login keeps its own Motion `auth-*` treatment, untouched.
========================================================================== */
.tiq-auth {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
background-color: var(--tiq-cream);
}
.tiq-auth-panel {
width: 100%;
max-width: 920px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.tiq-auth-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.tiq-auth-headline { font-size: 42px; } /* family + weight come from .tiq-voice */
.tiq-auth-subtitle {
font-size: 15px; font-weight: 500; line-height: 1.55;
color: var(--tiq-ink-soft); max-width: 40ch;
}
.tiq-auth-card { box-sizing: border-box; width: 100%; max-width: 420px; justify-self: end; }
.tiq-auth-card-head { margin-bottom: 4px; }
.tiq-auth-card-title { font-size: 20px; font-weight: 700; color: var(--tiq-ink); }
.tiq-auth-card-sub { margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--tiq-ink-soft); }
.tiq-auth-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.tiq-auth-forgot { display: flex; justify-content: flex-end; margin-top: -6px; }
.tiq-auth-footer { margin-top: 18px; text-align: center; font-size: 13px; font-weight: 500; color: var(--tiq-ink-soft); }
/* Larger wordmark for hero / login lockups */
.tiq-wordmark-lg { font-size: 30px; }
@media (max-width: 820px) {
.tiq-auth-panel { grid-template-columns: 1fr; gap: 28px; max-width: 420px; }
.tiq-auth-card { justify-self: stretch; }
.tiq-auth-headline { font-size: 32px; }
}
/* ==========================================================================
Operator "Cascades" list bridge (PM host only)
--------------------------------------------------------------------------
The PM topnav's "Cascades" tab routes to /cascades (WorkflowsController) —
a SHARED operator view (app/views/workflows/*) that ships Motion classes
and also renders on the apex operator app. Rather than fork it, we re-skin
the Motion classes the LIST page uses to TenantIQ tokens, but ONLY under
`.tiq` (the PM ), so the operator/apex rendering stays Motion.
Color / border / background overrides ONLY — Motion's box model (padding,
radius, layout) is left intact. As a side benefit these also warm the
shared modals rendered in the PM layout (e.g. btn-primary CTAs).
Scope: the /cascades index. Not the execution detail or builder.
========================================================================== */
/* Warm color-utility remaps (Motion cool grays/blues → TenantIQ ink/orange) */
.tiq .text-mirage-80 { color: var(--tiq-ink-body); }
.tiq .text-mirage-70 { color: var(--tiq-ink-soft); }
.tiq .text-gray-500 { color: var(--tiq-ink-soft); }
.tiq .text-muted { color: var(--tiq-muted); }
.tiq .text-disabled { color: var(--tiq-disabled); }
.tiq .text-primary,
.tiq .text-brand-blue { color: var(--tiq-orange); }
.tiq .text-token-green { color: var(--tiq-success); }
.tiq .hover\:text-primary:hover { color: var(--tiq-orange); }
/* Primary button → ink (the "New Cascade" CTA; also warms shared-modal CTAs) */
.tiq .btn-primary {
background-color: var(--tiq-ink);
background-image: none;
border-color: var(--tiq-ink);
color: var(--tiq-dark-ink);
}
.tiq .btn-primary:hover { background-color: var(--tiq-ink-body); border-color: var(--tiq-ink-body); }
/* Search + status filter controls. Re-skin the shared (Motion) .search-bar
and .filter-inline so both read as matching warm TenantIQ controls: the
CONTAINER carries the card surface, hair border, and orange focus ring,
while the input/select stay transparent inside it. (The base styles the
input/select transparent + borderless; the previous override wrongly
re-filled the input — a nested rectangle — and left the search container on
Motion's white + cool-blue border, mismatching the cream status box.) */
.tiq .search-bar {
background-color: #FFFFFF; /* white search field (per request — not the cream card surface) */
border: 1px solid var(--tiq-hair);
}
.tiq .filter-inline {
background-color: var(--tiq-card);
border: 1px solid var(--tiq-hair);
}
.tiq .search-bar:focus-within,
.tiq .filter-inline:focus-within {
border-color: var(--tiq-orange);
box-shadow: var(--tiq-focus);
}
.tiq .search-bar:focus-within .search-bar-icon { color: var(--tiq-orange); }
.tiq .search-bar-icon { color: var(--tiq-muted); }
.tiq .search-input { background: transparent; color: var(--tiq-ink-body); }
.tiq .search-input::placeholder { color: var(--tiq-muted); }
.tiq .filter-inline-label { color: var(--tiq-ink-soft); }
/* "All" status select — a compact white chip sized to sit inside the 39px
.filter-inline container with vertical breathing room (it centers, and the
chip's padding + line-height keep it shorter than the container). */
.tiq .filter-inline-select {
background: #FFFFFF;
color: var(--tiq-ink);
border: 1px solid var(--tiq-hair);
border-radius: var(--tiq-radius-sm);
padding: 4px 10px;
line-height: 16px;
}
/* Quick-stat pills (Active / Draft counts) */
.tiq .stat-pill-green { background-color: var(--tiq-success-bg); color: var(--tiq-success); }
.tiq .stat-pill-gray { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); }
/* Status pills (e.g. the "Auto-send" row badge) */
.tiq .status-pill-green { background-color: var(--tiq-success-bg); color: var(--tiq-success); }
.tiq .status-pill-green .status-pill-dot { background-color: var(--tiq-success-dot); }
.tiq .status-pill-yellow { background-color: var(--tiq-warning-bg); color: var(--tiq-warning); }
.tiq .status-pill-yellow .status-pill-dot { background-color: var(--tiq-warning-dot); }
.tiq .status-pill-red { background-color: var(--tiq-error-bg); color: var(--tiq-error); }
.tiq .status-pill-red .status-pill-dot { background-color: var(--tiq-error-dot); }
/* Active/Draft toggle switch */
.tiq .toggle-switch-track { background-color: var(--tiq-hair); }
.tiq .toggle-switch-track.active { background-color: var(--tiq-success-dot); }
/* Docket table — header, rows, zebra, hover, code chip */
.tiq .docket-table-header { border-bottom-color: var(--tiq-hair); color: var(--tiq-ink-soft); }
.tiq .table-container { border-color: var(--tiq-hair); }
.tiq .docket-table-row { border-bottom-color: var(--tiq-hair); }
.tiq .docket-table-row.bg-white { background-color: var(--tiq-card); }
.tiq .docket-table-row.bg-zebra { background-color: var(--tiq-cream); }
.tiq .docket-table-row:hover { background-color: var(--tiq-cream-deep); }
.tiq .docket-table-row code { background-color: var(--tiq-cream-deep); color: var(--tiq-ink-soft); }
/* Row "Actions" dropdown */
.tiq .actions-dropdown { background-color: var(--tiq-card); border-color: var(--tiq-hair); box-shadow: var(--tiq-shadow); }
.tiq .action-item { color: var(--tiq-ink-soft); }
.tiq .action-item:hover { background-color: var(--tiq-cream-deep); color: var(--tiq-ink); }
.tiq .action-item-danger { color: var(--tiq-error); }
.tiq .action-item-danger:hover { background-color: var(--tiq-error-bg); color: var(--tiq-error); }
.tiq .action-divider { background-color: var(--tiq-hair); }
.tiq .action-toggle:hover { background-color: var(--tiq-cream-deep); }
/* Empty states (no cascades / no filter matches) */
.tiq .empty-state-title { color: var(--tiq-ink); }
.tiq .empty-state-description { color: var(--tiq-ink-soft); }
.tiq .empty-state-icon, .tiq .empty-state-icon svg,
.tiq .empty-state-filtered-icon { color: var(--tiq-hair); }
.tiq .link-default { color: var(--tiq-orange); }
.tiq .link-default:hover { color: var(--tiq-orange-strong); }
/* ==========================================================================
Modal — overlay + dialog. Host for the adverse-action builder; sized for
two-pane content. Above the topnav (60), below toasts (9999).
========================================================================== */
.tiq-modal-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(26, 24, 20, 0.55);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.tiq-modal-overlay.hidden { display: none; }
.tiq-modal {
background: var(--tiq-card);
border-radius: var(--tiq-radius-lg);
box-shadow: var(--tiq-shadow-lg);
width: min(1160px, calc(100vw - 48px));
max-height: 92vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.tiq-modal-header {
display: flex; align-items: center; gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid var(--tiq-hair);
flex-shrink: 0;
}
.tiq-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.tiq-modal-footer {
display: flex; align-items: center; gap: 12px;
padding: 14px 20px;
border-top: 1px solid var(--tiq-hair);
flex-shrink: 0;
}
.tiq-modal-close {
margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border: none; border-radius: var(--tiq-radius-sm);
background: transparent; color: var(--tiq-ink-soft);
cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.tiq-modal-close:hover { background: var(--tiq-cream-deep); color: var(--tiq-ink); }
/* ==========================================================================
Tabs — header tab strip (Report | Adverse action). Active tab is an ink
pill, mirroring .tiq-btn.
========================================================================== */
.tiq-tabs { display: flex; align-items: center; gap: 6px; }
.tiq-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
font-size: 14px; font-weight: 600;
color: var(--tiq-ink-soft);
background: transparent; border: none; border-radius: 999px;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease;
}
.tiq-tab:hover { color: var(--tiq-ink); background: var(--tiq-cream-deep); }
.tiq-tab.is-active { background: var(--tiq-ink); color: var(--tiq-dark-ink); }
.tiq-tab .tiq-tab-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* ==========================================================================
Chip toggle — checkbox-backed pill for multi-select choices ("Deliver by"
Mail / Digital). Checked = orange-tint fill (active-state accent use).
========================================================================== */
.tiq-chip-toggle {
position: relative;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
border: 1.5px solid var(--tiq-hair); border-radius: 999px;
background: var(--tiq-card); color: var(--tiq-ink-soft);
font-size: 13px; font-weight: 600;
cursor: pointer; user-select: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tiq-chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.tiq-chip-toggle:focus-within { box-shadow: var(--tiq-focus); }
.tiq-chip-toggle:has(input:checked) {
background: var(--tiq-orange-tint);
border-color: var(--tiq-orange);
color: var(--tiq-ink);
}
.tiq-chip-check { display: none; width: 14px; height: 14px; flex-shrink: 0; color: var(--tiq-orange-strong); }
.tiq-chip-toggle:has(input:checked) .tiq-chip-check { display: inline; }
/* ==========================================================================
Document facsimile — HTML mirror of the generated notice PDF (Prawn
renders Helvetica on white), used for the live preview. Deliberately NOT
warm-cream and NOT Playfair: this is a document artifact, not UI chrome,
and it must visually match the PDF the applicant receives.
========================================================================== */
.tiq-doc {
background: #FFFFFF; color: #1F1F1F;
font-family: Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 12.5px; line-height: 1.5;
border: 1px solid var(--tiq-hair); border-radius: var(--tiq-radius-sm);
box-shadow: var(--tiq-shadow);
padding: 32px 36px;
}
.tiq-doc-title {
text-align: center; font-size: 16px; font-weight: 700;
letter-spacing: 0.01em; margin: 18px 0 2px;
}
.tiq-doc-subtitle { text-align: center; font-style: italic; font-size: 10.5px; color: #555555; margin-bottom: 4px; }
.tiq-doc-banner {
border-top: 1px solid #444444; border-bottom: 1px solid #444444;
text-align: center; font-weight: 700; font-size: 12px;
padding: 4px 0; margin: 10px 0 12px;
}
.tiq-doc-ecoa { border-top: 1px solid #444444; margin-top: 12px; padding-top: 8px; }
.tiq-doc-heading {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: #333333;
border-bottom: 1px solid #B5B5B5; padding-bottom: 3px;
margin: 16px 0 7px;
}
.tiq-doc-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #777777; }
.tiq-doc-check { display: flex; align-items: baseline; gap: 8px; margin: 3px 0; color: #999999; }
.tiq-doc-check.is-checked { color: #1F1F1F; font-weight: 700; }
.tiq-doc-box {
display: inline-flex; align-items: center; justify-content: center;
width: 13px; height: 13px; flex-shrink: 0;
border: 1.5px solid #555555; border-radius: 2px;
font-size: 10px; font-weight: 700; line-height: 1; color: #1F1F1F;
transform: translateY(2px);
}
.tiq-doc-footnote {
font-size: 10.5px; font-style: italic; color: #666666;
text-align: center; margin-top: 12px;
border-top: 1px solid #444444; padding-top: 6px;
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
/* ==========================================================================
CUSTOM THEME COLORS
Brand colors from Motion/Cascades design system
========================================================================== */
:root {
--color-blue: #1814F3;
--color-blue-05: #F2F4FF;
--color-blue-30: #B3BFFF;
--color-blue-70: #4D69FF;
--color-blue-90: #1A3EFF;
--color-catalina-blue: #343C6A;
--color-glaucous: #718EBF;
--color-green-ish: #16DBCC;
--color-emerald: #16DBCC;
--color-radical-red: #FE5C73;
--color-link-water: #DFEAF2;
--color-yellow-orange: #FFBB38;
--color-token-green: #00DF81;
--color-token-yellow: #FFBB38;
--color-token-orange: #FE8742;
--color-token-red: #FA3A55;
--color-token-purple: #9233FE;
--color-mirage: #0D122D;
--color-mirage-05: #F3F3F5;
--color-mirage-80: #3D4157;
--color-mirage-60: #6E7181;
--color-mirage-70: #56596C;
--color-mirage-30: #B6B8C0;
--color-mirage-20: #CFD0D5;
--color-portage: #8094FF;
--color-gray-05: #FAFAFA;
--color-gray-chateau: #9EA0AB;
--color-secondary-token-green-light: #D9FAEC;
--color-secondary-token-yellow-light: #FFF5D9;
--color-secondary-token-orange-light: #FFEFE5;
--color-secondary-token-red-light: #FFE0EB;
--color-secondary-token-purple-light: #F4E9FF;
}
/* ==========================================================================
BASE STYLES
========================================================================== */
body {
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
overflow-x: hidden;
}
/* ==========================================================================
PAGE LAYOUT - Main app structure with topnav and content container
========================================================================== */
.page-layout {
min-height: 100vh;
background-color: var(--color-app-bg, #F7F9FB);
display: flex;
flex-direction: column;
}
.page-content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 24px 24px 24px;
}
.page-content {
flex: 1;
background-color: var(--color-white, #FFFFFF);
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 12px 12px 0 0;
min-height: 0;
overflow: hidden;
}
.page-content-inner {
height: 100%;
overflow-y: auto;
padding: 24px;
}
/* ==========================================================================
TOP NAVIGATION - Cascades design system
========================================================================== */
.cascades-topnav {
display: flex;
align-items: center;
height: 66px;
padding: 0 24px;
background-color: var(--color-app-bg, #F7F9FB);
position: relative;
z-index: 60;
gap: 0;
}
/* Left group: Logo + Mode Toggle */
.topnav-left {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
/* Logo */
.topnav-logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.topnav-logo-full {
height: 25px;
width: auto;
}
/* Navigation Items - fills middle space */
.topnav-navigation {
display: flex;
align-items: stretch;
gap: 45px;
height: 100%;
flex: 1;
padding-left: 40px;
}
.topnav-item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
text-decoration: none;
font-family: Inter, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: var(--color-mirage-70, #56596C);
transition: color 0.2s ease;
}
.topnav-item:hover {
color: var(--color-mirage, #0D122D);
}
.topnav-item.active {
color: var(--color-mirage, #0D122D);
}
.topnav-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--color-primary, #0029FF);
border-radius: 3px 3px 0 0;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.2s ease;
}
.topnav-item:hover .topnav-indicator {
transform: scaleY(1);
}
.topnav-item.active .topnav-indicator {
transform: scaleY(1);
}
/* Right Side Actions */
.topnav-actions {
display: flex;
align-items: center;
gap: 10px;
}
.topnav-explore-btn {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
background-color: transparent;
border: none;
border-radius: 9px;
cursor: pointer;
font-family: Inter, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: var(--color-primary, #0029FF);
transition: background-color 0.2s ease;
}
.topnav-explore-btn:hover {
background-color: var(--color-blue-05, #F2F4FF);
}
.topnav-explore-icon {
width: 24px;
height: 24px;
color: var(--color-primary, #0029FF);
}
.topnav-divider {
width: 1px;
height: 26px;
background-color: var(--color-link-water, #DFEAF2);
margin: 0 8px;
}
.topnav-user {
position: relative;
}
.topnav-user-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 4px;
background: none;
border: none;
cursor: pointer;
font-family: 'Lato', Inter, sans-serif;
font-size: 15px;
color: var(--color-mirage, #0D122D);
}
.topnav-user-btn:hover {
opacity: 0.8;
}
.topnav-user-email {
white-space: nowrap;
}
.topnav-chevron {
width: 24px;
height: 24px;
color: var(--color-mirage, #0D122D);
transition: transform 0.2s ease;
}
.topnav-dropdown {
position: absolute;
top: 100%;
right: 0;
min-width: 150px;
background: white;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 4px;
z-index: 100;
}
.topnav-dropdown-item {
display: block;
width: 100%;
padding: 8px 12px;
background: none;
border: none;
text-align: left;
font-family: Inter, sans-serif;
font-size: 14px;
color: var(--color-mirage-70, #56596C);
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.topnav-dropdown-item:hover {
background-color: var(--color-app-bg, #F7F9FB);
color: var(--color-mirage, #0D122D);
}
/* ==========================================================================
TOPNAV - Admin/User Mode Toggle
Segmented pill control for switching between User and Admin modes
========================================================================== */
.topnav-mode-toggle {
display: flex;
align-items: center;
background-color: var(--color-link-water, #DFEAF2);
border-radius: 8px;
padding: 3px;
}
.topnav-mode-btn {
padding: 5px 14px;
border-radius: 6px;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--color-mirage-70, #56596C);
text-decoration: none;
transition: all 0.2s ease;
}
.topnav-mode-btn:hover {
color: var(--color-mirage, #0D122D);
}
.topnav-mode-btn.active {
background-color: white;
color: var(--color-mirage, #0D122D);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Mobile admin section label */
.topnav-mobile-section-label {
display: block;
padding: 8px 16px 4px;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-mirage-70, #56596C);
}
/* ==========================================================================
IMPERSONATION BANNER
Shown when an admin is logged in as another user
========================================================================== */
.impersonation-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 24px;
background-color: var(--color-token-yellow-10, #FFF8E6);
border-bottom: 1px solid var(--color-token-yellow, #FFBB38);
z-index: 59;
font-family: Inter, sans-serif;
color: var(--color-mirage, #0D122D);
}
/* ==========================================================================
TOPNAV - Hamburger Button (hidden on desktop)
========================================================================== */
.topnav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: none;
border: none;
cursor: pointer;
border-radius: 9px;
transition: background-color 0.2s ease;
}
.topnav-hamburger:hover {
background-color: var(--color-blue-05, #F2F4FF);
}
.topnav-hamburger-line {
display: block;
width: 20px;
height: 2px;
background-color: var(--color-mirage, #0D122D);
border-radius: 1px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.topnav-hamburger-active .topnav-hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.topnav-hamburger-active .topnav-hamburger-line:nth-child(2) {
opacity: 0;
}
.topnav-hamburger-active .topnav-hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ==========================================================================
TOPNAV - Mobile Overlay
========================================================================== */
.topnav-mobile-overlay {
position: fixed;
inset: 0;
top: 66px;
background-color: rgba(13, 18, 45, 0.3);
z-index: 40;
}
.topnav-mobile-overlay.hidden {
display: none;
}
/* ==========================================================================
TOPNAV - Mobile Menu Panel
========================================================================== */
.topnav-mobile-menu {
display: none;
}
.topnav-mobile-menu-inner {
padding: 12px 0;
}
.topnav-mobile-nav {
display: flex;
flex-direction: column;
}
.topnav-mobile-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
font-family: Inter, sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 20px;
color: var(--color-mirage-70, #56596C);
text-decoration: none;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.topnav-mobile-item:hover {
color: var(--color-mirage, #0D122D);
background-color: var(--color-mirage-05, #F3F3F5);
}
.topnav-mobile-item.active {
color: var(--color-primary, #0029FF);
border-left: 3px solid var(--color-primary, #0029FF);
padding-left: 21px;
}
.topnav-mobile-item .topnav-explore-icon {
width: 20px;
height: 20px;
color: var(--color-primary, #0029FF);
}
.topnav-mobile-signout {
color: var(--color-token-red, #FA3A55);
}
.topnav-mobile-signout:hover {
color: var(--color-token-red, #FA3A55);
background-color: var(--color-secondary-token-red-light, #FFE0EB);
}
.topnav-mobile-user {
padding: 10px 24px;
}
.topnav-mobile-user-email {
font-family: Inter, sans-serif;
font-size: 13px;
color: var(--color-muted, #868896);
font-weight: 400;
}
.topnav-mobile-menu .divider {
margin: 8px 24px;
}
/* ==========================================================================
TOPNAV - Responsive Breakpoint (1000px)
========================================================================== */
@media (max-width: 1000px) {
.cascades-topnav {
padding: 0 16px;
}
.topnav-mode-toggle {
display: none;
}
.topnav-navigation {
display: none;
}
.topnav-actions {
display: none;
}
.topnav-hamburger {
display: flex;
}
.topnav-mobile-menu {
display: block;
position: fixed;
top: 66px;
left: 0;
right: 0;
background-color: var(--color-white, #FFFFFF);
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 50;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.topnav-mobile-menu-open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
@media (max-width: 480px) {
.cascades-topnav {
padding: 0 12px;
}
}
/* ==========================================================================
MODAL STYLES - Explore Products and generic modals
========================================================================== */
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 24px;
}
.modal-overlay.hidden {
display: none;
}
.modal-content {
position: relative;
background-color: white;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 12px;
max-height: calc(100vh - 48px);
overflow: hidden;
}
/* Explore Products Modal */
.explore-modal {
display: flex;
width: 1200px;
max-width: calc(100vw - 48px);
height: 600px;
padding: 15px;
overflow: hidden;
}
/* Left Sidebar */
.explore-sidebar {
width: 240px;
flex-shrink: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.explore-sidebar-title {
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 24px;
color: var(--color-mirage);
margin: 0;
padding: 4px 0 12px;
}
.explore-close-btn {
position: absolute;
top: 15px;
right: 15px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
border: 1px solid var(--color-link-water);
background: white;
color: var(--color-mirage-70);
cursor: pointer;
z-index: 1;
transition: background-color 0.15s ease, color 0.15s ease;
}
.explore-close-btn:hover {
background-color: var(--color-app-bg);
color: var(--color-mirage);
}
.explore-section-header {
font-family: Inter, sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: var(--color-mirage);
padding: 8px 0;
}
.explore-section-spacer {
height: 12px;
}
.explore-nav-item {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
padding: 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.explore-nav-indicator {
width: 3px;
height: 38px;
display: flex;
align-items: center;
}
.explore-nav-indicator::after {
content: '';
width: 3px;
height: 18px;
background-color: transparent;
border-radius: 0 10px 10px 0;
transition: background-color 0.2s ease;
}
.explore-nav-item.active .explore-nav-indicator::after,
.explore-nav-item:hover .explore-nav-indicator::after {
background-color: var(--color-blue);
}
.explore-nav-content {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 0 9px;
height: 38px;
border-radius: 9px;
transition: background-color 0.2s ease;
}
.explore-nav-item:hover .explore-nav-content {
background-color: var(--color-blue-05);
}
.explore-nav-item.active .explore-nav-content {
background-color: var(--color-primary-light);
}
.explore-nav-icon {
width: 24px;
height: 24px;
color: var(--color-mirage-70);
flex-shrink: 0;
}
.explore-nav-item.active .explore-nav-icon {
color: var(--color-blue);
}
.explore-nav-category-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.explore-nav-category-svg {
width: 16px;
height: 16px;
color: var(--color-mirage-70);
}
.explore-nav-vendor-badge {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 9px;
line-height: 1;
letter-spacing: 0.02em;
flex-shrink: 0;
color: var(--color-mirage-80);
}
.explore-nav-label {
flex: 1;
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-mirage-70);
transition: color 0.2s ease, font-weight 0.15s ease;
}
.explore-nav-item.active .explore-nav-label {
color: var(--color-blue);
font-weight: 600;
}
.explore-nav-badge {
min-width: 32px;
padding: 6px 9px;
background-color: var(--color-app-bg);
border-radius: 12px;
font-family: 'Lato', sans-serif;
font-size: 12px;
color: var(--color-mirage-70);
text-align: center;
}
.explore-nav-item.active .explore-nav-badge {
background-color: white;
}
/* Right Content */
.explore-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
overflow: hidden;
}
.explore-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
}
.explore-search-bar {
display: flex;
align-items: center;
gap: 8px;
max-width: 333px;
width: 100%;
padding: 8px 12px;
border: 1px solid var(--color-link-water);
border-radius: 8px;
background-color: white;
transition: border-color 0.15s ease;
}
.explore-search-bar:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.explore-search-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-mirage-50);
}
.explore-search-input,
.explore-search-input:focus {
flex: 1;
border: none !important;
outline: none !important;
box-shadow: none !important;
font-family: Inter, sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--color-mirage);
background: transparent !important;
padding: 0 !important;
margin: 0;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
.explore-search-input::placeholder {
color: var(--color-mirage-50);
}
.explore-result-count {
font-size: 12px;
color: var(--color-mirage-60);
white-space: nowrap;
flex-shrink: 0;
}
/* Products List */
.explore-products-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 16px;
padding-right: 4px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.explore-products-list::-webkit-scrollbar {
display: none; /* Chrome/Safari/Opera */
}
/* Empty search state */
.explore-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 48px 24px;
}
.explore-empty.hidden {
display: none;
}
.explore-empty-icon {
width: 32px;
height: 32px;
color: var(--color-mirage-30);
}
.explore-empty-text {
font-size: 14px;
color: var(--color-mirage-60);
margin: 0;
}
.explore-product-item {
display: flex;
flex-direction: column;
background-color: white;
border: 1px solid var(--color-link-water);
border-radius: 12px;
text-align: left;
transition: all 0.2s ease;
width: 100%;
}
.explore-product-item:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
.explore-product-item.expanded {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
.explore-product-item.hidden {
display: none;
}
/* Product Header Button (collapsed state trigger) */
.explore-product-header-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 18px;
width: 100%;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.explore-product-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.explore-product-header {
display: flex;
align-items: center;
gap: 6px;
}
.explore-product-vendor-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 42px;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 600;
line-height: 16px;
white-space: nowrap;
color: var(--color-mirage-80);
}
.explore-product-name {
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: var(--color-mirage);
}
.explore-product-description {
font-family: Inter, sans-serif;
font-size: 12px;
line-height: 16px;
color: var(--color-mirage-60);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
/* Product meta — price + inquiry pill */
.explore-product-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
margin-left: 12px;
}
.explore-product-price {
font-family: Inter, sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: var(--color-mirage);
white-space: nowrap;
}
.explore-product-price-unit {
font-weight: 400;
font-size: 12px;
color: var(--color-mirage-60);
}
.explore-inquiry-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}
.explore-inquiry-pill--soft {
background-color: var(--color-secondary-token-green-light);
color: var(--color-token-green);
}
.explore-inquiry-pill--hard {
background-color: var(--color-secondary-token-yellow-light);
color: var(--color-mirage-80);
}
.explore-product-chevron {
flex-shrink: 0;
display: flex;
align-items: center;
color: var(--color-mirage-30);
transition: transform 0.2s ease;
}
.explore-product-item.expanded .explore-product-chevron {
transform: rotate(90deg);
}
/* Expanded Content */
.explore-product-expanded {
display: none;
flex-direction: column;
gap: 18px;
padding: 0 18px 18px 18px;
}
.explore-product-item.expanded .explore-product-expanded {
display: flex;
}
.explore-product-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.explore-detail-section {
display: flex;
flex-direction: column;
gap: 8px;
background-color: var(--color-app-bg);
border: 1px solid var(--color-link-water);
border-radius: 8px;
padding: 12px 16px;
}
.explore-detail-section--workflows .explore-detail-icon {
color: var(--color-token-green);
}
.explore-detail-header {
display: flex;
align-items: center;
gap: 6px;
}
.explore-detail-icon {
width: 18px;
height: 18px;
color: var(--color-blue);
}
.explore-detail-title {
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 18px;
color: var(--color-mirage);
}
.explore-detail-text {
font-family: Inter, sans-serif;
font-size: 12px;
line-height: 18px;
color: var(--color-mirage-60);
margin: 0;
text-align: justify;
}
.explore-use-cases {
margin: 0;
padding-left: 16px;
font-family: Inter, sans-serif;
font-size: 12px;
line-height: 20px;
color: var(--color-mirage-60);
}
.explore-use-cases li {
margin-bottom: 2px;
}
.explore-detail-section--workflows .explore-use-cases li {
text-align: justify;
}
.explore-detail-section--limitations {
grid-column: 1 / -1;
background-color: var(--color-secondary-token-yellow-light);
border: 1px solid var(--color-token-yellow);
border-radius: 8px;
padding: 12px 16px;
}
.explore-detail-section--limitations .explore-detail-icon {
color: var(--color-token-yellow);
}
.explore-product-cta {
display: flex;
justify-content: flex-end;
}
/* ==========================================================================
MOTION BRAND FONT CLASSES
========================================================================== */
.motion-heading-font {
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-mirage);
font-size: 28px;
}
.motion-semi-bold-font {
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--color-mirage);
font-size: 15px;
line-height: 150%;
}
.motion-regular-font {
color: var(--color-mirage-80);
font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 150%;
}
/* ==========================================================================
BUTTON STYLES
Primary, Secondary, and Tertiary button variants
========================================================================== */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 9px 12px;
background-color: #0029ff;
border: 1px solid #0029ff;
border-radius: 9px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.btn-primary:hover {
background-color: #001fcf;
border-color: #001fcf;
}
.btn-primary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.3);
}
.btn-primary svg {
color: #ffffff;
fill: currentColor;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 9px 12px;
background-color: #ffffff;
border: 1px solid #0029ff;
border-radius: 9px;
color: #0029ff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
}
.btn-secondary:hover {
background-color: #f2f4ff;
}
.btn-secondary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.3);
}
.btn-secondary svg {
color: #0029ff;
fill: currentColor;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.btn-tertiary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 9px 12px;
background-color: #f2f4ff;
border: 1px solid #f2f4ff;
border-radius: 9px;
color: #0029ff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-tertiary:hover {
background-color: #e5eaff;
border-color: #e5eaff;
}
.btn-tertiary:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.15);
}
.btn-tertiary svg {
color: #0029ff;
fill: currentColor;
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* ==========================================================================
ANIMATIONS
========================================================================== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-0.5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes appear-then-fade {
0%, 100% {
opacity: 0;
}
5%, 60% {
opacity: 1;
}
}
/* ==========================================================================
FLASH MESSAGES
========================================================================== */
.flash {
position: fixed;
top: 5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 100%;
width: max-content;
padding: 0 1rem;
z-index: 9999;
}
.flash__message {
font-size: 1rem;
color: white;
padding: 0.5rem 1rem;
background-color: black;
animation: appear-then-fade 4s both;
border-radius: 999px;
}
.flash__notice {
background-color: #4CAF50;
}
.flash__alert {
background-color: #FFC107;
}
.flash__error {
background-color: #F44336;
}
/* ==========================================================================
TOOLTIP STYLES
========================================================================== */
.tooltip {
position: fixed;
display: none;
background-color: #1F2937;
color: white;
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
z-index: 9999;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
pointer-events: none;
}
.group:hover .tooltip {
display: block;
}
/* ==========================================================================
DROPDOWN STYLES
========================================================================== */
.dropdown-menu {
display: none;
min-width: 150px;
z-index: 50;
position: absolute;
right: 0;
top: 100%;
background: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 5px;
}
.dropdown-item {
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem 1rem;
text-align: center;
font-size: 0.875rem;
color: #1d4ed8;
background-color: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 4px;
text-decoration: none;
margin-bottom: 0.25rem;
width: 100%;
}
.dropdown-item:hover {
background-color: #e5e7eb;
}
.dropdown-menu.show {
display: block;
}
/* ==========================================================================
DOCKET TABLE STYLES
Flex-based table layout matching Motion brand design
========================================================================== */
.docket-table-header {
display: flex;
background-color: var(--color-mirage-05, #F3F3F5);
padding: 12px 15px;
border-radius: 8px 8px 0 0;
font-size: 12px;
font-weight: 600;
color: var(--color-mirage-80, #3D4157);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.docket-table-header a {
color: inherit;
text-decoration: none;
}
.docket-table-header a:hover {
color: inherit;
}
.docket-table-row {
display: flex;
flex-wrap: wrap;
padding: 14px 15px;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
font-size: 14px;
color: var(--color-mirage-80, #3D4157);
}
.docket-table-row:last-child {
border-bottom: none;
}
/* ==========================================================================
FILTER DROPDOWN STYLES
Search and filter UI components
========================================================================== */
.filter-dropdown {
background: white;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 9px;
padding: 16px;
min-width: 280px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.filter-inline {
background: var(--color-white, #FFFFFF);
border: none;
display: inline-flex;
align-items: center;
gap: 10px;
height: 39px;
padding: 0 12px;
border-radius: 9px;
}
.filter-inline-label {
font-size: 11px;
font-weight: 600;
color: var(--color-mirage-60, #6E7181);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.filter-inline-select {
border: none;
background: transparent;
font-size: 14px;
color: var(--color-mirage-80, #3D4157);
padding: 0;
cursor: pointer;
outline: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.filter-inline-toggle {
background: var(--color-white, #FFFFFF);
border: 1px solid var(--color-link-water, #DFEAF2);
display: inline-flex;
align-items: center;
gap: 8px;
height: 39px;
padding: 0 14px;
border-radius: 9999px;
font-size: 14px;
color: var(--color-mirage-70, #56596C);
cursor: pointer;
user-select: none;
transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.filter-inline-toggle:hover {
border-color: #FFBB38;
}
.filter-inline-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.filter-inline-toggle .status-pill-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
display: inline-block;
background: #FFBB38;
}
.filter-inline-toggle:has(input:checked) {
background-color: #FFF4DB;
color: #B07A00;
border-color: #FFBB38;
font-weight: 600;
}
.filter-inline-toggle:has(input:checked) .status-pill-dot {
background: #B07A00;
}
/* Keyboard focus ring (checkbox is hidden, so ring goes on the label) */
.filter-inline-toggle:focus-within {
outline: 2px solid rgba(255, 187, 56, 0.35);
outline-offset: 2px;
}
.filter-select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 6px;
font-size: 14px;
color: var(--color-mirage-80, #3D4157);
background: white;
cursor: pointer;
}
.filter-select:focus {
outline: none;
border-color: var(--color-blue-90, #1A3EFF);
box-shadow: 0 0 0 3px rgba(26, 62, 255, 0.15);
}
.filter-label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--color-mirage-60, #6E7181);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.filter-divider {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-link-water, #DFEAF2);
}
/* Hidden utility class for Stimulus controllers */
.hidden {
display: none !important;
}
/* ==========================================================================
WORKFLOWS UI CUSTOM CLASSES
Custom width, height, gap, and styling for workflows table
========================================================================== */
/* Table column widths */
.col-w-60 { width: 60px; flex-shrink: 0; }
.col-w-80 { width: 80px; flex-shrink: 0; }
.col-w-100 { width: 100px; flex-shrink: 0; }
.col-w-120 { width: 120px; flex-shrink: 0; }
.col-w-160 { width: 160px; flex-shrink: 0; }
.col-w-150 { width: 150px; flex-shrink: 0; }
.col-code-sm { width: 120px; flex-shrink: 0; }
.col-created { width: 170px; flex-shrink: 0; }
/* Flex columns for name/code - share remaining space */
.col-name {
flex: 1.1;
min-width: 0;
}
.col-code {
flex: 0.9;
min-width: 0;
}
.col-owner {
width: 180px;
flex-shrink: 0;
}
/* Search bar */
.search-bar {
background: white;
border: 1px solid var(--color-link-water, #DFEAF2);
display: flex;
gap: 8px;
height: 39px;
align-items: center;
padding: 0 10px;
border-radius: 9px;
width: 333px;
transition: border-color 0.15s ease;
}
.search-bar:focus-within {
border-color: var(--color-primary, #0029FF);
}
.search-bar-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-mirage-30, #B6B8C0);
}
.search-bar:focus-within .search-bar-icon {
color: var(--color-primary, #0029FF);
}
.search-input {
width: 100%;
font-weight: 400;
font-size: 14px;
color: var(--color-mirage-80, #3D4157);
line-height: 20px;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
background: transparent;
}
.search-input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
.search-input::placeholder {
color: var(--color-mirage-30, #B6B8C0);
}
.search-input:focus {
outline: none !important;
box-shadow: none !important;
border: none !important;
}
.search-clear-btn {
background: none;
border: none;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
color: var(--color-mirage-30, #B6B8C0);
transition: color 0.15s ease, background-color 0.15s ease;
}
.search-clear-btn:hover {
color: var(--color-mirage-80, #3D4157);
background-color: var(--color-mirage-05, #F3F3F5);
}
/* Search loading state */
.search-loading .search-bar-icon {
animation: search-spin 0.8s linear infinite;
color: var(--color-primary, #0029FF);
}
@keyframes search-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Filter button */
.filter-btn {
background: white;
border: 1px solid #dfeaf2;
display: flex;
gap: 12px;
height: 39px;
align-items: center;
padding: 0 9px;
border-radius: 9px;
cursor: pointer;
}
.filter-btn:hover {
background: #f9fafb;
}
.filter-icon-box {
background: #f7f9fb;
border: 1px solid #f2f4ff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
width: 24px;
height: 24px;
flex-shrink: 0;
}
/* Icon sizes */
.icon-15 { width: 15px; height: 15px; }
.icon-18 { width: 18px; height: 18px; }
.icon-19 { width: 19px; height: 19px; }
/* Gap utilities */
.gap-15 { gap: 15px; }
/* Colors */
.text-mirage { color: #0D122D; }
.text-mirage-80 { color: #3D4157; }
.text-mirage-70 { color: #56596C; }
.text-mirage-60 { color: #6E7181; }
.text-mirage-30 { color: #B6B8C0; }
.text-muted { color: #868896; }
.text-brand-blue { color: #1a3eff; }
.bg-zebra { background-color: #FAFAFA; }
/* Status badge with dot */
.status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
min-height: 28px;
box-sizing: border-box;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
}
.status-badge-active {
border: 1px solid #bbf7d0;
}
.status-badge-draft {
border: 1px solid #e5e7eb;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-dot-active {
background-color: #16a34a;
}
.status-dot-draft {
background-color: #9ca3af;
}
.status-badge-failed {
border: 1px solid #fecaca;
}
.status-dot-failed {
background-color: #dc2626;
}
/* Row actions dropdown */
.actions-dropdown {
position: absolute;
right: 0;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
z-index: 100;
width: max-content;
min-width: 80px;
padding: 8px;
display: flex;
flex-direction: column;
}
.action-item {
display: flex;
align-items: center;
padding: 8px;
gap: 12px;
cursor: pointer;
background: none;
border: none;
outline: none;
border-radius: 6px;
font-size: 14px;
color: #3D4157;
text-decoration: none;
transition: background-color 0.15s ease;
}
.action-item:hover {
background-color: var(--color-primary-light, #E6EAFF);
}
.action-item-danger {
color: #dc2626;
}
.action-item-danger:hover {
background-color: #fef2f2;
}
.action-icon {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
}
.action-divider {
height: 1px;
background-color: var(--color-link-water, #DFEAF2);
margin: 4px 0;
}
.action-toggle {
width: 36px;
height: 36px;
border-radius: 9999px;
border: 1px solid var(--color-link-water, #DFEAF2);
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-mirage-60, #6E7181);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.action-toggle:hover,
.action-toggle-active {
background: #f5f7ff;
border-color: var(--color-blue-30, #B3BFFF);
color: var(--color-blue, #1814F3);
}
.action-toggle:focus-visible {
outline: none;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15);
}
/* Pagination */
.pagy-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
font-size: 14px;
color: var(--color-mirage-70, #56596C);
}
.pagy-nav .page a,
.pagy-nav .page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--color-mirage-70, #56596C);
text-decoration: none;
box-sizing: border-box;
transition: background-color 0.15s ease, color 0.15s ease;
}
.pagy-nav .page a:hover {
background: var(--color-primary-light, #E6EAFF);
color: var(--color-blue, #1814F3);
}
.pagy-nav .page.active {
background: var(--color-blue, #0029FF);
color: #ffffff;
font-weight: 600;
border-radius: 8px;
}
.pagy-nav .page.disabled {
color: var(--color-disabled, #C4C6C8);
pointer-events: none;
}
.pagy-nav .page.gap {
background: transparent;
min-width: auto;
padding: 0 4px;
letter-spacing: 2px;
}
.pagy-nav .page.prev,
.pagy-nav .page.next {
margin: 0 4px;
}
.pagy-nav .page.prev a,
.pagy-nav .page.next a {
font-weight: 500;
color: var(--color-mirage-80, #3D4157);
}
/* ==========================================================================
DISABLED STATES
========================================================================== */
a:disabled,
button:disabled,
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
button:disabled {
background-color: #d1d5db;
color: #6b7280;
}
input:disabled {
background-color: #f3f4f6;
color: #9ca3af;
}
a.disabled {
background-color: #d1d5db;
color: #6b7280;
opacity: 0.5;
cursor: not-allowed;
}
/* Tailwind-like utility classes */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-white { background-color: #ffffff; }
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-600 { background-color: #16a34a; }
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-gray-400 { background-color: #9ca3af; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }
.text-yellow-800 { color: #92400e; }
.text-purple-800 { color: #6b21a8; }
.text-white { color: #ffffff; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-blue-500 { border-color: #3b82f6; }
.border-green-400 { border-color: #4ade80; }
.border-green-200 { border-color: #bbf7d0; }
.border-amber-400 { border-color: #fbbf24; }
.border-red-200 { border-color: #fecaca; }
.border-transparent { border-color: transparent; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ==========================================================================
DRAWFLOW OVERRIDES
Custom styling for workflow canvas and nodes
========================================================================== */
#drawflow {
width: 100%;
height: 100%;
background: #ffffff;
background-size: 14px 14px;
background-image: radial-gradient(#DFEAF2 1px, transparent 1px);
}
/* Original drawflow styles - keep for other visualizations */
.drawflow .drawflow-node {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: #0D122D !important;
box-shadow: none !important;
padding: 0 !important;
font-family: 'Inter', sans-serif !important;
width: max-content !important;
min-width: 240px;
max-width: 420px;
}
.drawflow .drawflow-node.selected .custom-node,
.drawflow .drawflow-node.selected .base-node {
border: 1px solid var(--color-blue-90, #1A3EFF) !important;
}
.node-warning-badge {
position: absolute;
top: -10px;
right: -10px;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
width: 28px;
height: 28px;
padding: 0;
z-index: 5;
}
/* Decision nodes: move warning badge to the left to avoid overlapping port labels */
#drawflow .drawflow .drawflow-node.IfElse .node-warning-badge,
#drawflow .drawflow .drawflow-node.Condition .node-warning-badge,
#drawflow .drawflow .drawflow-node.Decision .node-warning-badge {
right: auto;
left: -10px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
cursor: help;
box-sizing: border-box;
}
.node-warning-badge svg {
width: 18px;
height: 18px;
}
.node-warning-badge::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
z-index: 6;
padding: 6px 8px;
border-radius: 6px;
background: #0D122D;
color: #ffffff;
font-size: 11px;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
.node-warning-badge:hover::after {
opacity: 1;
transform: translateY(0);
}
.node-warning-badge:hover {
transform: scale(1.1);
box-shadow: 0 3px 6px rgba(245, 158, 11, 0.5);
}
/* Node context menu trigger button */
#drawflow .node-menu-btn {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 4px;
color: var(--color-mirage-30, #B6B8C0);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
z-index: 5;
padding: 0;
outline: none;
box-shadow: none;
}
#drawflow .node-menu-btn:hover {
background-color: var(--color-mirage-05, #F3F3F5);
color: var(--color-mirage-80, #3D4157);
}
/* Shared floating context menu for nodes */
.node-context-menu {
position: fixed;
z-index: 10000;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
min-width: 160px;
padding: 8px;
display: flex;
flex-direction: column;
}
.node-context-menu.hidden {
display: none;
}
.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
display: flex;
flex-direction: column;
justify-content: center;
}
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
border: 0 !important;
background: transparent !important;
cursor: crosshair !important;
}
.drawflow .connection .main-path {
fill: none !important;
stroke-width: 5px !important;
stroke: #DFEAF2 !important;
pointer-events: all !important;
cursor: pointer !important;
}
.drawflow .connection .main-path:hover {
stroke: var(--color-blue-90, #1A3EFF) !important;
stroke-width: 6px !important;
}
.drawflow .drawflow-delete {
background: #ef4444;
color: white;
border: none;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* ==========================================================================
CUSTOM OUTPUT PORTS
Circle-style output ports with labels
========================================================================== */
.custom-outputs {
position: absolute;
right: 0;
top: 46%;
transform: translate(50%, -50%);
}
.drawflow-node-output {
position: relative;
display: flex;
align-items: flex-end;
width: 20px;
height: 20px;
justify-content: center;
margin-bottom: 5px;
}
.drawflow-node-output::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
width: 14px;
height: 14px;
background: #DFEAF2;
border-radius: 50%;
border: 1.5px solid #DFEAF2;
}
.custom-port-label {
max-width: 40px;
margin-left: -40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
/* ==========================================================================
CUSTOM INPUT PORT (Arrow style)
========================================================================== */
.custom-port-arrow {
position: absolute;
left: 0;
top: 50%;
transform: translate(-81%, -67%);
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
VERTICAL LAYOUT MODE
Adjustments for vertical workflow orientation (applied when #drawflow has
the `.vertical` class)
========================================================================== */
/* Inputs container: tall enough to span the detached "Connect Here" pill
AND the node's top edge. pointer-events is gated by .connection-mode so it
only intercepts clicks while a connection drag is in flight (otherwise
panning/clicks above the node would be eaten by the invisible container). */
#drawflow.vertical .drawflow .drawflow-node .inputs {
position: absolute !important;
left: 50% !important;
top: 0 !important;
right: auto !important;
transform: translate(-50%, -100%) !important;
display: block !important;
height: 44px !important;
z-index: 9999 !important;
pointer-events: none !important;
isolation: isolate;
}
/* Outputs container: decision-style nodes keep a tight flex layout for the
3 branch labels (PASS / HUMAN_REVIEW / REJECT). Non-decision override is
below: a tall block container that covers the "Connect" pill area. */
#drawflow.vertical .drawflow .drawflow-node .outputs {
position: absolute !important;
left: 50% !important;
top: 100% !important;
bottom: auto !important;
right: auto !important;
transform: translate(-50%, -66%) !important;
flex-direction: row !important;
display: flex !important;
gap: 0;
width: auto !important;
z-index: 9999 !important;
pointer-events: auto !important;
isolation: isolate;
}
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .outputs {
transform: translate(-50%, 0) !important;
display: block !important;
height: 44px !important;
cursor: crosshair !important;
}
/* Match cursor on the input container during a drag so the "Drop Here"
pill area reads as a valid drop target. */
#drawflow.vertical.connection-mode .drawflow .drawflow-node .inputs {
cursor: crosshair !important;
}
/* Activate hit testing on the input container only while a connection drag
is active. This is what makes mouseup land on .inputs (a node descendant)
when the user releases on the detached "Drop Here" pill cue. Output
containers stay pointer-events: none so connection-line clicks pass
through to the SVG path for selection/deletion. */
#drawflow.vertical.connection-mode .drawflow .drawflow-node .inputs {
pointer-events: auto !important;
}
/* Width of the tall input/output hit container for non-decision nodes. */
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .inputs,
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .outputs {
width: calc(100% - 44px) !important;
min-width: 170px !important;
max-width: 360px !important;
}
/* The .input/.output port is the actual Drawflow drag anchor. We pin it
absolutely inside the (now tall) inputs/outputs container so the visible
port still sits at the node edge — Drawflow's drag-start hit detection
and our custom path routing both expect the anchor at the edge. The
surrounding tall container covers the pill area for mouseup capture. */
#drawflow.vertical .drawflow .drawflow-node .input,
#drawflow.vertical .drawflow .drawflow-node .input:hover {
position: absolute !important;
left: 50% !important;
bottom: -7px !important;
transform: translateX(-50%) !important;
width: 280px !important;
height: 14px !important;
margin: 0 !important;
cursor: crosshair !important;
background: transparent !important;
pointer-events: auto !important;
border-radius: 8px;
transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
z-index: 100 !important;
}
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .output,
#drawflow.vertical .drawflow .drawflow-node:not(.IfElse):not(.Condition):not(.Decision) .output:hover {
position: absolute !important;
left: 50% !important;
top: -7px !important;
transform: translateX(-50%) !important;
width: 280px !important;
height: 14px !important;
margin: 0 !important;
cursor: crosshair !important;
background: transparent !important;
pointer-events: auto !important;
border-radius: 8px;
transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
z-index: 100 !important;
}
#drawflow.vertical .drawflow .drawflow-node .input:hover,
#drawflow.vertical .drawflow .drawflow-node .output:hover {
background: transparent !important;
}
/* Detached connect affordance: explicit enough to teach the interaction,
but anchored off the node's real width instead of a fixed port strip. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision),
#drawflow.vertical .drawflow .drawflow-node.port-hover-input {
border-color: rgba(77, 105, 255, 0.44) !important;
}
/* (Stale flex sizing rule removed — .input/.output are absolutely positioned
inside their now-tall container, see rules above.) */
/* Detached pill cue rendered above (input) or below (output) the node card.
The pill has pointer-events: none; releases that land on it are caught by
the document-level fallback in visualization_controller.js. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision) .outputs::after,
#drawflow.vertical .drawflow .drawflow-node.port-hover-input .inputs::after {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1A3EFF;
background: #FFFFFF;
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(84, 109, 255, 0.32);
box-shadow: 0 4px 14px rgba(13, 18, 45, 0.1);
pointer-events: none;
white-space: nowrap;
z-index: 1000;
}
/* Pill sits INSIDE the tall .inputs/.outputs container — that way mouseup
on the pill area falls through (pill has pointer-events: none) onto the
container, which is a node descendant and gets caught by the canvas
mouseup fallback. Anchored near the inner edge of the container so the
pill sits close to the node card (about 8px gap), not floating far away. */
#drawflow.vertical .drawflow .drawflow-node.port-hover-input .inputs::after {
bottom: 8px;
content: "Connect Here";
}
#drawflow.vertical .drawflow .drawflow-node.port-hover-output:not(.IfElse):not(.Condition):not(.Decision) .outputs::after {
top: 8px;
content: "Connect";
}
#drawflow.vertical.connection-mode .drawflow .drawflow-node.port-hover-input .inputs::after {
content: "Drop Here";
color: #FFFFFF;
background: #1A3EFF;
border-color: #1A3EFF;
box-shadow: 0 6px 16px rgba(26, 62, 255, 0.32);
}
/* Decision node: 3 outputs spread across the row, each wide enough for
its label so clicking the label drags from that specific port. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .outputs,
#drawflow.vertical .drawflow .drawflow-node.Condition .outputs,
#drawflow.vertical .drawflow .drawflow-node.Decision .outputs {
width: 260px;
justify-content: space-between;
}
#drawflow.vertical .drawflow .drawflow-node.IfElse .output,
#drawflow.vertical .drawflow .drawflow-node.Condition .output,
#drawflow.vertical .drawflow .drawflow-node.Decision .output {
width: 100px !important;
height: 14px !important;
flex: 0 0 100px !important;
margin: 0 !important;
position: relative !important;
cursor: crosshair !important;
}
/* Decision port labels: sit near the TOP of the port, just below the
node edge, so they read as belonging to the Decision node.
pointer-events: none so clicks pass through to the parent port. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_3::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_1::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_2::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_3::after {
left: 50% !important;
top: 2px !important;
bottom: auto !important;
transform: translateX(-50%) !important;
pointer-events: none;
}
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_1:hover::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_2:hover::after,
#drawflow.vertical .drawflow .drawflow-node.IfElse .output_3:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Condition .output_3:hover::after,
#drawflow.vertical .drawflow .drawflow-node.Decision .output_3:hover::after {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 8px rgba(13, 18, 45, 0.08);
}
/* Vertical layout: Decision node matches the height of other nodes (72px).
The extra 100px height from the horizontal layout was only needed to stack
3 output ports vertically along the right edge. */
#drawflow.vertical .drawflow .drawflow-node.IfElse .base-node,
#drawflow.vertical .drawflow .drawflow-node.Condition .base-node,
#drawflow.vertical .drawflow .drawflow-node.Decision .base-node {
height: 72px !important;
}
/* Node drag items */
.node-drag-item {
transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.node-drag-item:hover {
transform: translateY(-1px);
}
.node-drag-item:active {
transform: scale(0.98);
opacity: 0.8;
}
/* Sidebar transitions */
[data-visualization-ui-target="leftSidebar"],
[data-visualization-ui-target="rightSidebar"] {
transition: width 0.2s ease, opacity 0.2s ease;
}
[data-visualization-ui-target="leftSidebar"].collapsed,
[data-visualization-ui-target="rightSidebar"].collapsed {
opacity: 0;
}
/* Form inputs */
input[type="text"],
input[type="url"],
input[type="number"],
input[type="email"],
select:not(.btn-demo-select),
textarea {
display: block;
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: #111827;
background-color: #ffffff;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:not(.btn-demo-select):focus,
textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
/* Form input - Motion styled */
.form-input {
display: block;
width: 100%;
padding: 12px 16px;
font-size: 15px;
line-height: 1.5;
color: var(--color-mirage, #0D122D);
background-color: #ffffff;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-input::placeholder {
color: var(--color-mirage-30, #B6B8C0);
}
.form-input:focus {
outline: none;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}
/* Form card */
.form-card {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
border: 1px solid var(--color-link-water, #DFEAF2);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Authentication */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 56px 32px;
background: linear-gradient(135deg, #f3f6ff 0%, #f7fbf5 55%, #fff7f0 100%);
position: relative;
overflow: hidden;
font-family: "Space Grotesk", "Helvetica Neue", sans-serif;
color: #0b1227;
}
.auth-content {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
gap: 48px;
align-items: center;
max-width: 1100px;
width: 100%;
}
.auth-orb {
position: absolute;
border-radius: 9999px;
filter: blur(0);
opacity: 0.6;
animation: auth-float 16s ease-in-out infinite;
}
.auth-orb-1 {
width: 260px;
height: 260px;
top: -40px;
left: -60px;
background: radial-gradient(circle at 30% 30%, #b9d3ff, transparent 70%);
}
.auth-orb-2 {
width: 220px;
height: 220px;
bottom: -60px;
right: 15%;
background: radial-gradient(circle at 50% 50%, #c5f2d8, transparent 70%);
animation-delay: -4s;
}
.auth-orb-3 {
width: 180px;
height: 180px;
top: 30%;
right: -40px;
background: radial-gradient(circle at 40% 40%, #ffd7b0, transparent 70%);
animation-delay: -8s;
}
@keyframes auth-float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-14px);
}
100% {
transform: translateY(0);
}
}
.auth-side {
position: relative;
z-index: 1;
max-width: 520px;
}
.auth-brand {
display: block;
height: 28px;
width: auto;
margin-bottom: 16px;
}
.auth-title {
font-size: 34px;
line-height: 1.15;
font-weight: 600;
margin-bottom: 16px;
}
.auth-subtitle {
font-size: 15px;
color: #4b5563;
margin-bottom: 32px;
}
.auth-metrics {
display: flex;
gap: 24px;
}
.auth-metric {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(24, 20, 243, 0.08);
border-radius: 14px;
padding: 14px 18px;
min-width: 140px;
box-shadow: 0 6px 16px rgba(12, 20, 36, 0.06);
}
.auth-metric-value {
display: block;
font-size: 18px;
font-weight: 600;
color: #0b1227;
}
.auth-metric-label {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 4px;
}
.auth-card {
position: relative;
z-index: 1;
background: #ffffff;
border-radius: 18px;
border: 1px solid rgba(24, 20, 243, 0.08);
box-shadow: 0 18px 40px rgba(12, 20, 36, 0.12);
padding: 28px;
animation: auth-rise 0.5s ease-out;
}
@keyframes auth-rise {
from {
transform: translateY(12px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.auth-card-header h2 {
font-size: 22px;
font-weight: 600;
margin: 0 0 6px 0;
}
.auth-card-header p {
font-size: 13px;
color: #6b7280;
margin-bottom: 20px;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.auth-label {
font-size: 13px;
font-weight: 500;
color: #4b5563;
display: block;
margin-bottom: 8px;
}
.auth-field .form-input {
background: #f5f7ff;
border-color: #d9e1f7;
}
.auth-field .form-input:focus {
background: #ffffff;
}
.auth-submit {
margin-top: 8px;
height: 44px;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 12px;
}
.auth-forgot-link {
text-align: right;
margin-top: 16px;
font-size: 13px;
}
.auth-errors {
background: var(--color-secondary-token-red-light, #FFE0EB);
color: var(--color-token-red, #FA3A55);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
}
.auth-errors p {
margin: 0;
}
.auth-errors p + p {
margin-top: 4px;
}
.auth-footer-link {
text-align: center;
font-size: 14px;
color: var(--color-mirage-70, #56596C);
margin-top: 20px;
}
.invite-modal-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 10px;
background-color: var(--color-primary-light, #E6EAFF);
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 900px) {
.auth-shell {
padding: 40px 20px;
}
.auth-content {
grid-template-columns: 1fr;
}
.auth-side {
text-align: center;
margin: 0 auto;
}
.auth-metrics {
justify-content: center;
flex-wrap: wrap;
}
}
/* Workflow badge */
.workflow-badge {
display: inline-block;
padding: 8px 16px;
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
border: 1px solid rgba(24, 20, 243, 0.1);
border-radius: 24px;
font-size: 13px;
color: var(--color-mirage-60, #6E7181);
margin-bottom: 32px;
}
.workflow-badge strong {
color: var(--color-blue, #1814F3);
font-weight: 600;
}
/* Signed-in user chip */
.nav-user {
display: flex;
align-items: center;
gap: 12px;
}
.user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 9999px;
background: #f0f4ff;
border: 1px solid #dfeaf2;
color: #1a3eff;
font-size: 12px;
font-weight: 500;
}
.user-avatar {
width: 24px;
height: 24px;
border-radius: 9999px;
background: #1814F3;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.user-email {
color: #1a3eff;
}
@media (max-width: 640px) {
.user-email {
display: none;
}
}
/* Goal cards */
.goal-cards-container {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 700px;
margin: 0 auto;
}
.goal-cards-container form,
.goal-cards-container button {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.goal-card {
background-color: #ffffff;
border-radius: 12px;
border: none !important;
outline: none !important;
padding: 20px 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease;
}
.goal-card:hover {
box-shadow: 0 8px 24px rgba(24, 20, 243, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
}
.goal-card-custom {
background-color: #fafafa;
}
/* Goal template text */
.goal-template-text {
text-decoration: none !important;
}
.goal-icon-container {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
WORKFLOW BUILDER STYLES
========================================================================== */
/* Top toolbar */
.builder-toolbar {
height: 56px;
background-color: #ffffff;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
flex-shrink: 0;
}
.toolbar-divider {
width: 1px;
height: 24px;
background-color: var(--color-link-water, #DFEAF2);
}
.builder-back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
color: var(--color-mirage-60, #6E7181);
transition: all 0.2s ease;
text-decoration: none;
}
.builder-back-btn:hover {
background-color: var(--color-mirage-05, #F3F3F5);
color: var(--color-mirage, #0D122D);
}
.builder-workflow-info {
display: flex;
align-items: center;
gap: 12px;
padding-left: 12px;
border-left: 1px solid var(--color-link-water, #DFEAF2);
}
.builder-workflow-name {
font-size: 15px;
font-weight: 600;
color: var(--color-mirage, #0D122D);
margin: 0;
}
.builder-workflow-code {
display: none;
}
.builder-zoom-controls {
display: flex;
align-items: center;
gap: 4px;
background-color: var(--color-mirage-05, #F3F3F5);
border-radius: 8px;
padding: 4px;
}
.builder-zoom-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
color: var(--color-mirage-60, #6E7181);
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.builder-zoom-btn:hover {
background-color: #ffffff;
color: var(--color-mirage, #0D122D);
}
.builder-zoom-label {
padding: 4px 8px;
font-size: 12px;
font-weight: 500;
color: var(--color-mirage-60, #6E7181);
cursor: pointer;
background: none;
border: none;
}
.builder-zoom-label:hover {
color: var(--color-mirage, #0D122D);
}
.builder-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
color: var(--color-mirage-60, #6E7181);
background: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.builder-icon-btn:hover {
background-color: var(--color-mirage-05, #F3F3F5);
color: var(--color-mirage, #0D122D);
}
/* Left sidebar */
.builder-sidebar {
width: 340px;
background-color: #ffffff;
border-right: 1px solid var(--color-link-water, #DFEAF2);
display: flex;
flex-direction: column;
transition: width 0.2s ease;
}
.builder-sidebar.collapsed {
width: 0;
border-right: none;
overflow: hidden;
}
/* Sidebar edge toggle - positioned relative to main content area */
.sidebar-edge-toggle {
position: absolute;
top: 50%;
left: 328px;
transform: translateY(-50%);
width: 24px;
height: 48px;
background: #ffffff;
border: 1px solid var(--color-link-water, #DFEAF2);
border-left: none;
border-radius: 0 8px 8px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: left 0.2s ease, background 0.2s ease;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.sidebar-edge-toggle:hover {
background: #f3f4f6;
}
.sidebar-toggle-icon {
width: 16px;
height: 16px;
color: #6b7280;
transition: transform 0.2s ease;
}
/* Collapsed state */
.builder-sidebar.collapsed + .sidebar-edge-toggle {
left: 0;
}
.builder-sidebar.collapsed + .sidebar-edge-toggle .sidebar-toggle-icon {
transform: rotate(180deg);
}
/* Right Sidebar - Node Configuration */
.builder-right-sidebar {
width: 340px;
min-width: 340px;
max-width: 340px;
flex-shrink: 0;
background-color: #ffffff;
border-left: 1px solid var(--color-link-water, #DFEAF2);
display: flex;
flex-direction: column;
opacity: 1;
overflow: hidden;
transition: min-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.25s ease,
border-color 0.3s ease;
}
.builder-right-sidebar.collapsed {
min-width: 0;
max-width: 0;
opacity: 0;
border-color: transparent;
pointer-events: none;
}
/* Header - matches left sidebar tabs area */
.builder-right-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px 14px 16px;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
background-color: #ffffff;
flex-shrink: 0;
}
.builder-right-sidebar-label {
font-size: 14px;
font-weight: 500;
color: var(--color-mirage-60, #6E7181);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.builder-right-sidebar-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: none;
border: none;
color: var(--color-mirage-60, #6E7181);
cursor: pointer;
transition: all 0.2s ease;
}
.builder-right-sidebar-close:hover {
background-color: var(--color-mirage-05, #F3F3F5);
color: var(--color-mirage, #0D122D);
}
/* Node info card - matches left sidebar node items */
.builder-right-sidebar-node-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 12px 16px 0 16px;
background-color: #ffffff;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.builder-right-sidebar-node-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: var(--node-vendor-color, var(--color-blue, #1814F3));
border-radius: 10px 0 0 10px;
}
.builder-right-sidebar-node-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
background-color: var(--color-blue-05, #F2F4FF);
color: var(--color-blue, #1814F3);
}
.builder-right-sidebar-node-icon svg {
width: 20px;
height: 20px;
}
.sidebar-node-initials {
font-size: 12px;
font-weight: 700;
color: #374151;
letter-spacing: -0.5px;
text-transform: uppercase;
}
.builder-right-sidebar-node-info {
flex: 1;
min-width: 0;
}
.builder-right-sidebar-node-name {
font-size: 14px;
font-weight: 600;
color: var(--color-mirage, #0D122D);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.builder-right-sidebar-node-type {
font-size: 11px;
font-weight: 500;
color: var(--color-mirage-60, #6E7181);
margin-top: 2px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.builder-right-sidebar-node-type-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-blue, #1814F3);
background-color: var(--color-blue-05, #F2F4FF);
padding: 2px 6px;
border-radius: 4px;
}
.builder-right-sidebar-node-desc {
font-size: 12px;
color: var(--color-mirage-70, #56596C);
}
.builder-right-sidebar-node-code {
font-size: 10px;
font-weight: 600;
color: var(--color-blue, #1814F3);
background: var(--color-blue-05, #F2F4FF);
padding: 1px 5px;
border-radius: 4px;
}
.builder-right-sidebar-node-price {
font-size: 10px;
font-weight: 600;
color: var(--color-token-green, #00DF81);
background: var(--color-secondary-token-green-light, #D9FAEC);
padding: 1px 5px;
border-radius: 4px;
}
/* Form content area */
.builder-right-sidebar-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
box-sizing: border-box;
max-width: 100%;
}
.builder-right-sidebar-content * {
max-width: 100%;
box-sizing: border-box;
}
/* Empty state */
.builder-right-sidebar-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--color-mirage-30, #B6B8C0);
font-size: 13px;
text-align: center;
}
/* Form section styling - matches left sidebar groups */
.builder-form-section {
margin-bottom: 16px;
}
.builder-form-section:last-child {
margin-bottom: 0;
}
.builder-form-section-title {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-mirage-30, #B6B8C0);
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
display: flex;
align-items: center;
gap: 6px;
}
/* Form inputs - matches left sidebar search input */
.builder-form-label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--color-mirage-80, #3D4157);
margin-bottom: 4px;
}
.builder-form-input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
color: var(--color-mirage, #0D122D);
background-color: var(--color-mirage-05, #F3F3F5);
border: 1px solid transparent;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
}
.builder-form-input::placeholder {
color: var(--color-mirage-30, #B6B8C0);
}
.builder-form-input:focus {
outline: none;
background-color: #ffffff;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}
.builder-form-select {
width: 100%;
padding: 10px 12px;
font-size: 14px;
color: var(--color-mirage, #0D122D);
background-color: var(--color-mirage-05, #F3F3F5);
border: 1px solid transparent;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236E7181'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-right: 36px;
}
.builder-form-select:focus {
outline: none;
background-color: #ffffff;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}
.builder-form-textarea {
width: 100%;
padding: 10px 12px;
font-size: 14px;
color: var(--color-mirage, #0D122D);
background-color: var(--color-mirage-05, #F3F3F5);
border: 1px solid transparent;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
resize: vertical;
min-height: 80px;
}
.builder-form-textarea::placeholder {
color: var(--color-mirage-30, #B6B8C0);
}
.builder-form-textarea:focus {
outline: none;
background-color: #ffffff;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}
.builder-form-help {
font-size: 11px;
color: var(--color-mirage-60, #6E7181);
margin-top: 3px;
line-height: 1.4;
}
/* Info boxes in forms */
.builder-form-info {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background-color: var(--color-blue-05, #F2F4FF);
border: 1px solid var(--color-blue-30, #B3BFFF);
border-radius: 8px;
font-size: 12px;
color: var(--color-mirage-80, #3D4157);
}
.builder-form-info svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-blue, #1814F3);
}
.builder-form-warning {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background-color: #FFFBEB;
border: 1px solid #FCD34D;
border-radius: 8px;
font-size: 12px;
color: var(--color-mirage-80, #3D4157);
}
.builder-form-warning svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: #D97706;
}
.builder-form-success {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background-color: #ECFDF5;
border: 1px solid #6EE7B7;
border-radius: 8px;
font-size: 12px;
color: var(--color-mirage-80, #3D4157);
}
.builder-form-success svg {
flex-shrink: 0;
width: 16px;
height: 16px;
color: #059669;
}
/* Form container */
.builder-form-container {
display: flex;
flex-direction: column;
gap: 0;
}
/* Tabs */
.builder-tabs {
display: flex;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}
.builder-tab {
flex: 1;
padding: 14px 16px;
font-size: 14px;
font-weight: 500;
text-align: center;
color: var(--color-mirage-60, #6E7181);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.builder-tab:hover {
color: var(--color-mirage, #0D122D);
}
.builder-tab-active {
color: var(--color-blue, #1814F3);
border-bottom-color: var(--color-blue, #1814F3);
}
/* Search */
.builder-search {
padding: 12px 16px;
border-bottom: 1px solid var(--color-link-water, #DFEAF2);
}
.builder-search-input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
color: var(--color-mirage, #0D122D);
background-color: var(--color-mirage-05, #F3F3F5);
border: 1px solid transparent;
border-radius: 8px;
transition: all 0.2s ease;
box-sizing: border-box;
}
.builder-search-input::placeholder {
color: var(--color-mirage-30, #B6B8C0);
}
.builder-search-input:focus {
outline: none;
background-color: #ffffff;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.1);
}
/* Node list */
.builder-node-list {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.builder-node-empty {
color: var(--color-mirage-60, #6E7181);
font-size: 13px;
padding: 12px 8px;
text-align: center;
}
.builder-tab-description {
font-size: 12px;
color: var(--color-mirage-60, #6E7181);
margin-bottom: 16px;
}
/* Node groups */
.builder-node-group {
margin-bottom: 20px;
}
.builder-node-group:last-child {
margin-bottom: 0;
}
.builder-node-group-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-mirage-60, #6E7181);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
width: 100%;
background: none;
border: none;
padding: 6px 4px;
cursor: pointer;
border-radius: 6px;
transition: background-color 0.15s ease;
}
.builder-node-group-title:hover {
background-color: var(--color-mirage-05, #F3F3F5);
}
.builder-group-chevron {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.2s ease;
color: var(--color-mirage-30, #B6B8C0);
}
.builder-group-title-text {
flex: 1;
text-align: left;
}
/* Collapsed state */
.builder-node-group[data-collapsed="true"] .builder-group-chevron {
transform: rotate(-90deg);
}
.builder-node-group[data-collapsed="true"] .builder-node-items {
display: none;
}
.builder-vendor-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.builder-node-count {
font-weight: 400;
color: var(--color-mirage-30, #B6B8C0);
margin-left: auto;
}
/* Node items */
.builder-node-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.builder-node-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background-color: #ffffff;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 10px;
cursor: grab;
transition: all 0.2s ease;
min-height: 44px;
touch-action: none;
position: relative;
overflow: hidden;
}
.builder-node-item[data-tooltip] {
overflow: visible;
}
.builder-node-vendor-indicator {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
border-radius: 10px 0 0 10px;
}
.builder-node-item:hover {
border-color: var(--color-blue-30, #B3BFFF);
box-shadow: 0 2px 8px rgba(24, 20, 243, 0.08);
}
.builder-node-item:active {
cursor: grabbing;
border-color: var(--color-blue, #1814F3);
box-shadow: 0 4px 12px rgba(24, 20, 243, 0.15);
}
.builder-node-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
flex-shrink: 0;
}
.builder-node-icon svg {
width: 18px;
height: 18px;
}
.builder-node-initials {
font-size: 10px;
font-weight: 700;
color: #374151;
letter-spacing: -0.5px;
text-transform: uppercase;
}
/* Vendor initials on canvas nodes */
.canvas-node-initials {
font-size: 11px;
font-weight: 700;
color: #374151;
letter-spacing: -0.5px;
text-transform: uppercase;
}
/* Drag preview - minimal node representation */
.builder-drag-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.builder-drag-preview-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 6px;
flex-shrink: 0;
}
.builder-drag-preview-icon svg {
width: 16px;
height: 16px;
color: #374151;
}
.builder-drag-preview-name {
font-size: 13px;
font-weight: 500;
color: var(--color-mirage, #0D122D);
white-space: nowrap;
}
.builder-node-content {
flex: 1;
min-width: 0;
}
.builder-node-name {
font-size: 13px;
font-weight: 500;
color: var(--color-mirage, #0D122D);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.builder-node-desc {
font-size: 11px;
color: var(--color-mirage-60, #6E7181);
line-height: 1.3;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.builder-node-configurable-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-blue, #1814F3);
background-color: var(--color-blue-05, #F2F4FF);
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
}
.builder-node-api-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #005934;
background-color: #D9FAEC;
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
margin-left: 4px;
}
.builder-node-mock-badge {
display: inline-block;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #92640D;
background-color: #FFF3D6;
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
margin-left: 4px;
}
.builder-node-drag-handle {
color: var(--color-mirage-30, #B6B8C0);
flex-shrink: 0;
}
/* Node tooltip on hover */
.builder-node-item {
position: relative;
}
.builder-node-item[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
left: 12px;
top: 100%;
margin-top: 6px;
padding: 6px 8px;
border-radius: 6px;
background: #0D122D;
color: #ffffff;
font-size: 11px;
line-height: 1.3;
white-space: normal;
max-width: 240px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.1s ease-out, transform 0.1s ease-out, visibility 0.1s ease-out;
z-index: 20;
pointer-events: none;
}
.builder-node-item[data-tooltip]::before {
content: "";
position: absolute;
left: 18px;
top: 100%;
margin-top: 0;
border: 6px solid transparent;
border-bottom-color: #0D122D;
opacity: 0;
visibility: hidden;
transition: opacity 0.1s ease-out, visibility 0.1s ease-out;
z-index: 20;
pointer-events: none;
}
.builder-node-item[data-tooltip]:hover::after,
.builder-node-item[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Hide hover effects during drag operations */
.builder-sidebar-dragging .builder-node-item:hover {
border-color: var(--color-link-water, #DFEAF2);
box-shadow: none;
}
.builder-sidebar-dragging .builder-node-item[data-tooltip]::after,
.builder-sidebar-dragging .builder-node-item[data-tooltip]::before {
opacity: 0;
visibility: hidden;
}
.builder-node-drag-handle svg {
width: 16px;
height: 16px;
}
/* Canvas wrapper — positions the empty-state overlay relative to the canvas */
.builder-canvas-wrapper {
flex: 1 1 0%;
min-height: 0;
position: relative;
}
/* Canvas area */
.builder-canvas {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
cursor: grab;
background-color: var(--color-mirage-05, #F3F3F5);
background-image: radial-gradient(var(--color-mirage-20, #CFD0D5) 1px, transparent 1px);
background-size: 20px 20px;
}
.builder-canvas:active {
cursor: grabbing;
}
/* Empty canvas state — centered in visible canvas area */
.builder-canvas-empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 5;
pointer-events: none;
}
.builder-canvas-empty.hidden {
display: none;
}
.builder-canvas-empty-icon {
width: 48px;
height: 48px;
color: var(--color-mirage-30);
margin-bottom: 16px;
}
.builder-canvas-empty-heading {
font-size: 18px;
font-weight: 600;
color: var(--color-mirage-70);
margin: 0 0 8px 0;
}
.builder-canvas-empty-subtext {
font-size: 14px;
color: var(--color-mirage-30);
margin: 0;
}
/* Start node prompt — shown when canvas has nodes but no ApplicantSource */
.builder-start-prompt {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--color-blue-05);
border: 1px solid var(--color-blue-30);
border-radius: 8px;
color: var(--color-mirage-80);
font-size: 13px;
font-weight: 500;
z-index: 5;
pointer-events: none;
white-space: nowrap;
user-select: none;
}
.builder-start-prompt svg {
color: var(--color-blue-70);
flex-shrink: 0;
}
.builder-start-prompt.hidden {
display: none;
}
/* START badge on ApplicantSource nodes */
.node-start-badge {
position: absolute;
top: -8px;
left: 12px;
padding: 0 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 16px;
color: var(--color-blue-90, #1A3EFF);
background: var(--color-blue-05, #F2F4FF);
border: 1px solid var(--color-blue-30, #B3BFFF);
border-radius: 10px;
z-index: 2;
}
/* ==========================================================================
CRITICAL: Drawflow container hierarchy must ALL fill the canvas
After Drawflow.start(), the structure becomes:
#drawflow.builder-canvas.parent-drawflow
└── .drawflow (created by Drawflow - handles pan events)
└── .precanvas (holds nodes, gets transformed)
========================================================================== */
/* The element we initialize Drawflow on - becomes .parent-drawflow */
#drawflow.parent-drawflow,
.builder-canvas.parent-drawflow {
width: 100% !important;
height: 100% !important;
min-height: 400px;
position: relative !important;
overflow: hidden !important;
display: block !important;
}
/* The main drawflow container - THIS handles pan/drag events */
#drawflow.parent-drawflow > .drawflow,
.parent-drawflow > .drawflow {
width: 100% !important;
height: 100% !important;
min-height: inherit !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
cursor: grab !important;
background: transparent !important;
overflow: visible !important;
transform-origin: 0 0 !important;
}
#drawflow.parent-drawflow > .drawflow:active,
.parent-drawflow > .drawflow:active {
cursor: grabbing !important;
}
/* Drawflow v0.x uses `.drawflow` as the transform layer */
/* Nodes should have move cursor */
.drawflow .drawflow-node {
cursor: move !important;
}
/* ==========================================================================
WORKFLOW BUILDER - Drawflow node customizations
========================================================================== */
#drawflow .drawflow .drawflow-node {
background: #ffffff !important;
border: 1px solid var(--color-link-water, #DFEAF2) !important;
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
padding: 0 !important;
min-width: 220px !important;
width: auto !important;
overflow: visible !important;
}
#drawflow .drawflow .drawflow-node:hover {
border-color: var(--color-blue-30, #B3BFFF) !important;
box-shadow: 0 4px 12px rgba(24, 20, 243, 0.08) !important;
}
#drawflow .drawflow .drawflow-node.selected {
border-color: var(--color-blue, #1814F3) !important;
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15) !important;
}
/* Multi-select: same visual ring as Drawflow's .selected */
#drawflow .drawflow .drawflow-node.multi-selected {
border-color: var(--color-blue, #1814F3) !important;
box-shadow: 0 0 0 3px rgba(24, 20, 243, 0.15) !important;
}
.drawflow .drawflow-node.multi-selected .custom-node,
.drawflow .drawflow-node.multi-selected .base-node {
border: 1px solid var(--color-blue-90, #1A3EFF) !important;
}
/* Lasso selection rectangle */
.lasso-selection-rect {
position: fixed;
border: 1.5px dashed var(--color-blue-70, #4D69FF);
background: rgba(24, 20, 243, 0.06);
pointer-events: none;
z-index: 9999;
}
/* Position connection port containers to align with visible node edges */
#drawflow .drawflow .drawflow-node .inputs {
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 10 !important;
}
#drawflow .drawflow .drawflow-node .outputs {
position: absolute !important;
right: 10px !important;
top: 50% !important;
transform: translate(50%, -50%) !important;
z-index: 10 !important;
}
/* Invisible clickable connection points */
#drawflow .drawflow .drawflow-node .input,
#drawflow .drawflow .drawflow-node .output {
width: 20px !important;
height: 30px !important;
background: transparent !important;
border: none !important;
cursor: crosshair !important;
}
/* Decision node: give more vertical room for 3 ports */
#drawflow .drawflow .drawflow-node.IfElse .output,
#drawflow .drawflow .drawflow-node.Condition .output,
#drawflow .drawflow .drawflow-node.Decision .output {
height: 26px !important;
margin: 2px 0 !important;
}
/* Decision node output port labels — 3 branches: Pass / Human Review / Fail */
#drawflow .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow .drawflow .drawflow-node.Decision .output_1::after,
#drawflow .drawflow .drawflow-node.Decision .output_2::after,
#drawflow .drawflow .drawflow-node.Decision .output_3::after {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
#drawflow .drawflow .drawflow-node.IfElse .output_1::after,
#drawflow .drawflow .drawflow-node.Decision .output_1::after {
content: 'Pass';
color: #00DF81;
}
#drawflow .drawflow .drawflow-node.IfElse .output_2::after,
#drawflow .drawflow .drawflow-node.Decision .output_2::after {
content: 'Human Review';
color: #FFBB38;
}
#drawflow .drawflow .drawflow-node.IfElse .output_3::after,
#drawflow .drawflow .drawflow-node.Decision .output_3::after {
content: 'Reject';
color: #FA3A55;
}
/* Connection lines - thicker for easier manipulation */
#drawflow .drawflow .connection .main-path {
stroke: var(--color-mirage-30, #B6B8C0) !important;
stroke-width: 3px !important;
cursor: pointer !important;
marker-end: url(#drawflow-arrow) !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
transition: stroke 140ms ease, stroke-width 140ms ease, opacity 140ms ease !important;
}
#drawflow .drawflow .connection:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path:hover {
stroke: var(--color-blue, #1814F3) !important;
stroke-width: 4px !important;
}
/* Selected connection: thicker line so the user can tell their click landed.
Clicking a connection sets Drawflow's connection_selected; pressing Delete
or Backspace then removes it (handleGlobalKeydown in the controller). */
#drawflow .drawflow .connection.selected .main-path {
stroke-width: 5px !important;
filter: drop-shadow(0 0 4px rgba(26, 62, 255, 0.45));
}
/* Floating delete button shown at the midpoint of a connection on hover.
Position is computed in JS from path.getPointAtLength(totalLength/2). */
#drawflow .connection-delete-btn {
position: absolute;
width: 22px;
height: 22px;
border-radius: 999px;
background: #FFFFFF;
border: 1px solid #E5E7EB;
color: #FA3A55;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
z-index: 10000;
transform: translate(-50%, -50%);
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
box-shadow: 0 2px 8px rgba(13, 18, 45, 0.14);
}
#drawflow .connection-delete-btn.is-visible {
display: flex;
}
#drawflow .connection-delete-btn:hover {
background: #FA3A55;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(250, 58, 85, 0.32);
}
#drawflow .connection-delete-btn svg {
width: 12px;
height: 12px;
display: block;
}
/* Arrow head color on hover */
#drawflow .drawflow .connection:hover:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
marker-end: url(#drawflow-arrow-hover) !important;
}
/* Decision node branch colors: pass=green, human_review=yellow, fail=red */
#drawflow .drawflow .connection.connection--decision-pass .main-path {
stroke: #00DF81 !important;
marker-end: url(#drawflow-arrow-pass) !important;
}
#drawflow .drawflow .connection.connection--decision-human-review .main-path {
stroke: #FFBB38 !important;
marker-end: url(#drawflow-arrow-human-review) !important;
}
#drawflow .drawflow .connection.connection--decision-fail .main-path {
stroke: #FA3A55 !important;
marker-end: url(#drawflow-arrow-fail) !important;
}
/* Connection preview while composing an association */
#drawflow .drawflow .connection.connection--preview .main-path {
stroke-width: 3px !important;
stroke-dasharray: 8 6 !important;
opacity: 0.92 !important;
animation: drawflow-connection-preview 0.9s linear infinite;
}
#drawflow .drawflow .connection.connection--preview:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
stroke: #7B8193 !important;
marker-end: url(#drawflow-arrow) !important;
}
#drawflow .drawflow .drawflow-node.connection-target--preview .base-node,
#drawflow .drawflow .drawflow-node.connection-target--preview .custom-node {
box-shadow: 0 0 0 2px rgba(24, 20, 243, 0.16), 0 12px 26px rgba(24, 20, 243, 0.12) !important;
}
#drawflow .drawflow .drawflow-node.connection-target--preview::after {
content: "";
position: absolute;
inset: -6px;
border-radius: 24px;
border: 2px dashed rgba(24, 20, 243, 0.28);
pointer-events: none;
}
@keyframes drawflow-connection-preview {
from {
stroke-dashoffset: 14;
}
to {
stroke-dashoffset: 0;
}
}
/* ==========================================================================
DECISION MODAL
Two-pane modal (Logic Builder + Preview) for configuring Decision nodes
========================================================================== */
.decision-modal-overlay {
position: fixed;
inset: 0;
background: rgba(13, 18, 45, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 200;
}
.decision-modal-overlay.hidden { display: none; }
.decision-modal {
width: min(920px, calc(100vw - 48px));
max-height: calc(100vh - 32px);
background: #FFFFFF;
border-radius: 14px;
box-shadow: 0 25px 50px -12px rgba(13, 18, 45, 0.35);
display: flex;
flex-direction: column;
overflow: hidden;
}
.decision-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 16px 22px 14px;
border-bottom: 1px solid #DFEAF2;
gap: 16px;
}
.decision-modal-title-row {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.decision-modal-title-group {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.decision-modal-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #F4E9FF;
display: flex;
align-items: center;
justify-content: center;
color: #0029FF;
flex-shrink: 0;
}
.decision-modal-title {
font-size: 18px;
font-weight: 600;
color: #0D122D;
margin: 0;
line-height: 1.2;
}
.decision-modal-subtitle {
font-size: 12px;
color: #56596C;
margin: 0;
line-height: 1.4;
}
.decision-modal-close {
background: transparent;
border: none;
color: #56596C;
cursor: pointer;
padding: 6px;
border-radius: 6px;
flex-shrink: 0;
}
.decision-modal-close:hover { background: #F3F3F5; color: #0D122D; }
.decision-modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
grid-template-rows: minmax(0, 1fr);
height: min(680px, calc(100vh - 140px));
overflow: hidden;
}
.decision-modal-logic,
.decision-modal-preview {
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.decision-modal-preview {
background: linear-gradient(180deg, #F7F9FB 0%, #FFFFFF 100%);
border-left: 1px solid #DFEAF2;
}
.decision-modal-tabs {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-bottom: 1px solid #DFEAF2;
flex-wrap: wrap;
}
.decision-modal-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 10px;
border-radius: 999px;
border: 1.5px solid #DFEAF2;
background: #FFFFFF;
color: #56596C;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.decision-modal-tab:hover { border-color: #B6B8C0; color: #0D122D; }
.decision-modal-tab-active.decision-modal-tab-pass {
border-color: #00DF81;
background: rgba(0, 223, 129, 0.08);
color: #0D122D;
}
.decision-modal-tab-active.decision-modal-tab-human-review {
border-color: #FFBB38;
background: rgba(255, 187, 56, 0.1);
color: #0D122D;
}
.decision-modal-tab-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.decision-modal-tab-label { white-space: nowrap; }
.decision-modal-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 999px;
background: #0D122D;
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
}
.decision-modal-tab-count-empty {
background: #F3F3F5;
color: #868896;
}
.decision-modal-fallback-pill {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: #FFF1F3;
color: #FA3A55;
font-size: 12px;
font-weight: 600;
}
.decision-modal-content {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
}
.decision-modal-preview-canvas {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.decision-modal-preview-canvas svg { width: 100%; height: 100%; max-height: 400px; }
.decision-preview-branch-hit { cursor: pointer; }
.decision-preview-branch-hit:hover rect { filter: brightness(0.97); }
.decision-modal-preview-label {
padding: 12px 18px 0;
font-size: 10px;
font-weight: 700;
color: #868896;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* decision-preview-path: no drop-shadow; flow animation handled by SVG packets */
.decision-preview-path { transition: stroke-width 0.15s ease; }
.decision-modal-hint {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: #F2F4FF;
color: #3D4157;
font-size: 12px;
line-height: 1.4;
}
.decision-modal-hint svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #0029FF;
margin-top: 1px;
}
/* ==========================================================================
DECISION MODAL — SENTENCE-STYLE RULE BUILDER
========================================================================== */
.decision-rule-scope {
border-radius: 10px;
padding: 14px 16px 12px;
margin: -6px -4px 0;
transition: background 0.2s ease;
box-sizing: border-box;
max-width: 100%;
}
.decision-rule-scope-pass {
background: rgba(0, 223, 129, 0.05);
border: 1px solid rgba(0, 223, 129, 0.18);
}
.decision-rule-scope-human-review {
background: rgba(255, 187, 56, 0.06);
border: 1px solid rgba(255, 187, 56, 0.22);
}
.decision-rule-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(13, 18, 45, 0.04);
color: #56596C;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
cursor: default;
}
.decision-rule-hint svg { color: #868896; }
.decision-rule-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 14px;
font-size: 14px;
font-weight: 500;
color: #3D4157;
line-height: 1.4;
}
.decision-rule-branch-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
}
.decision-rule-branch-chip-pass {
background: rgba(0, 223, 129, 0.15);
color: #007a45;
}
.decision-rule-branch-chip-human-review,
.decision-rule-branch-chip-human_review {
background: rgba(255, 187, 56, 0.2);
color: #9a6500;
}
.decision-rule-logic {
display: inline-flex;
align-items: center;
gap: 0;
padding: 2px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #DFEAF2;
overflow: visible;
margin: 0;
}
.decision-rule-logic.hidden { display: none; }
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn {
flex: 0 0 auto;
padding: 3px 12px;
border: none;
background: transparent;
color: #56596C;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
text-transform: lowercase;
line-height: 1.4;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn-active {
background: #0D122D;
color: #FFFFFF;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn:hover {
color: #0D122D;
}
.decision-rule-logic .decision-rule-logic-btn.ifelse-logic-btn-active:hover {
color: #FFFFFF;
}
.decision-rule-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.decision-rule-row.ifelse-condition-row {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 28px;
gap: 6px;
align-items: center;
padding: 8px;
margin: 0;
background: #FFFFFF;
border: 1px solid #DFEAF2;
border-radius: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
/* When remove button is hidden (only 1 condition), collapse its column so Value fills the space */
.decision-rule-row.ifelse-condition-row:has(.decision-rule-remove[style*="display:none"]),
.decision-rule-row.ifelse-condition-row:has(.decision-rule-remove[style*="display: none"]) {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 0;
}
.decision-rule-row.ifelse-condition-row:focus-within {
border-color: #0029FF;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.decision-rule-row .decision-rule-cell {
display: block;
min-width: 0;
max-width: 100%;
}
.decision-rule-row .builder-form-label { display: none; }
.decision-rule-row .decision-rule-cell > * {
max-width: 100%;
box-sizing: border-box;
}
.decision-rule-cell {
min-width: 0;
}
.decision-rule-cell .ifelse-field-picker { margin: 0; }
.decision-rule-cell .ifelse-field-picker-input-wrap {
border: 1px solid transparent;
background: #F7F9FB;
border-radius: 7px;
min-height: 34px;
}
.decision-rule-cell .ifelse-field-picker-input-wrap:hover {
background: #F3F3F5;
}
.decision-rule-cell .ifelse-field-picker-input {
font-size: 13px;
padding: 6px 10px;
background: transparent;
}
.decision-rule-cell .builder-form-select {
width: 100%;
font-size: 13px;
}
.decision-rule-operator,
.decision-rule-value {
width: 100%;
padding: 7px 10px;
font-size: 13px;
border: 1px solid transparent;
background: #F7F9FB;
border-radius: 7px;
color: #0D122D;
transition: background 0.15s ease, border-color 0.15s ease;
}
.decision-rule-operator { appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23868896' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 26px;
}
.decision-rule-operator:hover,
.decision-rule-value:hover {
background: #F3F3F5;
}
.decision-rule-operator:focus,
.decision-rule-value:focus {
outline: none;
background: #FFFFFF;
border-color: #0029FF;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.decision-rule-remove {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #868896;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.decision-rule-remove:hover {
background: #FFF1F3;
color: #FA3A55;
}
.decision-rule-add {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 4px 2px;
background: transparent;
border: none;
color: #0029FF;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: 4px;
}
.decision-rule-add:hover {
color: #0022cc;
text-decoration: underline;
}
/* ---- Grouped conditions (AND between groups, OR/AND within a group) ---- */
.decision-groups-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}
.decision-group {
display: flex;
flex-direction: column;
padding: 12px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid #DFEAF2;
border-radius: 10px;
}
.decision-group-header {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: 12px;
}
.decision-group-title {
font-size: 11px;
font-weight: 700;
color: #56596C;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.decision-group-header-label {
font-size: 12px;
color: #56596C;
font-weight: 500;
}
.decision-group-inner-logic {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px;
border-radius: 8px;
background: #FFFFFF;
border: 1px solid #DFEAF2;
}
.decision-group-inner-logic.hidden { display: none; }
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn {
flex: 0 0 auto;
padding: 3px 10px;
border: none;
background: transparent;
color: #56596C;
font-size: 11px;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.4;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn.ifelse-logic-btn-active {
background: #0D122D;
color: #FFFFFF;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn:hover {
color: #0D122D;
}
.decision-group-inner-logic .decision-rule-logic-btn.ifelse-group-inner-logic-btn.ifelse-logic-btn-active:hover {
color: #FFFFFF;
}
.decision-group-inner-logic > .decision-group-header-label {
padding: 0 4px;
}
.decision-group-remove {
margin-left: auto;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #868896;
border-radius: 6px;
cursor: pointer;
flex-shrink: 0;
}
.decision-group-remove:hover {
background: #FFF1F3;
color: #FA3A55;
}
/* Top-level AND/OR separator between groups */
.decision-group-top-separator {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
position: relative;
margin: 2px 0;
padding: 4px 0;
}
.decision-group-top-separator::before,
.decision-group-top-separator::after {
content: '';
position: absolute;
top: 50%;
height: 1px;
background: #DFEAF2;
width: 38%;
}
.decision-group-top-separator::before { left: 0; }
.decision-group-top-separator::after { right: 0; }
.decision-group-top-separator .ifelse-group-top-logic-btn {
position: relative;
z-index: 1;
padding: 5px 14px;
border: 1px solid #DFEAF2;
background: #FFFFFF;
color: #0D122D;
font-size: 12px;
font-weight: 800;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.2;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:first-of-type {
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
border-right: none;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:last-of-type {
border-top-right-radius: 999px;
border-bottom-right-radius: 999px;
}
.decision-group-top-separator .ifelse-group-top-logic-btn.ifelse-logic-btn-active {
background: #0D122D;
color: #FFFFFF;
border-color: #0D122D;
}
.decision-group-top-separator .ifelse-group-top-logic-btn:not(.ifelse-logic-btn-active):hover {
color: #0D122D;
background: #F7F9FB;
}
.decision-group-add {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
padding: 10px 12px;
background: transparent;
border: 1px dashed #DFEAF2;
color: #0029FF;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
width: 100%;
}
.decision-group-add:hover {
background: rgba(0, 41, 255, 0.04);
border-color: #0029FF;
}
.decision-rule-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 32px 16px;
color: #868896;
text-align: center;
font-size: 13px;
}
.decision-rule-empty svg { color: #C4C6C8; }
.decision-rule-empty p { margin: 0; max-width: 320px; line-height: 1.4; }
.decision-rule-hint-subtle {
/* no-op placeholder */
}
.decision-modal-loading {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
.decision-modal-spinner {
width: 24px;
height: 24px;
border: 3px solid #DFEAF2;
border-top-color: #0029FF;
border-radius: 50%;
animation: decision-modal-spin 0.8s linear infinite;
}
@keyframes decision-modal-spin { to { transform: rotate(360deg); } }
.decision-modal-error {
padding: 14px;
border-radius: 8px;
background: #FFF1F3;
color: #FA3A55;
font-size: 13px;
}
@media (max-width: 768px) {
.decision-modal-body {
grid-template-columns: 1fr;
}
.decision-modal-preview {
border-left: none;
border-top: 1px solid #DFEAF2;
}
}
/* Base node styling on canvas */
#drawflow .drawflow .base-node {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: transparent;
border: none !important;
width: 100%;
box-sizing: border-box;
}
#drawflow .drawflow .base-node.border-amber-400 {
background: #fffbeb;
}
#drawflow .drawflow .node-icon-container {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
flex-shrink: 0;
}
#drawflow .drawflow .node-icon-container svg {
width: 20px;
height: 20px;
}
/* Buttons */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.min-h-screen { min-height: 100vh; }
.h-screen { height: 100vh; }
.h-full { height: 100%; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-full { width: 100%; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-2 { height: 0.5rem; }
.w-2 { width: 0.5rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-0 { width: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pt-6 { padding-top: 1.5rem; }
.pl-2 { padding-left: 0.5rem; }
.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-10 { margin-left: 2.5rem; }
.mr-3 { margin-right: 0.75rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-r { border-right-width: 1px; }
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-visible { overflow: visible; }
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-table { max-width: 1100px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.shrink-0 { flex-shrink: 0; }
.whitespace-nowrap { white-space: nowrap; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.tracking-wider { letter-spacing: 0.05em; }
.inline-flex { display: inline-flex; }
.divide-y > * + * { border-top-width: 1px; }
.divide-gray-200 > * + * { border-color: #e5e7eb; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
/* Hover states */
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-blue-50:hover { background-color: #eff6ff; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:bg-red-50:hover { background-color: #fef2f2; }
.hover\:text-gray-700:hover { color: #374151; }
.hover\:text-gray-900:hover { color: #111827; }
.hover\:text-blue-800:hover { color: #1e40af; }
.hover\:text-blue-900:hover { color: #1e3a8a; }
.hover\:text-red-900:hover { color: #7f1d1d; }
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.no-underline { text-decoration: none; }
.hover\:underline:hover { text-decoration: underline; }
/* Ring utilities */
.ring-2 { box-shadow: 0 0 0 2px var(--tw-ring-color, currentColor); }
.ring-green-100 { --tw-ring-color: rgba(220, 252, 231, 1); }
.ring-amber-100 { --tw-ring-color: rgba(254, 243, 199, 1); }
.ring-blue-200 { --tw-ring-color: rgba(191, 219, 254, 1); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
.focus\:border-blue-500:focus { border-color: #3b82f6; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px; }
/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) {
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 1024px) {
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
/* Table styles */
table { border-collapse: collapse; }
th, td { padding: 0.75rem 1.5rem; }
/* Toast Notifications */
.toast-container {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
font-size: 14px;
font-weight: 500;
pointer-events: auto;
animation: toast-enter 0.3s ease-out;
max-width: 380px;
}
.toast-success {
background-color: #10B981;
color: white;
}
.toast-error {
background-color: #EF4444;
color: white;
}
.toast-warning {
background-color: #F59E0B;
color: white;
}
.toast-info {
background-color: var(--color-blue, #1814F3);
color: white;
}
.toast-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.toast-message {
flex: 1;
line-height: 1.4;
}
.toast-dismiss {
flex-shrink: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 8px;
min-width: 36px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: color 0.2s, background-color 0.2s;
}
.toast-dismiss:hover {
color: white;
background-color: rgba(255, 255, 255, 0.1);
}
.toast-exit {
animation: toast-exit 0.3s ease-in forwards;
}
@keyframes toast-enter {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toast-exit {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
/* ==========================================================================
DEMO EXECUTION STYLES
n8n-style workflow execution visualization
========================================================================== */
/* Demo button in toolbar */
.btn-demo {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
height: 38px;
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
border: none;
border-radius: 8px;
color: #ffffff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-demo:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-demo svg {
width: 16px;
height: 16px;
}
.btn-demo-disabled {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 14px;
height: 38px;
background: var(--color-mirage-05, #F3F3F5);
border: 1px solid var(--color-link-water, #DFEAF2);
border-radius: 8px;
color: var(--color-mirage-30, #B6B8C0);
font-size: 13px;
font-weight: 500;
cursor: default;
}
.btn-demo-disabled svg {
width: 16px;
height: 16px;
}
.btn-demo-dropdown-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #f3f4f6;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
height: 38px;
margin-left: 8px;
}
.btn-demo-dropdown-toggle:hover {
background: #e5e7eb;
}
.btn-demo-dropdown-toggle svg {
width: 14px;
height: 14px;
color: #6b7280;
}
/* Info icon with tooltip */
.scenario-info-icon {
display: flex;
align-items: center;
justify-content: center;
margin-left: 6px;
color: #9ca3af;
cursor: help;
position: relative;
}
.scenario-info-icon:hover {
color: #6b7280;
}
.scenario-info-icon[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
right: 0;
padding: 8px 12px;
background: #1f2937;
color: #ffffff;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1000;
pointer-events: none;
width: 200px;
text-align: left;
}
.scenario-info-icon[data-tooltip]::before {
content: "";
position: absolute;
top: calc(100% + 2px);
right: 4px;
border: 6px solid transparent;
border-bottom-color: #1f2937;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1000;
}
.scenario-info-icon[data-tooltip]:hover::after,
.scenario-info-icon[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
}
.scenario-dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
z-index: 100;
min-width: 120px;
}
.scenario-dropdown.hidden {
display: none;
}
.scenario-option {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
background: none;
border: none;
font-size: 14px;
color: #374151;
cursor: pointer;
transition: background 0.15s ease;
text-align: left;
}
.scenario-option:hover {
background: #f3f4f6;
}
.scenario-option:first-child {
border-bottom: 1px solid #e5e7eb;
}
.btn-stop {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
border: none;
border-radius: 8px;
color: #ffffff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.btn-stop:hover {
background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-stop svg {
width: 16px;
height: 16px;
}
/* Demo Modal */
.demo-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.demo-modal.hidden {
display: none;
}
.demo-modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
.demo-modal-content {
position: relative;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 500px;
margin: 20px;
animation: modal-enter 0.3s ease-out;
}
@keyframes modal-enter {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.demo-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e5e7eb;
}
.demo-modal-title {
font-size: 18px;
font-weight: 600;
color: #111827;
margin: 0;
}
.demo-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: none;
border: none;
color: #6b7280;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-modal-close:hover {
background-color: #f3f4f6;
color: #111827;
}
.demo-modal-body {
padding: 24px;
}
.demo-modal-description {
font-size: 14px;
color: #6b7280;
margin: 0 0 20px 0;
}
.demo-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #e5e7eb;
background-color: #f9fafb;
border-radius: 0 0 16px 16px;
}
/* Scenario options */
.demo-scenario-options {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.demo-scenario-option {
cursor: pointer;
}
.demo-scenario-option input[type="radio"] {
display: none;
}
.demo-scenario-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 12px;
transition: all 0.2s ease;
}
.demo-scenario-option input[type="radio"]:checked + .demo-scenario-card {
border-color: var(--color-blue, #1814F3);
background-color: #f8faff;
}
.demo-scenario-card:hover {
border-color: #d1d5db;
}
.demo-scenario-icon {
flex-shrink: 0;
}
.demo-scenario-info h3 {
font-size: 15px;
font-weight: 600;
color: #111827;
margin: 0 0 4px 0;
}
.demo-scenario-info p {
font-size: 13px;
color: #6b7280;
margin: 0;
}
.demo-scenario-result {
font-weight: 600;
}
/* Speed control */
.demo-speed-control {
display: flex;
align-items: center;
gap: 16px;
}
.demo-speed-label {
font-size: 14px;
font-weight: 500;
color: #374151;
}
.demo-speed-options {
display: flex;
gap: 8px;
}
.demo-speed-option {
cursor: pointer;
}
.demo-speed-option input[type="radio"] {
display: none;
}
.demo-speed-option span {
display: inline-block;
padding: 6px 14px;
font-size: 13px;
color: #6b7280;
background: #f3f4f6;
border-radius: 6px;
transition: all 0.2s ease;
}
.demo-speed-option input[type="radio"]:checked + span {
background: var(--color-blue, #1814F3);
color: #ffffff;
}
.demo-speed-option span:hover {
background: #e5e7eb;
}
.demo-speed-option input[type="radio"]:checked + span:hover {
background: var(--color-blue-90, #1A3EFF);
}
/* Progress Panel */
.demo-progress-panel {
position: fixed;
top: 80px;
right: 20px;
width: 340px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
z-index: 100;
overflow: hidden;
animation: slide-in-right 0.3s ease-out;
}
@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.demo-progress-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: #ffffff;
}
.demo-progress-title {
display: flex;
align-items: center;
gap: 10px;
}
.demo-progress-title h3 {
font-size: 14px;
font-weight: 600;
margin: 0;
}
.demo-badge {
display: inline-block;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
}
.demo-progress-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-progress-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.demo-progress-list {
padding: 16px 20px;
max-height: 300px;
overflow-y: auto;
}
.demo-progress-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
}
.demo-progress-item:last-child {
border-bottom: none;
}
.demo-progress-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-progress-dot {
width: 8px;
height: 8px;
background: #d1d5db;
border-radius: 50%;
}
.demo-progress-icon-pending .demo-progress-dot {
background: #f59e0b;
animation: pulse 1s infinite;
}
.demo-progress-icon-running svg {
animation: spin 1s linear infinite;
}
.demo-progress-info {
flex: 1;
min-width: 0;
}
.demo-progress-name {
display: block;
font-size: 13px;
font-weight: 500;
color: #111827;
}
.demo-progress-status {
display: block;
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}
.demo-progress-status-success {
color: #059669;
}
.demo-progress-status-running {
color: #2563eb;
}
.demo-progress-status-skipped {
color: #9ca3af;
}
.demo-progress-footer {
padding: 12px 20px;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
}
.demo-progress-stats {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #6b7280;
}
/* Node states - targets the inner .base-node element */
/* RUNNING STATE - Blue glow with pulsing animation */
.demo-node-running .base-node {
border: 2px solid #3b82f6 !important;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 4px 20px rgba(59, 130, 246, 0.3) !important;
animation: node-running-glow 1.5s ease-in-out infinite;
}
/* SUCCESS STATE - Green with solid background */
.demo-node-success .base-node {
border: 2px solid #10b981 !important;
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(16, 185, 129, 0.15) !important;
}
/* FAILED STATE - Red with strong visual feedback */
.demo-node-failed .base-node {
border: 2px solid #ef4444 !important;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2), 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}
/* PENDING STATE - Yellow/amber waiting indicator with clear "queued" appearance */
.demo-node-pending .base-node {
border: 2px dashed #f59e0b !important;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
animation: node-pending-pulse 1.5s ease-in-out infinite;
opacity: 0.85;
}
/* WAITING STATE - Orange with pulsing animation (for Wait nodes) */
.demo-node-waiting .base-node {
border: 2px solid #f97316 !important;
background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 4px 20px rgba(249, 115, 22, 0.3) !important;
animation: node-waiting-glow 1.5s ease-in-out infinite;
}
/* SKIPPED STATE - Grayed out */
.demo-node-skipped .base-node {
opacity: 0.5;
border: 1px dashed #9ca3af !important;
background: #f9fafb !important;
}
/* Running state glow animation */
@keyframes node-running-glow {
0%, 100% {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 4px 20px rgba(59, 130, 246, 0.3);
}
50% {
box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.15), 0 4px 30px rgba(59, 130, 246, 0.4);
}
}
/* Pending state pulse - more noticeable "waiting in queue" effect */
@keyframes node-pending-pulse {
0%, 100% {
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
opacity: 0.85;
}
50% {
box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.08);
opacity: 0.7;
}
}
/* Waiting state glow animation */
@keyframes node-waiting-glow {
0%, 100% {
box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25), 0 4px 20px rgba(249, 115, 22, 0.3);
}
50% {
box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.15), 0 4px 30px rgba(249, 115, 22, 0.4);
}
}
/* Waiting countdown overlay on node */
.demo-waiting-countdown {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
color: white;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
z-index: 15;
white-space: nowrap;
animation: countdown-pop-in 0.3s ease-out;
}
@keyframes countdown-pop-in {
0% {
transform: translateX(-50%) scale(0);
opacity: 0;
}
60% {
transform: translateX(-50%) scale(1.1);
}
100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
}
/* Status indicator on nodes - badge that appears at top-right */
.demo-status-indicator {
position: absolute;
top: -10px;
right: -10px;
width: 28px;
height: 28px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
border: 2px solid #ffffff;
animation: badge-pop-in 0.3s ease-out;
}
@keyframes badge-pop-in {
0% {
transform: scale(0);
opacity: 0;
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.demo-status-indicator svg {
width: 18px;
height: 18px;
}
/* Running indicator - blue background with spinning icon */
.demo-status-running {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-color: #3b82f6;
}
.demo-status-running svg {
color: #ffffff !important;
animation: status-spin 1s linear infinite;
}
/* Waiting indicator - orange background with spinning icon */
.demo-status-waiting {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
border-color: #f97316;
}
.demo-status-waiting svg {
color: #ffffff !important;
animation: status-spin 1s linear infinite;
}
@keyframes status-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Success indicator - green background with check */
.demo-status-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-color: #10b981;
}
.demo-status-success svg {
color: #ffffff !important;
}
/* Failed indicator - red background */
.demo-status-failed {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
border-color: #ef4444;
}
.demo-status-failed svg {
color: #ffffff !important;
}
/* Pending indicator - amber background with subtle pulse */
.demo-status-pending {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
border-color: #f59e0b;
animation: status-pending-pulse 1.2s ease-in-out infinite;
}
.demo-status-pending svg {
color: #ffffff !important;
}
@keyframes status-pending-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.9);
opacity: 0.7;
}
}
/* Skipped indicator - gray */
.demo-status-skipped {
background: #e5e7eb;
border-color: #9ca3af;
}
.demo-status-skipped svg {
color: #6b7280 !important;
}
/* Connection animation */
.demo-connection-active .main-path {
stroke: #10b981 !important;
stroke-width: 3px !important;
animation: connection-flow 0.5s ease-out;
}
@keyframes connection-flow {
0% {
stroke-dasharray: 10, 10;
stroke-dashoffset: 20;
}
100% {
stroke-dasharray: 10, 10;
stroke-dashoffset: 0;
}
}
/* Live execution: marching-ants flow animation on edges while the upstream
node has completed but the downstream hasn't started yet. Respects the
per-branch colors applied to Decision edges. */
.connection.connection--flowing .main-path {
stroke-width: 3.5px;
stroke-dasharray: 8 6;
animation: connection-flowing 1s linear infinite;
filter: drop-shadow(0 0 4px currentColor);
}
.connection.connection--flowing.connection--decision-pass .main-path {
stroke: #00DF81;
color: rgba(0, 223, 129, 0.55);
}
.connection.connection--flowing.connection--decision-human-review .main-path {
stroke: #FFBB38;
color: rgba(255, 187, 56, 0.55);
}
.connection.connection--flowing.connection--decision-fail .main-path {
stroke: #FA3A55;
color: rgba(250, 58, 85, 0.55);
}
.connection.connection--flowing:not(.connection--decision-pass):not(.connection--decision-human-review):not(.connection--decision-fail) .main-path {
stroke: #0029FF;
color: rgba(0, 41, 255, 0.45);
}
@keyframes connection-flowing {
from { stroke-dashoffset: 28; }
to { stroke-dashoffset: 0; }
}
/* Spin animation */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Completion Toast - replaces modal for better UX */
.demo-completion-toast {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
max-width: 450px;
animation: toast-slide-in 0.4s ease-out;
pointer-events: auto;
}
@keyframes toast-slide-in {
from {
opacity: 0;
transform: translateX(100%) scale(0.9);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.demo-toast-exit {
animation: toast-slide-out 0.3s ease-in forwards;
}
@keyframes toast-slide-out {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
.demo-toast-success {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: #ffffff;
}
.demo-toast-failed {
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
color: #ffffff;
}
.demo-toast-notice {
background: linear-gradient(135deg, var(--color-mirage) 0%, #1a2040 100%);
color: #ffffff;
}
.demo-notice-links {
margin-top: 8px;
}
.demo-notice-link-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.demo-notice-link-label {
font-size: 12px;
opacity: 0.85;
flex: 1;
}
.demo-notice-btn {
font-size: 11px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
transition: background-color 0.15s;
}
.demo-notice-btn:hover {
background: rgba(255, 255, 255, 0.35);
color: #ffffff;
}
.demo-toast-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-toast-icon svg {
width: 24px;
height: 24px;
}
.demo-toast-content {
flex: 1;
min-width: 0;
}
.demo-toast-title {
font-size: 15px;
font-weight: 600;
line-height: 1.3;
}
.demo-toast-subtitle {
font-size: 13px;
opacity: 0.85;
margin-top: 2px;
}
.demo-toast-action {
flex-shrink: 0;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
color: #ffffff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-toast-action:hover {
background: rgba(255, 255, 255, 0.3);
}
.demo-toast-close {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
}
.demo-toast-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* Legacy completion modal - kept for backwards compatibility */
.demo-completion-content {
text-align: center;
padding: 40px 24px;
}
.demo-completion-icon {
margin-bottom: 20px;
}
.demo-completion-icon svg {
width: 64px;
height: 64px;
}
.demo-completion-title {
font-size: 24px;
font-weight: 700;
margin: 0 0 24px 0;
}
.demo-completion-stats {
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: 24px;
}
.demo-stat {
text-align: center;
}
.demo-stat-label {
display: block;
font-size: 12px;
color: #6b7280;
margin-bottom: 4px;
}
.demo-stat-value {
display: block;
font-size: 18px;
font-weight: 600;
color: #111827;
}
/* Inspector panel */
.demo-inspector-panel {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
max-height: 400px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
z-index: 100;
overflow: hidden;
animation: slide-in-right 0.3s ease-out;
}
.demo-inspector-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
background: #1f2937;
color: #ffffff;
}
.demo-inspector-header h3 {
font-size: 14px;
font-weight: 600;
margin: 0;
}
.demo-inspector-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-inspector-close:hover {
background: rgba(255, 255, 255, 0.2);
}
.demo-inspector-tabs {
display: flex;
border-bottom: 1px solid #e5e7eb;
}
.demo-inspector-tab {
flex: 1;
padding: 10px;
font-size: 13px;
font-weight: 500;
color: #6b7280;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-inspector-tab:hover {
color: #374151;
}
.demo-inspector-tab.active {
color: var(--color-blue, #1814F3);
border-bottom-color: var(--color-blue, #1814F3);
}
.demo-inspector-content {
padding: 16px;
max-height: 280px;
overflow-y: auto;
background: #1f2937;
}
.demo-inspector-content pre {
margin: 0;
font-size: 12px;
line-height: 1.5;
}
.demo-inspector-content code {
color: #a5f3fc;
font-family: 'Monaco', 'Menlo', monospace;
}
/* ==========================================================================
WORKFLOW MODAL - Based on Figma design (node 58:3706)
Two-step modal for creating workflows
========================================================================== */
.workflow-modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 24px;
animation: workflow-modal-fade-in 0.2s ease-out;
}
.workflow-modal-overlay.hidden {
display: none;
}
@keyframes workflow-modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.workflow-modal {
background-color: white;
border: 1px solid #dfeaf2;
border-radius: 12px;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
overflow: hidden;
animation: workflow-modal-slide-in 0.25s ease-out;
}
@keyframes workflow-modal-slide-in {
from {
opacity: 0;
transform: scale(0.95) translateY(-10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* Modal Header */
.workflow-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px;
border-bottom: 1px solid #dfeaf2;
}
.workflow-modal-title-row {
display: flex;
align-items: center;
gap: 15px;
}
.workflow-modal-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f7f9fb;
border: 1px solid #f2f4ff;
border-radius: 9px;
}
.workflow-modal-icon svg {
width: 20px;
height: 20px;
color: var(--color-blue, #1814F3);
}
.workflow-modal-title {
font-size: 18px;
font-weight: 600;
color: #0d122d;
margin: 0;
line-height: 22px;
}
.workflow-modal-close {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #6e7181;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s ease;
}
.workflow-modal-close:hover {
color: #0d122d;
background-color: #f5f7fa;
}
/* Modal Body */
.workflow-modal-body {
padding: 24px;
}
.workflow-modal-description {
font-size: 16px;
line-height: 24px;
color: #252a42;
margin: 0 0 15px 0;
}
.workflow-modal-hint {
font-size: 14px;
line-height: 20px;
color: #868896;
margin: 0;
}
/* Modal Footer */
.workflow-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
padding: 18px 24px;
border-top: 1px solid #dfeaf2;
}
/* Step indicator */
.workflow-modal-steps {
display: flex;
align-items: center;
gap: 8px;
margin-right: auto;
}
.workflow-modal-step {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #dfeaf2;
transition: background-color 0.2s ease;
}
.workflow-modal-step.active {
background-color: var(--color-blue, #1814F3);
}
/* Goal cards for step 2 */
.workflow-modal-goals {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 340px;
overflow-y: auto;
}
.workflow-modal-goal {
display: flex;
align-items: center;
gap: 15px;
padding: 16px;
background-color: white;
border: 1px solid #dfeaf2;
border-radius: 9px;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
width: 100%;
}
.workflow-modal-goal:hover {
border-color: var(--color-blue-30, #B3BFFF);
background-color: #fafbfc;
}
.workflow-modal-goal.selected {
border-color: var(--color-blue, #1814F3);
background-color: var(--color-blue-05, #F2F4FF);
}
.workflow-modal-goal-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
flex-shrink: 0;
}
.workflow-modal-goal-content {
flex: 1;
min-width: 0;
}
.workflow-modal-goal-name {
font-size: 15px;
font-weight: 600;
color: #0d122d;
margin: 0 0 4px 0;
}
.workflow-modal-goal-description {
font-size: 13px;
color: #6e7181;
margin: 0;
line-height: 18px;
}
.workflow-modal-goal-arrow {
width: 20px;
height: 20px;
color: #b6b8c0;
flex-shrink: 0;
transition: color 0.15s ease;
}
.workflow-modal-goal:hover .workflow-modal-goal-arrow {
color: var(--color-blue, #1814F3);
}
/* Form inside modal */
.workflow-modal-form .form-input {
width: 100%;
}
/* ==========================================================================
MOTION DESIGN SYSTEM - FORM FIELDS
Standardized form field components with focus-within label color change
========================================================================== */
.form-field-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field-label {
display: block;
font-size: 14px;
font-weight: 500;
color: #56596C;
transition: color 0.2s ease;
}
.form-field-group:focus-within .form-field-label {
color: #0029FF;
}
.form-field-required {
color: #FA3A55;
margin-left: 2px;
}
.form-field-input {
display: block;
width: 100%;
padding: 10px 12px;
font-size: 14px;
line-height: 20px;
color: #3D4157;
background-color: #ffffff;
border: 1px solid #DFEAF2;
border-radius: 6px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.form-field-input::placeholder {
color: #868896;
}
.form-field-input:focus {
outline: none;
border-color: #0029FF;
box-shadow: 0 0 0 3px rgba(0, 41, 255, 0.1);
}
.form-field-input-error {
border-color: #FA3A55;
}
.form-field-input-error:focus {
border-color: #FA3A55;
box-shadow: 0 0 0 3px rgba(250, 58, 85, 0.1);
}
.form-field-select {
display: block;
width: 100%;
padding: 10px 12px;
font-size: 14px;
line-height: 20px;
color: #3D4157;
background-color: #ffffff;
border: 1px solid #DFEAF2;
border-radius: 6px;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
/* Multi-line text input. Mirrors .form-field-input — the explicit
font-family is what kills the browser-default monospace UA style
that