/* ════════════════════════════════════════════════════════════════════ Reelax — Customer App · admin.css?v=66 Editorial redesign · drop-in for css/admin.css Preserves every existing class name + JS hook from admin.php. Dark = default · light via existing toggleTheme() / [data-theme="light"]. Accent reads var(--accent) — set per-org by admin-core.js at runtime. ════════════════════════════════════════════════════════════════════ */ :root { /* Dark (default) */ --bg: #0A0A0A; --surface: #131313; --card: #161616; --card-hover: #1C1C1C; --border: #222; --border-hover: #3A3A3A; --border-soft: rgba(255,255,255,.08); --text: #FFF; --text-muted: #878B8B; --text-sub: #878B8B; --text-3: rgba(255,255,255,.30); --text-label: rgba(255,255,255,.35); /* Accent — overridable per-org via inline style on . * Default is an editorial ochre (#E35E00 / rgb(255, 108, 0)) that * harmonizes with the cream surfaces in light theme and reads * cleanly on the near-black dark surfaces too. Per-org accent * choices applyOrgAccentColor() always win. */ --accent: #E35E00; --accent-bg: rgba(255,108,0,.15); --accent-border: rgba(255,108,0,.40); --accent-ink: #FFF; --chip-ok: #4ADE80; /* Attention / "needs action" amber. Tokenized so it has a light-mode value — the hardcoded #b45309 it replaces had none, so the NEW badge and the duplicate-review card were unreadable-ish on the cream theme. */ --attn: #E08A2B; --danger: rgba(255,80,80,.7); --chip-wrap: rgba(255,255,255,.4); --input-bg: rgba(255,255,255,.05); --input-border: rgba(255,255,255,.10); --modal-bg: #0F0F0F; /* Modal header/footer strip color — see Style Guide §7c. In dark * mode it's intentionally identical to --modal-bg so the existing * dark behavior is preserved (don't alter dark per spec). The light * theme override below paints the cream strip. */ --modal-strip: #0F0F0F; --overlay-bg: rgba(0,0,0,.72); --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } [data-theme="light"] { --bg: #F5F1E8; --surface: #EDE7DA; --card: #FFFFFF; --card-hover: #FAF7F0; --border: #D8D2C4; --border-hover: #6E665B; --border-soft: rgba(26,22,18,.08); --text: #1A1612; --text-muted: #6E665B; --text-sub: #6E665B; --text-3: rgba(26,22,18,.38); --text-label: rgba(26,22,18,.45); --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent); --accent-border:color-mix(in srgb, var(--accent) 35%, transparent); --accent-ink: #FFFFFF; --chip-ok: #4F7A4A; --attn: #8A5A0C; --danger: #A8362C; --chip-wrap: rgba(26,22,18,.35); --input-bg: #FFFFFF; --input-border: #D8D2C4; --modal-bg: #FFFFFF; /* Cream strip for modal header + footer (Style Guide §7c). Body * stays --modal-bg white; this paints only the bookend strips. */ --modal-strip: #EDE7DA; --overlay-bg: rgba(26,22,18,.55); } /* base */ *,*::before,*::after { box-sizing: border-box; } html, body { margin:0; padding:0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── header ─────────────────────────────────────────────────────────── */ .header { height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 30; } .header-left { display: flex; align-items: center; gap: 14px; } .header-logo { height: 22px; } [data-theme="light"] .header-logo-dark { display: none !important; } [data-theme="light"] .header-logo-light { display: inline !important; } .header-divider { width: 1px; height: 22px; background: var(--border); } .header-tool { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); } .theme-toggle { height: 30px; padding: 0 12px; background: transparent; border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-sans); font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .theme-toggle:hover { border-color: var(--text); color: var(--text); } .help-link { text-decoration: none; } .help-link:hover { text-decoration: none; } .header-user { font-size: 12px; color: var(--text-muted); } .user-menu { position: relative; } .user-avatar-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 12px; cursor: pointer; border: 1px solid var(--accent-border); } .user-dropdown { position: absolute; top: 40px; right: 0; min-width: 200px; background: var(--card); border: 1px solid var(--border); display: none; flex-direction: column; padding: 6px; } .user-dropdown.open { display: flex; } .user-dropdown-name { padding: 10px 12px 8px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; } .user-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; border: 0; color: var(--text); font-family: var(--font-sans); font-size: 12px; cursor: pointer; text-align: left; } .user-dropdown-item:hover { background: var(--card-hover); } .user-dropdown-item.danger { color: var(--danger); } /* ── auth ───────────────────────────────────────────────────────────── */ .auth-screen { min-height: calc(100vh - 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 16px; } .auth-card { width: 100%; max-width: 400px; padding: 36px 32px 28px; background: var(--card); border: 1px solid var(--border); } .auth-logo { width: 96px; display: block; margin: 0 auto 22px; } [data-theme="light"] .auth-logo-dark { display: none !important; } [data-theme="light"] .auth-logo-light { display: inline !important; } .auth-org-logo { max-width: 120px; max-height: 48px; margin-bottom: 8px; } .auth-org-name { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); } .auth-title { font-family: var(--font-serif); font-size: 36px; line-height: .95; letter-spacing: -.02em; text-align: center; margin: 4px 0 6px; } .auth-title::after { content:'.'; color: var(--accent); } /* Auth intent gateway — two-track picker shown at first visit. */ .auth-intent-gate { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; text-align: left; } /* The rows themselves are canonical .cl-radio-option / .cl-radio-body / .cl-radio-label / .cl-radio-help (editorial-chrome.css §5.6). The former .auth-intent-row / -body / -title / -help look-alike was DELETED 2026-08-24, not overridden: it painted its selected state in --accent, which §5.6 forbids ("no accent fill — keeps the control quiet"), so the login screen was the one place on the platform where picking a radio turned the card orange. Only the gate's column layout above is local. */ #authIntentContinue { margin-top: 6px; } /* Track-aware hint copy shown below providers when the member track is active. */ .auth-track-hint { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 14px; line-height: 1.5; } .auth-track-hint a, .auth-track-hint button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; } /* Nav-restore loading state — when showDashboard() defers reveal because we're routing through orgPicker→projects→projectDetail, body[data-nav-restoring] hides the auth card content and shows a neutral "Loading workspace…" message so the screen stays calm instead of flashing through intermediate views. */ body[data-nav-restoring="1"] .auth-card > * { display: none !important; } body[data-nav-restoring="1"] .auth-card::before { content: 'Loading workspace…'; display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); text-align: center; padding: 24px 8px; } body[data-nav-restoring="1"] .auth-card { border: 0; background: transparent; box-shadow: none; } .auth-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-muted); text-align: center; margin: 0 0 22px; } .google-btn-wrap, .apple-btn { margin-bottom: 8px; } /* Full width, like every other control in the auth card (.apple-btn, .email-toggle, .btn-full, the inputs — all 100%). It used to be pinned to 300px to stop the GIS iframe rendering at a jittery, layout-dependent width between reloads; that fixed the jitter but left Google 34px narrower than everything below it. admin-google.js now MEASURES this wrapper and renders the iframe at that exact pixel width, so the button matches its siblings and still can't render at an arbitrary size. min-height reserves the row so the card doesn't reflow while the iframe paints. */ .google-btn-wrap { width: 100%; max-width: 100%; min-height: 40px; margin-left: auto; margin-right: auto; display: flex; justify-content: center; } /* ITP-proof redirect fallback button — shown when the GIS iframe can't render (Safari ITP). Triggers the server-side OAuth redirect, NOT One Tap. */ .google-fallback-btn { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; background: #131314; color: #e3e3e3; border: 1px solid #5f6368; border-radius: 8px; font: 500 14px/1 'DM Sans', system-ui, sans-serif; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .google-fallback-btn:hover { background: #1f1f20; border-color: #8a8f96; } .google-fallback-btn:active { background: #2a2a2b; } .apple-btn { width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--text-muted); border: 1px solid var(--border); cursor: not-allowed; font-family: var(--font-sans); font-size: 12px; position: relative; } .coming-soon-badge { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; padding: 2px 6px; background: var(--accent-bg); color: var(--accent); margin-left: 6px; } .email-toggle { width: 100%; height: 36px; background: transparent; border: 1px dashed var(--border); color: var(--text-muted); cursor: pointer; font-family: var(--font-sans); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .email-toggle:hover { color: var(--text); border-color: var(--text-muted); } .auth-tabs { display: flex; margin: 16px 0 12px; border-bottom: 1px solid var(--border); } .auth-tab { flex: 1; padding: 10px 0; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); } .auth-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; } /* "Forgot password?" link row — sits below the Sign In button. The link is subtle (muted color, underline-on-hover) so it stays visually quieter than the primary CTA above it. Same row pattern is reused inside the forgot form ("Back to sign in"). */ /* "Keep me signed in" — sits directly above the Sign In button. Whole label is the hit target so the text is tappable, not just the 13px box. */ .auth-remember { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-family: var(--font-sans); font-size: 12px; color: var(--text-dim, #878B8B); cursor: pointer; user-select: none; } /* Control painted by the canonical checkbox (editorial-chrome.css §5.7); size, margin, flex-shrink and cursor are all canonical too, so the whole rule went. It selected `input` bare, which is why the type-based audit missed it. */ .auth-forgot-row { margin-top: 12px; text-align: center; font-family: var(--font-sans); font-size: 12px; } .auth-forgot-link { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .12s, border-color .12s; } .auth-forgot-link:hover { color: var(--text); border-bottom-color: var(--text-muted); } /* Title above the Set-new-password form (the only auth-screen view that needs its own heading — login/register sit under the auth-tabs strip). */ .auth-tab-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.1; color: var(--text); margin: 4px 0 14px; } .auth-tab-title::after { content: '.'; color: var(--accent); } /* Inline status line for the forgot + reset flows. Neutral by default, green on success, red on error. Sits below the action button. */ .auth-forgot-status { margin-top: 12px; padding: 10px 12px; font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); } .auth-forgot-status.is-ok { color: var(--chip-ok, #4ADE80); border-color: color-mix(in srgb, var(--chip-ok, #4ADE80) 40%, var(--border)); } .auth-forgot-status.is-err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .auth-powered { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .auth-legal { margin-top: 10px; text-align: center; font-size: 11.5px; color: var(--text-muted); display: flex; gap: 8px; justify-content: center; align-items: center; } .auth-legal a { color: var(--text-muted); text-decoration: none; } .auth-legal a:hover { color: var(--text); text-decoration: underline; } /* ── layout · sidebar · main ────────────────────────────────────────── */ .layout { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 56px); } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 18px 0; display: flex; flex-direction: column; gap: 2px; /* Stick to viewport under the 56px header so the nav stays in reach while the user scrolls a long view (Members list, Projects grid, Audit Log, etc.). align-self:start is required inside the .layout grid; without it the row stretches to the grid track and sticky never engages. The ≤900 px media query later in this file swaps .sidebar to position:fixed (mobile drawer) which overrides these rules — no need to wrap them in a min-width query. */ position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); overflow-y: auto; z-index: 20; } .sidebar.collapsed { grid-column: auto; } .layout:has(.sidebar.collapsed) { grid-template-columns: 56px 1fr; } .sidebar.collapsed .nav-label, .sidebar.collapsed .sidebar-org-info, .sidebar.collapsed .sidebar-nav-group { display: none; } /* When the sidebar is collapsed (56 px), the canonical .nav-item * padding of `8px 20px` consumes 40 px horizontally — leaving only * 14 px of content room for a 16 px icon. The icon gets clipped or * pushed off, so the visible state looks like the project icons * disappeared. Reset the padding to zero and center each icon inside * the narrow column. Same fix for the project sub-nav so its * Tools / Members / Branding / Client View icons remain visible. */ .sidebar.collapsed .nav-item, .sidebar.collapsed .proj-sub-item, .sidebar.collapsed .sidebar-collapse { padding: 8px 0; gap: 0; justify-content: center; } .sidebar.collapsed .proj-sub-nav { padding-left: 0; } .sidebar.collapsed .proj-sub-item { padding-left: 0; } .sidebar-org { display: flex; align-items: center; gap: 10px; padding: 4px 16px 18px; cursor: pointer; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .sidebar-org-avatar { width: 50px; height: 50px; background: var(--accent-bg); color: var(--accent); border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 12px; flex-shrink: 0; overflow: hidden; } .sidebar-org-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .sidebar-org-info { min-width: 0; flex: 1; } .sidebar-org-name { font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-org-switch { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; } .sidebar-nav-group { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); padding: 14px 20px 6px; } .nav-item, .proj-sub-item { display: flex; align-items: center; gap: 10px; padding: 8px 20px; height: 32px; background: transparent; border: 0; border-left: 2px solid transparent; color: var(--text-muted); font-family: var(--font-sans); font-size: 12.5px; text-align: left; cursor: pointer; width: 100%; } .nav-item:hover, .proj-sub-item:hover { background: var(--card-hover); color: var(--text); } .nav-item.active, .proj-sub-item.active { background: var(--accent-bg); color: var(--accent); border-left-color: var(--accent); font-weight: 500; } .proj-sub-nav { padding-left: 14px; } .proj-sub-item { height: 28px; font-size: 11.5px; padding-left: 28px; } .sidebar-collapse { display: flex; align-items: center; gap: 8px; padding: 8px 20px; background: transparent; border: 0; color: var(--text-3); cursor: pointer; } .sidebar-collapse:hover { color: var(--text); } .sidebar-legal { display: flex; flex-direction: column; gap: 3px; padding: 9px 20px 4px; margin-top: 2px; border-top: 1px solid var(--border); } .sidebar-legal a { font-size: 10.5px; letter-spacing: .3px; color: var(--text-3); text-decoration: none; } .sidebar-legal a:hover { color: var(--text); } .main { padding: 0; min-width: 0; } /* ── Phase 4 — billing read-only banner + write-UI suppression ──────── */ .billing-readonly-banner { display: flex; align-items: center; gap: 14px; padding: 10px 32px; background: rgba(227,94,0,.12); border-bottom: 1px solid var(--accent); font-size: 13px; color: var(--text); } .billing-readonly-banner button { margin-left: auto; flex-shrink: 0; background: var(--accent); color: #fff; border: 0; padding: 6px 14px; font-size: 11px; cursor: pointer; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 700px) { .billing-readonly-banner { padding: 10px 16px; flex-wrap: wrap; } .billing-readonly-banner button { margin-left: 0; } } /* Trial banner — informational, not restrictive. Softer than the read-only banner: a subtle surface tint + a thin rule, no fill. Mirrors the readonly banner's layout so they're visually a family. */ .billing-trial-banner { display: flex; align-items: center; gap: 14px; padding: 9px 32px; background: var(--card-alt, rgba(0,0,0,.03)); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-2); /* Stick to the top of the main scroll area, sitting directly under the 56 px header. z-index sits below the header (30) but above page chrome (sidebar = 20) so it spans the full main column without being hidden by sticky table headers etc. */ position: sticky; top: 56px; z-index: 25; } .billing-trial-banner button { margin-left: auto; flex-shrink: 0; background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 6px 14px; font-size: 11px; cursor: pointer; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; } .billing-trial-banner button:hover { background: var(--accent); color: #fff; } /* Urgency tiers — applied by _applyTrialBanner based on days_remaining. .is-warn → amber tint, ≤10 days left .is-urgent → red tint, ≤5 days left Both keep the same layout/padding; only color changes so the row doesn't reflow as the countdown crosses thresholds. */ .billing-trial-banner.is-warn { background: color-mix(in srgb, #B07A1F 12%, transparent); border-bottom-color: color-mix(in srgb, #B07A1F 40%, var(--border)); color: var(--text); } .billing-trial-banner.is-warn button { color: #B07A1F; border-color: #B07A1F; } .billing-trial-banner.is-warn button:hover { background: #B07A1F; color: #fff; } /* Urgent state: solid danger fill so the banner reads as a true alert (was a 12% wash). Inverts the button so the contained CTA stays readable against the solid red. */ .billing-trial-banner.is-urgent { background: var(--danger); border-bottom-color: var(--danger); color: #fff; } .billing-trial-banner.is-urgent button { color: #fff; border-color: rgba(255, 255, 255, .85); background: transparent; } .billing-trial-banner.is-urgent button:hover { background: #fff; color: var(--danger); border-color: #fff; } @media (max-width: 700px) { .billing-trial-banner { padding: 9px 16px; flex-wrap: wrap; } .billing-trial-banner button { margin-left: 0; } } /* When read-only, hide the primary write affordances. The server-side requireBillingWrite() gate is the real enforcement — this just keeps the UI honest so users don't click into a guaranteed 402. */ body.billing-readonly #newProjectBtn, body.billing-readonly .proj-card-empty { display: none !important; } /* ── view header ────────────────────────────────────────────────────── */ .view-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 36px 32px 18px; border-bottom: 1px solid var(--border); gap: 16px; margin-bottom: 24px; } .view-title { font-family: var(--font-serif); font-size: 48px; line-height: .9; letter-spacing: -.03em; color: var(--text); } .view-title::after { content:'.'; color: var(--accent); } .view-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-muted); margin-top: 6px; } /* ── empty / loading states (editorial) ─────────────────────────────── */ .empty-state { margin: 48px 32px; padding: 64px 32px; text-align: center; border: 1px dashed var(--border); } .empty-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } .empty-headline { font-family: var(--font-serif); font-size: 40px; line-height: .95; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; } .empty-headline::after { content:'.'; color: var(--accent); } .empty-copy { font-size: 13px; color: var(--text-muted); max-width: 460px; margin: 0 auto 22px; line-height: 1.6; } .loading-row { display: flex; justify-content: center; padding: 48px; } .spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── grids · cards ──────────────────────────────────────────────────── */ .org-picker-grid, .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 14px; padding: 0 32px 32px; } .card { background: var(--card); border: 1px solid var(--border); padding: 18px; cursor: pointer; transition: border-color .15s; } .card:hover { background: var(--card-hover); border-color: var(--border-hover); } /* Templates view — the Org Templates card sits flush against the view gutters by default, which looks pinched against the wide page. Add 35 px horizontal margins and bump the card title so it carries the same editorial weight as a section eyebrow. Scoped to #viewTemplates so other .card instances (modals, settings, etc.) are unaffected. */ #viewTemplates > .card { margin-left: 35px; margin-right: 35px; } /* Header inside the Templates card — use the editorial eyebrow + italic-serif title pattern (same as Settings → Brand sections). Slightly larger than the brand-section default so it carries the weight of a card-level headline. */ #viewTemplates .brand-section-eyebrow { font-size: 10px; } #viewTemplates .brand-section-title { font-size: 28px; margin-top: 10px; line-height: 1.05; } /* Tool-filter pill bar in the Templates card. Replaces the legacy