/* ============================================================================ PandoraBot Dashboard Shell v1 — sidebar navigation, health cards, docked live preview, visual standardization. Loaded on top of the inline page styles; activates only when dashboard.js adds .pbd-shell to . ============================================================================ */ /* ---- Sidebar ------------------------------------------------------------ */ body.pbd-shell { padding-left: 224px; } #pbd-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 208px; z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; /* the page styles ALL nav elements white+!important for its top bar */ background: #0F172A !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow-y: auto; } #pbd-sidebar .pbd-brand { color: #fff; font-weight: 800; font-size: 15px; padding: 4px 10px 14px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pbd-sidebar .pbd-group-title { color: #64748B; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 10px 4px; } #pbd-sidebar .pbd-nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #CBD5E1; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; transition: background 0.12s ease; } #pbd-sidebar .pbd-nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; } #pbd-sidebar .pbd-nav-item.active { background: #2563EB; color: #fff; } #pbd-sidebar .pbd-nav-ico { width: 18px; text-align: center; flex: 0 0 18px; } /* ---- Content area: managed cards hidden unless active group ------------- */ body.pbd-shell .card[data-pbd-group] { display: none; } body.pbd-shell .card[data-pbd-group].pbd-visible { display: block; } body.pbd-shell #onboarding-banner { display: none; } body.pbd-shell #onboarding-banner.pbd-visible { display: block; } /* Sections always expanded inside a focused page — chevrons are noise */ body.pbd-shell .card.pbd-visible .section-collapsible { cursor: default; } body.pbd-shell .card.pbd-visible .section-collapsible .chevron, body.pbd-shell .card.pbd-visible .sec-summary { display: none !important; } /* ---- Standardized card + heading language ------------------------------- */ body.pbd-shell .card { border: 1px solid #E2E8F0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } body.pbd-shell .card > h2 { font-size: 15px; } /* ---- Health cards (Overview) -------------------------------------------- */ #pbd-health { display: none; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; } #pbd-health.pbd-visible { display: grid; } .pbd-hcard { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; } .pbd-hcard .pbd-hrow { display: flex; align-items: center; gap: 8px; } .pbd-hdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } .pbd-hdot.ok { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); } .pbd-hdot.warn { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15); } .pbd-hdot.error { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .pbd-hdot.off { background: #CBD5E1; } .pbd-hcard .pbd-hlabel { font-weight: 700; font-size: 13.5px; color: #0F172A; } .pbd-hcard .pbd-hdetail { font-size: 12px; color: #64748B; line-height: 1.45; word-break: break-word; } .pbd-hcard .pbd-htest { align-self: flex-start; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: #2563EB; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 7px; padding: 4px 10px; cursor: pointer; } .pbd-hcard .pbd-htest:hover { background: #DBEAFE; } /* ---- Docked persistent preview (wide screens) ---------------------------- */ @media (min-width: 1200px) { body.pbd-shell.pbd-preview-docked { padding-right: 384px; } body.pbd-shell.pbd-preview-docked #pb-preview-drawer { transform: none !important; top: 0; right: 0; bottom: 0; width: 372px; border-left: 1px solid #E2E8F0; box-shadow: none; } body.pbd-shell.pbd-preview-docked #pb-preview-drawer .pb-prev-btn[title="Close"] { display: none; } } /* ---- Narrow screens: sidebar becomes a top chip strip -------------------- */ @media (max-width: 1023px) { body.pbd-shell { padding-left: 0; } #pbd-sidebar { position: sticky; top: 0; width: auto; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; gap: 6px; } #pbd-sidebar .pbd-brand, #pbd-sidebar .pbd-group-title { display: none; } #pbd-sidebar .pbd-nav-item { white-space: nowrap; width: auto; } } /* Old horizontal section-pill nav is redundant with the sidebar */ body.pbd-shell #sec-nav { display: none !important; } /* Section-specific tips + quick-default chips under the page header */ #pbd-tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; } .pbd-tip { font-size: 12px; color: #475569; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 9px; padding: 6px 11px; line-height: 1.45; } .pbd-tip-action { color: #2563EB; background: #EFF6FF; border-color: #BFDBFE; font-weight: 700; cursor: pointer; } .pbd-tip-action:hover { background: #DBEAFE; } /* unsaved-changes badge in the preview header */ #pbd-dirty { display: none; font-size: 11px; font-weight: 700; color: #B45309; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 7px; padding: 3px 8px; margin-right: 8px; white-space: nowrap; } #pbd-dirty.show { display: inline-block; } /* ============================================================================ Feature hero cards — summary + illustration, form hidden behind Configure ============================================================================ */ body.pbd-shell .pbd-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; margin-bottom: 6px; } @media (max-width: 900px) { body.pbd-shell .pbd-hero { grid-template-columns: 1fr; } } .pbd-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .pbd-badge-on { background: #DCFCE7; color: #15803D; } .pbd-badge-off { background: #F1F5F9; color: #64748B; } .pbd-hero-desc { font-size: 13.5px; color: #334155; margin: 0 0 10px; line-height: 1.55; } .pbd-hero-bullets { margin: 0 0 14px; padding: 0; list-style: none; } .pbd-hero-bullets li { font-size: 12.5px; color: #475569; padding: 3px 0 3px 22px; position: relative; } .pbd-hero-bullets li::before { content: '✓'; position: absolute; left: 2px; color: #16A34A; font-weight: 800; } .pbd-configure { font-size: 12.5px; font-weight: 700; color: #334155; background: #fff; border: 1px solid #CBD5E1; border-radius: 9px; padding: 8px 16px; cursor: pointer; } .pbd-configure:hover { border-color: #94A3B8; background: #F8FAFC; } body.pbd-shell .pbd-config-body { display: none; margin-top: 14px; border-top: 1px dashed #E2E8F0; padding-top: 14px; } body.pbd-shell .pbd-config-body.open { display: block; } /* Illustrations — skeleton mockups */ .pbd-illo { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 16px; min-height: 130px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .pbd-illo-dark { background: #475569; border-color: #334155; align-items: center; } .pbd-sk { height: 9px; border-radius: 5px; background: #E2E8F0; } .pbd-sk-w60 { width: 60%; } .pbd-sk-w40 { width: 40%; } .pbd-illo-price { font-size: 17px; font-weight: 800; color: #0F172A; } .pbd-illo-bubble { background: #EDE9FE; color: #6D28D9; font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 8px 12px; align-self: flex-start; } .pbd-illo-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pbd-illo-chips span { background: #fff; border: 1px solid #DDD6FE; color: #6D28D9; font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 4px 10px; } .pbd-illo-popup { background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 26px rgba(15,23,42,0.25); font-size: 13px; color: #DB2777; display: flex; flex-direction: column; gap: 8px; } .pbd-illo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .pbd-illo-grid div { background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; font-size: 11px; font-weight: 700; color: #334155; padding: 10px 4px; line-height: 1.7; } .pbd-illo-flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: #64748B; } .pbd-illo-flow span { background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 600; color: #334155; } /* split-card illustration extras */ .pbd-illo-coupon { background: #FEF3C7 !important; border-color: #FDE68A !important; color: #B45309 !important; font-weight: 800 !important; } .pbd-illo-code { background: #0F172A; color: #86EFAC; font-family: monospace; font-size: 11px; border-radius: 8px; padding: 10px 12px; word-break: break-all; line-height: 1.5; } /* ============================================================================ Sticky save bar + completeness strip + assistant-type card polish ============================================================================ */ #pbd-savebar { position: fixed; /* below the 64px top nav — at nav height it covered View Bot / Logout */ top: 74px; right: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.96); border: 1px solid #E2E8F0; border-radius: 12px; padding: 5px 6px 5px 14px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10); } #pbd-savebar:has(#pbd-save-state:empty) { padding-left: 6px; } body.pbd-shell.pbd-preview-docked #pbd-savebar { right: 400px; } #pbd-save-state { font-size: 12px; font-weight: 700; } #pbd-save-state.dirty { color: #B45309; } #pbd-save-state.saved { color: #15803D; } #pbd-save-state.failed { color: #B91C1C; } #pbd-save-btn { background: #2563EB; color: #fff; font-size: 13px; font-weight: 800; border: 0; border-radius: 10px; padding: 9px 18px; cursor: pointer; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35); } #pbd-save-btn:hover { background: #1D4ED8; } #pbd-save-btn:disabled { opacity: 0.6; cursor: default; } #pbd-progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .pbd-prog-chip { font-size: 12px; font-weight: 700; color: #64748B; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 999px; padding: 5px 12px; } .pbd-prog-chip.done { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; } /* Assistant type cards: clearer selected state with a check badge */ body.pbd-shell .sel-card { position: relative; } body.pbd-shell .sel-card.active::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; background: #2563EB; color: #fff; font-size: 13px; font-weight: 800; border-radius: 50%; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4); } /* channel card illustrations */ .pbd-illo-social { display: flex; gap: 10px; justify-content: center; } .pbd-illo-social span { flex: 0 0 74px; text-align: center; border-radius: 12px; padding: 10px 4px; font-size: 11px; font-weight: 700; color: #334155; line-height: 1.9; border: 1px solid rgba(15, 23, 42, 0.06); } .pbd-illo-order { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: #334155; line-height: 1.7; align-self: center; min-width: 190px; } .pbd-illo-track { display: flex; gap: 4px; margin-top: 8px; } .pbd-illo-track i { flex: 1; height: 5px; border-radius: 3px; background: #E2E8F0; } .pbd-illo-track i.on { background: #22C55E; } /* completeness chips belong to the Business page (and Overview) only */ #pbd-progress { display: none; } body[data-pbd-group="essentials"] #pbd-progress, body[data-pbd-group="overview"] #pbd-progress { display: flex; } /* business-section illustrations */ .pbd-illo-botcard { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px; min-width: 210px; align-self: center; } .pbd-illo-botrow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #0F172A; } .pbd-illo-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft, #EDE9FE); display: grid; place-items: center; font-size: 15px; } /* cart integration 5-step explainer chart */ .pbd-cartflow { display: flex; align-items: flex-start; gap: 4px; justify-content: center; } .pbd-cf-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; } .pbd-cf-ico { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #F5F3FF; border: 1.5px solid #DDD6FE; display: grid; place-items: center; font-size: 19px; } .pbd-cf-ico i { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: #7C3AED; color: #fff; font-size: 10px; font-weight: 800; font-style: normal; display: grid; place-items: center; } .pbd-cf-step span { font-size: 10.5px; font-weight: 700; color: #334155; text-align: center; line-height: 1.3; } .pbd-cf-arrow { color: #C4B5FD; font-weight: 800; margin-top: 14px; } .pbd-cf-note { margin-top: 12px; text-align: center; font-size: 11.5px; font-weight: 600; color: #6D28D9; background: #F5F3FF; border: 1px solid #DDD6FE; border-radius: 9px; padding: 7px 10px; } /* ============================================================================ Install on your Site — method cards ============================================================================ */ #pbd-install { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #pbd-install:not(.pbd-visible) { display: none !important; } .pbd-inst-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; } .pbd-inst-head { display: flex; gap: 12px; align-items: flex-start; } .pbd-inst-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; } .pbd-inst-head h3 { font-size: 14.5px; font-weight: 800; color: #0F172A; margin: 0 0 3px; } .pbd-inst-head p { font-size: 12px; color: #64748B; margin: 0; line-height: 1.5; } .pbd-inst-code { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 12px; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.55; color: #334155; white-space: pre-wrap; word-break: break-all; max-height: 170px; overflow-y: auto; margin: 0; flex: 1; } .pbd-inst-actions { display: flex; gap: 8px; } .pbd-copy { font-size: 12px; font-weight: 700; color: #2563EB; background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 7px 12px; cursor: pointer; } .pbd-copy:hover { background: #DBEAFE; } /* the dark original stays as data source but never shows */ body.pbd-shell .card.pbd-install-hidden { display: none !important; } /* custom-domain block promoted to a light card */ .pbd-domain-card details { border: 0; background: transparent !important; padding: 0 !important; margin-top: 4px; } .pbd-domain-card summary { display: none; } /* primary bubble card: snippet left, deploy steps right */ .pbd-bubble-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 900px) { .pbd-bubble-grid { grid-template-columns: 1fr; } } .pbd-deploysteps { display: flex; flex-direction: column; gap: 14px; } .pbd-ds-step { display: flex; gap: 12px; align-items: flex-start; } .pbd-ds-step b { display: block; font-size: 13px; color: #0F172A; } .pbd-ds-step span { font-size: 12px; color: #64748B; line-height: 1.5; } .pbd-ds-step .pbd-cf-ico { flex: 0 0 40px; width: 40px; height: 40px; font-size: 17px; } /* "More ways to install" — collapsed by default */ #pbd-more-install summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 800; color: #475569; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 18px; } #pbd-more-install summary span { font-weight: 500; color: #94A3B8; font-size: 12px; margin-left: 10px; } #pbd-more-install summary:hover { border-color: #94A3B8; } #pbd-more-install[open] summary { margin-bottom: 14px; } #pbd-more-install #pbd-install { display: grid !important; /* beats the legacy #pbd-install:not(.pbd-visible) rule */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }