into . Without explicit grid-area placement, CSS grid auto-flow gives any new body child the next free cell — which steals column 1 and pushes the sidebar into the 1fr track, making it visually fill the screen. */ grid-template-areas: "sidebar main"; } body.mx2-side .mx2-sidebar { grid-area: sidebar; } body.mx2-side .mx2-main { grid-area: main; } /* Override base form colors — inputs now read as white on cream (same as the rest of the admin paper-form pattern). */ body.mx2-side input[type='text'], body.mx2-side input[type='email'], body.mx2-side input[type='password'], body.mx2-side textarea, body.mx2-side select { background: var(--mx2-surface); color: var(--mx2-text); border-color: var(--mx2-rule); } /* Readonly inputs (e.g. fields auto-synced from OAuth on the connections page) — visually distinct so admins don't expect them to be editable. */ body.mx2-side input[readonly], body.mx2-side textarea[readonly] { background: var(--mx2-paper-2); color: var(--mx2-stone-600); cursor: not-allowed; } /* ── Sidebar ────────────────────────────────────────────────────────────── Dark island inside the otherwise-light mx2 admin. Re-pin the surface + text tokens to their dark-mode values so every child that uses var(--mx2-text) / var(--mx2-text-hi) / var(--mx2-rule) keeps the intended on-dark contrast. Borders inside the sidebar use a gold-tinted rule that reads well against #0F0F0F. */ .mx2-sidebar { --mx2-surface: #0c0a07; --mx2-surface-2: #15110b; --mx2-text: var(--mx2-stone-200); --mx2-text-hi: #FFFFFF; --mx2-text-mid: var(--mx2-stone-300); --mx2-rule: rgba(159, 136, 108, .35); color: var(--mx2-text); background: #0F0F0F; border-right: 1px solid var(--mx2-rule); /* Padding bottom uses safe-area-inset-bottom for iOS home indicator AND a generous static buffer that keeps the Sign out button clear of mobile browser bottom UI (Chrome's nav strip, Safari's compact bar, etc.) which overlays the viewport in some states. */ padding: 28px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; height: 100vh; /* Tall nav + user footer can exceed viewport height on small screens (especially with iOS's dynamic URL bar). overflow-y: auto lets the drawer scroll so the bottom items — including Sign out — stay reachable. overscroll-behavior: contain keeps the page underneath from scrolling along when the user reaches the sidebar's top/bottom. */ overflow-y: auto; overscroll-behavior: contain; } /* ── Composer + quick-edit drawer — light surfaces on cream chrome ────── composer.css predates the design-system flip and references --mx2-stone-700 / -800 / -500 / -300 + --cream for the dark-card look. None of those tokens get redefined by body.mx2-side, so the composer continued to render dark inside the new cream chrome. Scope-overriding the tokens here on .composer + the social quick-edit drawer flips ~30 selectors to light surfaces in one shot without touching composer.css. Stone-200 / -600 stand in as border / dim-text values that read on cream. */ body.mx2-side .composer, body.mx2-side .social-quick-edit-panel { --mx2-stone-700: var(--mx2-paper); --mx2-stone-800: #FFFFFF; /* Hardcoded #3a342a (not var(--mx2-stone-600)) because --mx2-stone-600 itself is re-mapped below — without this, dim labels would resolve to paper-2 and disappear into the card. */ --mx2-stone-300: #3a342a; --mx2-stone-200: var(--ink-soft); --mx2-stone-500: #d0c8b3; --mx2-stone-600: var(--mx2-paper-2); --cream: var(--ink); --mx2-text-hi: var(--mx2-black); color: var(--ink); } /* Use dvh on browsers that support it so the height adapts to iOS Safari's URL bar showing/hiding instead of getting cut off at the bottom when the bar collapses. Plain vh stays as the fallback above. */ @supports (height: 100dvh) { .mx2-sidebar { height: 100dvh; } } .mx2-brand { display: block; text-decoration: none; margin-bottom: 4px; } .mx2-brand-mark { height: 96px; width: auto; max-width: 100%; display: block; } .mx2-brand-sub { font-family: var(--font-body); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--mx2-gold-deep); margin-bottom: 16px; margin-top: 2px; } .mx2-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .mx2-nav-link { display: block; padding: 10px 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--mx2-text); text-decoration: none; border-left: 2px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .mx2-nav-link:hover { color: var(--gold-hi); background: rgba(158, 125, 74, 0.08); } .mx2-nav-link.active { color: var(--gold); border-left-color: var(--gold); background: rgba(158, 125, 74, 0.12); } .mx2-nav-link.disabled { color: var(--mx2-text); opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* Indented sub-nav under a parent (e.g. Social Media → Setup). The parent stays a regular nav link; the child renders one level deeper with smaller text so the hierarchy reads at a glance. */ .mx2-nav-link.mx2-nav-sub { padding-left: 28px; font-size: 12px; font-weight: 400; opacity: 0.85; } .mx2-nav-link.mx2-nav-sub:hover, .mx2-nav-link.mx2-nav-sub.active { opacity: 1; } .mx2-sidebar-footer { padding-top: 14px; border-top: 1px solid var(--mx2-rule); display: flex; flex-direction: column; gap: 6px; /* Sticky-to-bottom of the scrollable sidebar so the user chip + Sign out stay visible regardless of how far the nav scrolls. The mobile breakpoint adds extra bottom margin to clear Chrome / Safari bottom browser UI that overlays the viewport. */ position: sticky; bottom: 0; background: #0F0F0F; margin-top: auto; z-index: 1; } .mx2-user-chip { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 8px; border: 1px solid transparent; transition: border-color var(--t-fast); } .mx2-user-chip:hover { border-color: var(--mx2-gold); } .mx2-user-meta { display: flex; flex-direction: column; gap: 2px; } .mx2-user-name { font-size: 13px; font-weight: 500; color: var(--mx2-text-hi); } .mx2-user-role { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-lo); } /* ── Main ───────────────────────────────────────────────────────────────── */ .mx2-main { /* Right padding bumped from 48px → 96px so the scratchpad handle (.sp-handle, position:fixed right:0, ~40px wide) doesn't overlap the rightmost content. The old value gave only ~8px clearance — enough on pages where the right edge is whitespace, but tables with action columns at the right edge got their Edit buttons clipped by the handle. Drew flagged it on /mx2/shoots/contacts. Applies to viewports ≥960px where the handle is visible; mobile keeps the tighter padding. Drew, 2026-05-28. */ padding: 40px 96px 80px 48px; max-width: 1400px; /* Grid items default to min-width: auto (= min-content). If any descendant has min-content wider than its track (a long table, a flex strip that won't wrap, a code block), the whole main column refuses to shrink — on mobile that makes the page render wider than the viewport and triggers horizontal overflow with clipped text. Setting min-width: 0 lets the track shrink, and individual offending children can opt in to scrolling themselves. */ min-width: 0; } .mx2-page-hero { margin-bottom: 32px; } .mx2-page-hero h1 { color: var(--mx2-text-hi); font-size: 44px; } .mx2-section { margin-top: 40px; } .mx2-section h2 { color: var(--mx2-text-hi); margin-bottom: 16px; } /* ── Dashboard: greeting bar above the KPI cards ─────────────────────────── */ .mx2-dash-greeting { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0 0 14px; flex-wrap: wrap; } .mx2-dash-greeting h1 { color: var(--mx2-text-hi); font-size: 22px; margin: 0; line-height: 1.1; } .mx2-dash-meta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } /* ── Dashboard: gold pending bar (collapsable) ──────────────────────────── */ .mx2-pending-bar { margin: 0 0 18px; border-radius: 6px; background: var(--mx2-gold); /* White on gold per Drew's 2026-05-21 rule. */ color: #FFFFFF; overflow: hidden; box-shadow: 0 4px 14px rgba(159, 136, 108, 0.20); } .mx2-pending-bar__head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: transparent; border: 0; font-family: inherit; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: inherit; cursor: pointer; text-align: left; } .mx2-pending-bar__head:hover { background: rgba(0, 0, 0, 0.06); } .mx2-pending-bar__chevron { transition: transform 200ms ease; } .mx2-pending-bar.expanded .mx2-pending-bar__chevron { transform: rotate(180deg); } .mx2-pending-bar__body { max-height: 0; overflow: hidden; transition: max-height 260ms ease; background: var(--mx2-paper-2, #f3eee2); } .mx2-pending-bar.expanded .mx2-pending-bar__body { max-height: 600px; } .mx2-pending-bar__inner { padding: 8px 18px 12px; } .mx2-pending-bar__inner .mx2-table-link { color: var(--ink, #1A1A1A); } .mx2-pending-bar__inner .mx2-table-link:hover { color: var(--mx2-gold-deep, #876e51); } .mx2-pending-bar__inner .nav-pending-badge { background: var(--mx2-gold-deep); color: #FFFFFF; } /* ── KPI cards ──────────────────────────────────────────────────────────── */ .mx2-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .mx2-kpi { background: var(--mx2-surface); padding: 14px 16px; border: 1px solid var(--mx2-rule); border-radius: var(--radius-0); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .mx2-kpi:hover { border-color: var(--mx2-gold); } a.mx2-kpi--link { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.mx2-kpi--link:hover { border-color: var(--mx2-gold); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18); } a.mx2-kpi--link:focus-visible { outline: 2px solid var(--mx2-gold); outline-offset: 2px; } /* Hover tip — pure-CSS bubble underneath a KPI card explaining what it shows */ .mx2-kpi--has-tip { position: relative; } .mx2-kpi--has-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); width: max-content; max-width: 280px; padding: 8px 12px; /* Tooltips stay dark even in light mode so they read as a deliberate popout — don't track the body --mx2-surface-2 swap. */ background: #15110b; color: #ffffff; border: 1px solid var(--mx2-gold); border-radius: var(--radius-0); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32); font-size: 12px; line-height: 1.45; letter-spacing: 0.01em; white-space: normal; text-align: left; pointer-events: none; opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 30; } .mx2-kpi--has-tip::before { content: ''; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-4px); width: 10px; height: 10px; /* Same dark-tooltip convention as the bubble above. */ background: #15110b; border-left: 1px solid var(--mx2-gold); border-top: 1px solid var(--mx2-gold); rotate: 45deg; pointer-events: none; opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 31; } .mx2-kpi--has-tip:hover::after, .mx2-kpi--has-tip:hover::before, .mx2-kpi--has-tip:focus-visible::after, .mx2-kpi--has-tip:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); } .mx2-kpi label { color: var(--gold); font-size: 10px; letter-spacing: 0.16em; } .mx2-kpi .value { font-family: var(--font-serif); font-size: 30px; font-weight: 500; color: var(--mx2-text-hi); margin-top: 2px; line-height: 1; } .mx2-kpi-grid--compact { margin-bottom: 18px; } /* Dashboard cards float as WHITE tiles on the cream page chrome so they pop without needing a heavy shadow. Borders inherit from --mx2-stone-200 (light tan). Hover lifts the card with a slightly warmer border + soft shadow. */ body.mx2-side .mx2-kpi, body.mx2-side .mx2-dash-card { background: #FFFFFF; border-color: var(--mx2-stone-200, #E8E0CD); color: var(--mx2-black, #1A1A1A); } body.mx2-side .mx2-kpi:hover, body.mx2-side a.mx2-kpi--link:hover { border-color: var(--mx2-gold-mid, #b59a73); background: #FFFFFF; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06); } body.mx2-side .mx2-kpi label { color: var(--mx2-gold-deep, #876e51); } body.mx2-side .mx2-kpi .value { color: var(--mx2-black, #1A1A1A); } body.mx2-side .mx2-dash-card__head .section-kicker, body.mx2-side .mx2-dash-card__meta { color: var(--mx2-gold-deep, #876e51); } body.mx2-side .mx2-dash-card__action { color: var(--mx2-gold-deep, #876e51); } body.mx2-side .mx2-dash-card__action:hover { color: var(--mx2-black, #1A1A1A); } /* Tables inside the recent-activity card lose their default dark row-hover treatment; reuse the same beige hover the paper-section tables on /mx2/social use. */ body.mx2-side .mx2-dash-card .mx2-table th, body.mx2-side .mx2-dash-card .mx2-table td { color: var(--mx2-black, #1A1A1A); border-bottom-color: var(--mx2-stone-100, #F2EFE3); } body.mx2-side .mx2-dash-card .mx2-table tr:hover td { background: var(--mx2-stone-100, #F2EFE3); } /* Users table on /mx2/settings/clients/:id — the Permissions cell contains a 4-segment string and Last Login contains a long "Month Dth, YYYY at H:MM AM/PM TZ". Inside a .tab-panel the table was getting squeezed and each whitespace was wrapping (one word per line per cell). Two fixes: nowrap on the time element so the timestamp stays single-line, and allow horizontal scroll on the wrapping container so wide content doesn't pop out of the panel if the viewport is tight. #154 */ .users-table-wrap { overflow-x: auto; max-width: 100%; } .users-table .cell-last-login { white-space: nowrap; } .users-table .cell-last-login time { white-space: nowrap; } .users-table .member-perm-summary, .users-table .member-perm-summary .dim.micro { white-space: nowrap; } body.mx2-side .mx2-dash-card .mx2-table-link { color: var(--mx2-black, #1A1A1A); } body.mx2-side .mx2-dash-card .mx2-table-link:hover { color: var(--mx2-gold-deep, #876e51); } /* ── Dashboard: two-column grid (Pending | Recent) ──────────────────────── */ .mx2-dash-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2.4fr; gap: 16px; align-items: start; } .mx2-dash-grid > .mx2-dash-card--wide:only-child { grid-column: 1 / -1; } @media (max-width: 1100px) { .mx2-dash-grid { grid-template-columns: 1fr; } } .mx2-dash-card { background: var(--mx2-surface); border: 1px solid var(--mx2-rule); border-radius: var(--radius-0); padding: 14px 18px 4px; } .mx2-dash-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } .mx2-dash-card__meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx2-gold-light); } .mx2-dash-card__action { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--mx2-gold-light); } .mx2-dash-card__action:hover { color: #FFFFFF; } /* Compact table variant: tighter row padding for dashboard cards */ .mx2-table--compact th, .mx2-table--compact td { padding: 8px 10px; font-size: 13px; } .mx2-table--compact tr:first-child td, .mx2-table--compact tr:first-child th { padding-top: 6px; } .mx2-table--compact tr:last-child td { border-bottom: 0; padding-bottom: 6px; } /* ── Mx2 hub dashboard prototype ──────────────────────────────────────────── KPI strip + jump-in + activity feed + per-client activity. Lives alongside the workspace tile grid on /mx2; structured as a sequence of independent sections rather than one big dashboard so each block can be tweaked or pulled without affecting the others. */ .page-header .hub-header-btn { display: inline-flex; align-items: center; gap: 8px; } .page-header .hub-header-btn svg { flex-shrink: 0; } /* KPI strip — white cards across, with the count typeset large in the serif so it carries weight even at a glance. auto-fit lets the cards stretch to fill the row when fewer than 4 render (entitlement gating skips some on the client side) instead of leaving empty grid slots on the right. Stacks to two columns at narrow widths and one column on phones. */ .hub-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 28px 0; } @media (max-width: 900px) { .hub-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .hub-kpis { grid-template-columns: minmax(0, 1fr); } } .hub-kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: #FFFFFF; border: 1px solid var(--mx2-stone-200, #d0c8b3); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .hub-kpi-card:hover { border-color: var(--mx2-gold); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8, 6, 4, 0.06); } .hub-kpi-card__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mx2-gold-deep, #876e51); } .hub-kpi-card__value { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--mx2-black, #1a1a1a); font-weight: 500; } .hub-kpi-card__meta { margin-top: 4px; } /* Bottom row — Recent activity on the left, Jump in on the right. Mirrors the showcase: activity is the focal scroll-able list, jump-in is a sidebar of one-tap shortcuts. */ .hub-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; } @media (max-width: 900px) { .hub-bottom { grid-template-columns: minmax(0, 1fr); } } .hub-activity-list { list-style: none; margin: 0; padding: 0; } .hub-activity-row { border-bottom: 1px solid var(--mx2-rule, var(--rule, #ddd)); } .hub-activity-row:last-child { border-bottom: 0; } .hub-activity-row > a { display: flex; align-items: center; gap: 14px; padding: 14px 12px; margin: 0 -12px; border-radius: 6px; text-decoration: none; color: inherit; transition: background 80ms ease, color 80ms ease; } .hub-activity-row > a:hover { background: var(--mx2-paper-2, #f3eee2); } .hub-activity-row > a:hover .hub-activity-row__title { color: var(--mx2-gold-deep, #876e51); } .hub-activity-row__avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 4px; background: var(--mx2-stone-200, #d0c8b3); color: var(--mx2-black, #1a1a1a); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; text-transform: uppercase; } .hub-activity-row__body { flex: 1; min-width: 0; } .hub-activity-row__title { font-size: 15px; font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hub-activity-row__chev { flex-shrink: 0; font-size: 14px; } .hub-jumpin__title { font-family: var(--font-serif); font-weight: 500; font-size: 22px; margin: 0 0 14px; color: var(--mx2-black, #1a1a1a); } /* Standalone Jump-in row (used on the client hub + dashboard once the Recent activity column was removed). Cards now sit side-by-side across the full content width, wrapping on narrow screens. */ .hub-jumpin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; } .hub-jumpin-cards .hub-jumpin-card { margin-bottom: 0; } .hub-jumpin-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #FFFFFF; border: 1px solid var(--mx2-stone-200, #d0c8b3); border-radius: 10px; text-decoration: none; color: inherit; margin-bottom: 12px; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .hub-jumpin-card:hover { border-color: var(--mx2-gold); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8, 6, 4, 0.06); } .hub-jumpin-card__icon { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; color: var(--mx2-gold-deep, #876e51); } .hub-jumpin-card__icon svg { width: 100%; height: 100%; } .hub-jumpin-card__title { font-size: 15px; font-weight: 500; color: var(--mx2-black, #1a1a1a); } .hub-jumpin-card__sub { font-size: 12px; line-height: 1.4; margin-top: 2px; } /* Latest client activity — same list-row shape as discussions, with the org logo replacing the initials avatar so the team can scan by brand. */ .hub-client-activity-list { list-style: none; margin: 0; padding: 0; } .hub-client-activity-row { border-bottom: 1px solid var(--mx2-rule, var(--rule, #ddd)); } .hub-client-activity-row:last-child { border-bottom: 0; } .hub-client-activity-row > a { display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px; border-radius: 6px; text-decoration: none; color: inherit; transition: background 80ms ease, color 80ms ease; } .hub-client-activity-row > a:hover { background: var(--mx2-paper-2, #f3eee2); } .hub-client-activity-row > a:hover .hub-client-activity-row__name { color: var(--mx2-gold-deep, #876e51); } .hub-client-activity-row__body { flex: 1; min-width: 0; } .hub-client-activity-row__name { font-size: 15px; font-weight: 500; margin-bottom: 2px; } .hub-client-activity-row__chev { flex-shrink: 0; font-size: 14px; } /* ── Empty state ────────────────────────────────────────────────────────── */ .mx2-empty { /* Cream paper tone explicitly — was var(--mx2-surface), which is * #FFFFFF on body.mx2-side (admin) but #0c0a07 (near-black) on the * client side because the client doesn't redefine the surface token. * Per memory's "no dark backgrounds inside cream content cards" * rule, empty states inside cards have to be light surfaces too. * Cream-lt + ink-soft also looks cleaner on the admin side than the * previous stark white-on-cream. */ background: var(--cream-lt, #f3eee2); border: 1px dashed var(--mx2-rule); border-radius: var(--radius-sm); padding: 32px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft, #5d5443); text-transform: uppercase; letter-spacing: 0.12em; } /* Keep the bold "+ New sub-gallery" callout readable in the same * cream context — gold reads clearly on the paper tone. */ .mx2-empty strong { color: var(--gold, #c8a95e); font-weight: 700; } /* ── Tables ─────────────────────────────────────────────────────────────── */ .mx2-table { width: 100%; border-collapse: collapse; font-size: 13px; } .mx2-table th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gold-lo); } .mx2-table td { padding: 12px 14px; border-bottom: 1px solid var(--mx2-rule); color: var(--mx2-text); } .mx2-table tr:hover td { background: var(--mx2-surface-2); } /* mx2-table--striped: white base across header + body, subtle warm tint on even rows so stripes read as a quiet rhythm rather than a strong visual band. Works on top of any section surface — the table reads as a self-contained white card. */ .mx2-table--striped thead th, .mx2-table--striped tbody td { background: var(--mx2-surface); } .mx2-table--striped tbody tr:nth-child(even) td { background: #fafaf5; } .mx2-table--striped tbody tr:hover td { background: #f3eedf; } /* ── Toolbar (page hero with right-aligned action) ──────────────────────── */ .mx2-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .mx2-lead { font-family: var(--font-body); color: var(--mx2-text); margin-top: 12px; max-width: 640px; } /* ── Forms inside dark cards ────────────────────────────────────────────── */ .mx2-form-section, .mx2-card-form { max-width: 720px; } .mx2-form-section form, .mx2-card-form { background: var(--mx2-surface); border: 1px solid var(--mx2-rule); padding: 28px 28px 24px; margin-top: 16px; } body.mx2-side label { color: var(--mx2-text); font-weight: 600; } body.mx2-side .field { margin-bottom: 18px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .form-row-2 { grid-template-columns: 1fr; } } .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--mx2-rule); } /* ── Table elements ─────────────────────────────────────────────────────── */ .mx2-table-link { color: var(--mx2-text-hi); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color var(--t-fast), color var(--t-fast); } .mx2-table-link:hover { color: var(--mx2-gold); border-bottom-color: var(--mx2-gold); } .row-actions { text-align: right; white-space: nowrap; } .row-actions .btn-ghost-dark { padding: 4px 10px; font-size: 11px; letter-spacing: 0.14em; } .row-actions .btn-ghost-dark.danger { color: var(--mx2-rust); } .row-actions .btn-ghost-dark.danger:hover { color: #ff7a5f; } /* ── Status filter chips ───────────────────────────────────────────────── */ .status-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .status-chip { display: inline-flex; align-items: center; padding: 6px 12px; font-family: var(--font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mx2-text); border: 1px solid var(--mx2-rule); text-decoration: none; /* Perf pass D: narrowed `all` → the 3 props that actually change. `all` recomputes/animates every changeable property each frame. */ transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); } .status-chip:hover { color: var(--mx2-gold); border-color: var(--mx2-gold); } .status-chip.active { background: var(--mx2-gold); color: var(--mx2-black); border-color: var(--mx2-gold); } /* ── PO tactic cards ───────────────────────────────────────────────────── */ .po-tactic-card { background: var(--mx2-surface); border: 1px solid var(--mx2-rule); padding: 24px 28px; margin-bottom: 16px; } .po-tactic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mx2-rule); } .po-tactic-head h3 { font-family: var(--font-serif); font-weight: 600; font-size: 24px; text-transform: none; letter-spacing: 0; color: var(--mx2-text-hi); margin: 0; } .po-tactic-dates { margin-top: 18px; padding-bottom: 16px; border-bottom: 1px dotted var(--mx2-rule); } .po-tactic-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; } .po-tactic-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 18px; } @media (max-width: 800px) { .po-tactic-specs { grid-template-columns: 1fr; } } .po-spec-block h4 { font-family: var(--font-body); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mx2-gold-deep); margin-bottom: 10px; } .po-spec-list { list-style: none; padding: 0; margin: 0; } .po-spec-list li { padding: 8px 0; border-bottom: 1px dotted var(--mx2-rule); font-size: 13px; color: var(--mx2-text); } .po-spec-list li:last-child { border-bottom: none; } .po-tactic-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mx2-rule); display: flex; justify-content: flex-end; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .form-row-3 { grid-template-columns: 1fr; } } /* ── Account actions row ───────────────────────────────────────────────── */ .account-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .account-actions .dim.micro { color: var(--mx2-stone-300); } /* ── Phase 8: per-file approval ────────────────────────────────────────── */ .upload-review { display: flex; flex-direction: column; gap: 16px; } .upload-row { display: grid; grid-template-columns: 1fr 320px; gap: 24px; background: var(--mx2-surface); border: 1px solid var(--mx2-rule); padding: 18px 22px; } @media (max-width: 800px) { .upload-row { grid-template-columns: 1fr; } } .upload-meta { display: flex; flex-direction: column; gap: 6px; } .upload-meta strong { color: var(--mx2-text-hi); margin-right: 8px; } .upload-notes-display { background: rgba(159, 136, 108, 0.08); border-left: 2px solid var(--mx2-gold); padding: 8px 12px; font-size: 12px; color: var(--mx2-text); margin-top: 4px; } .upload-decide { display: flex; flex-direction: column; gap: 10px; } .upload-decide textarea { min-height: 60px; font-family: var(--font-body); font-size: 13px; } .upload-decide-actions { display: flex; gap: 8px; flex-wrap: wrap; } .upload-decide-actions .btn { padding: 6px 12px; font-size: 11px; } /* ── Checkbox grid (file type picker) ──────────────────────────────────── */ .checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px 16px; padding: 8px 0; } .checkbox-grid .checkbox-row { text-transform: lowercase; letter-spacing: 0.04em; font-family: var(--font-mono); font-size: 12px; color: var(--mx2-text); } /* Mx2-side error page styling */ body.mx2-side .error-page { max-width: 520px; margin: 96px auto; text-align: center; color: var(--mx2-text); } body.mx2-side .auth-h1 { color: var(--mx2-text-hi); } body.mx2-side .auth-lead { color: var(--mx2-text); } /* ── Top-right brand corner ────────────────────────────────────────────── When the sidebar is collapsed (desktop) or hidden as a drawer (mobile), the MaestroX wordmark from the sidebar disappears. Keep the branding on the page by surfacing a small horizontal mark in the top-right corner. Hidden whenever the sidebar is showing the wordmark itself, so the brand never appears twice. */ .app-brand-corner { position: fixed; top: 14px; right: 22px; height: 28px; z-index: 60; display: none; transition: opacity 200ms ease; } .app-brand-corner img { height: 100%; width: auto; display: block; } /* Desktop collapsed — show. */ body.sidebar-collapsed .app-brand-corner { display: block; } /* Mobile (<960px) — sidebar is a drawer (hidden by default), so the brand corner is always visible. Hide it when the drawer is open so the corner doesn't compete with the open sidebar's branding. */ @media (max-width: 959px) { .app-brand-corner { display: block; } body.sidebar-open .app-brand-corner { display: none; } } /* ── Sidebar toggles ───────────────────────────────────────────────────── Two distinct controls, each visible at one breakpoint: .mx2-sidebar-toggle — mobile-only hamburger, top-left. .mx2-sidebar-rail — desktop-only chevron tab on the sidebar's right edge; flips ◀ ↔ ▶ to reflect state. */ .mx2-sidebar-toggle { display: none; /* mobile media-query un-hides this */ position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 1100; width: 40px; height: 40px; align-items: center; justify-content: center; /* Cream-friendly chip — white surface + stone border + ink icon so the hamburger sits inside the MaestroX palette instead of reading as a heavy dark blob on the cream page chrome. */ background: #FFFFFF; border: 1px solid var(--mx2-stone-200, #d0c8b3); border-radius: 8px; color: var(--ink, #1A1410); cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(20, 18, 14, 0.06); transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease; } .mx2-sidebar-toggle:hover { background: var(--mx2-paper-2, #f3eee2); border-color: var(--mx2-gold, #c8a95e); } .mx2-sidebar-toggle:focus-visible { outline: 2px solid var(--mx2-gold); outline-offset: 2px; } /* Chevron rail: small vertical tab, half-overlapping the sidebar's right border. Slides with the sidebar, so when collapsed it sits at the left edge of the viewport ready to re-expand. left value reads from --sidebar-w so the rail tracks the sidebar's actual width — a stale 280px hardcode left it floating ~50px into the content area after the sidebar token was tightened to 232px. */ .mx2-sidebar-rail { position: fixed; top: 50%; left: var(--sidebar-w, 232px); transform: translate(-50%, -50%); width: 22px; height: 56px; /* Just above the sidebar (z-index: 60) so it overlaps the right * border. Was 1100, which floated the chevron OVER every modal — * composer-library-modal, asset-modal, batch-gen, etc. — making * the page chrome bleed through. The rail's only job is to peek * over the sidebar; it doesn't need to be in the overlay tier. */ z-index: 65; display: inline-flex; align-items: center; justify-content: center; background: #0F0F0F; border: 1px solid var(--mx2-rule); border-radius: 0 6px 6px 0; color: var(--mx2-gold-light, #e8dec9); cursor: pointer; padding: 0; transition: left 200ms ease, background 120ms ease, color 120ms ease; } .mx2-sidebar-rail:hover { background: #1a1a1a; color: #FFFFFF; } .mx2-sidebar-rail:focus-visible { outline: 2px solid var(--mx2-gold); outline-offset: 2px; } .mx2-sidebar-rail svg { transition: transform 200ms ease; } body.mx2-side.sidebar-collapsed .mx2-sidebar-rail, body.client-side.sidebar-collapsed .mx2-sidebar-rail { left: 11px; /* tucked at viewport's left edge, half-overlap */ } body.mx2-side.sidebar-collapsed .mx2-sidebar-rail svg, body.client-side.sidebar-collapsed .mx2-sidebar-rail svg { transform: rotate(180deg); /* chevron now points right */ } .mx2-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1050; animation: fade-in 140ms ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Desktop collapsed: sidebar removed from layout, content fills width. We swap from CSS grid to block so the main pane reflows full-width; the chevron rail stays fixed-positioned at the viewport's left edge. Same treatment for the client portal — body.client-side.app uses the same grid + sidebar shell so the collapse needs to reach it too. */ body.mx2-side.sidebar-collapsed, body.client-side.app.sidebar-collapsed { display: block; } body.mx2-side.sidebar-collapsed .mx2-sidebar, body.client-side.sidebar-collapsed .mx2-sidebar { display: none; } /* Mobile (<960px) — sidebar hidden by default; drawer pattern, hamburger replaces chevron rail. */ @media (max-width: 959px) { .mx2-sidebar-toggle { display: inline-flex; } .mx2-sidebar-rail { display: none; } body.mx2-side { grid-template-columns: 1fr; } /* Home-indicator clearance on iOS. The sidebar uses 100dvh, which already accounts for iOS Safari's bottom toolbar (and Chrome's mobile chrome) by sizing against the visible viewport — so we don't need an additional fixed buffer, just safe-area-inset for the home indicator. */ .mx2-sidebar-footer { padding-bottom: env(safe-area-inset-bottom); } .mx2-sidebar { position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 280px; z-index: 1075; transform: translateX(-100%); transition: transform 200ms ease; border-right: 1px solid var(--mx2-rule); border-bottom: none; } body.mx2-side.sidebar-open .mx2-sidebar { transform: translateX(0); } /* On mobile, ignore desktop's collapsed class (which would also hide it). */ body.mx2-side.sidebar-collapsed .mx2-sidebar { transform: translateX(-100%); visibility: visible; } body.mx2-side.sidebar-open.sidebar-collapsed .mx2-sidebar { transform: translateX(0); } .mx2-main { /* Top clears the 40px hamburger (positioned at top:10px) plus a small breathing gap. Sides + bottom carry the notch / home-indicator insets. */ padding: calc(56px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); } .mx2-page-hero h1 { font-size: 24px; } .mx2-page-hero { margin-bottom: 12px; } .mx2-section { margin-top: 20px; } /* ── Tables → cards on mobile (DEFAULT) ────────────────────────────── Every .mx2-table renders as stacked cards on phones — one row per card, headers hidden, first cell promoted as the card title. Tables that genuinely need a tabular look on mobile can opt out with .mx2-table--scroll (horizontal scroll inside their own box). */ .mx2-table:not(.mx2-table--scroll) { display: block; width: 100%; border-collapse: separate; } .mx2-table:not(.mx2-table--scroll) thead { display: none; } .mx2-table:not(.mx2-table--scroll) tbody { display: block; } /* Each row is a card. Flex so cells with [data-label] can flow inline while cells without remain on their own line. */ .mx2-table:not(.mx2-table--scroll) tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; background: var(--mx2-surface); border: 1px solid var(--mx2-rule); border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; } .mx2-table:not(.mx2-table--scroll) td { padding: 0; border: 0 !important; font-size: 14px; color: var(--mx2-text); text-align: left !important; /* override per-cell text-align:right; */ } /* Cells without data-label = full row (the rich content cells: name + number, client w/ logo, picked-up-by w/ avatar). */ .mx2-table:not(.mx2-table--scroll) td:not([data-label]) { flex: 1 0 100%; } /* First cell = card title (always full row + prominent). */ .mx2-table:not(.mx2-table--scroll) tr td:first-child { flex: 1 0 100%; font-size: 16px; color: var(--mx2-text-hi); margin-bottom: 4px; } /* Cells WITH data-label = inline LABEL value, multiple per row by default. Rich-content cells (with a pill, logo, or avatar) are too visually heavy to share a row — they break to full width. */ .mx2-table:not(.mx2-table--scroll) td[data-label] { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; } .mx2-table:not(.mx2-table--scroll) td[data-label]::before { content: attr(data-label); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--gold); font-weight: 600; } /* Rich-content cells force their own row — keeps the card scannable. */ .mx2-table:not(.mx2-table--scroll) td[data-label]:has(.cell-with-logo), .mx2-table:not(.mx2-table--scroll) td[data-label]:has(.pill), .mx2-table:not(.mx2-table--scroll) td[data-label]:has(.avatar-preview) { flex: 1 0 100%; } /* When a value is just "—" (empty state like an unpicked-up campaign), hide the whole cell so we don't get an orphan "PICKED UP BY —". */ .mx2-table:not(.mx2-table--scroll) td[data-label]:has(> .dim:only-child) { display: none; } /* The Distribution / Tactics bar-chart cells don't make sense as a standalone card item — hide them on mobile (the count is right next to it). */ .mx2-table:not(.mx2-table--scroll) td.report-bar-cell { display: none; } .mx2-table:not(.mx2-table--scroll) tr:hover td { background: transparent; } /* Opt-out: tables that explicitly want horizontal-scroll layout. */ .mx2-table--scroll { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; } .mx2-table--scroll th, .mx2-table--scroll td { white-space: normal; } /* Toolbar: stack the title block above the action button on mobile so a long lead paragraph (e.g. on Tactic Library) doesn't get crushed into a narrow column by a wide button on the right. The action button takes full width below — feels intentional rather than squeezed. */ .mx2-toolbar { flex-direction: column; align-items: stretch; gap: 12px; } .mx2-toolbar > div:first-child { width: 100%; } /* Action buttons that follow the title block stretch full-width */ .mx2-toolbar > .btn, .mx2-toolbar > a.btn, .mx2-toolbar > form > .btn, .mx2-toolbar > form > a.btn { width: 100%; text-align: center; justify-content: center; } /* Inline Delete button on campaign-show is a small destructive action — stays on its own row but compact and right-aligned, not full-width. */ .mx2-toolbar > form { align-self: flex-end; } .mx2-toolbar > form .btn-ghost-dark.danger { width: auto; padding: 6px 14px; font-size: 11px; min-height: 36px; } /* Hero with logo: drop the org logo on mobile entirely. The campaign name + brand chrome above already establishes context, and the breadcrumb/back link points at the parent. The logo just steals horizontal space from a long campaign name. */ .hero-with-logo > .org-logo, .hero-with-logo .avatar-preview { display: none; } .hero-with-logo { gap: 0; } /* Filter bar items full-width */ .list-filter { flex-direction: column; align-items: stretch; } .list-filter__search, .list-filter__select { width: 100% !important; max-width: none !important; flex: none !important; } /* Modal padding/width tighter */ .modal-overlay { padding: 8vh 8px 8px; } .modal-card { padding: 20px 18px; } .cosimo-modal__card { padding: 18px 16px; } /* Campaign tabs: compact + scrollable if they overflow */ .campaign-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .campaign-tabs::-webkit-scrollbar { display: none; } .campaign-tab { padding: 10px 16px; font-size: 11px; flex-shrink: 0; } .campaign-tab-panel { padding: 22px 18px; } /* ── Dashboard — mobile layout ──────────────────────────────────────── */ /* Greeting tightens up; date wraps below */ .mx2-dash-greeting { gap: 4px; margin-bottom: 14px; } .mx2-dash-greeting h1 { font-size: 22px; line-height: 1.2; } .mx2-dash-meta { font-size: 11px; } /* KPI grid: 4 cols → 2x2 with bigger digits and thumb-friendly cards */ .mx2-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .mx2-kpi { padding: 12px 12px; min-height: 88px; } .mx2-kpi label { font-size: 9px; letter-spacing: 0.14em; } .mx2-kpi .value { font-size: 26px; } /* Hover tooltips don't work on touch. Hide them on mobile so they don't open + freeze on tap. The aria-label still describes each card to screen readers. */ .mx2-kpi--has-tip::after, .mx2-kpi--has-tip::before { display: none !important; } /* Pending bar: edge-to-edge inside the page padding, sticky-ish */ .mx2-pending-bar { margin-left: -16px; margin-right: -16px; border-radius: 0; } .mx2-pending-bar__head { padding: 12px 16px; font-size: 13px; } /* Recent activity card — tighter padding */ .mx2-dash-card { padding: 12px 14px 4px; } .mx2-dash-card__head { gap: 8px; margin-bottom: 6px; } .mx2-dash-card__action { font-size: 10px; } /* Sidebar drawer should hit the home-indicator bottom inset cleanly */ .mx2-sidebar { padding-bottom: env(safe-area-inset-bottom); } /* Sidebar shrinks the stacked logo so it doesn't dominate the drawer when it's open at narrow widths. */ .mx2-brand-mark { height: 64px; } /* Lifecycle State form (Live ↔ Ended dropdown): stack at narrow widths so the select gets a full row. */ .lifecycle-state-form { gap: 8px; flex-direction: column; align-items: stretch; } .lifecycle-state-form select { width: 100%; } .lifecycle-state-form .btn { width: 100%; } /* PO summary head: stack progress text and "Complete / In progress" pill so neither overflows the card edge. */ .po-mx2-summary-head { flex-direction: column; align-items: flex-start; gap: 8px; } /* Mx2 PO tactic head: same wrap pattern as the client PO card. Pills drop to a second row so long status labels fit. */ .po-mx2-tactic__head { flex-wrap: wrap; gap: 8px 12px; } .po-mx2-tactic__title { flex: 1 1 calc(100% - 56px); } .po-mx2-tactic__pills { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; } .po-mx2-tactic__pills .po-card-chevron { margin-left: auto; } /* Mx2 tables (clients, team, tactics, recent activity): scroll horizontally instead of crushing columns into nothing. Excludes .mx2-table--menu, which collapses to stacked cards instead — see rule below. */ .mx2-section table.mx2-table:not(.mx2-table--compact):not(.mx2-table--menu), .mx2-dash-card table.mx2-table:not(.mx2-table--menu) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .mx2-table:not(.mx2-table--menu) th, .mx2-table:not(.mx2-table--menu) td { white-space: nowrap; } /* Menu-style tables (Settings index, etc.) — stack each row as a card so descriptive text wraps and the action button drops below. No horizontal scroll. */ .mx2-table--menu { display: block; } .mx2-table--menu thead { display: none; } .mx2-table--menu tbody, .mx2-table--menu tr { display: block; } .mx2-table--menu tr { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--mx2-rule); border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; } .mx2-table--menu td { display: block; padding: 0; border: 0 !important; white-space: normal; } .mx2-table--menu td strong { font-size: 16px; } .mx2-table--menu td.dim, .mx2-table--menu td:nth-child(2) { margin-top: 4px; font-size: 13px; } .mx2-table--menu .row-actions { margin-top: 10px; } .mx2-table--menu .row-actions .btn-ghost-dark { width: 100%; text-align: center; } /* Asset activity collapsible: make sure the long heading + chevron fit inside the container border. */ .asset-activity > summary { font-size: 16px; gap: 8px; } .asset-activity > summary > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Lifecycle table — same compact-card treatment as the client plan table when columns get tight. */ .mx2-section .mx2-table th { font-size: 10px; } .mx2-section .mx2-table td { font-size: 13px; } } /* ── Mx2-side PO progress summary (read-only) ──────────────────────────── */ /* Note: this view is rendered inside the campaign-tab-panel, which uses a beige-paper background (#f3eee2). Cards inherit that context — white cards with dark-ink text — so the surface doesn't clash with the surrounding panel. */ .po-mx2-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 18px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; color: var(--ink, #1A1A1A); } .po-mx2-summary-head h3 { color: var(--ink, #1A1A1A); } .po-mx2-summary-head .dim { color: var(--ink-soft, #5E5E5E); } .po-mx2-tactic { background: #FFFFFF; border: 1px solid var(--rule); border-radius: 6px; padding: 0; margin-bottom: 14px; } .po-mx2-tactic--complete { border-color: var(--status-launched, #4a8c5e); } /* Status-tinted backgrounds when collapsed — green wash for complete, warm-amber wash for pending. Only tint when the details are CLOSED so the expanded form stays neutral and readable. */ .po-mx2-tactic:not(:has(details[open])).po-mx2-tactic--complete { background: rgba(74, 140, 94, 0.24); border-color: var(--status-launched, #4a8c5e); border-width: 1.5px; } .po-mx2-tactic:not(:has(details[open])):not(.po-mx2-tactic--complete) { background: rgba(212, 167, 85, 0.22); border-color: var(--mx2-amber, #d4a755); border-width: 1.5px; } /* Collapsible: details > summary head; chevron rotates on open */ .po-mx2-tactic > details > summary { list-style: none; cursor: pointer; } .po-mx2-tactic > details > summary::-webkit-details-marker { display: none; } .po-mx2-tactic > details > summary:hover { background: rgba(159, 136, 108, 0.06); } .po-mx2-tactic > details[open] > summary .po-card-chevron { transform: rotate(180deg); } .po-mx2-tactic .po-card-chevron { font-size: 14px; color: var(--ink-soft, #5E5E5E); transition: transform 160ms ease; } .po-mx2-zip { margin: 14px 0 0; } .po-mx2-zip a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(159, 136, 108, 0.10); border: 1px solid var(--mx2-gold, #c9a86a); border-radius: 4px; color: var(--mx2-gold-deep, #876e51); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; } .po-mx2-zip a:hover { background: rgba(159, 136, 108, 0.18); color: var(--ink, #1A1A1A); } /* Card has padding=0; head/body each carry their own so closed cards read tighter than open ones. */ .po-mx2-tactic > details > summary { padding: 14px 18px; } .po-mx2-tactic > details[open] > summary { padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .po-mx2-tactic > details[open] > summary + * { margin-top: 14px; padding-left: 18px; padding-right: 18px; } .po-mx2-tactic > details[open] > .po-mx2-pending, .po-mx2-tactic > details[open] > .po-mx2-note, .po-mx2-tactic > details[open] > .po-mx2-zip, .po-mx2-tactic > details[open] > .po-mx2-block, .po-mx2-tactic > details[open] > .po-mx2-status-bar, .po-mx2-tactic > details[open] > .po-mx2-reject-form, .po-mx2-tactic > details[open] > .po-mx2-reject-summary { padding-left: 18px; padding-right: 18px; } .po-mx2-tactic > details[open] > .po-mx2-block:last-child { padding-bottom: 18px; } .po-mx2-tactic > details[open] > .po-mx2-pending:last-child { margin-bottom: 18px; } .po-mx2-tactic__head { display: flex; align-items: center; gap: 12px; } .po-mx2-tactic__title { flex: 1; min-width: 0; } .po-mx2-tactic__title h4 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink, #1A1A1A); margin: 0; text-transform: none; letter-spacing: 0; display: flex; align-items: center; gap: 6px; } .po-mx2-tactic__title .dim { color: var(--ink-soft, #5E5E5E); } .po-mx2-tactic__pills { display: flex; gap: 8px; flex-shrink: 0; } .po-mx2-note { background: rgba(159, 136, 108, 0.10); border-left: 3px solid var(--mx2-gold, #c9a86a); padding: 10px 14px; margin: 14px 0 0; font-size: 13px; color: var(--ink, #1A1A1A); } /* Status-action bar inside each Mx2 PO tactic — a single dropdown + Update button. Picking "Rejected — Resubmit" hides Update and reveals the reason form below the bar (see .po-mx2-reject-form). */ .po-mx2-status-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin: 14px 0 0; background: #FFFFFF; border: 1px solid var(--rule-lt, #e6dfce); border-radius: 6px; } .po-mx2-status-bar__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mx2-gold-deep, #876e51); margin-right: 4px; } .po-mx2-status-bar select { font-family: inherit; font-size: 13px; padding: 6px 28px 6px 10px; border: 1px solid var(--rule, #d9d2c0); border-radius: 4px; background: #FFFFFF; color: var(--ink, #1A1A1A); cursor: pointer; width: auto; /* override base.css 100% width */ min-width: 0; flex: 0 0 auto; } .po-mx2-status-bar select:focus { outline: 2px solid var(--mx2-gold, #9f886c); outline-offset: 1px; } /* `.btn` rules set display:inline-block, which beats the bare hidden attribute. Force the Update button to disappear when the dropdown is set to rejected_resubmit (the reject form has its own submit). */ .po-mx2-status-bar [data-status-submit][hidden] { display: none; } /* Reject reason form — appears below the status bar when a planner clicks "Reject — Resubmit". The textarea is full-width and the submit button posts the reason to the status endpoint. */ .po-mx2-reject-form { margin: 8px 0 0; padding: 12px 14px; background: #fef4f1; border: 1px solid #e8c0b6; border-radius: 6px; display: flex; flex-direction: column; gap: 8px; } /* `display: flex` above defeats the bare `hidden` attribute, so keep the hidden state explicit. The reject form should only appear after the planner clicks the "Reject — Resubmit" button. */ .po-mx2-reject-form[hidden] { display: none; } .po-mx2-reject-form textarea { width: 100%; min-height: 80px; padding: 8px 10px; font-family: inherit; font-size: 14px; border: 1px solid #d6b9b1; border-radius: 4px; background: #FFFFFF; resize: vertical; } .po-mx2-reject-form__actions { display: flex; gap: 8px; justify-content: flex-end; } /* Inline Live/Ended dropdown for the campaign lifecycle state. */ .lifecycle-state-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lifecycle-state-form label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mx2-text-mid, rgba(244, 234, 211, 0.6)); } .lifecycle-state-form select { width: auto; min-width: 160px; padding: 6px 28px 6px 10px; font-size: 13px; border-radius: 4px; } /* Collapsible "Asset activity" subsection inside Lifecycle. */ .asset-activity { margin-top: 22px; border-top: 1px dotted var(--rule, #d9d2c0); padding-top: 14px; } .asset-activity > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--mx2-text-hi, #f4ead3); } .asset-activity > summary .dim { color: var(--mx2-text-mid, rgba(244, 234, 211, 0.6)); } .asset-activity > summary::-webkit-details-marker { display: none; } .asset-activity > summary:hover { color: var(--mx2-gold, #c9a86a); } .asset-activity__chevron { transition: transform 200ms ease; flex-shrink: 0; color: var(--mx2-gold, #c9a86a); } .asset-activity[open] .asset-activity__chevron { transform: rotate(180deg); } .po-mx2-reject-summary { margin: 10px 0 0; padding: 10px 14px; background: #fef4f1; border-left: 3px solid #b14b3a; font-size: 13px; color: var(--ink); } .po-mx2-note code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; color: var(--mx2-gold-deep, #876e51); } .po-mx2-block { margin-top: 14px; } .po-mx2-block__head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mx2-gold-deep, #876e51); margin-bottom: 8px; } .po-mx2-table { width: 100%; border-collapse: collapse; font-size: 13px; } .po-mx2-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--mx2-gold-deep, #876e51); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--rule); } .po-mx2-table td { padding: 8px 10px; border-bottom: 1px solid var(--rule-lt, #ece5d2); color: var(--ink, #1A1A1A); vertical-align: top; } .po-mx2-table .dim { color: var(--ink-soft, #5E5E5E); } .po-mx2-table tr:last-child td { border-bottom: 0; } .po-mx2-row--pending td:first-child { color: #b58220; font-weight: 600; } .po-mx2-row--met td:first-child { color: var(--status-launched, #4a8c5e); font-weight: 600; } .po-mx2-uploads { list-style: none; margin: 0; padding: 0; } .po-mx2-uploads li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; } .po-mx2-copy-row { display: grid; grid-template-columns: 240px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-lt, #ece5d2); } .po-mx2-copy-row:last-child { border-bottom: 0; } .po-mx2-copy-row--missing { background: rgba(212, 167, 85, 0.10); } .po-mx2-copy-row__label { color: var(--ink, #1A1A1A); font-size: 13px; display: flex; align-items: baseline; gap: 6px; } .po-mx2-copy-row__value { color: var(--ink-mid, #3a3a3a); font-size: 13px; white-space: pre-wrap; display: flex; align-items: flex-start; gap: 8px; } .po-mx2-copy-row__text { flex: 1; min-width: 0; word-break: break-word; } .po-mx2-copy-row__value .dim { color: var(--ink-soft, #5E5E5E); } .po-mx2-copy-btn { flex-shrink: 0; background: none; border: 1px solid var(--rule-lt, #e6dfce); border-radius: 4px; width: 26px; height: 26px; cursor: pointer; color: var(--mx2-gold-deep, #876e51); display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; margin-top: 1px; } .po-mx2-copy-btn:hover { background: rgba(212, 175, 110, 0.12); border-color: var(--mx2-gold, #c9a86a); } .po-mx2-copy-btn--copied { background: var(--status-launched, #4a8c5e); color: #FFFFFF; border-color: var(--status-launched, #4a8c5e); } .po-mx2-pending { margin-top: 14px; padding: 10px 14px; background: rgba(212, 167, 85, 0.18); border-left: 3px solid var(--mx2-amber, #d4a755); font-size: 12px; color: var(--ink, #1A1A1A); } /* Tablet+ (≥960px) — give .mx2-main some breathing room when sidebar is open. */ @media (min-width: 960px) { .mx2-sidebar-toggle { top: 14px; left: 14px; } body.mx2-side:not(.sidebar-collapsed) .mx2-sidebar-toggle { /* Hamburger still visible but tucked into the corner of the open sidebar. Its job on desktop is to collapse the sidebar. */ } } /* ── Mx2 forms on white surface ────────────────────────────────────────── All explicit form containers (mx2-card-form, asset-panel) sit on a white card with dark text against the dark layout. Improves readability and gives forms visual weight as discrete tasks. .inline-form (single-button forms like Hide / Archive / Reactivate) stays transparent so those buttons don't look like cards. Order matters: this block is at the END of mx2.css so it wins over the earlier defaults at lines ~410 and asset-panel rules in base.css. */ body.mx2-side .mx2-card-form, body.mx2-side .mx2-form-section form, body.mx2-side .asset-panel, body.client-side .mx2-card-form, body.client-side .mx2-form-section form, body.client-side .asset-panel { background: #FFFFFF; color: var(--ink, #1A1A1A); border: 1px solid var(--rule, #d9d2c0); border-radius: 6px; padding: 18px 20px; } body.mx2-side .mx2-card-form label, body.mx2-side .mx2-form-section form label, body.mx2-side .asset-panel label, body.client-side .mx2-card-form label, body.client-side .mx2-form-section form label, body.client-side .asset-panel label { color: var(--ink-soft, #5E5E5E); } body.mx2-side .mx2-card-form .dim, body.mx2-side .mx2-form-section form .dim, body.mx2-side .asset-panel .dim, body.mx2-side .mx2-card-form .mx2-lead, body.mx2-side .asset-panel .mx2-lead, body.client-side .mx2-card-form .dim, body.client-side .mx2-card-form .mx2-lead { color: var(--ink-soft, #5E5E5E); } body.mx2-side .mx2-card-form .section-kicker, body.mx2-side .asset-panel .section-kicker, body.client-side .mx2-card-form .section-kicker { color: var(--mx2-gold-deep, #876e51); } body.mx2-side .mx2-card-form h2, body.mx2-side .mx2-card-form h3, body.mx2-side .asset-panel h2, body.mx2-side .asset-panel h3, body.client-side .mx2-card-form h2, body.client-side .mx2-card-form h3 { color: var(--ink, #1A1A1A); } body.mx2-side .mx2-card-form .btn-ghost-dark, body.mx2-side .asset-panel .btn-ghost-dark, body.client-side .mx2-card-form .btn-ghost-dark { color: var(--ink-soft, #5E5E5E); border-color: var(--rule, #d9d2c0); background: transparent; } body.mx2-side .mx2-card-form .btn-ghost-dark:hover, body.mx2-side .asset-panel .btn-ghost-dark:hover, body.client-side .mx2-card-form .btn-ghost-dark:hover { color: var(--ink, #1A1A1A); border-color: var(--ink-soft, #5E5E5E); } /* ── Paper / light surfaces inside the dark Mx2 layout ───────────────────── Used for content-heavy surfaces where dark-on-dark feels too heavy (Social Media Phase 1). Anchored at --mx2-paper for the card itself with white inputs and dark text + borders so the section reads as a memo pinned to the dark workspace rather than being part of it. Note: complements (doesn't replace) the .mx2-card-form / .asset-panel white treatment above — that's the iter3 generic pattern, this block is the social-feature paper variant. Both can co-exist on the same page (different selectors). */ .mx2-section--paper { background: var(--mx2-paper); color: var(--mx2-black); padding: 28px 32px; border-radius: 8px; margin-bottom: 16px; } .mx2-section--paper h1, .mx2-section--paper h2, .mx2-section--paper h3, .mx2-section--paper strong { color: var(--mx2-black); } .mx2-section--paper .dim { color: rgba(0, 0, 0, 0.6); } .mx2-section--paper .micro.dim { color: rgba(0, 0, 0, 0.55); } .mx2-section--paper .section-kicker { color: var(--mx2-gold-deep); } .mx2-section--paper a:not(.btn):not(.btn-ghost-dark):not(.btn-ghost) { color: var(--mx2-gold-deep); } .mx2-card-form--paper { background: var(--mx2-paper); color: var(--mx2-black); border: 1px solid var(--mx2-stone-200); border-radius: 8px; } .mx2-card-form--paper label, .mx2-section--paper label { color: var(--mx2-black); } /* Inputs inside paper sections — must beat body.mx2-side input rules (which paint inputs dark for normal Mx2 surfaces). The body.mx2-side prefix raises specificity to (0,3,1) so source order isn't load-bearing. Backgrounds: cream (--mx2-paper) instead of stark white so the field blends with the paper card; borders: a deeper beige (--mx2-stone-300) so they read as inputs at a glance, hover/focus warms to gold-mid (a softer beige than the saturated gold). */ /* Light-input override for ALL Mx2-side white/cream cards. Covers both the iter3 generic white cards (.mx2-card-form, .mx2-form-section form, .asset-panel) and the paper variants (.mx2-card-form--paper, .mx2-section--paper). Without this, inputs inside white cards fall back to the body.mx2-side dark-input rule and read as black slabs. */ body.mx2-side .mx2-card-form input[type='text'], body.mx2-side .mx2-card-form input[type='email'], body.mx2-side .mx2-card-form input[type='password'], body.mx2-side .mx2-card-form input[type='tel'], body.mx2-side .mx2-card-form input[type='url'], body.mx2-side .mx2-card-form input[type='search'], body.mx2-side .mx2-card-form input[type='number'], body.mx2-side .mx2-card-form input[type='datetime-local'], body.mx2-side .mx2-card-form input[type='date'], body.mx2-side .mx2-card-form input[type='file'], body.mx2-side .mx2-card-form textarea, body.mx2-side .mx2-card-form select, body.mx2-side .mx2-form-section form input[type='text'], body.mx2-side .mx2-form-section form input[type='email'], body.mx2-side .mx2-form-section form input[type='password'], body.mx2-side .mx2-form-section form input[type='tel'], body.mx2-side .mx2-form-section form input[type='url'], body.mx2-side .mx2-form-section form input[type='search'], body.mx2-side .mx2-form-section form input[type='number'], body.mx2-side .mx2-form-section form input[type='datetime-local'], body.mx2-side .mx2-form-section form input[type='date'], body.mx2-side .mx2-form-section form input[type='file'], body.mx2-side .mx2-form-section form textarea, body.mx2-side .mx2-form-section form select, body.mx2-side .asset-panel input[type='text'], body.mx2-side .asset-panel input[type='email'], body.mx2-side .asset-panel input[type='password'], body.mx2-side .asset-panel input[type='tel'], body.mx2-side .asset-panel input[type='url'], body.mx2-side .asset-panel input[type='search'], body.mx2-side .asset-panel input[type='number'], body.mx2-side .asset-panel input[type='datetime-local'], body.mx2-side .asset-panel input[type='date'], body.mx2-side .asset-panel input[type='file'], body.mx2-side .asset-panel textarea, body.mx2-side .asset-panel select, body.mx2-side .mx2-card-form--paper input[type='text'], body.mx2-side .mx2-card-form--paper input[type='email'], body.mx2-side .mx2-card-form--paper input[type='password'], body.mx2-side .mx2-card-form--paper input[type='tel'], body.mx2-side .mx2-card-form--paper input[type='url'], body.mx2-side .mx2-card-form--paper input[type='search'], body.mx2-side .mx2-card-form--paper input[type='number'], body.mx2-side .mx2-card-form--paper input[type='datetime-local'], body.mx2-side .mx2-card-form--paper input[type='date'], body.mx2-side .mx2-card-form--paper input[type='file'], body.mx2-side .mx2-card-form--paper textarea, body.mx2-side .mx2-card-form--paper select, body.mx2-side .mx2-section--paper input[type='text'], body.mx2-side .mx2-section--paper input[type='email'], body.mx2-side .mx2-section--paper input[type='password'], body.mx2-side .mx2-section--paper input[type='tel'], body.mx2-side .mx2-section--paper input[type='url'], body.mx2-side .mx2-section--paper input[type='search'], body.mx2-side .mx2-section--paper input[type='number'], body.mx2-side .mx2-section--paper input[type='datetime-local'], body.mx2-side .mx2-section--paper input[type='date'], body.mx2-side .mx2-section--paper input[type='file'], body.mx2-side .mx2-section--paper textarea, body.mx2-side .mx2-section--paper select { background: #FFFFFF; color: var(--mx2-black); border: 1px solid var(--mx2-stone-300); } body.mx2-side .mx2-card-form input:hover, body.mx2-side .mx2-card-form textarea:hover, body.mx2-side .mx2-card-form select:hover, body.mx2-side .mx2-form-section form input:hover, body.mx2-side .mx2-form-section form textarea:hover, body.mx2-side .mx2-form-section form select:hover, body.mx2-side .asset-panel input:hover, body.mx2-side .asset-panel textarea:hover, body.mx2-side .asset-panel select:hover, body.mx2-side .mx2-card-form--paper input:hover, body.mx2-side .mx2-card-form--paper textarea:hover, body.mx2-side .mx2-card-form--paper select:hover, body.mx2-side .mx2-section--paper input:hover, body.mx2-side .mx2-section--paper textarea:hover, body.mx2-side .mx2-section--paper select:hover { border-color: var(--mx2-gold-mid); background: #ffffff; } body.mx2-side .mx2-card-form input:focus, body.mx2-side .mx2-card-form textarea:focus, body.mx2-side .mx2-card-form select:focus, body.mx2-side .mx2-form-section form input:focus, body.mx2-side .mx2-form-section form textarea:focus, body.mx2-side .mx2-form-section form select:focus, body.mx2-side .asset-panel input:focus, body.mx2-side .asset-panel textarea:focus, body.mx2-side .asset-panel select:focus, body.mx2-side .mx2-card-form--paper input:focus, body.mx2-side .mx2-card-form--paper textarea:focus, body.mx2-side .mx2-card-form--paper select:focus, body.mx2-side .mx2-section--paper input:focus, body.mx2-side .mx2-section--paper textarea:focus, body.mx2-side .mx2-section--paper select:focus { outline: 2px solid var(--mx2-gold-light); outline-offset: -1px; border-color: var(--mx2-gold-mid); background: #ffffff; } /* Table-row hover inside paper sections — the global rule paints --mx2-surface-2 (near-black), which is fine on the dark Mx2 default surface but reads as a black bar on the cream paper card. Swap to a light beige tint so the row highlight stays visible without wrecking the contrast. */ body.mx2-side .mx2-section--paper .mx2-table tr:hover td { background: var(--mx2-stone-100); color: var(--mx2-black); } body.mx2-side .mx2-section--paper .mx2-table-link { color: var(--mx2-black); } body.mx2-side .mx2-section--paper .mx2-table-link:hover { color: var(--mx2-gold-deep); border-bottom-color: var(--mx2-gold-deep); } /* btn-ghost-dark inside paper — its default --mx2-text color (light beige tuned for dark surfaces) disappears on cream. Anchor to a readable dark tone with a gold-deep hover. */ body.mx2-side .mx2-section--paper .btn-ghost-dark, body.mx2-side .mx2-card-form--paper .btn-ghost-dark { color: var(--mx2-black); } body.mx2-side .mx2-section--paper .btn-ghost-dark:hover, body.mx2-side .mx2-card-form--paper .btn-ghost-dark:hover { color: var(--mx2-gold-deep); } body.mx2-side .mx2-section--paper .btn-ghost-dark.danger, body.mx2-side .mx2-card-form--paper .btn-ghost-dark.danger { color: var(--mx2-rust); } /* Native dropdown arrows on light surfaces — selects have their own chrome that can read dark. The arrow indicator browsers render is OS-controlled, but the surrounding chrome respects color, so set that explicitly. */ body.mx2-side .mx2-section--paper select, body.mx2-side .mx2-card-form--paper select { color: var(--mx2-black); } .mx2-card-form--paper .form-actions, .mx2-section--paper .form-actions { border-top-color: var(--mx2-stone-200); } .mx2-section--paper .mx2-table { background: transparent; } .mx2-section--paper .mx2-table th { color: var(--mx2-black); border-bottom-color: var(--mx2-stone-200); } .mx2-section--paper .mx2-table td { color: var(--mx2-black); border-bottom-color: var(--mx2-stone-100); } .mx2-section--paper .mx2-empty { background: transparent; color: rgba(0, 0, 0, 0.6); border-color: var(--mx2-stone-200); } .social-newpost-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } /* Small pill badge for "Customized" / status indicators in admin tables. */ .mx2-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; } .mx2-pill--gold { background: rgba(201, 168, 106, 0.20); color: var(--mx2-gold-deep, #876e51); } /* ── Email template editor ──────────────────────────────────────────────── */ .email-template-edit { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; } @media (max-width: 920px) { .email-template-edit { grid-template-columns: 1fr; } } .email-template-edit__sidebar { background: var(--mx2-paper); border: 1px solid var(--mx2-stone-200); border-radius: 6px; padding: 14px 16px; font-size: 13px; color: var(--mx2-black); } .email-template-edit__sidebar code { font-family: var(--font-mono); background: rgba(0, 0, 0, 0.04); padding: 1px 5px; border-radius: 2px; font-size: 12px; } .email-template-vars { list-style: none; margin: 0; padding: 0; } .email-template-vars li { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--mx2-stone-100); } .email-template-vars li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } .email-template-editor-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .email-template-editor-toolbar select { width: auto; min-width: 200px; font-size: 13px; padding: 6px 10px; } .email-template-preview { /* iframe sandbox-equivalent — content is admin-supplied + already server-rendered, but using srcdoc keeps the preview self-contained. */ display: block; } /* ── Member permission editor (Settings → Clients → org show) ──────────── * Inline-expanding row beneath each member showing the per-product * permission editor + workspace_admin checkbox + preset chips. Toggled * by the "Edit perms" button via the bindPanels mechanism in * asset-library.js. */ .member-perm-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .member-perm-summary strong { color: var(--ink, #1A1A1A); font-weight: 600; } .member-perms-row > td { background: var(--mx2-paper, #FBF9F4); border-top: 1px solid var(--rule, #d9d2c0); padding: 18px 22px; } .member-perms-form { display: flex; flex-direction: column; gap: 14px; } .member-perms-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .member-perms-presets .btn-ghost-dark { padding: 4px 10px; font-size: 12px; } .member-perms-grid { display: flex; flex-direction: column; gap: 12px; } .member-perms-admin { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; background: #FFFFFF; border: 1px solid var(--rule, #d9d2c0); border-radius: 6px; cursor: pointer; color: var(--ink, #1A1A1A); } /* Lock the admin checkbox label to its light surface no matter what state the inner checkbox / mouse is in. Without this, body.mx2-side global form-state rules could darken the row when focus moves inside. */ .member-perms-admin:hover, .member-perms-admin:focus-within, .member-perms-admin:active { background: #FFFFFF; color: var(--ink, #1A1A1A); } .member-perms-admin input[type="checkbox"] { margin-top: 3px; } /* Three product-tier selects below the admin row sit on the cream paper card (`.member-perms-row > td`), so they MUST opt out of the default `body.mx2-side select` dark surface and use the same paper styling that `.mx2-section--paper select` uses elsewhere. */ body.mx2-side .member-perms-form input[type='text'], body.mx2-side .member-perms-form input[type='email'], body.mx2-side .member-perms-form input[type='password'], body.mx2-side .member-perms-form input[type='number'], body.mx2-side .member-perms-form input[type='url'], body.mx2-side .member-perms-form textarea, body.mx2-side .member-perms-form select { background: #FFFFFF; color: var(--mx2-black, #1A1A1A); border: 1px solid var(--mx2-stone-300, #d9d2c0); } body.mx2-side .member-perms-form input:hover, body.mx2-side .member-perms-form textarea:hover, body.mx2-side .member-perms-form select:hover, body.mx2-side .member-perms-form input:focus, body.mx2-side .member-perms-form textarea:focus, body.mx2-side .member-perms-form select:focus { background: #FFFFFF; color: var(--mx2-black, #1A1A1A); border-color: var(--mx2-gold-mid, #b08d5b); } .member-perms-grid .form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .member-perms-grid .field { display: flex; flex-direction: column; gap: 4px; } .member-perms-grid .field label { font-size: 12px; font-weight: 600; color: var(--ink, #1A1A1A); text-transform: uppercase; letter-spacing: 0.04em; } .member-perms-actions { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 720px) { .member-perms-grid .form-row-3 { grid-template-columns: 1fr; } } /* ========================================================================= ROW-LINK — whole-element clickable tables (driven by row-link.js) data-row-link on a turns the entire row into a navigation target. CSS just adds the cursor + hover so it feels clickable; the JS handles the actual navigation and the "skip-on-button" hop. ========================================================================= */ [data-row-link] { cursor: pointer; transition: background 100ms ease; } [data-row-link]:hover { background: var(--bg-card-hover, rgba(184, 155, 94, 0.08)); } [data-row-link]:focus-visible { outline: 2px solid var(--gold, #B89B5E); outline-offset: -2px; }