/* ======================================================================== Agency Dashboard — platform.html Fully self-contained design system — does NOT load styles.css or its wood/forest/gold hotel-brand tokens. This is the agency's own tool, not any one client's site, so it gets its own identity: a quiet, neutral, Apple-inspired palette (near-black text, soft gray surfaces, a single blue accent) with color reserved for status meaning, not decoration. ===================================================================== */ :root { /* Surfaces */ --pf-bg: #f5f5f7; --pf-surface: #ffffff; --pf-surface-2: #fbfbfd; --pf-border-soft: #e8e8ed; /* Text */ --pf-text: #1d1d1f; --pf-text-secondary: #6e6e73; --pf-text-tertiary: #86868b; --pf-white: #ffffff; /* Single accent — the only saturated color used for actions/links */ --pf-accent: #0071e3; --pf-accent-hover: #0077ed; --pf-accent-press: #005fc0; --pf-accent-soft: #eef6fe; /* Status meaning only — never decorative. Text tones are picked so each one hits WCAG AA (4.5:1) against its own -soft background — the original --pf-success/#1e8e3e and --pf-warning/#a9660a only reached 3.75:1 and 4.10:1 there, so both were darkened slightly. */ --pf-success: #167a33; --pf-success-soft: #e6f6ea; --pf-warning: #96590a; --pf-warning-soft: #fdf1de; --pf-danger: #d70015; --pf-danger-soft: #fce8e9; --pf-neutral-soft: #f0f0f2; /* Category dots for add-on badges — small accents only, never fills */ --pf-dot-reviews: #af52de; --pf-dot-booking: #0071e3; --pf-dot-stats: #2ba9bc; --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03); --pf-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --pf-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.22); --pf-radius-sm: 8px; --pf-radius: 14px; --pf-radius-lg: 20px; --pf-radius-btn: 16px; /* rounded-square buttons — badges/status pills/toggles stay pill-shaped (999px), buttons don't */ --pf-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --pf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pf-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='1.75' y='2.75' width='12.5' height='11.5' rx='2.5' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3Cpath d='M1.75 6.25h12.5' fill='none' stroke='%236e6e73' stroke-width='1.5'/%3E%3Cpath d='M5.25 1v2.5M10.75 1v2.5' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ---- Reset + base ---- */ body.pf, body.pf * { box-sizing: border-box; } body.pf { margin: 0; min-height: 100vh; background: var(--pf-bg); color: var(--pf-text); font-family: var(--pf-font); line-height: 1.5; -webkit-font-smoothing: antialiased; } body.pf h1, body.pf h2, body.pf h3, body.pf h4 { font-family: var(--pf-font); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; color: var(--pf-text); margin: 0; } body.pf p { margin: 0; } body.pf a { color: var(--pf-accent); text-decoration: none; } body.pf a:hover { text-decoration: underline; } body.pf ::placeholder { color: var(--pf-text-tertiary); opacity: 1; } body.pf .muted { color: var(--pf-text-secondary); font-size: 0.95rem; } body.pf .login-card .muted { margin-bottom: 24px; } /* ---- Buttons ---- */ body.pf .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--pf-font); font-size: 0.95rem; font-weight: 600; padding: 11px 22px; border-radius: var(--pf-radius-btn); border: none; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; white-space: nowrap; } body.pf .btn:active { transform: scale(0.98); } body.pf .btn-primary, body.pf .btn-forest { background: var(--pf-accent); color: var(--pf-white); } body.pf .btn-primary:hover, body.pf .btn-forest:hover { background: var(--pf-accent-hover); } body.pf .btn-outline { background: var(--pf-neutral-soft); color: var(--pf-text); } body.pf .btn-outline:hover { background: var(--pf-border-soft); } body.pf .btn-gold { background: var(--pf-text); color: var(--pf-white); } body.pf .btn-gold:hover { background: #000; } body.pf .btn-danger { background: var(--pf-danger); color: var(--pf-white); } body.pf .btn-danger:hover { background: #b8000f; } body.pf .btn-block { width: 100%; } body.pf .btn-lg { padding: 14px 28px; font-size: 1.02rem; } body.pf .btn-sm { padding: 7px 15px; font-size: 0.83rem; } /* ---- Fields ---- */ body.pf .field { margin-bottom: 14px; } body.pf .field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--pf-text-secondary); margin-bottom: 6px; } body.pf .field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--pf-text-tertiary); } body.pf .field input, body.pf .field select, body.pf .field textarea { width: 100%; /* Never let a field exceed its container, so it always keeps the modal/card padding on BOTH sides. Matters most for native date/time inputs on iOS, which otherwise size to their own intrinsic width (see the iOS block below). */ max-width: 100%; min-width: 0; font-family: var(--pf-font); font-size: max(16px, 1rem); line-height: 1.4; min-height: 44px; padding: 10px 14px; border: none; border-radius: var(--pf-radius-sm); background-color: var(--pf-bg); color: var(--pf-text); caret-color: var(--pf-accent); color-scheme: light; transition: background-color 0.15s ease, box-shadow 0.15s ease; } body.pf .field textarea { min-height: 90px; resize: vertical; } body.pf .field select:hover:not(:focus), body.pf .field input[type="date"]:hover:not(:focus) { background-color: var(--pf-border-soft); } body.pf .field input:focus, body.pf .field select:focus, body.pf .field textarea:focus { outline: none; background-color: var(--pf-surface); box-shadow: 0 0 0 3.5px var(--pf-accent-soft); } body.pf .field select { appearance: none; -webkit-appearance: none; background-image: var(--pf-icon-chevron); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px auto; padding-right: 38px; cursor: pointer; } body.pf .field input[type="date"] { cursor: pointer; } body.pf .field input[type="date"]::-webkit-calendar-picker-indicator { color: transparent; opacity: 1; width: 18px; height: 18px; background: var(--pf-icon-calendar) center / contain no-repeat; cursor: pointer; } body.pf .field input:-webkit-autofill { -webkit-text-fill-color: var(--pf-text); -webkit-box-shadow: inset 0 0 0 1000px var(--pf-bg); } /* iOS Safari sizes date/time inputs to their own intrinsic content width and ignores width:100%, so on a phone they render wider than the text fields and overflow the modal's right padding (touching the card edge). Reset the native appearance and the value pseudo-element's default margin so they honour the box model like every other field. Scoped to iOS via @supports(-webkit-touch- callout) so desktop keeps its native calendar-picker button and time spinner completely untouched — this is purely an iPhone/iPad fix. */ @supports (-webkit-touch-callout: none) { body.pf .field input[type="date"], body.pf .field input[type="time"] { -webkit-appearance: none; appearance: none; } body.pf .field input[type="date"]::-webkit-date-and-time-value, body.pf .field input[type="time"]::-webkit-date-and-time-value { margin: 0; text-align: left; } } body.pf .field input:disabled, body.pf .field select:disabled, body.pf .field textarea:disabled { background-color: var(--pf-border-soft); color: var(--pf-text-tertiary); cursor: not-allowed; } body.pf .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.pf .field-hint { font-size: 0.8rem; color: var(--pf-text-secondary); margin-top: 4px; } /* ---- Header ---- */ body.pf { background: var(--pf-bg); min-height: 100vh; } .pf-header { background: rgba(251, 251, 253, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); padding: 13px 0; position: sticky; top: 0; z-index: 40; } .pf-header-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } .pf-brand { display: flex; align-items: center; gap: 12px; } .pf-brand-mark { width: 32px; height: 32px; flex: none; border-radius: 8px; } .pf-brand-name { font-size: 0.98rem; font-weight: 600; letter-spacing: -0.01em; color: var(--pf-text); display: flex; flex-direction: column; line-height: 1.3; } .pf-brand-name small { font-family: var(--pf-font); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; color: var(--pf-text-secondary); } .pf-logout { background: var(--pf-neutral-soft); border: none; color: var(--pf-text); font-family: var(--pf-font); font-weight: 600; font-size: 0.85rem; padding: 8px 16px; border-radius: 980px; cursor: pointer; } .pf-logout:hover { background: var(--pf-border-soft); } .pf-header-link { color: var(--pf-text-secondary); font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .pf-header-link:hover { color: var(--pf-accent); } /* ---- Login ---- */ .login-wrap { min-height: calc(100vh - 62px); display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--pf-surface); border-radius: var(--pf-radius-lg); padding: 36px; width: 100%; max-width: 400px; } .login-card h1 { font-size: 1.5rem; margin-bottom: 4px; } .login-msg { display: none; background: var(--pf-danger-soft); color: var(--pf-danger); padding: 10px 14px; border-radius: var(--pf-radius-sm); font-size: 0.9rem; margin-bottom: 14px; } .login-msg.show { display: block; } .login-hint { margin-top: 18px; font-size: 0.82rem; color: var(--pf-text-secondary); text-align: center; background: var(--pf-bg); padding: 10px; border-radius: var(--pf-radius-sm); } /* ---- Layout ---- */ /* The horizontal padding lives on .pf-wrap, not .pf-main — same structure as .pf-header-inner (max-width + margin:auto + padding all on one element), so the header and the page content center identically. Splitting the padding onto the outer .pf-main (as this used to do) shrinks the width .pf-wrap centers itself within, shifting it a few px out of line with the header above it. */ .pf-main { padding: 40px 0 64px; } .pf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } .pf-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; } .pf-slug-preview { font-size: 0.82rem; color: var(--pf-text-secondary); margin: -8px 0 18px; } .pf-slug-preview code { background: var(--pf-bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pf-text); } .pf-add-tabs { display: flex; gap: 8px; margin-bottom: 20px; } .pf-add-tab { background: var(--pf-neutral-soft); border: none; padding: 8px 14px; border-radius: 980px; font-family: var(--pf-font); font-weight: 600; font-size: 0.85rem; color: var(--pf-text-secondary); cursor: pointer; } .pf-add-tab.on { background: var(--pf-accent); color: var(--pf-white); } /* ---- Client list ---- A CSS Grid, not flex — every column has an explicit, non-content-based track size (fixed px, or fr of the remaining space), so a row's column positions never depend on THAT row's own content (badge count, dot presence, text length, etc.). That was the recurring bug with the old flex layout: any element whose width varied by row (a hidden/shown dot, a filtered badge list) shifted every column after it out of alignment. With fixed/fr tracks, columns line up by construction. */ .pf-client-grid { display: flex; flex-direction: column; gap: 10px; } .pf-client-card { background: var(--pf-surface); border: none; border-radius: var(--pf-radius); padding: 14px 22px; cursor: pointer; display: grid; grid-template-columns: minmax(180px, 1fr) 64px 110px minmax(160px, 1fr) 90px 20px; align-items: center; column-gap: 24px; text-align: left; font-family: var(--pf-font); width: 100%; } .pf-client-card-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pf-client-card-head h3 { font-family: var(--pf-font); font-weight: 600; font-size: 0.95rem; color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-client-card .pf-plan { font-size: 0.78rem; color: var(--pf-text-secondary); } .pf-stat-mrr, .pf-stat-tenure { display: flex; flex-direction: column; min-width: 0; } .pf-stat-mrr strong, .pf-stat-tenure strong { display: block; font-family: var(--pf-font); font-weight: 600; font-size: 1.05rem; color: var(--pf-text); } .pf-stat-mrr span, .pf-stat-tenure span { font-size: 0.76rem; color: var(--pf-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .pf-stat-mrr strong { font-weight: 600; font-size: 0.9rem; color: var(--pf-text-secondary); } .pf-client-card-badges { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; } .pf-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; padding: 4px 10px 4px 8px; border-radius: 980px; background: var(--pf-neutral-soft); color: var(--pf-text-tertiary); } .pf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pf-text-tertiary); flex: none; } /* Each add-on gets its own dot hue only when enabled — the pill itself stays neutral, so this reads as a small status accent rather than decoration. */ .pf-badge-testimonials.on { color: var(--pf-text); } .pf-badge-testimonials.on::before { background: var(--pf-dot-reviews); } .pf-badge-directBooking.on { color: var(--pf-text); } .pf-badge-directBooking.on::before { background: var(--pf-dot-booking); } .pf-badge-stats.on { color: var(--pf-text); } .pf-badge-stats.on::before { background: var(--pf-dot-stats); } /* Small live-status dot, separate from the identity dot above — only shown for add-ons with an actual widget signal (testimonials/directBooking), and only once the add-on is on. See featureHealth() in server.js. */ .pf-badge-live { width: 6px; height: 6px; border-radius: 50%; flex: none; } .pf-badge-live-healthy { background: var(--pf-success); } .pf-badge-live-quiet { background: var(--pf-warning); } .pf-badge-live-never { background: var(--pf-text-tertiary); } /* Reserves the same width as a visible dot without showing one — keeps every badge's width constant across rows regardless of live status (see the note where this class is applied in renderClientGrid()). */ .pf-badge-live-none { visibility: hidden; } .pf-client-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* The one visual cue that a row is clickable — a plain chevron, same idea as a table row or settings list item. */ .pf-card-chevron { display: flex; align-items: center; justify-content: center; color: var(--pf-text-tertiary); } .pf-card-chevron .mi { width: 18px; height: 18px; vertical-align: 0; } @media (max-width: 640px) { .pf-client-card { grid-template-columns: 1fr; row-gap: 12px; } .pf-client-card-badges, .pf-client-card-foot { justify-content: flex-start; } .pf-card-chevron { display: none; } } /* Health badge — a live signal from the embedded widget's own heartbeat (see clientHealth() in server.js), separate from account status: a client can be "active" but its widget hasn't been embedded/hit yet, or vice versa. */ .pf-health { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 980px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } .pf-health::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pf-health-healthy { background: var(--pf-success-soft); color: var(--pf-success); } .pf-health-quiet { background: var(--pf-warning-soft); color: var(--pf-warning); } .pf-health-never, .pf-health-legacy, .pf-health-off, .pf-health-dashboardOnly { background: var(--pf-neutral-soft); color: var(--pf-text-secondary); } .pf-health-offboarded { background: var(--pf-danger-soft); color: var(--pf-danger); } /* ---- Client detail ---- */ /* .pf-main's shared 40px top padding (also used by the tab-only list page) left more space above this button than .pf-back's old 18px margin-bottom left below it — pull it up by the difference so the gap reads the same on both sides, without touching .pf-main's padding (which the list page still needs at its full size). */ .pf-back { background: none; border: none; padding: 0; margin-top: -16px; margin-bottom: 24px; cursor: pointer; font-family: var(--pf-font); font-weight: 600; font-size: 0.9rem; color: var(--pf-text-secondary); } .pf-back:hover { color: var(--pf-text); } .pf-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .pf-detail-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pf-detail-title-row h1 { font-size: 1.7rem; } /* Tab strip (left) + action buttons (right), deliberately on the same row so they read as one header band — the tabs switch which section of the page is showing, the buttons act on the client regardless of which tab is open. */ .pf-detail-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; margin-bottom: 24px; border-top: 1px solid var(--pf-border-soft); } .pf-tabs { display: flex; gap: 28px; } .pf-tab { background: none; border: none; padding: 10px 2px; font-family: var(--pf-font); font-weight: 600; font-size: 1.05rem; color: var(--pf-text-secondary); cursor: pointer; border-bottom: 3px solid transparent; } .pf-tab:hover { color: var(--pf-text); } .pf-tab.on { color: var(--pf-text); border-bottom-color: var(--pf-accent); } /* Material icon base — shared visual primitive from icons.js. platform.css is otherwise self-contained (doesn't load admin.css), so it needs its own copy of this rule rather than relying on admin.css's. */ .mi { width: 1.15em; height: 1.15em; fill: currentColor; vertical-align: -0.18em; flex: none; } /* ---- Add-on usage tab ---- */ .pf-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; } .pf-usage-card { background: var(--pf-surface-2); border-radius: var(--pf-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; } /* Icon tint tracks the same live status as the pill on the right — color says "healthy vs. quiet vs. never" before you read a word. No border anywhere here, same rule as the rest of this system (see Shape & elevation in the style guide): a colored left-border accent was tried and removed — it read as a stray line, not a status signal. Don't reintroduce single-sided colored borders anywhere in this design system; use a fill tint (icon, pill, background) instead. */ .pf-usage-card-healthy .pf-usage-icon { background: var(--pf-success-soft); color: var(--pf-success); } .pf-usage-card-quiet .pf-usage-icon { background: var(--pf-warning-soft); color: var(--pf-warning); } .pf-usage-card-offboarded .pf-usage-icon { background: var(--pf-danger-soft); color: var(--pf-danger); } .pf-usage-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pf-usage-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .pf-usage-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pf-neutral-soft); color: var(--pf-text-tertiary); } .pf-usage-icon .mi { width: 16px; height: 16px; vertical-align: 0; } .pf-usage-card-head h3 { font-size: 1rem; color: var(--pf-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-usage-meta { font-size: 0.86rem; color: var(--pf-text-secondary); line-height: 1.45; } .pf-usage-stats { display: flex; gap: 20px; margin-top: 2px; } .pf-usage-stat { display: flex; flex-direction: column; gap: 2px; } .pf-usage-stat strong { font-family: var(--pf-font); font-size: 1.15rem; font-weight: 700; color: var(--pf-text); line-height: 1.1; } .pf-usage-stat span { font-size: 0.74rem; color: var(--pf-text-secondary); } .pf-usage-ratio { margin-top: 2px; } .pf-usage-ratio-track { height: 6px; border-radius: 999px; background: var(--pf-border-soft); overflow: hidden; } .pf-usage-ratio-fill { height: 100%; border-radius: 999px; background: var(--pf-accent); } .pf-usage-ratio-label { display: block; margin-top: 5px; font-size: 0.76rem; color: var(--pf-text-secondary); } /* Small revenue-by-week bar chart on the Stats & Analytics usage card — same visual language as the owner portal's own "Revenue trend" chart (.bars/.bar-col/.bar-fill in admin.css), just a compact copy since platform.css doesn't load admin.css and this card is much smaller than a full dashboard chart tile. */ .pf-usage-chart { margin-top: 4px; } .pf-usage-bars { display: flex; align-items: flex-end; gap: 6px; } .pf-usage-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1 1 0; min-width: 0; } .pf-usage-bar-val { font-size: 0.62rem; font-weight: 700; color: var(--pf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pf-usage-bar-track { width: 100%; height: 56px; display: flex; align-items: flex-end; } .pf-usage-bar-fill { width: 100%; background: var(--pf-accent); border-radius: 4px 4px 1px 1px; min-height: 2px; } .pf-usage-bar-lbl { font-size: 0.62rem; color: var(--pf-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .pf-detail-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pf-folder-path { font-size: 0.82rem; color: var(--pf-text-secondary); margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .pf-not-running { font-size: 0.85rem; color: var(--pf-text-secondary); } .pf-not-running code { background: var(--pf-bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--pf-text); } .pf-fields-disabled .field label { opacity: 0.5; } .pf-status { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 980px; font-size: 0.78rem; font-weight: 600; } .pf-status.active { background: var(--pf-success-soft); color: var(--pf-success); } .pf-status.paused { background: var(--pf-warning-soft); color: var(--pf-warning); } .pf-status.pending { background: var(--pf-warning-soft); color: var(--pf-warning); } .pf-status.offboarded { background: var(--pf-danger-soft); color: var(--pf-danger); } /* Simplified binary status for the client list (see pf-client-card-foot) — collapses paused/pending/offboarded into one neutral "Inactive" reading; the detail page still shows the real status and live health separately. */ .pf-status.inactive { background: var(--pf-neutral-soft); color: var(--pf-text-secondary); } /* Account-status select — tinted to match the .pf-status pill above it, so the picked value reads at a glance instead of only after hitting Save. */ #pfStatus.status-active { background-color: var(--pf-success-soft); color: var(--pf-success); } #pfStatus.status-paused { background-color: var(--pf-warning-soft); color: var(--pf-warning); } #pfStatus.status-pending { background-color: var(--pf-warning-soft); color: var(--pf-warning); } /* ---- Pending-authorization banner (client detail) ---- */ .pf-pending-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--pf-warning-soft); color: var(--pf-warning); border-radius: var(--pf-radius); padding: 14px 20px; margin-bottom: 20px; flex-wrap: wrap; } /* display:flex above would otherwise defeat the [hidden] attribute. */ .pf-pending-banner[hidden] { display: none; } .pf-pending-banner p { margin: 0; font-size: 0.92rem; max-width: 60ch; color: var(--pf-text); } .pf-pending-banner p strong { color: var(--pf-warning); } /* ---- Offboarded banner (client detail) — informational only, one-way ---- */ .pf-offboard-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--pf-danger-soft); color: var(--pf-danger); border-radius: var(--pf-radius); padding: 14px 20px; margin-bottom: 20px; flex-wrap: wrap; } .pf-offboard-banner[hidden] { display: none; } .pf-offboard-banner p { margin: 0; font-size: 0.92rem; max-width: 60ch; color: var(--pf-text); } .pf-offboard-banner p strong { color: var(--pf-danger); } .pf-msg { padding: 12px 14px; border-radius: var(--pf-radius-sm); font-size: 0.9rem; margin-bottom: 16px; display: none; } .pf-msg.err { display: block; background: var(--pf-danger-soft); color: var(--pf-danger); } .pf-msg.ok { display: block; background: var(--pf-success-soft); color: var(--pf-success); } .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pf-card { background: var(--pf-surface); border-radius: var(--pf-radius); padding: 24px; min-width: 0; } .pf-card h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; color: var(--pf-text); } .pf-card-wide { grid-column: 1 / -1; } /* Card heading + its Edit button, sharing the h2's own bottom margin so the row below isn't double-spaced. */ .pf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .pf-card-head h2 { margin-bottom: 0; } /* .btn's display:inline-flex would otherwise defeat the [hidden] attribute. */ #pfAccountEditBtn[hidden], #pfBillingEditBtn[hidden] { display: none; } /* Read-only view rows (Contact & account / Billing before you hit Edit) — .summary-row's label/value layout, just anchored to this card's edges. */ #pfAccountView, #pfBillingView { display: flex; flex-direction: column; } #pfAccountView[hidden], #pfBillingView[hidden] { display: none; } #pfAccountView .summary-row, #pfBillingView .summary-row { padding: 9px 0; } /* ---- Billing ---- */ .pf-bill-lines { display: grid; gap: 8px; margin-bottom: 8px; } .pf-bill-line { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--pf-text); padding: 4px 0; } .pf-bill-line .amt { font-weight: 600; } .pf-bill-line.discount .amt { color: var(--pf-danger); } .pf-bill-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 12px; font-weight: 700; } .pf-bill-total .amt { font-family: var(--pf-font); font-size: 1.4rem; font-weight: 600; color: var(--pf-text); } .pf-bill-total .lbl { font-size: 0.9rem; color: var(--pf-text-secondary); font-weight: 600; } .pf-bill-total.free .amt { color: var(--pf-success); } /* Visual cost breakdown — a proportional segmented bar (one colored block per line item, width matching its share of the subtotal) above the pf-bill-lines list, which doubles as the bar's legend: each line carries the dot matching its segment plus its percentage share (see renderBillingSummary in agency.js). */ .pf-bill-chart-bar { display: flex; width: 100%; height: 14px; border-radius: 7px; overflow: hidden; background: var(--pf-border-soft); } .pf-bill-chart-seg { display: block; height: 100%; min-width: 2px; } .pf-bill-chart-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .pf-bill-line-label { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .pf-bill-line-pct { color: var(--pf-text-secondary); font-size: 0.84rem; font-weight: 500; } /* ---- Invoices ---- */ .pf-invoice-list { display: grid; gap: 10px; } .pf-invoice-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--pf-border-soft); border-radius: var(--pf-radius-sm); font-size: 0.9rem; } .pf-invoice-item-right { display: flex; align-items: center; gap: 14px; flex: none; } .pf-invoice-amt { font-weight: 700; font-family: var(--pf-font); } /* Free-subscription toggle — iOS-style track/knob switch. */ .pf-toggle-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; cursor: pointer; } .pf-toggle-row input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pf-toggle-switch { flex: none; width: 42px; height: 24px; border-radius: 999px; background: #e9e9eb; position: relative; margin-top: 2px; transition: background 0.15s ease; } .pf-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--pf-white); transition: transform 0.15s ease; } .pf-toggle-row input:checked ~ .pf-toggle-switch, .pf-feature-toggle input:checked ~ .pf-toggle-switch { background: var(--pf-accent); } .pf-toggle-row input:checked ~ .pf-toggle-switch .pf-toggle-knob, .pf-feature-toggle input:checked ~ .pf-toggle-switch .pf-toggle-knob { transform: translateX(18px); } .pf-toggle-row input:focus-visible ~ .pf-toggle-switch, .pf-feature-toggle input:focus-visible ~ .pf-toggle-switch { box-shadow: 0 0 0 4px var(--pf-accent-soft); } .pf-toggle-label strong { display: block; font-size: 0.95rem; color: var(--pf-text); font-weight: 600; } .pf-toggle-label small { display: block; font-size: 0.82rem; color: var(--pf-text-secondary); margin-top: 2px; } /* Small track/knob switch size, shared by the Branding card's inline toggles (see .pf-brand-auto-toggle below) — same on/off mechanics as .pf-toggle-row above, just sized to sit next to a field label instead of anchoring its own row. */ .pf-toggle-switch-sm { width: 30px; height: 17px; } .pf-toggle-switch-sm .pf-toggle-knob { width: 13px; height: 13px; } /* ---- Feature add-on cards ---- */ /* Balances the 16px the h2 already puts above this line, so it isn't jammed against the cards below it. */ .pf-card-wide > .muted { margin-bottom: 24px; } .pf-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .pf-feature-card { background: var(--pf-surface-2); border-radius: var(--pf-radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; } .pf-feature-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pf-feature-card h3 { font-size: 0.94rem; color: var(--pf-text); font-weight: 600; } .pf-feature-price { font-size: 0.8rem; color: var(--pf-text-secondary); font-weight: 600; } .pf-feature-card p { font-size: 0.82rem; color: var(--pf-text-secondary); line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pf-feature-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 2px; } .pf-feature-toggle input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pf-feature-toggle .pf-toggle-switch { margin-top: 0; } .pf-feature-state { font-size: 0.82rem; font-weight: 600; color: var(--pf-text-secondary); } .pf-feature-toggle input:checked ~ .pf-feature-state { color: var(--pf-accent); } @media (max-width: 860px) { .pf-grid { grid-template-columns: 1fr; } .pf-detail-head { flex-direction: column; } } /* ---- Leads (from the /for-hotels marketing site) ---- */ .pf-page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; } .pf-leads-tab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .pf-leads-tab-head p { margin: 0; } .pf-leads-tab-head .btn { flex-shrink: 0; } /* .btn's display:inline-flex would otherwise defeat the [hidden] attribute. */ #pfClearAllLeadsBtn[hidden] { display: none; } .pf-leads-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 8px; background: var(--pf-danger); color: var(--pf-white); border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .pf-leads-count[hidden] { display: none; } .pf-leads-list { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; } .pf-lead-item { background: var(--pf-surface); border-radius: var(--pf-radius); padding: 26px 28px; } .pf-lead-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .pf-lead-item-head h4 { font-size: 1.05rem; color: var(--pf-text); font-weight: 600; min-width: 0; overflow-wrap: break-word; } /* "New" is a small pill next to the name instead of a tinted card background — a full-card tint on every unread row (most of them, usually) made the list harder to read, not easier to scan. */ .pf-lead-new-badge { display: inline-flex; align-items: center; background: var(--pf-accent); color: var(--pf-white); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 1px; } .pf-lead-meta { font-size: 0.9rem; color: var(--pf-text-secondary); margin-top: 10px; line-height: 1.9; } .pf-lead-meta a { color: var(--pf-accent); font-weight: 600; } .pf-lead-date { font-size: 0.8rem; color: var(--pf-text-tertiary); white-space: nowrap; flex: none; } /* A pull-quote treatment (accent left border + italics), not a filled box — a background/border-radius card here read as a button/clickable element rather than the lead's own quoted words, which is the one thing on this card that most deserves to stand out. */ .pf-lead-message { font-size: 0.98rem; font-style: italic; color: var(--pf-text); line-height: 1.6; border-left: 3px solid var(--pf-accent); padding: 2px 0 2px 16px; margin: 22px 0; } .pf-lead-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; } @media (max-width: 560px) { /* The date sitting flush right against a longer name/badge combo (and "Follow-up due") gets cramped on a phone-width card — drop it under the name instead of forcing everything onto one row. */ .pf-lead-item-head { flex-direction: column; gap: 4px; } .pf-lead-date { align-self: flex-start; } } /* ---- Onboarding wizard (Add / Onboard client modal) ---- */ /* Step 1 has no Back button — pfRenderWizardNav() renders an empty in its place so space-between still pushes Continue to the right. */ .pf-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; } /* ---- Widget embed-code card ---- */ .pf-embed { margin-bottom: 20px; } .pf-embed:last-of-type { margin-bottom: 8px; } .pf-embed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .pf-embed-head h3 { font-size: 0.92rem; font-weight: 600; color: var(--pf-text); } .pf-embed-head .btn { margin-left: auto; flex: none; } .pf-embed-off { font-size: 0.8rem; color: var(--pf-warning); background: var(--pf-warning-soft); border-radius: 4px; padding: 2px 8px; } .pf-embed pre { background: var(--pf-bg); border-radius: var(--pf-radius); padding: 12px 14px; overflow-x: auto; } .pf-embed code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--pf-text); white-space: pre; } /* ---- Branding editor ---- The right-hand preview reuses the Reviews widget's own class names (.openfront-reviews / .ofr-*) and the same --of-accent/--of-font/--of-radius custom-property + ofr-compact/ofr-star-outline class architecture as openfront-reviews.js's injected styles — a trimmed single-card copy of those rules, not a fork, so this preview can never quietly drift from what guests actually see. */ .pf-brand-editor { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; } .pf-brand-fields { flex: 1 1 240px; min-width: 220px; } .pf-brand-fields .btn { margin-top: 6px; } .pf-brand-color-row { display: flex; align-items: center; gap: 10px; } .pf-brand-color-row input[type="color"] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--pf-border, #e2e2e8); border-radius: var(--pf-radius-sm); background: none; cursor: pointer; } .pf-brand-color-row input[type="text"] { width: 90px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; } .pf-brand-radius-row { display: flex; align-items: center; gap: 12px; } .pf-brand-radius-row input[type="range"] { flex: 1; } .pf-brand-radius-row span { font-size: 0.85rem; color: var(--pf-text-secondary); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; } .pf-brand-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pf-brand-field-head label:first-child { margin-bottom: 0; } /* body.pf .field label {display:block} (near the top of this file) outranks a plain .pf-brand-auto-toggle selector on specificity alone, regardless of source order — matching its own prefix is what actually wins here. */ body.pf .field label.pf-brand-auto-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; color: var(--pf-text-secondary); cursor: pointer; margin-bottom: 0; position: relative; } .pf-brand-auto-toggle input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pf-brand-auto-toggle input:checked ~ .pf-toggle-switch-sm { background: var(--pf-accent); } .pf-brand-auto-toggle input:checked ~ .pf-toggle-switch-sm .pf-toggle-knob { transform: translateX(13px); } .pf-brand-auto-toggle input:focus-visible ~ .pf-toggle-switch-sm { box-shadow: 0 0 0 3px var(--pf-accent-soft); } .pf-brand-fields input:disabled, .pf-brand-fields select:disabled { opacity: 0.5; cursor: not-allowed; } .pf-brand-preview { flex: 1 1 240px; min-width: 220px; } .pf-brand-preview-label { font-size: 0.78rem; color: var(--pf-text-secondary); margin-bottom: 8px; } .pf-brand-preview-note { font-size: 0.78rem; color: var(--pf-text-secondary); font-style: italic; margin: -4px 0 8px; } .pf-brand-preview .openfront-reviews { font-family: var(--of-font, system-ui, sans-serif); border: 1px solid #e2e2e8; border-radius: var(--of-radius, 12px); padding: 20px; box-sizing: border-box; background: #fff; transition: border-radius 0.1s; } .pf-brand-preview .openfront-reviews * { box-sizing: border-box; } .pf-brand-preview .ofr-review { padding: 0; } .pf-brand-preview .ofr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; } .pf-brand-preview .ofr-head strong { font-size: 14px; } .pf-brand-preview .ofr-head time { color: #999; font-size: 12px; white-space: nowrap; } .pf-brand-preview .ofr-verified { display: inline-block; font-size: 11px; font-weight: 600; color: #1b6e3c; background: #e7f4ec; border-radius: calc(var(--of-radius, 12px) * 0.33); padding: 1px 6px; margin-left: 6px; vertical-align: 1px; } .pf-brand-preview .ofr-stars { color: var(--of-accent, #2c5770); letter-spacing: 1px; } .pf-brand-preview .ofr-quote { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #333; } .pf-brand-preview .openfront-reviews.ofr-compact { padding: 14px; } .pf-brand-preview .openfront-reviews.ofr-compact .ofr-quote { font-size: 12.5px; } .pf-brand-preview .openfront-reviews.ofr-star-outline .ofr-stars { color: transparent; -webkit-text-stroke: 1px var(--of-accent, #2c5770); } /* ---- Modal (self-contained — platform.html doesn't load styles.css) ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .modal-overlay.open { display: flex; } .modal { background: var(--pf-surface); border-radius: var(--pf-radius-lg); width: 100%; max-width: 560px; margin: auto; overflow: hidden; animation: pf-pop 0.2s ease; } /* Smaller variant for a plain confirm/cancel dialog — the 560px default is sized for the onboarding wizard's multi-field steps, not a sentence and two buttons. */ .modal-sm { max-width: 440px; } @keyframes pf-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } } .modal-head { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; } .modal-head h3 { color: var(--pf-text); font-size: 1.2rem; } .modal-head .steps { font-size: 0.82rem; color: var(--pf-text-secondary); } .modal-close { background: var(--pf-neutral-soft); border: none; color: var(--pf-text-secondary); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1.05rem; line-height: 1; } .modal-close:hover { background: var(--pf-border-soft); color: var(--pf-text); } .modal-body { padding: 24px; } .modal-summary { background: var(--pf-surface-2); border-radius: var(--pf-radius); padding: 16px; margin-bottom: 20px; } .summary-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 5px 0; font-size: 0.95rem; } .summary-row.total { margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 1.1rem; } .summary-row .lbl { color: var(--pf-text-secondary); flex: none; } .summary-row > span:last-child { min-width: 0; overflow-wrap: break-word; text-align: right; } .modal-msg { padding: 12px 14px; border-radius: var(--pf-radius-sm); font-size: 0.9rem; margin-bottom: 16px; display: none; } .modal-msg.err { display: block; background: var(--pf-danger-soft); color: var(--pf-danger); } .modal-msg.ok { display: block; background: var(--pf-success-soft); color: var(--pf-success); } .spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: pf-spin 0.7s linear infinite; } @keyframes pf-spin { to { transform: rotate(360deg); } } /* ---- CRM at-a-glance strip (client list page) ---- */ .pf-crm-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .pf-crm-strip[hidden] { display: none; } .pf-crm-tile { background: var(--pf-surface); border-radius: var(--pf-radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; } .pf-crm-tile strong { font-family: var(--pf-font); font-size: 1.45rem; font-weight: 600; color: var(--pf-text); line-height: 1.15; } .pf-crm-tile span { font-size: 0.78rem; color: var(--pf-text-secondary); } /* Follow-ups tile flips to the warning tint once anything is actually due — fill tint, not a border, per this system's status rules. */ .pf-crm-tile-due { background: var(--pf-warning-soft); } .pf-crm-tile-due strong, .pf-crm-tile-due span { color: var(--pf-warning); } /* On phones the 180px minimum only leaves room for one column, so the four tiles stack into a tall column — force a 2×2 grid instead to reclaim the vertical space. */ @media (max-width: 640px) { .pf-crm-strip { grid-template-columns: repeat(2, 1fr); } /* With an odd tile count (e.g. once the "invoices to send" tile brings it to five), stretch the lone trailing tile across both columns rather than leaving a dead half-cell. */ .pf-crm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* "· follow-up due" marker on a client row's plan line */ .pf-plan-due { color: var(--pf-warning); font-weight: 600; } /* ---- Leads pipeline summary ---- */ .pf-pipeline-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .pf-pipeline-summary[hidden] { display: none; } /* A