order. Apply per-table via :nth-child().
============================================= */
/* Kill horizontal scroll on the wrappers */
.ga4-report-page .ga4-table-wrapper {
overflow-x: visible;
overflow-y: visible;
max-height: none; /* desktop sets 320px scroll cap */
width: 100%;
}
.ga4-report-page .ga4-table-scroll {
max-height: none;
overflow: visible;
}
/* Base: flatten table + hide thead */
.ga4-report-page .ga4-table {
display: block;
width: 100%;
font-size: 13px;
border-collapse: collapse;
}
.ga4-report-page .ga4-table thead {
display: none; /* labels come from ::before pseudo-elements */
}
.ga4-report-page .ga4-table tbody {
display: block;
width: 100%;
}
.ga4-report-page .ga4-table tbody tr {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px 12px;
background: var(--paper, var(--bg-0));
border: 1px solid var(--rule, rgba(0,0,0,0.08));
border-radius: 10px;
box-sizing: border-box;
}
.ga4-report-page .ga4-table tbody tr:last-child {
margin-bottom: 0;
}
.ga4-report-page .ga4-table tbody tr:hover {
background: var(--paper, var(--bg-0)); /* kill desktop hover row tint */
}
.ga4-report-page .ga4-table tbody td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
width: auto !important; /* CRITICAL: grid items demand row width without this */
box-sizing: border-box;
padding: 6px 0;
border-bottom: 1px solid var(--rule, rgba(0,0,0,0.04));
white-space: normal;
word-break: break-word;
min-width: 0;
}
.ga4-report-page .ga4-table tbody tr td:last-child {
border-bottom: none;
}
.ga4-report-page .ga4-table tbody td::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3, var(--text-tertiary));
margin-right: 8px;
min-width: 90px;
}
/* Per-table column labels via nth-child — applied to the *first cell rule*
so we can label without touching JS-generated markup. */
/* Channel breakdown (#channelTable): Channel | Users | New Users | Sessions | Bounce Rate | Key Events */
#channelTable tbody tr td:nth-child(1)::before { content: "Channel"; }
#channelTable tbody tr td:nth-child(2)::before { content: "Users"; }
#channelTable tbody tr td:nth-child(3)::before { content: "New Users"; }
#channelTable tbody tr td:nth-child(4)::before { content: "Sessions"; }
#channelTable tbody tr td:nth-child(5)::before { content: "Bounce Rate"; }
#channelTable tbody tr td:nth-child(6)::before { content: "Key Events"; }
#channelTable tbody tr td:nth-child(1) {
/* First col is the channel name; give it prominence */
font-weight: 600;
font-size: 14px;
padding-bottom: 8px;
}
#channelTable tbody tr td:nth-child(1)::before {
display: none; /* name is self-evident as card heading */
}
/* Landing pages (#landingPagesTable):
Page | Users | New Users | Sessions | Views | Avg Duration | Bounce Rate | Key Events */
#landingPagesTable tbody tr td:nth-child(1)::before { content: "Page"; display: none; }
#landingPagesTable tbody tr td:nth-child(2)::before { content: "Users"; }
#landingPagesTable tbody tr td:nth-child(3)::before { content: "New Users"; }
#landingPagesTable tbody tr td:nth-child(4)::before { content: "Sessions"; }
#landingPagesTable tbody tr td:nth-child(5)::before { content: "Views"; }
#landingPagesTable tbody tr td:nth-child(6)::before { content: "Avg Duration"; }
#landingPagesTable tbody tr td:nth-child(7)::before { content: "Bounce Rate"; }
#landingPagesTable tbody tr td:nth-child(8)::before { content: "Key Events"; }
/* First cell — page URL: full-width, wrappable, no ellipsis at phone widths */
#landingPagesTable tbody tr td.ga4-page-cell,
#landingPagesTable tbody tr td:nth-child(1) {
display: block;
max-width: 100%;
white-space: normal;
word-break: break-all; /* URLs can be very long */
overflow: visible;
text-overflow: clip;
font-weight: 600;
font-size: 13px;
padding-bottom: 8px;
text-align: left;
}
/* Geo (.ga4-card #geoCard table): Region | Users | Share */
#geoCard .ga4-table tbody tr td:nth-child(1)::before { content: "Region"; display: none; }
#geoCard .ga4-table tbody tr td:nth-child(2)::before { content: "Users"; }
#geoCard .ga4-table tbody tr td:nth-child(3)::before { content: "Share"; }
#geoCard .ga4-table tbody tr td:nth-child(1) {
font-weight: 600;
font-size: 14px;
padding-bottom: 8px;
}
/* Bar-cell in share column — let bar grow to fill remaining width */
#geoCard .ga4-bar-cell {
flex: 1 1 auto;
min-width: 0;
justify-content: flex-end;
}
#geoCard .ga4-bar {
flex: 1 1 auto;
max-width: 140px;
min-width: 40px;
}
/* Device breakdown (#deviceCard table): Device | Users | Sessions */
#deviceCard .ga4-table tbody tr td:nth-child(1)::before { content: "Device"; display: none; }
#deviceCard .ga4-table tbody tr td:nth-child(2)::before { content: "Users"; }
#deviceCard .ga4-table tbody tr td:nth-child(3)::before { content: "Sessions"; }
#deviceCard .ga4-table tbody tr td:nth-child(1) {
font-weight: 600;
font-size: 14px;
padding-bottom: 8px;
}
/* Device layout — desktop @media collapses to 1 col; ensure chart canvas
caps to a sensible size on phones so it doesn't dominate. */
.ga4-device-content {
gap: 12px;
}
.ga4-device-chart canvas {
max-width: 140px !important;
max-height: 140px !important;
}
/* Demographics — desktop @media already sets 50px 1fr 70px; further tighten
label/value cols for 360px viewport. */
.ga4-demo-bar {
grid-template-columns: 44px 1fr 88px;
gap: 8px;
}
.ga4-demo-label {
font-size: 12px;
}
.ga4-demo-value {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Global error banner — wrap message text */
.ga4-global-error {
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
font-size: 13px;
}
.ga4-global-error #globalErrorMsg {
flex: 1 1 100%;
min-width: 0;
word-break: break-word;
}
/* =============================================================================
MOBILE: company/semrush_sandbox (PR: mobile/no-horizontal-scroll)
-----------------------------------------------------------------------------
Per HANDOFF.md §5 + §11 — admin keyword/rank API tester. Page has
9 result tables (3 static debug + 6 JS-rendered .results-table variants)
plus a 12-field form. On phones:
· Stack all form columns (.col-md-*) full-width
· Tab strip = horizontal scroll per §4.3
· Every .results-table row becomes a card with the keyword/date/domain
as title and the remaining metrics in a label/value grid. Labels
are synthesized via ::before with :nth-child since the JS renderers
don't emit data-label attributes.
· Debug request-detail tables (label/value pairs) flow as two-column
grids that wrap naturally.
· Inline th width: 150px and JS-emitted style="max-width:300/400px"
are neutralized with width:auto + box-sizing.
· Raw response blocks keep horizontal scroll (acceptable per
§11 — explicit scroll container for code/JSON dumps).
============================================================================= */
/* Page container — kill desktop max-width so it spans full viewport */
.sandbox-page {
max-width: 100% !important; /* defeats inline-block .sandbox-page { max-width:1400px } in template */
padding-left: 14px;
padding-right: 14px;
}
/* Header: stack title + admin badge, tighten */
.sandbox-page .am-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 12px 0;
}
.sandbox-page .am-name {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.15;
margin: 0;
}
.sandbox-page .am-contact {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
}
.sandbox-page .am-actions {
width: 100%;
}
/* ── Controls form ─────────────────────────────────────────────────── */
.sandbox-page .sandbox-controls .card-body {
padding: 12px;
}
/* Every form column reflows to full width regardless of col-md-* */
.sandbox-page .sandbox-form .row.g-3 > [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.sandbox-page .sandbox-form .form-label {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-bottom: 4px;
}
.sandbox-page .sandbox-form .form-control,
.sandbox-page .sandbox-form .form-select {
min-height: 44px;
font-size: 14px;
}
.sandbox-page .sandbox-form .form-check {
min-height: 44px;
display: flex;
align-items: center;
gap: 8px;
}
.sandbox-page .sandbox-form .form-check-input {
width: 18px;
height: 18px;
margin: 0;
}
.sandbox-page .sandbox-form .form-check-label {
font-size: 14px;
}
/* Run button — full width tap target */
.sandbox-page .sandbox-form #runBtn {
width: 100%;
min-height: 44px;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sandbox-page .sandbox-form .mt-3.d-flex {
flex-wrap: wrap;
gap: 8px;
}
/* ── Results summary bar — wrap chips ─────────────────────────────── */
.sandbox-page .results-summary .card-body {
padding: 10px 12px;
}
.sandbox-page .results-summary .d-flex {
gap: 8px !important; /* override Bootstrap g-3 inline */
font-size: 12px;
}
/* ── Tabs strip — horizontal scroll per §4.3 ──────────────────────── */
.sandbox-page #resultTabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-bottom: 0;
}
.sandbox-page #resultTabs::-webkit-scrollbar {
display: none;
}
.sandbox-page #resultTabs .nav-item {
flex: 0 0 auto;
}
.sandbox-page #resultTabs .nav-link {
white-space: nowrap;
min-height: 44px;
padding: 10px 14px;
font-size: 12px;
}
.sandbox-page #resultTabContent {
border-radius: 6px;
}
.sandbox-page #resultTabContent .tab-pane.p-3 {
padding: 12px !important; /* tighter than Bootstrap p-3 (1rem) on small screens */
}
/* ── Tables: results + debug — universal card-stack ───────────────── */
/* Outer wrapper: no horizontal scroll (rows become cards) */
.sandbox-page .table-responsive {
overflow-x: visible;
overflow-y: visible;
width: 100%;
}
/* Generic table reset for both .results-table and .table.table-sm
inside the sandbox page (.debug-section etc.) */
.sandbox-page table.table {
display: block;
width: 100%;
font-size: 12px;
margin-bottom: 12px;
}
.sandbox-page table.table thead,
.sandbox-page table.table colgroup {
display: none;
}
.sandbox-page table.table tbody {
display: block;
width: 100%;
}
.sandbox-page table.table tbody tr {
display: grid;
grid-template-columns: minmax(110px, 38%) 1fr;
column-gap: 10px;
row-gap: 4px;
padding: 10px 12px;
margin: 0 0 8px 0;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
}
/* CRITICAL: when flipping to grid, neutralize fixed/inline td widths
so cells flow within the grid track. (Lesson from PR #15/#17/#19.) */
.sandbox-page table.table tbody tr > td,
.sandbox-page table.table tbody tr > th {
display: block;
width: auto !important; /* override th[style="width:150px;"] + td[style="max-width:300px"] */
max-width: 100%;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
text-align: left !important; /* override .text-end / .text-center on small cards */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
box-sizing: border-box;
}
/* Debug request-details tables: = label, = value. Put them
side by side. */
.sandbox-page .debug-section table.table tbody tr > th {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
align-self: start;
padding-top: 1px;
}
.sandbox-page .debug-section table.table tbody tr > td {
font-size: 12px;
color: var(--ink-body);
}
.sandbox-page .debug-section table.table tbody tr > td code,
.sandbox-page .debug-section table.table tbody tr > td pre {
word-break: break-all;
white-space: pre-wrap;
font-size: 11px;
}
/* ── results-table: rows are -only (no ). Convert each row to
a card: first cell = serif title (date / keyword / domain), remaining
cells = simple flex rows where ::before injects a column-index label.
Renderers (kept as comments for future reference):
· Overview Trend (7 cols): Date | Rank | Org Kw | Org Tr | Org Cost | Paid Kw | Paid Tr
· Top Keywords (7 cols): Keyword | Pos | Change | Volume | CPC | Traffic | URL
· Competitors (6 cols): Domain | Common Kw | Org Kw | Org Tr | Org Cost | Paid Kw
· Visibility (4 cols): Date | Visibility% | Avg Pos | Est Traffic
· Rankings (8 cols): Keyword | Pos A | Pos B | Diff | Volume | Visibility | Est Tr | URL
Since the column count varies, we don't try to label every metric by
name — instead we drop the desktop header row visually and present
cells in their original column order. Power users can flip to the Raw
Response tab if they need column names. (Acceptable trade-off: this
page is admin-only API testing per the page badge.) */
.sandbox-page table.results-table tbody tr {
display: flex;
flex-direction: column;
gap: 2px;
}
.sandbox-page table.results-table tbody tr > td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 12px;
color: var(--ink-body);
padding: 3px 0;
width: auto !important; /* override any inline width */
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.sandbox-page table.results-table tbody tr > td::before {
content: "Col " counter(sb-col);
counter-increment: sb-col;
font-family: var(--sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
flex: 0 0 auto;
}
.sandbox-page table.results-table tbody tr {
counter-reset: sb-col;
}
/* First cell becomes card title — full-width serif, no label prefix */
.sandbox-page table.results-table tbody tr > td:first-child {
display: block;
font-family: var(--serif);
font-size: 16px;
font-weight: 500;
color: var(--ink);
padding: 0 0 6px 0;
margin-bottom: 4px;
border-bottom: 1px solid var(--rule);
text-align: left;
}
.sandbox-page table.results-table tbody tr > td:first-child::before {
display: none;
}
.sandbox-page table.results-table tbody tr > td:first-child strong {
font-family: var(--serif);
font-weight: 500;
}
/* URL cell (last cell in Top Keywords + Rankings) — truncate */
.sandbox-page table.results-table tbody tr > td .kw-url {
max-width: 60vw;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
/* Position-change span (.pos-up/.pos-down/.pos-same) keeps inline display */
.sandbox-page table.results-table .pos-up,
.sandbox-page table.results-table .pos-down,
.sandbox-page table.results-table .pos-same {
white-space: nowrap;
}
/* ── Raw response / debug pre blocks: allow horizontal scroll (acceptable
per §11 — code/JSON dump is an explicit scroll container) ──────── */
.sandbox-page .raw-output,
.sandbox-page pre.raw-output {
font-size: 11px;
padding: 10px;
max-height: 320px;
overflow: auto;
-webkit-overflow-scrolling: touch;
white-space: pre; /* preserve formatting; users can scroll horizontally */
word-break: normal;
}
/* Tab content area inside debug — pre with inline max-height keeps scroll */
.sandbox-page #debugPane pre {
font-size: 11px;
-webkit-overflow-scrolling: touch;
}
/* Banners (alert .alert-warning / .alert-danger generated by JS):
wrap their inner flex rows so icons + text + buttons stack cleanly */
.sandbox-page #positionTrackingControls .alert .d-flex {
flex-wrap: wrap;
gap: 6px;
}
.sandbox-page #positionTrackingControls .alert .d-flex.gap-2 {
flex-direction: column;
align-items: stretch;
}
.sandbox-page #positionTrackingControls .alert .btn {
width: 100%;
min-height: 44px;
justify-content: center;
}
/* Banner-embedded details/summary attempts table — apply universal
table reset (already covered by .sandbox-page table.table above) */
.sandbox-page #positionTrackingControls .alert details summary {
cursor: pointer;
min-height: 28px;
padding: 4px 0;
}
/* PT controls hr divider + label */
.sandbox-page #positionTrackingControls hr {
margin: 8px 0;
}
/* =============================================================================
MOBILE: company/payments (PR: mobile/payments-tracker)
-----------------------------------------------------------------------------
Per HANDOFF.md §5.3 (tables → cards), §4.6 (stat block grid), §4.12 (cards
are the default mobile table pattern), §11 (iframes are an explicit scroll
container — page itself must not scroll horizontally).
Sources of horizontal overflow on this page:
1. .payments-header flex row with 5 controls (3 selects + 2 buttons).
2. .payments-hero-row 4-up card strip (declared 1fr at <720px in
payments-tracker.css but the cards themselves can still overshoot).
3. .payments-tabs nav (already overflow-x: auto — keep that).
4. .payments-toolbar filters row (radio pills + meta on the right).
5. #overdueTable — the main grouped table, 10 columns + colgroup widths.
6. .payments-upcoming-groups + .payments-review-list — JS-rendered
stacks, mostly fine, but contain dense grids.
7. .email-settings-body two-column grid + iframe — iframe has intrinsic
email-template width that blows out the viewport.
============================================================================= */
/* --- 1. Header: stack title + controls ---------------------------------- */
.payments-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 0 12px;
}
.payments-header-titles {
min-width: 0; /* override 240px from desktop */
}
.payments-h1 {
font-family: var(--serif);
font-size: 28px;
line-height: 1.15;
}
.payments-sub {
font-size: 13px;
color: var(--ink-3);
}
.payments-header-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
}
.payments-header-actions .payments-select,
.payments-header-actions .payments-btn {
width: 100%;
min-height: 44px; /* HANDOFF §3.5 tap target */
box-sizing: border-box;
font-size: 13px;
}
/* "Customer IDs" + "Sync now" buttons take full row each */
.payments-header-actions > a.payments-btn,
.payments-header-actions > button.payments-btn {
grid-column: 1 / -1;
}
/* --- 2. Hero stats: 2x2 grid (HANDOFF §4.6) ----------------------------- */
.payments-hero-row {
display: grid !important; /* override desktop auto-fit grid */
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 12px;
}
.payments-hero-card {
padding: 12px;
min-width: 0;
border-radius: 10px;
}
.payments-hero-label {
font-size: 10.5px;
letter-spacing: 0.14em;
}
.payments-hero-value {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
word-break: break-word; /* "$10,000" never overflows narrow tile */
}
.payments-hero-meta {
font-size: 11.5px;
color: var(--ink-3);
}
.payments-hero-trial {
font-size: 11px;
}
/* MRR composition inside the hero card — keep on one tile width */
.payments-mrr-composition {
font-size: 12px;
}
.payments-mrr-composition summary {
font-size: 11px;
}
.payments-mrr-comp-list li {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 8px;
row-gap: 2px;
font-size: 12px;
}
.payments-mrr-comp-meta {
grid-column: 1 / -1;
font-size: 10.5px;
}
/* --- 3. Tabs already overflow-x:auto in payments-tracker.css — confirm
the page-wrapper doesn't trap that scroll. */
.payments-tabs {
margin: 0 12px;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.payments-tab {
flex: 0 0 auto;
white-space: nowrap;
min-height: 44px;
font-size: 12px;
}
/* --- 4. Toolbar (filter pills + meta) ----------------------------------- */
.payments-toolbar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 12px;
}
.payments-toolbar-filters {
flex-wrap: wrap;
gap: 6px;
}
.payments-toolbar-meta {
font-size: 11.5px;
text-align: left;
}
.payments-pill-filter {
font-size: 12px;
padding: 8px 12px;
min-height: 36px;
}
.payments-date-input {
font-size: 12px;
flex: 1 1 calc(50% - 6px); /* From / To sit side-by-side */
min-width: 0;
}
.payments-date-input input {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.payments-select--sm {
flex: 1 1 calc(50% - 6px);
min-width: 0;
min-height: 40px;
box-sizing: border-box;
}
/* --- 5. Overdue table → card-stack ------------------------------------- */
/* The page-level payments-tracker.css sets `.payments-table-wrap{overflow-x:auto}`
at <720px. We force the table to layout as a card list so it never
needs to scroll. Per the CRITICAL LESSON: when flipping to grid,
always pair with width: auto + box-sizing on the s. */
.payments-table-wrap {
overflow-x: hidden !important; /* override payments-tracker.css <720px */
overflow-y: visible !important;
width: 100%;
max-width: 100%;
padding: 0 12px;
box-sizing: border-box;
}
.payments-table[data-mobile="cards"] {
display: block;
width: 100%;
max-width: 100%;
table-layout: auto;
border: 0;
}
.payments-table[data-mobile="cards"] colgroup {
display: none; /* desktop col widths irrelevant in card mode */
}
.payments-table[data-mobile="cards"] thead {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.payments-table[data-mobile="cards"] tbody {
display: block;
width: 100%;
}
/* Bucket header row (Overdue / This week / Later / No date) — full-width
banner spanning the card stack. */
.payments-table[data-mobile="cards"] tbody tr.payments-bucket-row {
display: block;
width: 100%;
margin: 12px 0 8px;
}
.payments-table[data-mobile="cards"] tbody tr.payments-bucket-row > td {
display: block;
width: auto !important; /* CRITICAL: pair with box-sizing */
box-sizing: border-box;
padding: 8px 12px;
border: 0;
}
.payments-bucket-row-inner {
flex-wrap: wrap;
gap: 4px 10px;
}
.payments-bucket-title {
font-size: 11px;
letter-spacing: 0.14em;
}
.payments-bucket-count,
.payments-bucket-sub,
.payments-bucket-total {
font-size: 11px;
}
/* Data row → card. Grid of label/value cells. */
.payments-table[data-mobile="cards"] tbody tr[data-client-id] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 10px;
row-gap: 8px;
align-items: start;
width: 100%;
margin-bottom: 8px;
padding: 12px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper-2);
box-sizing: border-box;
}
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td {
display: block;
width: auto !important; /* CRITICAL: pair with box-sizing */
box-sizing: border-box;
padding: 0;
border: 0;
min-width: 0;
max-width: 100%;
text-align: left;
font-size: 13px;
color: var(--ink-body);
overflow: hidden;
text-overflow: ellipsis;
}
/* Small-caps label rendered from data-label="..." on every td (JS-built). */
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-label]::before {
content: attr(data-label);
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 4px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Client cell = full-width card header (no label, name acts as title) */
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-label="Client"] {
grid-column: 1 / -1;
margin-bottom: 2px;
}
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-label="Client"]::before {
display: none;
}
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-label="Client"] a {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.payments-table[data-mobile="cards"] .payments-am {
font-size: 11.5px;
color: var(--ink-3);
}
/* Actions cell = full-width footer; reflow to wrap and become tap-friendly.
Zero font-size on the cell hides the bare " · " text nodes the JS inserts
between actions; child buttons/links restore their own font-size. */
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td.payments-actions,
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-mobile-action] {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
padding-top: 8px;
border-top: 1px dotted var(--rule);
font-size: 0;
}
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td.payments-actions::before,
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-mobile-action]::before {
display: none;
}
.payments-action,
button.payments-send-action,
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td.payments-actions a,
.payments-table[data-mobile="cards"] tbody tr[data-client-id] > td[data-mobile-action] a {
font-size: 12px;
min-height: 36px;
padding: 8px 12px;
white-space: nowrap;
}
/* Empty-state row */
.payments-table[data-mobile="cards"] tbody tr > td.payments-empty {
display: block;
width: auto !important;
box-sizing: border-box;
grid-column: 1 / -1;
padding: 24px 12px;
text-align: center;
font-size: 13px;
}
/* Inline next-billing edit button shouldn't overflow */
.payments-date-edit-btn {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- 6. Upcoming / Review JS-rendered stacks --------------------------- */
.payments-upcoming-groups,
.payments-review-list {
padding: 0 12px;
}
.payments-upcoming-group {
padding: 12px;
}
.payments-upcoming-group-header {
flex-wrap: wrap;
gap: 6px 10px;
}
.payments-upcoming-group-header h3 {
font-size: 14px;
}
.payments-flag-card {
padding: 12px;
}
.payments-flag-card-header {
flex-wrap: wrap;
gap: 6px;
}
.payments-flag-card-footer {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.payments-flag-actions {
flex-wrap: wrap;
}
.payments-flag-action {
min-height: 36px;
flex: 1 1 auto;
}
/* --- 7. Kill-switch banner --------------------------------------------- */
.payments-killswitch-banner {
margin: 12px;
padding: 12px;
}
.payments-killswitch-banner-eyebrow {
font-size: 10.5px;
letter-spacing: 0.14em;
}
.payments-killswitch-banner-body {
font-size: 13px;
}
/* --- 8. Email Settings tab: stack columns, constrain iframe ----------- */
/* The page CSS already stacks .email-settings-body at <1100px. We tighten
padding and force the iframe to behave per HANDOFF §11 (allow scroll
INSIDE the iframe wrapper, but the page itself never scrolls X). */
.email-settings {
padding: 12px;
}
.email-settings-tabbar {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.email-settings-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.email-settings-tab {
flex: 0 0 auto;
white-space: nowrap;
min-height: 44px;
}
.email-settings-actions {
flex-wrap: wrap;
gap: 8px;
}
.email-settings-actions .payments-btn {
flex: 1 1 auto;
min-height: 44px;
justify-content: center;
}
.email-settings-body {
gap: 16px;
}
.email-settings-controls {
min-width: 0;
}
.email-settings-subject-row {
flex-wrap: wrap;
gap: 6px;
}
.email-settings-input {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.email-settings-preview {
position: static; /* sticky pane fights the stacked layout */
min-width: 0;
}
.email-settings-preview-header {
flex-wrap: wrap;
gap: 6px;
}
.email-settings-preview-help {
font-size: 10px;
}
/* Iframe wrapper: clip to viewport, allow inner scroll if needed (§11).
The Stripe/email-template iframe has intrinsic desktop width — the
wrapper becomes the explicit scroll container so the PAGE never scrolls. */
.email-settings-preview-frame {
max-width: 100%;
width: 100%;
overflow-x: auto; /* §11: explicit scroll container */
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.email-settings-preview-frame iframe {
width: 100% !important; /* defensive vs intrinsic iframe width */
max-width: 100%;
height: 560px; /* shorter on mobile — full email rarely needed */
display: block;
}
/* --- 9. Global guard: payments page wrapper never overflows ----------- */
.payments-tracker {
max-width: 100%;
overflow-x: hidden; /* page-level safety; tabs nav keeps its own scroll */
}
/* =============================================================================
MOBILE: company/action_items (PR: mobile/action-items)
-----------------------------------------------------------------------------
Per HANDOFF.md §4.12 (Cards default) + §5 (per-page card-stack pattern) and
§11 (no overflow-x: auto on page content). The team Action Items board has
three wide tables (Needs Review, In Progress, Completed) plus a 4-up KPI
hero strip and a 5-control filter bar that all blow out at 360px on the
desktop layout.
Conversions:
1. .am-hero-grid 4-up → 2-up grid (matches §5.2 KPI pattern)
2. Filter bar inputs wrap, become 40px tap targets, search goes full-width
3. All three opt-tables: flatten thead, flip into editorial cards
- .ai-row (Needs Review): grid with priority+title on row 1, the rest
(category, client, date) stacked below; chevron column hidden
- .ai-expand: full-width detail panel; selects become full-width, btns
wrap into 2-per-row tap targets
- In Progress / Completed rows: priority+title on row 1, remaining
cells full-width with auto-tagged data-label as small-caps eyebrow
4. Prompt Agent modal — input sizes bumped to 40px tap targets
CRITICAL (lesson from PRs #15/#17/#19): every flipped to display:grid
is paired with `width: auto !important; box-sizing: border-box` on the
s — otherwise inline `style="width: 70px / 100px / 140px"` on the
s leaks via table-layout and re-introduces horizontal scroll.
============================================================================= */
/* ── Page padding ───────────────────────────────────────────────────── */
.am-dashboard.company-dashboard {
padding: 14px 12px !important; /* overrides style.css .am-dashboard padding */
}
/* ── Page header: title + tagline stack ─────────────────────────────── */
.am-dashboard.company-dashboard > .am-header {
margin-bottom: 12px;
}
.am-dashboard.company-dashboard > .am-header .am-name {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
line-height: 1.1;
color: var(--ink);
}
.am-dashboard.company-dashboard > .am-header .am-contact {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
}
.am-dashboard.company-dashboard > .am-header .am-contact span {
white-space: normal; /* allow the tagline to wrap */
}
/* Inline alert (Supabase warning) — keep tight */
.am-dashboard.company-dashboard > .alert {
font-size: 12px;
padding: 10px 12px;
margin: 8px 0 12px;
}
/* ── Hero KPI strip: 4-up → 2-up grid per HANDOFF.md §5.2 ───────────── */
.am-dashboard.company-dashboard .am-hero-section {
margin-bottom: 16px;
}
.am-dashboard.company-dashboard .am-hero-grid {
grid-template-columns: 1fr 1fr !important; /* override style.css 576px → 1col */
gap: 8px !important;
}
.am-dashboard.company-dashboard .am-hero-card {
padding: 10px 12px !important; /* overrides --space-6 (24px) */
gap: 8px !important;
border-radius: 10px;
align-items: center;
}
.am-dashboard.company-dashboard .am-hero-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.am-dashboard.company-dashboard .am-hero-content {
min-width: 0;
}
.am-dashboard.company-dashboard .am-hero-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.am-dashboard.company-dashboard .am-hero-value {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--ink);
}
.am-dashboard.company-dashboard .am-hero-subtext {
font-family: var(--sans);
font-size: 10.5px;
color: var(--ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── cc-panel + cc-panel-header tighten ─────────────────────────────── */
.am-dashboard.company-dashboard .cc-section {
margin-left: 0;
margin-right: 0;
}
.am-dashboard.company-dashboard .cc-panel {
border-radius: 10px;
}
.am-dashboard.company-dashboard .cc-panel-header {
padding: 10px 12px !important;
flex-wrap: wrap;
gap: 6px;
}
.am-dashboard.company-dashboard .cc-panel-header h6 {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
}
.am-dashboard.company-dashboard .cc-panel-header .cc-badge {
font-size: 10px;
}
/* ── Filter bar (inline-styled div above #reviewTable) ──────────────── */
/* Target the immediate div under .cc-panel that has the filter inline
styles. We can't rely on a class, so use the inline-style signature. */
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] {
padding: 10px 12px !important;
gap: 8px !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] > div[style*="position: relative"] {
flex: 1 1 100% !important; /* search wrapper goes full-width */
max-width: none !important;
min-width: 0 !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] input[type="text"] {
width: 100% !important;
min-height: 40px !important; /* tap target */
padding: 8px 10px 8px 30px !important; /* preserve search-icon offset */
font-size: 13px !important;
max-width: none !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] select {
width: 100% !important;
min-height: 40px !important;
padding: 8px 10px !important;
font-size: 13px !important;
max-width: none !important;
flex: 1 1 calc(50% - 4px); /* two selects per row */
}
/* ── Table → card stack: shared rules for all three opt-tables ──────── */
.am-dashboard.company-dashboard .table-responsive {
max-height: none !important; /* override inline max-height: 700px / 400px */
overflow: visible !important; /* no internal scroll on phone */
}
.am-dashboard.company-dashboard .opt-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
.am-dashboard.company-dashboard .opt-table thead { display: none !important; }
.am-dashboard.company-dashboard .opt-table tbody {
display: block !important;
width: 100% !important;
}
/* ── Needs Review rows (.ai-row) — Priority + Title on row 1 ────────── */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row {
display: grid !important;
grid-template-columns: auto 1fr;
column-gap: 10px;
row-gap: 6px;
padding: 12px;
margin: 0 0 8px 0;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
cursor: pointer;
width: auto;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td {
display: block !important;
width: auto !important; /* override inline th widths leaking via table-layout */
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box;
min-width: 0;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-body);
}
/* Row 1: priority badge (col 1) + title (col 2) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1;
align-self: start;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1;
min-width: 0;
}
/* Title text — bump a touch for legibility, allow wrap */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) > div[style*="font-weight"] {
font-size: 13px !important;
line-height: 1.3;
white-space: normal;
}
/* Hide the muted single-line description preview at 360px — full text
is shown after expansion. */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) > div.text-muted {
display: none;
}
/* Row 2-4: category / client / date — each full-width */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(3),
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(4),
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5) {
grid-column: 1 / -1;
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(3) { grid-row: 2; }
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(4) { grid-row: 3; }
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5) {
grid-row: 4;
font-size: 11px !important;
color: var(--ink-faint) !important;
}
/* "Submitted" eyebrow on the date cell (it has no innate label) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5)::before {
content: "Submitted";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Hide the chevron column — whole card is tappable; chevron clutter at 360 */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(6) {
display: none !important;
}
/* ── Needs Review expand row (.ai-expand) — full-width detail panel ─── */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand {
display: block; /* JS toggles inline style="display: none / ''" */
width: 100%;
margin: -6px 0 8px 0; /* nestle under the row that opened it */
background: transparent;
border: 0;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* The inner expand wrapper (the div inside the colspan=6 td) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td > div {
padding: 12px !important;
border-radius: 10px !important;
border: 1px solid var(--rule) !important;
background: var(--paper-3) !important;
}
/* Action button row inside the expand panel — wrap with grid-2 layout */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td > div > div[style*="display: flex"] {
flex-wrap: wrap !important;
gap: 6px !important;
align-items: stretch !important;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand select {
width: 100% !important; /* override inline width: 140px / 180px / 100px */
min-height: 40px !important;
font-size: 13px !important;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand .btn {
font-size: 12px !important;
padding: 8px 12px !important;
min-height: 40px;
flex: 1 1 calc(50% - 3px);
}
/* The dismiss "ms-auto" button — allow it to wrap with the rest */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand .btn.ms-auto {
margin-left: 0 !important;
}
/* ── In Progress + Completed rows (no .ai-row / .ai-expand class) ───── */
/* mobile-tables.js auto-tags every with data-label="s become card-stacks (thead hidden, each a card,
each a labelled row inside the card) — same pattern as
.am-clients-section above.
6. Override every inline width / min-width / max-width on tds and
ths with width: auto !important; max-width: 100% !important.
7. Search inputs inside widget-header — full-width drop below title.
============================================================================= */
/* ── 1. Page wrapper — kill the 20/30 padding that was overflowing 360px */
.semrush-report {
padding: 14px !important; /* override page-style block 20px 30px */
min-height: auto !important;
background: var(--paper);
}
/* ── 2. Header — stack vertically, shrink title, allow buttons to wrap */
.semrush-report .report-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px;
margin-bottom: 16px;
border-radius: 10px;
border: 1px solid var(--rule);
background: var(--paper-2);
}
.semrush-report .report-header .breadcrumb {
font-size: 12px;
margin-bottom: 4px;
}
.semrush-report .report-title {
font-family: var(--serif, "Newsreader", ui-serif, Georgia, serif);
font-size: 22px;
font-weight: 500;
line-height: 1.15;
color: var(--ink);
}
.semrush-report .report-subtitle {
font-size: 12px;
color: var(--ink-3);
word-break: break-word;
}
.semrush-report .header-right {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-self: stretch;
}
.semrush-report .header-right .btn {
flex: 1 1 auto;
min-height: 44px; /* HIG tap target */
font-size: 12px;
margin: 0 !important; /* override .me-2 utility that adds right margin */
}
/* ── 3. Filter bar — single-col, full-width children */
.semrush-report .filter-bar {
padding: 12px;
margin-bottom: 16px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper-2);
box-shadow: none; /* editorial = flat, per §4.5 */
}
.semrush-report .filter-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.semrush-report .filter-group {
width: 100%;
}
.semrush-report .filter-group.ms-auto {
margin-left: 0 !important; /* override Bootstrap ms-auto utility */
}
.semrush-report .filter-group label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-3);
}
/* ── 4. Hero section — collapse 4-col grid to a single column,
suppress decorative background chart to stop GPU thrash on phones */
.semrush-report .hero-section {
padding: 16px;
border-radius: 10px;
background: var(--paper-2);
border: 1px solid var(--rule);
}
.semrush-report .hero-bg-chart,
.semrush-report .hero-bg-gradient {
display: none; /* editorial / no AI-slop animated bg on phones */
}
.semrush-report .hero-section-row {
margin-bottom: 16px;
}
.semrush-report .hero-section-content {
grid-template-columns: 1fr !important; /* override inline 1fr 1fr 1.5fr 1fr */
grid-template-rows: auto !important;
gap: 14px !important;
}
.semrush-report .hero-metric {
gap: 12px;
justify-content: flex-start;
text-align: left;
}
.semrush-report .hero-metric-icon {
width: 40px;
height: 40px;
border-radius: 8px;
}
.semrush-report .hero-metric-icon i {
font-size: 1.1rem;
}
.semrush-report .hero-metric-value {
font-family: var(--serif, "Newsreader", ui-serif, Georgia, serif);
font-size: 24px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.1;
}
.semrush-report .hero-metric-secondary .hero-metric-value {
font-size: 20px;
}
.semrush-report .hero-metric-label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-3);
}
.semrush-report .hero-metric-sublabel {
font-size: 11px;
color: var(--ink-faint, var(--ink-3));
}
.semrush-report .hero-metric-change {
margin-left: 0;
padding: 4px 8px;
align-self: flex-start;
}
.semrush-report .hero-metric-change .change-value {
font-size: 13px;
}
.semrush-report .hero-chart {
height: 60px;
margin: 4px 0 0 0;
grid-column: 1 / -1;
order: -1;
}
.semrush-report .hero-chart-label {
font-size: 10.5px;
letter-spacing: 0.14em;
}
/* ── 5. Section divider */
.semrush-report .section-divider {
gap: 12px;
margin: 16px 0 12px 0;
}
.semrush-report .section-title {
font-family: var(--serif, "Newsreader", ui-serif, Georgia, serif);
font-size: 18px;
font-weight: 500;
}
/* ── 6. Tracked section — KPI strip + table stacked */
.semrush-report .tracked-section-row {
display: block !important; /* override grid layout from page CSS */
margin-bottom: 16px;
}
.semrush-report .tracked-kpi-stack {
display: grid !important; /* override flex column / row from page CSS */
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.semrush-report .tracked-kpi-stack .kpi-card {
flex: none;
padding: 10px 8px;
border-radius: 10px;
border: 1px solid var(--rule);
background: var(--paper-2);
box-shadow: none; /* flat per §4.5 */
}
.semrush-report .tracked-kpi-stack .kpi-card::before {
height: 2px; /* slimmer accent bar in compact card */
}
.semrush-report .tracked-kpi-stack .kpi-value {
font-family: var(--serif, "Newsreader", ui-serif, Georgia, serif);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
}
.semrush-report .tracked-kpi-stack .kpi-label {
font-family: var(--sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-3);
}
.semrush-report .tracked-kpi-stack .kpi-delta {
font-size: 11px;
margin-top: 4px;
}
.semrush-report .tracked-keywords-table .widget {
max-height: none;
}
/* ── 7. Widget — flat, fluid */
.semrush-report .widget {
border-radius: 10px;
border: 1px solid var(--rule);
box-shadow: none; /* flat per §4.5 */
background: var(--paper-2);
}
.semrush-report .widget-header {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 12px;
background: var(--paper-2);
border-bottom: 1px solid var(--rule);
}
.semrush-report .widget-header-left,
.semrush-report .widget-header-right {
width: 100%;
flex-wrap: wrap;
gap: 6px;
}
.semrush-report .widget-title {
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink);
}
.semrush-report .widget-subtitle {
font-size: 11px;
}
/* Search inputs in widget headers — override inline width: 140px / 180px */
.semrush-report .widget-header input[type="text"],
.semrush-report .widget-header .form-control {
width: 100% !important; /* override inline width:140px / 180px */
min-height: 40px;
font-size: 14px;
border-radius: 6px;
}
.semrush-report .widget-body {
padding: 10px;
min-height: 0;
/* override inline style="max-height: 400px; overflow-y: auto;" — at phone
widths we don't want a nested vertical scroller; let the page scroll. */
max-height: none !important;
overflow: visible !important;
}
/* ── 8. TABLES → CARD-STACK (both organic and tracked keyword tables) */
/* Kill horizontal scroll wrapper at phone widths */
.semrush-report .table-responsive,
.semrush-report .cc-table-scroll {
overflow: visible !important;
max-height: none !important;
}
/* Flatten the table itself */
.semrush-report .table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border-collapse: collapse;
}
/* Hide thead — sortable column headers don't translate to card layout.
Column tap-to-sort is lost on phones (acceptable — AMs rarely sort on
mobile, and search input is still available). */
.semrush-report .table thead {
display: none !important;
}
.semrush-report .table tbody {
display: block !important;
width: 100% !important;
}
/* Each row becomes a card */
.semrush-report .table tbody tr {
display: grid !important;
grid-template-columns: 1fr auto;
column-gap: 10px;
row-gap: 4px;
padding: 10px 12px;
margin: 0 0 8px 0;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 10px;
}
/* Every td — neutralize inline widths/padding/text-align that fight grid.
The 23 inline width/min-width/max-width declarations in the template
(8 on the organic thead, 4 on the tracked thead, 2 on td max-widths,
2 on search inputs, plus extra ad-hoc widths) all get overridden here. */
.semrush-report .table tbody tr > td {
display: block;
width: auto !important; /* override inline th widths cascading via colgroup */
min-width: 0 !important; /* override inline min-width:120px on URL th */
max-width: 100% !important; /* override td inline max-width:150px / 180px */
padding: 0 !important; /* override .ps-2 / .ps-3 padding-start on td */
border: 0 !important;
background: transparent;
text-align: left !important; /* override .text-center / .text-end on td */
font-size: 13px;
line-height: 1.35;
color: var(--ink-body, var(--ink));
overflow: visible;
white-space: normal;
word-break: break-word;
}
/* === Organic Keywords table (8 cols) — column ordering ===
td order in DOM: 1 keyword, 2 SERP, 3 position, 4 change, 5 volume,
6 traffic, 7 share, 8 url
Layout intent on phone:
row 1: [keyword] [position badge]
row 2: [URL truncated]
row 3: [Δ · Vol · Traffic · Share · SERP] inline meta, wrap
*/
.semrush-report .organic-keywords-row .table tbody tr {
grid-template-columns: 1fr auto;
}
/* keyword — title, row 1 col 1 */
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(1) {
grid-row: 1;
grid-column: 1;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(1) .fw-medium {
font-weight: 600;
}
/* position badge — top-right */
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(3) {
grid-row: 1;
grid-column: 2;
text-align: right !important;
align-self: start;
}
/* URL — full width on its own row */
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(8) {
grid-row: 2;
grid-column: 1 / -1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(8) small {
font-size: 11px;
color: var(--ink-3);
}
/* Meta cells: SERP / change / volume / traffic / share — inline on row 3 */
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(2),
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(4),
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(5),
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(6),
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(7) {
grid-row: 3;
grid-column: span 2;
display: inline-flex;
align-items: center;
font-size: 11px;
color: var(--ink-3);
}
/* Inject column labels before each meta cell so the cards are self-describing */
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(5)::before {
content: "Vol ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-right: 4px;
}
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(6)::before {
content: "Traffic ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 4px 0 10px;
}
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(7)::before {
content: "Share ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 4px 0 10px;
}
.semrush-report .organic-keywords-row .table tbody tr > td:nth-child(4)::before {
content: "Δ ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 4px 0 10px;
}
/* === Tracked Keywords table (5 cols) ===
td order: 1 keyword, 2 position, 3 change, 4 volume, 5 url */
.semrush-report .tracked-keywords-table .table tbody tr {
grid-template-columns: 1fr auto;
}
/* keyword — title */
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(1) {
grid-row: 1;
grid-column: 1;
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
/* position badge — top right */
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(2) {
grid-row: 1;
grid-column: 2;
text-align: right !important;
}
/* URL — full width row 2 */
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(5) {
grid-row: 2;
grid-column: 1 / -1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(5) small {
font-size: 11px;
color: var(--ink-3);
}
/* change + volume — meta row */
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(3),
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(4) {
grid-row: 3;
grid-column: span 2;
display: inline-flex;
align-items: center;
font-size: 11px;
color: var(--ink-3);
}
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(3)::before {
content: "Δ ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-right: 4px;
}
.semrush-report .tracked-keywords-table .table tbody tr > td:nth-child(4)::before {
content: "Vol ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 4px 0 10px;
}
/* Position badge sizing inside the cards */
.semrush-report .position-badge {
font-size: 11px;
padding: 3px 8px;
}
/* SERP features cell — let badges wrap, shrink */
.semrush-report .serp-features-cell {
white-space: normal !important; /* override .serp-features-cell nowrap */
}
.semrush-report .serp-badge {
font-size: 9.5px;
padding: 1px 4px;
margin-right: 3px;
}
/* Empty/loading/error states inside widgets */
.semrush-report .widget-loading,
.semrush-report .widget-empty,
.semrush-report .widget-error {
padding: 24px 12px;
font-size: 13px;
text-align: center;
}
/* The date-picker secondary refresh button — make it full-width */
.semrush-report #refreshBtn2 {
width: 100%;
}
/* Global error banner inside semrush — wrap text */
.semrush-report .global-error {
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
}
/* =============================================================================
MOBILE: company/content_output (PR: mobile/content-output)
-----------------------------------------------------------------------------
Per HANDOFF.md §5 patterns + §11 (no horizontal scroll on page content) —
this is the content production tracker, the heaviest table page in the app
with 8 separate tables (My Entries, Writer Leaderboard, CM Team, Client
Breakdown, Daily Work, Team Efficiency, Manage Teams modal, Bulk Add modal)
plus ~28 inline fixed-width styles. All page-level tables flatten to
card-stacks. Modal tables are allowed to horizontal-scroll inside the
modal body per HANDOFF §11 (modals = explicit scroll containers), but we
still cap the inline widths so they fit better.
Strategy:
1. Force `.am-dashboard.company-dashboard .table-responsive` to NOT
horizontally scroll on the page (override line ~902's `overflow-x: auto`).
2. Flatten every `.opt-table.gmb-table` inside `.am-dashboard.company-dashboard`
(but NOT inside `.modal`) to a card-stack via `display: block` on
table/thead/tbody/tr/td, with the column header injected per-table
via positional `nth-child()` selectors (the templates don't ship
`data-label` attrs on these tables, but column order is stable in markup).
3. Pair every grid/flex flip on with `width: auto !important` and
`box-sizing: border-box` on the s (PR #15/#17/#19 lesson).
4. Neutralise inline `style="width:NNNpx"` on filter selects, date inputs,
search inputs, action buttons, etc. by overriding at the class level.
============================================================================= */
/* ── 1. Page header: stack title + buttons ──────────────────────────────── */
.am-dashboard.company-dashboard .am-header {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.am-dashboard.company-dashboard .am-header .d-flex.gap-2 {
flex-wrap: wrap;
}
.am-dashboard.company-dashboard .am-header .btn {
min-height: 44px;
}
/* ── 2. Filter row (Month/Year/Manager): full-width selects ─────────────── */
.am-dashboard.company-dashboard > form.d-flex {
flex-direction: column;
align-items: stretch !important;
gap: 8px !important;
}
.am-dashboard.company-dashboard > form.d-flex > .d-flex {
flex-wrap: wrap;
gap: 8px !important;
}
.am-dashboard.company-dashboard > form.d-flex select.form-select-sm {
flex: 1 1 100%;
width: 100% !important; /* override inline style="width: auto; min-width:130px" etc. */
min-width: 0 !important;
min-height: 40px;
}
/* ── 3. Hero stat grid: 2-up, not 1-up ──────────────────────────────────── */
/* style.css collapses .am-hero-grid to 1 column at 576px which makes 7 stat
cards (writer view) into a tall stack. 2-col is denser and still readable
at 360px. */
.am-dashboard.company-dashboard .am-hero-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* override 1fr in style.css @media 576px */
gap: 8px !important;
}
.am-dashboard.company-dashboard .am-hero-card {
padding: 12px;
border-radius: 10px;
min-width: 0;
overflow: hidden;
}
.am-dashboard.company-dashboard .am-hero-value {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
}
.am-dashboard.company-dashboard .am-hero-label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.am-dashboard.company-dashboard .am-hero-subtext {
font-size: 11px;
line-height: 1.3;
word-break: break-word;
}
/* ── 4. Monthly Goal section: stack label + edit pencil + bar ───────────── */
.am-dashboard.company-dashboard #goalSection .card-body {
padding: 12px !important;
}
.am-dashboard.company-dashboard #goalSection .d-flex.align-items-center.gap-2 {
flex-wrap: wrap;
row-gap: 6px;
}
.am-dashboard.company-dashboard #goalSection #goalEditForm,
.am-dashboard.company-dashboard #goalSection #goalSetForm {
flex: 1 1 100%;
}
.am-dashboard.company-dashboard #goalSection #goalInput {
width: 80px !important;
flex: 0 0 80px;
}
/* ── 5. Card headers across the page: wrap controls, full-width fields ──── */
.am-dashboard.company-dashboard section.card > .card-header {
flex-wrap: wrap;
row-gap: 8px;
padding: 10px 12px;
}
.am-dashboard.company-dashboard section.card > .card-header > .d-flex {
flex-wrap: wrap;
width: 100%;
}
.am-dashboard.company-dashboard section.card > .card-header .form-control,
.am-dashboard.company-dashboard section.card > .card-header .form-select {
width: 100% !important; /* neutralise inline style="width:160px|200px|150px|130px" */
min-width: 0 !important;
flex: 1 1 100%;
}
.am-dashboard.company-dashboard #dailyWorkSection .card-header .btn {
min-width: 44px;
min-height: 40px;
}
/* Team Efficiency: range button-group spans full width, dates stack */
.am-dashboard.company-dashboard #efficiencySection .btn-group {
width: 100%;
}
.am-dashboard.company-dashboard #efficiencySection .btn-group .btn {
flex: 1 1 0;
min-height: 40px;
}
.am-dashboard.company-dashboard #efficiencySection .card-header input[type="date"] {
width: 100% !important;
flex: 1 1 100%;
}
/* ── 6. Team Overview separator: tighten ────────────────────────────────── */
.am-dashboard.company-dashboard .d-flex.align-items-center.gap-2.mb-3.mt-4 {
margin-top: 16px !important;
}
/* =========================================================================
7. PAGE TABLES → CARD STACKS
Shared rule for every `.opt-table.gmb-table` inside the page wrapper
(excludes tables nested in modals, which keep their tabular layout).
========================================================================= */
/* Disable .table-responsive's horizontal scroll on this page so flattened
cards can flow naturally. */
.am-dashboard.company-dashboard .table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}
/* Preserve modal scroll containers — the templates wrap their own
max-height / overflow-y: auto divs and SHOULD scroll inside per HANDOFF §11. */
.am-dashboard.company-dashboard .modal .table-responsive,
.am-dashboard.company-dashboard .modal [style*="overflow-y: auto"] {
overflow-x: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Flatten every page-level opt-table.gmb-table to a card stack. */
.am-dashboard.company-dashboard > section .opt-table.gmb-table,
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table {
display: block;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
border: 0;
font-family: var(--sans);
}
.am-dashboard.company-dashboard > section .opt-table.gmb-table thead {
/* Visually hide thead but keep accessible to AT */
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.am-dashboard.company-dashboard > section .opt-table.gmb-table tbody {
display: block;
width: 100%;
}
.am-dashboard.company-dashboard > section .opt-table.gmb-table tbody tr {
display: block;
width: 100% !important; /* paired with td width:auto below — PR #15/#17 lesson */
box-sizing: border-box;
padding: 12px 14px;
margin: 0 12px 10px 12px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper-2);
}
.am-dashboard.company-dashboard > section .opt-table.gmb-table tbody tr > td {
display: block;
width: auto !important; /* never inherit width:100% — PR #15/#17 lesson */
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 3px 0 !important;
border: 0 !important;
text-align: left !important; /* override .text-center desktop alignment */
white-space: normal;
font-size: 13px;
line-height: 1.35;
color: var(--ink-body);
}
/* ── 8. MY RECENT ENTRIES (#myEntriesTable) — 10 cols → card layout ──────
cols: 1 date | 2 client | 3 svc | 4 aux | 5 loc | 6 blog | 7 pub | 8 rev
| 9 notes | 10 actions */
/* Client (col 2) acts as card title */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(2) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 4px !important;
}
/* Date (col 1) — small meta line under client */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(1) {
font-size: 11px !important;
color: var(--ink-3) !important;
padding-bottom: 8px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 8px;
}
/* Page-count cells (svc/aux/loc/blog/pub/rev) — inline label + value */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(3)::before { content: "Service"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(4)::before { content: "Aux"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(5)::before { content: "Location"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(6)::before { content: "Blog"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(7)::before { content: "Published"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(8)::before { content: "Revisions"; }
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(n+3):nth-child(-n+8) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(n+3):nth-child(-n+8)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* Notes (col 9) — full-width muted block */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(9) {
padding-top: 8px !important;
border-top: 1px dotted var(--rule) !important;
margin-top: 6px;
}
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(9) small {
font-size: 12px !important;
}
/* Actions (col 10) — full-width row of pill buttons */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(10) {
display: flex !important;
gap: 8px;
padding-top: 8px !important;
}
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(10) .btn {
flex: 1 1 0;
min-height: 40px;
}
/* Edit-mode: inputs inside any cell expand to fill its container */
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td input,
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td select {
min-height: 40px;
}
.am-dashboard.company-dashboard #myEntriesTable tbody tr > td:nth-child(n+3):nth-child(-n+8) input {
max-width: 100px;
}
/* ── 9. WRITER LEADERBOARD (#writerTable) — 11 cols → card layout ─────────
cols: 1 writer | 2 team | 3 svc | 4 aux | 5 loc | 6 blog | 7 total |
8 pub | 9 rev | 10 efficiency | 11 cost/page */
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(1) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 4px !important;
}
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(2) {
font-size: 11px !important;
color: var(--ink-3) !important;
padding-bottom: 8px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
}
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(3)::before { content: "Service"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(4)::before { content: "Aux"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(5)::before { content: "Location"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(6)::before { content: "Blog"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(7)::before { content: "Total"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(8)::before { content: "Published"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(9)::before { content: "Revisions"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(10)::before { content: "Efficiency"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(11)::before { content: "Cost/Page"; }
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(n+3) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard #writerTable tbody tr > td:nth-child(n+3)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* Leaderboard medal accent: keep border-left on top-3 cards */
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-gold,
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-silver,
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-bronze {
border-left-width: 3px;
}
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-gold { border-left-color: var(--accent); }
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-silver { border-left-color: var(--ink-3); }
.am-dashboard.company-dashboard #writerTable tbody tr.leaderboard-bronze { border-left-color: var(--ink-faint); }
/* ── 10. CM TEAM PERFORMANCE (anonymous, sibling section.card.mt-3) ───────
cols: 1 cm_name | 2 writers | 3 total | 4 pub | 5 rev | 6 eff | 7 cost
Selector: tables in this page that are NOT one of the 3 id'd tables. */
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(1) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 6px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
}
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(2)::before { content: "Writers"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(3)::before { content: "Total Pages"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(4)::before { content: "Published"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(5)::before { content: "Revisions"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(6)::before { content: "Efficiency"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(7)::before { content: "Cost/Page"; }
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(n+2) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard > section.card .opt-table.gmb-table:not(#myEntriesTable):not(#writerTable):not(#clientTable) tbody tr > td:nth-child(n+2)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* ── 11. CLIENT BREAKDOWN (#clientTable) — 8 cols → card layout ───────────
cols: 1 client (name + AM) | 2 svc | 3 aux | 4 loc | 5 blog | 6 total |
7 published | 8 progress (bar + %) */
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(1) {
padding-bottom: 6px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(1) .fw-semibold {
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
color: var(--ink);
display: block;
line-height: 1.25;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(1) small {
font-size: 11px !important;
color: var(--ink-3) !important;
display: block;
margin-top: 2px;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(2)::before { content: "Service"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(3)::before { content: "Aux"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(4)::before { content: "Location"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(5)::before { content: "Blog"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(6)::before { content: "Total"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(7)::before { content: "Published"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(8)::before { content: "Progress"; }
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(n+2) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(n+2)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* Progress bar cell — keep bar + % visible, expand bar to fill */
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(8) > div {
flex: 1 1 0;
min-width: 0;
gap: 8px !important;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(8) .progress {
flex: 1 1 0;
min-width: 60px;
}
.am-dashboard.company-dashboard #clientTable tbody tr > td:nth-child(8) small {
font-size: 11px !important;
white-space: nowrap;
flex: 0 0 auto;
}
/* ── 12. DAILY WORK (#dailyTable, JS-injected) — 11 cols → card layout ────
JS builds this table inside #dailyWorkContent. Cols:
1 writer (rowspan'd) | 2 client | 3 S | 4 A | 5 L | 6 B | 7 Total |
8 Published | 9 Revisions | 10 Notes | 11 actions
rowspan collapses naturally when each becomes its own block card;
writer cell only renders on the 1st row of each writer-group, so 2nd+
cards lack a writer header. Acceptable: client + metrics still present. */
.am-dashboard.company-dashboard #dailyWorkContent .table-responsive {
overflow-x: visible !important;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(1) {
font-family: var(--sans);
font-size: 11px !important;
font-weight: 600;
color: var(--ink-3) !important;
text-transform: uppercase;
letter-spacing: 0.14em;
padding-bottom: 4px !important;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(2) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 6px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(3)::before { content: "Service"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(4)::before { content: "Aux"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(5)::before { content: "Location"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(6)::before { content: "Blog"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(7)::before { content: "Total"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(8)::before { content: "Published"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(9)::before { content: "Revisions"; }
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(n+3):nth-child(-n+9) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(n+3):nth-child(-n+9)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* Notes (col 10) — full-width block */
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(10) {
padding-top: 8px !important;
border-top: 1px dotted var(--rule) !important;
margin-top: 6px;
}
/* Action col (11) — full width below */
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(11) {
display: flex !important;
gap: 8px;
padding-top: 8px !important;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td:nth-child(11) .btn {
flex: 1 1 0;
min-height: 40px;
}
/* Edit-mode inputs (override JS-injected inline style="width:60px") */
.am-dashboard.company-dashboard #dailyTable tbody tr > td input[type="number"] {
width: 100px !important;
margin: 0 !important;
min-height: 40px;
}
.am-dashboard.company-dashboard #dailyTable tbody tr > td input[type="text"] {
width: 100% !important;
min-height: 40px;
}
/* Daily Work summary strip (entries / pages / revisions / writers) */
.am-dashboard.company-dashboard #dailyWorkContent .bg-light.border-bottom {
flex-wrap: wrap;
row-gap: 4px;
column-gap: 12px !important;
padding: 8px 12px !important;
font-size: 12px !important;
}
/* ── 13. TEAM EFFICIENCY (#efficiencyContent table, JS-injected) ──────────
cols: 1 writer | 2 pages | 3 revisions | 4 clean | 5 eff % | 6 avg/day */
.am-dashboard.company-dashboard #efficiencyContent .table-responsive {
overflow-x: visible !important;
}
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(1) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 6px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
}
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(2)::before { content: "Pages Written"; }
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(3)::before { content: "Revisions"; }
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(4)::before { content: "Clean Pages"; }
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(5)::before { content: "Efficiency"; }
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(6)::before { content: "Avg/Day"; }
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(n+2) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 4px 0 !important;
gap: 8px;
}
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr > td:nth-child(n+2)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
}
/* Team Total summary row — distinguish with sunken background */
.am-dashboard.company-dashboard #efficiencyContent .opt-table.gmb-table tbody tr.table-active {
background: var(--paper-3) !important;
}
/* ── 14. MODALS — Bulk Add + Manage Teams ───────────────────────────────── */
/* Bulk Add Phase 1: client checkbox list goes 1 column on phone, not 2.
The template sets inline `grid-template-columns: 1fr 1fr`. */
#bulkAddModal #bulkClientList {
grid-template-columns: 1fr !important;
max-height: 280px;
}
#bulkAddModal .bulk-client-item {
min-height: 40px;
}
/* Filter row inside the modal — full width */
#bulkAddModal .d-flex.gap-2.mb-2 {
flex-direction: column;
align-items: stretch;
}
#bulkAddModal #bulkClientSearch {
width: 100% !important;
}
#bulkAddModal .d-flex.gap-2.mb-2 .btn {
min-height: 40px;
}
/* Phase 2 entry table — let it horizontal-scroll inside the modal body
(allowed by HANDOFF §11). Slim cell padding so more cols fit pre-scroll. */
#bulkAddModal #bulkEntryTable {
font-size: 12px;
min-width: 520px;
}
#bulkAddModal #bulkEntryTable th,
#bulkAddModal #bulkEntryTable td {
padding: 4px 6px !important;
}
#bulkAddModal #bulkEntryTable input[type="number"] {
width: 56px !important;
min-height: 36px;
}
/* Manage Teams modal: writer rows — CM full width */
#manageTeamsModal .opt-table .team-cm-select {
width: 100% !important;
min-height: 40px;
}
#manageTeamsModal #teamWriterSearch {
width: 100% !important;
}
#manageTeamsModal .opt-table th,
#manageTeamsModal .opt-table td {
padding: 6px 8px !important;
font-size: 13px;
}
/* Modal footers — wrap buttons and give them tap targets */
#bulkAddModal .modal-footer,
#manageTeamsModal .modal-footer {
flex-wrap: wrap;
gap: 8px;
}
#bulkAddModal .modal-footer .btn,
#manageTeamsModal .modal-footer .btn {
flex: 1 1 calc(50% - 4px);
min-height: 44px;
}
/* ── 15. Catch-all: cap any leftover inline `style="width:NNNpx"` ───────── */
/* Scoped to .am-dashboard.company-dashboard so it doesn't leak. Prevents
a horizontal scrollbar if a future template adds another fixed-width
input without us updating this file. */
.am-dashboard.company-dashboard input[type="date"][style*="width"],
.am-dashboard.company-dashboard input[type="text"][style*="width"],
.am-dashboard.company-dashboard input[type="number"][style*="width"],
.am-dashboard.company-dashboard select[style*="width"] {
max-width: 100% !important;
}
/* =============================================================================
MOBILE: company/action_items (PR: mobile/action-items)
-----------------------------------------------------------------------------
Per HANDOFF.md §4.12 (Cards default) + §5 (per-page card-stack pattern) and
§11 (no overflow-x: auto on page content). The team Action Items board has
three wide tables (Needs Review, In Progress, Completed) plus a 4-up KPI
hero strip and a 5-control filter bar that all blow out at 360px on the
desktop layout.
Conversions:
1. .am-hero-grid 4-up → 2-up grid (matches §5.2 KPI pattern)
2. Filter bar inputs wrap, become 40px tap targets, search goes full-width
3. All three opt-tables: flatten thead, flip into editorial cards
- .ai-row (Needs Review): grid with priority+title on row 1, the rest
(category, client, date) stacked below; chevron column hidden
- .ai-expand: full-width detail panel; selects become full-width, btns
wrap into 2-per-row tap targets
- In Progress / Completed rows: priority+title on row 1, remaining
cells full-width with auto-tagged data-label as small-caps eyebrow
4. Prompt Agent modal — input sizes bumped to 40px tap targets
CRITICAL (lesson from PRs #15/#17/#19): every flipped to display:grid
is paired with `width: auto !important; box-sizing: border-box` on the
s — otherwise inline `style="width: 70px / 100px / 140px"` on the
s leaks via table-layout and re-introduces horizontal scroll.
============================================================================= */
/* ── Page padding ───────────────────────────────────────────────────── */
.am-dashboard.company-dashboard {
padding: 14px 12px !important; /* overrides style.css .am-dashboard padding */
}
/* ── Page header: title + tagline stack ─────────────────────────────── */
.am-dashboard.company-dashboard > .am-header {
margin-bottom: 12px;
}
.am-dashboard.company-dashboard > .am-header .am-name {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
line-height: 1.1;
color: var(--ink);
}
.am-dashboard.company-dashboard > .am-header .am-contact {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
}
.am-dashboard.company-dashboard > .am-header .am-contact span {
white-space: normal; /* allow the tagline to wrap */
}
/* Inline alert (Supabase warning) — keep tight */
.am-dashboard.company-dashboard > .alert {
font-size: 12px;
padding: 10px 12px;
margin: 8px 0 12px;
}
/* ── Hero KPI strip: 4-up → 2-up grid per HANDOFF.md §5.2 ───────────── */
.am-dashboard.company-dashboard .am-hero-section {
margin-bottom: 16px;
}
.am-dashboard.company-dashboard .am-hero-grid {
grid-template-columns: 1fr 1fr !important; /* override style.css 576px → 1col */
gap: 8px !important;
}
.am-dashboard.company-dashboard .am-hero-card {
padding: 10px 12px !important; /* overrides --space-6 (24px) */
gap: 8px !important;
border-radius: 10px;
align-items: center;
}
.am-dashboard.company-dashboard .am-hero-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
}
.am-dashboard.company-dashboard .am-hero-content {
min-width: 0;
}
.am-dashboard.company-dashboard .am-hero-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.am-dashboard.company-dashboard .am-hero-value {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
line-height: 1.1;
color: var(--ink);
}
.am-dashboard.company-dashboard .am-hero-subtext {
font-family: var(--sans);
font-size: 10.5px;
color: var(--ink-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── cc-panel + cc-panel-header tighten ─────────────────────────────── */
.am-dashboard.company-dashboard .cc-section {
margin-left: 0;
margin-right: 0;
}
.am-dashboard.company-dashboard .cc-panel {
border-radius: 10px;
}
.am-dashboard.company-dashboard .cc-panel-header {
padding: 10px 12px !important;
flex-wrap: wrap;
gap: 6px;
}
.am-dashboard.company-dashboard .cc-panel-header h6 {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
}
.am-dashboard.company-dashboard .cc-panel-header .cc-badge {
font-size: 10px;
}
/* ── Filter bar (inline-styled div above #reviewTable) ──────────────── */
/* Target the immediate div under .cc-panel that has the filter inline
styles. We can't rely on a class, so use the inline-style signature. */
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] {
padding: 10px 12px !important;
gap: 8px !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] > div[style*="position: relative"] {
flex: 1 1 100% !important; /* search wrapper goes full-width */
max-width: none !important;
min-width: 0 !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] input[type="text"] {
width: 100% !important;
min-height: 40px !important; /* tap target */
padding: 8px 10px 8px 30px !important; /* preserve search-icon offset */
font-size: 13px !important;
max-width: none !important;
}
.am-dashboard.company-dashboard .cc-panel > div[style*="border-bottom"][style*="display: flex"] select {
width: 100% !important;
min-height: 40px !important;
padding: 8px 10px !important;
font-size: 13px !important;
max-width: none !important;
flex: 1 1 calc(50% - 4px); /* two selects per row */
}
/* ── Table → card stack: shared rules for all three opt-tables ──────── */
.am-dashboard.company-dashboard .table-responsive {
max-height: none !important; /* override inline max-height: 700px / 400px */
overflow: visible !important; /* no internal scroll on phone */
}
.am-dashboard.company-dashboard .opt-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
.am-dashboard.company-dashboard .opt-table thead { display: none !important; }
.am-dashboard.company-dashboard .opt-table tbody {
display: block !important;
width: 100% !important;
}
/* ── Needs Review rows (.ai-row) — Priority + Title on row 1 ────────── */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row {
display: grid !important;
grid-template-columns: auto 1fr;
column-gap: 10px;
row-gap: 6px;
padding: 12px;
margin: 0 0 8px 0;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
cursor: pointer;
width: auto;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td {
display: block !important;
width: auto !important; /* override inline th widths leaking via table-layout */
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box;
min-width: 0;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-body);
}
/* Row 1: priority badge (col 1) + title (col 2) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1;
align-self: start;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1;
min-width: 0;
}
/* Title text — bump a touch for legibility, allow wrap */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) > div[style*="font-weight"] {
font-size: 13px !important;
line-height: 1.3;
white-space: normal;
}
/* Hide the muted single-line description preview at 360px — full text
is shown after expansion. */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(2) > div.text-muted {
display: none;
}
/* Row 2-4: category / client / date — each full-width */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(3),
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(4),
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5) {
grid-column: 1 / -1;
display: inline-flex !important;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(3) { grid-row: 2; }
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(4) { grid-row: 3; }
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5) {
grid-row: 4;
font-size: 11px !important;
color: var(--ink-faint) !important;
}
/* "Submitted" eyebrow on the date cell (it has no innate label) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(5)::before {
content: "Submitted";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Hide the chevron column — whole card is tappable; chevron clutter at 360 */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-row > td:nth-child(6) {
display: none !important;
}
/* ── Needs Review expand row (.ai-expand) — full-width detail panel ─── */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand {
display: block; /* JS toggles inline style="display: none / ''" */
width: 100%;
margin: -6px 0 8px 0; /* nestle under the row that opened it */
background: transparent;
border: 0;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
}
/* The inner expand wrapper (the div inside the colspan=6 td) */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td > div {
padding: 12px !important;
border-radius: 10px !important;
border: 1px solid var(--rule) !important;
background: var(--paper-3) !important;
}
/* Action button row inside the expand panel — wrap with grid-2 layout */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand > td > div > div[style*="display: flex"] {
flex-wrap: wrap !important;
gap: 6px !important;
align-items: stretch !important;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand select {
width: 100% !important; /* override inline width: 140px / 180px / 100px */
min-height: 40px !important;
font-size: 13px !important;
}
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand .btn {
font-size: 12px !important;
padding: 8px 12px !important;
min-height: 40px;
flex: 1 1 calc(50% - 3px);
}
/* The dismiss "ms-auto" button — allow it to wrap with the rest */
.am-dashboard.company-dashboard .opt-table tbody tr.ai-expand .btn.ms-auto {
margin-left: 0 !important;
}
/* ── In Progress + Completed rows (no .ai-row / .ai-expand class) ───── */
/* mobile-tables.js auto-tags every with data-label=" to grid/flex, ALWAYS pair with
width: auto !important + box-sizing: border-box on the s, otherwise
inherited table widths can re-introduce overflow.
Per HANDOFF.md §5 patterns + §11 allowed scroll regions:
- Tabs row is an explicit horizontal-scroll region (allowed).
- All other content reflows vertically only.
============================================================================= */
/* Page wrapper — trim desktop's 1.5rem padding so cards run to safe edges. */
.link-orders-management {
padding: 12px 14px 24px !important; /* override desktop inline 1.5rem */
}
/* ── Header: title + actions row ──
Desktop puts h1, filters, search, buttons on one wrap row.
Mobile: title on its own, then each control full-width. */
.link-orders-management .am-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.link-orders-management .am-profile {
width: 100%;
}
.link-orders-management .am-name {
font-size: 28px !important; /* override inline 1.5rem */
}
.link-orders-management .am-actions {
flex-direction: column;
align-items: stretch !important; /* override Bootstrap align-items-center */
gap: 10px !important;
width: 100%;
}
.link-orders-management .am-actions > * {
width: 100%;
}
/* Date range picker — stretch full width inside the stacked column. */
.link-orders-management .am-actions .date-range-picker,
.link-orders-management .am-actions [id^="linkOrderDatePicker"] {
width: 100%;
}
/* Search wrap — kill desktop's min-width:200px so it can shrink. */
.link-orders-management .lo-search-wrap {
min-width: 0;
width: 100%;
}
.link-orders-management .lo-search-input {
width: 100%;
min-height: 44px;
}
/* Filter selects — kill desktop min-width:140px, full width + tap height. */
.link-orders-management .lo-filter-select {
width: 100%;
min-width: 0;
min-height: 44px;
}
/* Action buttons in the header — full-width 44px tap targets. */
.link-orders-management .am-actions .btn-primary-opt,
.link-orders-management .am-actions .btn-secondary-opt {
min-height: 44px;
width: 100%;
justify-content: center;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* ── KPI row: 4 cards → 2×2 grid on phones ── */
.link-orders-management .lo-kpi-row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* override desktop 768px=1col rule */
gap: 8px;
margin-top: 12px;
}
.link-orders-management .lo-kpi-card {
padding: 12px 12px;
gap: 10px;
border-radius: 10px; /* editorial card radius */
}
.link-orders-management .lo-kpi-icon {
font-size: 1.1rem;
}
.link-orders-management .lo-kpi-label {
font-size: 9.5px;
letter-spacing: 0.14em;
}
.link-orders-management .lo-kpi-value {
font-size: 22px; /* serif 22-24px per HANDOFF §2 */
line-height: 1.1;
}
.link-orders-management .lo-kpi-sub {
font-size: 10.5px;
}
/* ── Insights grid → single column ── */
.link-orders-management .lo-insights-section {
margin-top: 16px;
}
.link-orders-management .lo-insights-grid {
grid-template-columns: 1fr !important; /* harmless override; matches existing 768 */
gap: 10px;
}
.link-orders-management .lo-insight-card {
border-radius: 10px;
}
.link-orders-management .lo-insight-header {
padding: 10px 12px;
font-size: 9.5px;
letter-spacing: 0.14em;
}
.link-orders-management .lo-insight-link {
padding: 10px 12px;
min-height: 44px;
display: flex;
align-items: center;
}
.link-orders-management .lo-insight-row {
gap: 8px;
width: 100%;
}
.link-orders-management .lo-insight-client {
font-size: 13px;
}
.link-orders-management .lo-insight-am {
font-size: 11px;
}
.link-orders-management .lo-insight-stats {
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* ── Table section: outer container ── */
.link-orders-management .lo-table-section {
margin-top: 16px;
border-radius: 10px;
overflow: visible; /* allow content to size; we contain overflow per-pane */
}
/* ── Tab bar — horizontal scroll allowed per HANDOFF §11 (tabs region) ── */
.link-orders-management .lo-tab-bar {
padding: 8px 8px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.link-orders-management .lo-tabs {
flex-wrap: nowrap;
gap: 4px;
min-width: max-content;
}
.link-orders-management .lo-tab-btn {
padding: 8px 10px;
font-size: 12px;
white-space: nowrap;
min-height: 40px;
}
.link-orders-management .lo-tab-count {
font-size: 9.5px;
}
/* ── Table toolbar (per-tab search + count) — stack ── */
.link-orders-management .lo-table-toolbar {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 12px 8px;
}
.link-orders-management .lo-inline-search {
width: 100%;
min-height: 40px;
}
.link-orders-management .lo-row-count {
align-self: flex-start;
}
/* ── Bulk action bar above Purchased table — wrap on phones ── */
.link-orders-management .lo-bulk-bar {
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
margin: 8px 12px 0;
}
.link-orders-management .lo-bulk-bar .btn {
flex: 1 1 calc(50% - 4px);
min-height: 40px;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────────────────
TABLES → CARD STACKS
Three data tables (Active / Purchased / Paid) all share .status-table
inside .lo-table-section. Mobile pattern: hide thead, each tr becomes
a card. The .table-responsive wrapper's overflow-x is neutralised.
───────────────────────────────────────────────────────────────────────── */
.link-orders-management .lo-table-section .table-responsive {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
max-width: 100%;
}
.link-orders-management .lo-table-section .status-table {
display: block;
width: 100%;
min-width: 0;
border: 0;
margin: 0;
}
/* Hide thead — column headers don't make sense for stacked cards. */
.link-orders-management .lo-table-section .status-table thead {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.link-orders-management .lo-table-section .status-table tbody {
display: block;
width: 100%;
padding: 0 12px 12px;
}
/* Each row becomes an editorial card.
PR #15/#17/#19 lesson: grid + width:auto on below. */
.link-orders-management .lo-table-section .status-table tbody tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 10px;
row-gap: 6px;
align-items: start;
width: 100%;
padding: 12px 14px !important; /* override desktop 6px 8px td padding */
margin-bottom: 10px;
border: 1px solid var(--rule) !important;
border-radius: 10px;
background: var(--paper-2);
box-sizing: border-box;
animation: none !important; /* skip per-row entrance animation on phones */
}
/* PR #15 lesson: cells need width:auto + box-sizing when parent is grid. */
.link-orders-management .lo-table-section .status-table tbody tr > td {
display: block;
width: auto !important;
max-width: 100%;
min-width: 0;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-sizing: border-box;
font-size: 13px;
line-height: 1.35;
color: var(--ink-body) !important;
vertical-align: top;
text-align: left !important;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide tbody row hover background on mobile — flat editorial. */
.link-orders-management .lo-table-section .status-table tbody tr:hover td {
background: transparent !important;
}
/* ──────── ACTIVE table card layout ──────── */
/* DOM column order:
1=Created, 2=Client, 3=AM, 4=Target URL, 5=Anchor,
6=Supplier, 7=Est. cost, 8=Group badge, 9=Status, 10=Actions */
.link-orders-management #loActiveTable tbody tr > td:nth-child(2) { /* Client */
grid-column: 1 / -1;
font-size: 15px;
font-weight: 600;
color: var(--ink) !important;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(2) .lo-client-link {
font-size: 15px;
color: var(--ink) !important;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(4), /* Target URL */
.link-orders-management #loActiveTable tbody tr > td:nth-child(5) { /* Anchor */
grid-column: 1 / -1;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(1), /* Created */
.link-orders-management #loActiveTable tbody tr > td:nth-child(3), /* AM */
.link-orders-management #loActiveTable tbody tr > td:nth-child(6), /* Supplier */
.link-orders-management #loActiveTable tbody tr > td:nth-child(7) { /* Est */
font-size: 12px;
color: var(--ink-3) !important;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(8) { /* Group badge */
grid-column: 1 / 2;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(9) { /* Status */
grid-column: 2 / 3;
justify-self: end;
}
.link-orders-management #loActiveTable tbody tr > td:nth-child(10) { /* Actions */
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 8px !important;
border-top: 1px solid var(--rule) !important;
}
/* ──────── PURCHASED table card layout ──────── */
/* DOM order:
1=checkbox, 2=Purchased date, 3=Client, 4=AM, 5=Target URL, 6=Anchor,
7=Supplier, 8=Actual cost, 9=Group, 10=Status, 11=Invoice, 12=Delivered, 13=Actions */
/* Hide the bulk-select checkbox column on mobile — admin feature, doesn't
map to a card. Same approach as All Clients .col-bulk hide. */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(1) {
display: none !important;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(3) { /* Client */
grid-column: 1 / -1;
font-size: 15px;
font-weight: 600;
color: var(--ink) !important;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(3) .lo-client-link {
font-size: 15px;
color: var(--ink) !important;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(5), /* Target URL */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(6) { /* Anchor */
grid-column: 1 / -1;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(2), /* Date */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(4), /* AM */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(7), /* Supplier */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(8) { /* Cost */
font-size: 12px;
color: var(--ink-3) !important;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(9) { /* Group */
grid-column: 1 / 2;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(10) { /* Status */
grid-column: 2 / 3;
justify-self: end;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(11), /* Invoice */
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(12) { /* Delivered */
font-size: 12px;
}
.link-orders-management #loPurchasedTable tbody tr > td:nth-child(13) { /* Actions */
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 8px !important;
border-top: 1px solid var(--rule) !important;
}
/* ──────── PAID table card layout ──────── */
/* DOM order:
1=Paid date, 2=Client, 3=AM, 4=Target URL, 5=Anchor,
6=Supplier, 7=Actual, 8=Group, 9=Invoice, 10=Delivered, 11=Actions */
.link-orders-management #loPaidTable tbody tr > td:nth-child(2) { /* Client */
grid-column: 1 / -1;
font-size: 15px;
font-weight: 600;
color: var(--ink) !important;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(2) .lo-client-link {
font-size: 15px;
color: var(--ink) !important;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(4), /* Target URL */
.link-orders-management #loPaidTable tbody tr > td:nth-child(5) { /* Anchor */
grid-column: 1 / -1;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(1), /* Paid date */
.link-orders-management #loPaidTable tbody tr > td:nth-child(3), /* AM */
.link-orders-management #loPaidTable tbody tr > td:nth-child(6), /* Supplier */
.link-orders-management #loPaidTable tbody tr > td:nth-child(7) { /* Actual cost */
font-size: 12px;
color: var(--ink-3) !important;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(8) { /* Group */
grid-column: 1 / 2;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(9), /* Invoice */
.link-orders-management #loPaidTable tbody tr > td:nth-child(10) { /* Delivered */
font-size: 12px;
}
.link-orders-management #loPaidTable tbody tr > td:nth-child(11) { /* Actions */
grid-column: 1 / -1;
margin-top: 4px;
padding-top: 8px !important;
border-top: 1px solid var(--rule) !important;
}
/* ──────── Group-child rows (expanded sub-orders) ──────── */
/* Style as nested sub-cards: slimmer, indented, paper-3 background.
They share the same grid layout as parent rows. */
.link-orders-management .lo-table-section .status-table tbody tr.group-child-row {
background: var(--paper-3) !important;
border-color: var(--rule) !important;
margin-left: 12px;
margin-top: -6px; /* pull up under parent for visual grouping */
padding: 10px 12px !important;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* URL / anchor links inside cards — make tappable & truncate gracefully. */
.link-orders-management .lo-table-section .lo-url-link {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
color: var(--ink-body);
}
.link-orders-management .lo-table-section .lo-client-link {
word-break: break-word;
}
/* Actions cell — let buttons wrap horizontally inside the card footer. */
.link-orders-management .lo-table-section .actions-col {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.link-orders-management .lo-table-section .actions-col > * {
flex: 0 1 auto;
}
/* Render macro buttons at a touch-friendly size when stacked. */
.link-orders-management .lo-table-section .actions-col .btn {
min-height: 36px;
padding: 6px 10px;
font-size: 12px;
}
/* Status badge in its own cell — keep compact. */
.link-orders-management .lo-table-section .lo-badge {
font-size: 9.5px;
padding: 3px 8px;
letter-spacing: 0.14em;
}
/* ─────────────────────────────────────────────────────────────────────────
BULK IMPORT MODAL — reference table inside
Convert .lo-ref-table to a card-stack too. The modal scrolls vertically;
no horizontal scroll inside.
───────────────────────────────────────────────────────────────────────── */
#bulkImportModal .table-responsive {
overflow-x: hidden !important; /* override Bootstrap .table-responsive overflow-x:auto */
max-height: 50vh;
overflow-y: auto;
}
#bulkImportModal .lo-ref-table {
display: block;
width: 100%;
font-size: 12px;
}
#bulkImportModal .lo-ref-table thead {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#bulkImportModal .lo-ref-table tbody,
#bulkImportModal .lo-ref-table tr {
display: block;
width: 100%;
}
#bulkImportModal .lo-ref-table tr {
padding: 10px 12px;
margin-bottom: 8px;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper-2);
box-sizing: border-box;
}
#bulkImportModal .lo-ref-table td {
display: block;
width: auto !important;
padding: 2px 0 !important;
border: 0 !important;
font-size: 12px;
color: var(--ink-body);
background: transparent !important;
box-sizing: border-box;
white-space: normal;
word-break: break-word;
}
#bulkImportModal .lo-ref-table td:nth-child(1) { /* field name */
font-family: var(--mono, ui-monospace, monospace);
font-weight: 600;
font-size: 13px;
color: var(--ink);
margin-bottom: 4px;
}
#bulkImportModal .lo-ref-table td:nth-child(3),
#bulkImportModal .lo-ref-table td:nth-child(4) {
font-size: 11.5px;
color: var(--ink-3);
}
#bulkImportModal .lo-ref-table td:nth-child(3)::before {
content: "Format: ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
#bulkImportModal .lo-ref-table td:nth-child(4)::before {
content: "Example: ";
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ─────────────────────────────────────────────────────────────────────────
GROUP / MERGE MODAL — the add-client rows use flex with inline
flex:1 1 0 on each child, which squeezes the select past usable width
at 360px. Stack them on phones.
───────────────────────────────────────────────────────────────────────── */
#groupModal .add-client-row {
flex-direction: column;
gap: 8px;
}
#groupModal .add-client-row > .form-select,
#groupModal .add-client-row > .form-control {
width: 100% !important; /* override inline flex:1 1 0 width auto */
flex: 1 1 100% !important;
}
/* Merge orders list inside group modal — already scrolls vertically; just
make sure it doesn't introduce horizontal overflow. */
#mergeOrdersList {
overflow-x: hidden;
}
/* Group member rows (injected from JS in editLinkOrder) — stack on phones */
#companyEditGroupMembersList .group-member-row {
flex-wrap: wrap;
}
#companyEditGroupMembersList .group-member-row .group-member-anchor {
flex: 1 1 100% !important; /* override JS-inlined flex:1 1 0 */
width: 100%;
}
/* Empty-state padding on small screens */
.link-orders-management .lo-empty-state {
padding: 32px 16px;
}
/* =============================================================================
MOBILE: company/problem_clients (PR: mobile/no-horizontal-scroll)
-----------------------------------------------------------------------------
Per HANDOFF.md §4.12 (Tables → Cards) + §5 patterns (mirror All Clients /
Account Hub Ledger). The page has 2 sources of horizontal scroll:
1. .pc-table-wrap with `overflow-x: auto` → the 7-column status table
cannot fit ≤414px. We flip the table to a vertical card-stack so
the wrapper no longer needs to scroll, then override the wrapper to
overflow-x: visible.
2. 7 inline widths in the template (search input min-width:160px /
max-width:220px, manager select min-width:140px, reason cell
min-width:180px, inline padding-right on days + action cells,
inline margin-left:auto on the flag-button wrapper) that fight the
card layout. We override each with auto / 100% / margin-left:0.
The secondary table (#logHistoryBody) is already handled above as an
allowed scroll region per HANDOFF §11 (modal bodies are explicit scroll
containers).
HANDOFF mapping → template classes:
- card: padding 14px, 1px var(--rule), 10px radius, var(--paper-2)
- card title: sans 14px semibold (.client-name)
- sub-meta: 11px var(--ink-3) (.client-meta)
- eyebrow labels: sans 9.5px / 500 / 0.14em / uppercase / var(--ink-3)
injected via ::before per cell since the template has no data-label
attrs on these s.
- pills: 9.5px uppercase letter-spacing 0.14em (.stage-pill)
- score chips: 6px radius, ≥32px wide (.score-select)
- buttons: ≥36px tap target, sans 11.5px
Data hidden on mobile: none. All 7 columns surface as labeled rows in
the card. The "View N log(s)" toggle and Add Note / Resolve buttons all
continue to work via the existing JS handlers.
============================================================================= */
/* Kill the .pc-table-wrap overflow-x scroll — convert to card stack. */
.company-dashboard .status-table-wrapper.pc-table-wrap {
overflow-x: visible;
-webkit-overflow-scrolling: auto;
border: 0;
background: transparent;
border-radius: 0;
margin: 0;
}
/* Flatten the main table. Scope via `> .status-table-wrapper` so we don't
touch the embedded log-history modal table (#logHistoryBody .status-table)
which is intentionally an allowed scroll region (HANDOFF §11). */
.company-dashboard > .status-table-wrapper .status-table {
display: block;
width: 100%;
min-width: 0;
border-collapse: separate;
font-family: var(--sans);
}
/* Hide the table head — eyebrow labels go inline via ::before per cell. */
.company-dashboard > .status-table-wrapper .status-table > thead {
display: none;
}
.company-dashboard > .status-table-wrapper .status-table > tbody {
display: block;
width: 100%;
}
/* Each problem-client row becomes a card.
Grid layout:
row 1: client name + AM meta (col-client, full width)
row 2: stage pill (left) | days (right)
row 3: health (left) | results (right)
row 4: reason + view-logs toggle (full width)
row 5: actions (Add Note + Resolve) (right-aligned) */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
row-gap: 8px;
align-items: center;
padding: 12px 14px;
margin: 0 0 10px 0;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
animation: none; /* desktop has fade-in keyframes; drop on mobile */
}
/* All s lose their table widths so the grid wins.
CRITICAL (PR #15/#17/#19 lesson): when flipping to display:grid,
always pair with `width: auto !important; box-sizing: border-box` on s. */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td {
display: block;
width: auto !important; /* !important: defeats inline min-width:180px on reason cell */
min-width: 0 !important; /* !important: defeats inline min-width on reason cell */
max-width: 100%;
box-sizing: border-box;
padding: 0;
border: 0;
background: transparent;
white-space: normal;
text-align: left; /* defeats inline text-align:center/right on days + actions */
vertical-align: top;
}
/* ── Row 1: client name + AM (full width) ─────────────────────────────── */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-client {
grid-column: 1 / -1;
grid-row: 1;
}
.company-dashboard > .status-table-wrapper .status-table .client-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.company-dashboard > .status-table-wrapper .status-table .client-cell .client-name {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
word-break: break-word;
}
.company-dashboard > .status-table-wrapper .status-table .client-cell .client-meta {
font-size: 11px;
line-height: 1.3;
color: var(--ink-3) !important; /* !important: page CSS sets var(--ink-faint) with !important */
}
/* ── Row 2: stage pill (left) + days-open (right) ─────────────────────── */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-stage {
grid-column: 1 / 2;
grid-row: 2;
justify-self: start;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-stage .stage-pill {
font-size: 9.5px;
letter-spacing: 0.14em;
padding: 3px 8px;
}
/* The 6th cell (Days) has no class — it's the only un-classed with
text-align:center inline. Target by position: 6th-of-type (after col-client,
col-stage, col-health, col-results, reason). */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(6) {
grid-column: 2 / 3;
grid-row: 2;
justify-self: end;
align-self: center;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(6)::before {
content: "Days open";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
text-align: right;
}
/* ── Row 3: Health + Results (eyebrow-labeled score chips) ────────────── */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-health {
grid-column: 1 / 2;
grid-row: 3;
justify-self: start;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-results {
grid-column: 2 / 3;
grid-row: 3;
justify-self: end;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-health::before,
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-results::before {
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-health::before {
content: "Health";
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td.col-results::before {
content: "Results";
text-align: right;
}
/* Score select chips: compact, 6px radius per HANDOFF §3.4 / §4.7 */
.company-dashboard > .status-table-wrapper .status-table .score-select {
font-size: 12px;
padding: 3px 8px;
border-radius: 6px;
min-width: 32px;
}
/* ── Row 4: Reason text + view-logs toggle (full width) ───────────────── */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(5) {
grid-column: 1 / -1;
grid-row: 4;
font-size: 13px;
color: var(--ink-body);
line-height: 1.4;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(5)::before {
content: "Reason";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(5) > div {
font-size: 13px;
line-height: 1.4;
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(5) > button {
font-size: 11px;
margin-top: 4px;
min-height: 32px;
padding: 4px 0;
}
/* ── Row 5: Actions (Add Note + Resolve OR "Resolved" label) ──────────── */
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(7) {
grid-column: 1 / -1;
grid-row: 5;
display: flex !important; /* !important: overrides display:block default applied above */
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
padding-right: 0 !important; /* !important: defeats inline padding-right:1rem */
white-space: normal !important; /* !important: defeats inline white-space:nowrap */
}
.company-dashboard > .status-table-wrapper .status-table > tbody > tr > td:nth-of-type(7) > button {
min-height: 36px;
padding: 8px 14px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 6px;
margin: 0; /* gap handles spacing */
}
/* ── pc-header: tighten on phones ─────────────────────────────────────── */
.company-dashboard .pc-header {
margin-bottom: 16px;
padding-bottom: 14px;
}
.company-dashboard .pc-header h1 {
font-family: var(--serif);
font-size: 28px;
line-height: 1.1;
}
.company-dashboard .pc-header p {
font-size: 13px;
color: var(--ink-3);
}
/* ── pc-stat-grid: 2×2 on phones (template @media already triggers but
reinforce with editorial tokens — drop the radial-gradient + inset
shadow per HANDOFF §4.5 flat-cards rule). ──────────────────────── */
.company-dashboard .pc-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.company-dashboard .pc-stat-card {
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 12px;
box-shadow: none; /* drop inset gold glow on mobile */
animation: none; /* drop scaleIn keyframes on mobile */
}
.company-dashboard .pc-stat-card.pc-danger {
border-left: 3px solid var(--accent);
}
.company-dashboard .pc-stat-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
color: var(--ink-3);
margin-bottom: 4px;
}
.company-dashboard .pc-stat-value {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
color: var(--ink);
}
/* ── pc-toolbar: stack the controls; defeat the inline widths ─────────── */
.company-dashboard .pc-toolbar {
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 12px;
animation: none;
}
/* Search input: full-width on phones (defeats inline min-width:160px /
max-width:220px). */
.company-dashboard .pc-toolbar #searchInput {
flex: 1 1 100% !important; /* !important: defeats inline min-width/max-width on the element */
min-width: 0 !important;
max-width: 100% !important;
min-height: 40px;
}
/* Manager select: half-width (defeats inline width:auto;min-width:140px). */
.company-dashboard .pc-toolbar #filterManager {
flex: 1 1 140px !important;
width: auto !important;
min-height: 40px;
}
/* Show-resolved switch keeps its natural width */
.company-dashboard .pc-toolbar .form-check.form-switch {
flex: 1 1 auto;
}
/* Flag-client button wrapper: defeat inline margin-left:auto so it wraps
to its own line cleanly */
.company-dashboard .pc-toolbar > div[style*="margin-left"] {
margin-left: 0 !important; /* !important: defeats inline margin-left:auto */
flex: 1 1 100%;
}
.company-dashboard .pc-toolbar > div[style*="margin-left"] .btn {
width: 100%;
min-height: 44px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 6px !important; /* !important: page CSS sets 16px with !important */
}
/* ── Empty state: tighter padding on phones ───────────────────────────── */
.company-dashboard .pc-empty {
padding: 40px 16px;
}
.company-dashboard .pc-empty h5 {
font-size: 20px;
}
/* =============================================================================
MOBILE: company/activities (PR: mobile/no-horizontal-scroll)
-----------------------------------------------------------------------------
Per HANDOFF.md §5 (per-page card-stack pattern) and §11 (no overflow-x:auto
on page content). Activity Hub is the dashboard's worst inline-width offender
(~57 fixed widths across 3 action-item tables + the comm-item rows + a 3-pane
layout). Prior work already:
· flattened .ah-layout to single-column
· hid .ah-sidebar at ≤767
· converted .comm-item rows to card-stack grids
· card-stacked the 3 #actionItemsPanel tables
· made the channel-tabs strip horizontally scrollable (§11 exception)
This round mops up the remaining 360px overflow sources that those rules
didn't catch: the Activity-Hub page header (justify-content:space-between
with no wrap), the toolbar's margin-left:auto right cluster, the bulk-bar
right cluster, the assign-detail select (width:200px), the recording audio
(min-width:200px), and the two detail-panel info columns (min-width:180px).
CRITICAL: any selector that touches a row flipped to display:grid (or its
td/div children) re-asserts width:auto !important; min-width:0; max-width:
100% to defeat the inline width declarations on the template. (See PR #15/
#17/#19 lesson — display:grid alone does not neutralise inline widths.)
============================================================================= */
/* ── Page header strip (line 151 of template) — desktop sets
display:flex; align-items:center; justify-content:space-between with no
wrap, so on a 360px viewport the Gmail-sync chip + button get pushed off
the right edge. Allow wrap and set gap. Selector targets the first child
div under the page wrapper that carries the bottom border + space-between. */
.am-dashboard.company-dashboard > div[style*="border-bottom"][style*="space-between"] {
flex-wrap: wrap;
gap: 10px;
padding-bottom: 12px !important; /* override inline 1rem (16px) */
margin-bottom: 12px !important;
}
.am-dashboard.company-dashboard > div[style*="border-bottom"][style*="space-between"] > div {
min-width: 0;
max-width: 100%;
}
/* Title within that header — keep readable at narrow widths, drop the
desktop letter-spacing -0.02em crunch. */
.am-dashboard.company-dashboard > div[style*="border-bottom"][style*="space-between"] h1.nx-section-heading {
font-size: 24px !important; /* desktop is 2rem (32px) */
line-height: 1.15 !important;
letter-spacing: -0.01em !important;
}
.am-dashboard.company-dashboard > div[style*="border-bottom"][style*="space-between"] p {
font-size: 13px !important;
}
/* Gmail sync cluster — let it flow under the title block, full width */
.am-dashboard.company-dashboard > div[style*="border-bottom"][style*="space-between"] > div[style*="gap:0.75rem"] {
width: 100%;
flex-wrap: wrap;
gap: 8px !important;
}
#gmail-sync-btn {
min-height: 36px;
font-size: 12px !important;
}
/* ── Toolbar (line 242) — right-cluster with margin-left:auto can stay
inline on tablet widths but at ≤480 should flow to its own row, full
width. The existing rule (.ah-main > div[style*="padding: 8px 20px"])
already pads + gaps the parent; this rule targets the inner cluster. */
.ah-main > div[style*="padding: 8px 20px"] > div[style*="margin-left: auto"] {
margin-left: 0 !important; /* desktop margin-left: auto */
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
}
.ah-main > div[style*="padding: 8px 20px"] > div[style*="margin-left: auto"] > button {
min-height: 36px;
min-width: 36px;
}
/* The client-filter chip — ensure long client names ellipsis */
#ahClientLabel {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Bulk-bar inner right cluster (line 268) — parent already wraps via
earlier rule, but the margin-left:auto on this child sticks. Reset. */
.bulk-bar > div[style*="margin-left: auto"] {
margin-left: 0 !important;
width: 100%;
justify-content: flex-end;
}
.bulk-bar button {
min-height: 36px;
}
/* ── Detail panel: "Assign to client" row (line 458–467) appears for any
comm whose thread.client_id is null. The select has inline width:200px
which collides with the visible button on a 360px viewport. Stack to
a full-width column. */
.comm-detail > div[style*="padding-top: 1.5rem"] > div[style*="align-items: center"] {
flex-wrap: wrap;
gap: 8px !important;
}
.comm-detail select[id^="assign-detail-"] {
width: 100% !important; /* override inline width: 200px */
min-height: 40px;
font-size: 13px !important;
}
.comm-detail > div[style*="padding-top: 1.5rem"] button {
min-height: 40px;
width: 100%; /* button below the select */
}
/* ── Detail panel: single-comm details (line 400) — two columns each with
inline flex:1; min-width:180px; on a 360px viewport (≈332px usable
inside the detail) two 180px cols don't fit so flex-wrap kicks in, but
the inner grid (line 405) `auto 1fr` can still blow out with long phone
numbers. Stack to one column + force word-break. */
.comm-detail > div[style*="gap: 20px"] {
gap: 12px !important;
flex-direction: column;
}
.comm-detail > div[style*="gap: 20px"] > div[style*="min-width: 180px"] {
min-width: 0 !important; /* override inline min-width: 180px */
max-width: 100% !important;
width: 100%;
}
.comm-detail > div[style*="gap: 20px"] > div[style*="min-width: 180px"] > div[style*="grid-template-columns"] {
word-break: break-word;
overflow-wrap: anywhere;
}
/* ── Detail panel: recording row (line 429) — audio has inline
min-width:200px which pushes the "Open" button off-screen at 360px when
combined with internal audio controls. Allow audio full width + button
wraps below. */
.comm-detail > div[style*="margin-bottom: 14px"] > div[style*="flex-wrap: wrap"] {
gap: 8px !important;
}
.comm-detail audio[controls] {
min-width: 0 !important; /* override inline min-width: 200px */
max-width: 100% !important;
width: 100% !important;
flex: 1 1 100% !important;
}
.comm-detail audio[controls] + a.btn {
width: 100%;
min-height: 40px;
}
/* ── Thread message detail (line 374) — tighten padding so each bordered
sub-card fits at 360px. */
.comm-detail > div[style*="padding-top: 14px"] > div[style*="border-left"] {
padding: 10px 12px !important;
}
/* ── Text-bubble MMS images (line 354) — never overflow the bubble */
.text-bubble img {
max-width: 100% !important; /* override inline max-width: 200px */
height: auto !important;
}
.text-bubble a[href][target="_blank"] {
max-width: 100%;
}
/* ── Comm action-item card inside detail (line 444) — wrap so the priority
pill on the right never gets pushed beyond viewport. */
.comm-action-item {
flex-wrap: wrap;
padding: 10px 12px !important;
gap: 6px !important;
}
.comm-action-item > div[style*="flex: 1"] {
flex: 1 1 100%;
min-width: 0;
}
/* ── Action-Items panel (#actionItemsPanel) — existing rules already
card-stack the 3 tables. Add belt-and-suspenders so any tr/td that still
carries inline width or long client names doesn't reintroduce overflow. */
#actionItemsPanel .opt-table tbody tr,
#actionItemsPanel .opt-table tbody tr > td {
max-width: 100%;
box-sizing: border-box;
}
#actionItemsPanel .opt-table tbody tr > td > div,
#actionItemsPanel .opt-table tbody tr > td > span {
max-width: 100%;
word-break: break-word;
overflow-wrap: anywhere;
}
/* In-Progress + Completed tables don't have an action-buttons cell; the
"Done" button (line 597) still needs a tap target. */
#actionItemsPanel .opt-table tbody tr > td .btn-primary-opt,
#actionItemsPanel .opt-table tbody tr > td .btn-secondary-opt,
#actionItemsPanel .opt-table tbody tr > td .btn-danger-opt {
min-height: 36px;
padding: 6px 10px !important; /* override inline padding: 4px 8px */
}
/* ── cc-panel headers within the action-items panel — at narrow widths
the title + badge + chevron crowd. Allow wrap. */
#actionItemsPanel .cc-panel-header {
flex-wrap: wrap;
gap: 6px;
}
#actionItemsPanel .cc-panel-header h3 {
font-size: 14px;
margin: 0;
}
/* ── Global safety net: the .am-dashboard.company-dashboard wrapper should
never produce horizontal scroll. Anything that slips past the rules
above gets clipped at the page wrapper. */
.am-dashboard.company-dashboard {
max-width: 100%;
overflow-x: hidden;
}
/* =============================================================================
MOBILE: account_managers/detail (PR: mobile/no-horizontal-scroll)
-----------------------------------------------------------------------------
Per HANDOFF.md §5.7 — Manager detail: breadcrumb, header (avatar lg + serif
name + email/location), date-range + Edit, 4 hero stats (2×2), secondary
stats grid, filter row, client list as cards.
The detail page's is wrapped by .am-clients-section, so
the existing card-stack rules (lines ~2892–3120) already convert rows to
cards on mobile. BUT the AM-detail template's s have no `data-label`
attribute, so those rules' `td[data-label]::before` labels don't render.
This section adds explicit labels via :nth-child + ::before so the
compact 3-col grid (Stage / Health / Results, then Tenure / MRR) reads
correctly for AMs reviewing portfolios on the go.
Also kills horizontal scroll sources unique to this page:
- breadcrumb (3 items) wraps
- .am-profile h1 has inline font-size:2rem — shrink to serif 28px
- .am-hero-grid + .am-secondary-grid: tighten the 2-col fallback
- .clients-filter-bar: chip-row look
- All inline font-size 0.7rem / 0.78rem on s + flex/grid contents
get overridden with strict spacing-scale values.
Per CRITICAL LESSON (PRs #15/#17/#19): when flipping to display:grid,
pair with `width: auto !important` + `box-sizing: border-box` on the s.
============================================================================= */
/* ── Breadcrumb: wrap, uppercase small-caps per HANDOFF §2 labels ─────── */
.am-dashboard > nav[aria-label="breadcrumb"] {
margin-bottom: 12px;
}
.am-dashboard .breadcrumb {
flex-wrap: wrap;
gap: 4px 6px;
margin: 0;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.am-dashboard .breadcrumb-item,
.am-dashboard .breadcrumb-item a {
font-size: 10.5px;
color: var(--ink-3);
}
.am-dashboard .breadcrumb-item.active {
color: var(--ink);
}
/* ── Header: stacked profile, name shrinks to fit, contact wraps ──────── */
/* The base .am-dashboard > .am-header rule (line ~1133) already sets
flex-direction: column; this just refines the inner profile + name. */
.am-dashboard .am-header .am-profile {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.am-dashboard .am-header .am-avatar,
.am-dashboard .am-header .am-avatar-placeholder {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 999px;
object-fit: cover;
}
.am-dashboard .am-header .am-info {
flex: 1 1 auto;
min-width: 0;
}
/* Override the inline font-size:2rem on the manager name — serif 28px per
HANDOFF §2 (h-page acceptable mobile scale). Inline style needs
!important to win specificity vs inline `style=""`. */
.am-dashboard .am-header .am-info h1 {
font-family: var(--serif) !important;
font-size: 28px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
word-break: break-word;
}
.am-dashboard .am-header .am-contact {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin-top: 6px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
}
.am-dashboard .am-header .am-contact a,
.am-dashboard .am-header .am-contact span {
font-size: 12px;
word-break: break-word;
}
/* ── Actions row (date picker + Edit + dashboard links): full-width column,
date-picker must shrink. The base .am-actions rule already makes buttons
full-width; this just makes sure the date-range-picker wrapper does too. */
.am-dashboard .am-header .am-actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.am-dashboard .am-header .am-actions > * {
width: 100%;
max-width: 100%;
min-width: 0;
}
.am-dashboard .am-header .am-actions .date-range-picker,
.am-dashboard .am-header .am-actions .date-range-picker > * {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ── Hero KPI grid: force 2×2 on phones per HANDOFF §5.7 ──────────────── */
/* The template's inline @media (max-width:768px) sets 2 cols; the inline
@media (max-width:576px) collapses to 1 col. Force 2-col across the
whole mobile breakpoint so the 4 hero stats read as a 2×2 block, even
on 360px phones. !important needed to beat the inline-style block's
grid-template-columns !important on .am-hero-grid. */
.am-dashboard .am-hero-section {
margin-bottom: 16px;
}
.am-dashboard .am-hero-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100%;
max-width: 100%;
min-width: 0;
}
.am-dashboard .am-hero-card {
padding: 12px !important;
min-width: 0;
border-radius: 10px !important;
gap: 8px;
box-sizing: border-box;
}
.am-dashboard .am-hero-card .am-hero-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
font-size: 14px;
}
.am-dashboard .am-hero-card .am-hero-content {
min-width: 0;
flex: 1 1 auto;
}
.am-dashboard .am-hero-card .am-hero-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.am-dashboard .am-hero-card .am-hero-value {
font-family: var(--serif) !important;
font-size: 24px !important;
font-weight: 500 !important;
line-height: 1.1 !important;
color: var(--ink) !important;
word-break: break-word;
}
.am-dashboard .am-hero-card .am-hero-max {
font-size: 13px;
color: var(--ink-3);
}
/* Inline style="font-size:0.7rem" on .am-hero-subtext (Active Clients card
breakdown line) needs override to land on spacing scale. */
.am-dashboard .am-hero-card .am-hero-subtext {
font-family: var(--sans);
font-size: 11px !important; /* override inline font-size:0.7rem */
color: var(--ink-3) !important;
margin-top: 4px !important;
white-space: normal;
word-break: break-word;
}
.am-dashboard .am-hero-card .health-mini-dist {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.am-dashboard .am-hero-card .health-mini,
.am-dashboard .am-hero-card .results-mini {
font-size: 9.5px;
padding: 1px 6px;
letter-spacing: 0.06em;
}
/* ── Secondary KPI grid: 2-col on phones, override template's 1-col
fallback at 576px so 7 cards stay as a 2-col block (last card spans 1
track and leaves one empty cell at the end — acceptable). */
.am-dashboard .am-secondary-section {
margin-bottom: 16px;
}
.am-dashboard .am-secondary-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100%;
max-width: 100%;
min-width: 0;
}
.am-dashboard .am-secondary-card {
padding: 10px 12px !important;
min-width: 0;
border-radius: 10px !important;
box-sizing: border-box;
}
.am-dashboard .am-secondary-card .am-secondary-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 6px;
min-width: 0;
}
.am-dashboard .am-secondary-card .am-secondary-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.am-dashboard .am-secondary-card .am-secondary-value {
font-family: var(--serif) !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.15 !important;
color: var(--ink) !important;
word-break: break-word;
}
.am-dashboard .am-secondary-card .am-secondary-detail {
font-family: var(--sans);
font-size: 11px !important; /* override inline font-size:0.7rem */
color: var(--ink-3) !important;
margin-top: 2px;
line-height: 1.3;
word-break: break-word;
}
.am-dashboard .am-secondary-card .stage-bar {
height: 4px;
border-radius: 999px;
background: var(--paper-3);
overflow: hidden;
}
.am-dashboard .am-secondary-card .stage-bar .stage-fill {
height: 100%;
}
.am-dashboard .am-secondary-card .stage-badge {
font-size: 9.5px;
padding: 1px 6px;
letter-spacing: 0.06em;
flex-shrink: 0;
}
/* Hover arrow on clickable cards — hide on touch so it doesn't take space */
.am-dashboard .am-secondary-card .am-card-arrow {
display: none;
}
/* Inline-styled next to
"Time To Results" label — keep it inline-block and tiny. */
.am-dashboard .am-secondary-card .am-secondary-label .bi-info-circle {
font-size: 10px !important;
}
/* ── Filter bar: stack label+select pairs in a 2-col wrap, count chip at end ─ */
.am-dashboard .clients-filter-bar {
margin-bottom: 12px;
padding: 10px 12px !important;
border-radius: 10px !important;
}
.am-dashboard .clients-filter-form {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: flex-end;
}
.am-dashboard .clients-filter-group {
flex: 1 1 calc(50% - 4px);
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.am-dashboard .clients-filter-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.am-dashboard .clients-filter-select {
width: 100%;
min-height: 36px;
padding: 6px 10px !important;
font-family: var(--sans);
font-size: 13px !important;
border-radius: 6px !important;
box-sizing: border-box;
}
.am-dashboard .clients-filter-count {
flex: 1 1 100%;
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
text-align: right;
margin-top: 2px;
}
/* ── Clients section: tighten section margin + kill stray overflow ───── */
.am-dashboard .am-clients-section {
margin-bottom: 16px;
max-width: 100%;
min-width: 0;
}
.am-dashboard .am-clients-section .status-table-wrapper {
border-radius: 10px !important;
background: transparent !important; /* desktop tints wrapper, mobile uses per-card surface */
border: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* ── Inject data-labels onto AM-detail s via :nth-child ──────────────
The shared .am-clients-section card-stack rules at lines ~2892–3120 use
td[data-label]::before. AM-detail's template doesn't set data-label, so
we synthesise per-cell labels by column position.
Column order in AM-detail table (matches order):
1. Client (.col-client — full row, no label needed)
2. Stage (.col-stage)
3. Health (.col-health)
4. Results (.col-results)
5. Tenure (no class, inline text-align:center)
6. MRR (admin only, no class)
Use class selectors for cols 1–4 and :nth-child(N) for cols 5–6 since
Tenure/MRR have no class. .col-client is always nth-child(1). */
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-stage::before {
content: "Stage";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
line-height: 1.2;
}
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-health::before {
content: "Health";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
line-height: 1.2;
}
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-results::before {
content: "Results";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
line-height: 1.2;
}
/* Tenure = 5th child (1=client, 2=stage, 3=health, 4=results, 5=tenure) */
.am-dashboard .am-clients-section .status-table tr.client-row > td:nth-child(5)::before {
content: "Tenure";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
line-height: 1.2;
}
/* MRR = 6th child (admin only) */
.am-dashboard .am-clients-section .status-table tr.client-row > td:nth-child(6)::before {
content: "MRR";
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
line-height: 1.2;
}
/* Card layout: 3-col grid identical to All Clients pattern (lines ~2999+).
The shared rule already does this BUT was scoped via [data-label]
checks in places. Re-assert grid + cell width:auto here as defensive
belt-and-braces per the CRITICAL LESSON from PRs #15/#17/#19:
when flipping to display:grid, ALWAYS pair with
`width: auto !important; box-sizing: border-box` on the s. */
.am-dashboard .am-clients-section .status-table tr.client-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
column-gap: 8px !important;
row-gap: 8px !important;
padding: 10px 12px !important;
align-items: start;
background: var(--paper-2) !important;
border: 1px solid var(--rule) !important;
border-radius: 10px !important;
margin-bottom: 8px !important;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
.am-dashboard .am-clients-section .status-table tr.client-row > td {
width: auto !important; /* CRITICAL: pair grid with width:auto */
box-sizing: border-box !important;
padding: 0 !important;
min-width: 0 !important;
max-width: 100% !important;
text-align: left !important; /* override inline style="text-align:center" on Health/Results/Tenure */
overflow: hidden;
}
/* Client cell = full-width header */
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-client {
grid-column: 1 / -1;
margin-bottom: 2px;
font-size: inherit !important;
}
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-client::before {
display: none !important;
}
.am-dashboard .am-clients-section .status-table tr.client-row .client-cell {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.am-dashboard .am-clients-section .status-table tr.client-row .client-name {
font-family: var(--sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ink) !important;
line-height: 1.25;
word-break: break-word;
}
.am-dashboard .am-clients-section .status-table tr.client-row .client-meta {
font-family: var(--sans);
font-size: 11px;
color: var(--ink-3);
line-height: 1.3;
word-break: break-word;
}
/* Value text on the 5 metric cells. Templates inline style="font-size:0.78rem"
on Tenure + MRR — override to land on spacing scale (13px). */
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-stage,
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-health,
.am-dashboard .am-clients-section .status-table tr.client-row > td.col-results,
.am-dashboard .am-clients-section .status-table tr.client-row > td:nth-child(5),
.am-dashboard .am-clients-section .status-table tr.client-row > td:nth-child(6) {
font-family: var(--sans) !important;
font-size: 13px !important; /* override inline style="font-size:0.78rem" */
font-weight: 500 !important;
color: var(--ink-body) !important; /* override inline color: var(--ink-muted) */
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Score dots — keep compact pill height. The base .score-dot rules at
lines ~168+ already set the colour palette; just constrain size here. */
.am-dashboard .am-clients-section .status-table tr.client-row .score-dot {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
padding: 0 6px;
font-size: 12px;
font-weight: 600;
}
/* Stage pill — compact, no wrap */
.am-dashboard .am-clients-section .status-table tr.client-row .stage-pill {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
font-size: 9.5px;
padding: 2px 8px;
}
/* Empty state: keep editorial. */
.am-dashboard .empty-state {
text-align: center;
padding: 32px 16px;
}
.am-dashboard .empty-state .display-1 {
font-size: 48px;
color: var(--ink-3);
}
.am-dashboard .empty-state h4 {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
margin: 12px 0 6px;
color: var(--ink);
}
.am-dashboard .empty-state p {
font-family: var(--sans);
font-size: 14px;
color: var(--ink-3);
margin: 0;
}
/* Global page wrapper guard — the .am-dashboard root has no inline padding,
so make sure nothing inside it can push the viewport wider. */
.am-dashboard {
max-width: 100%;
min-width: 0;
overflow-x: hidden;
}
/* =============================================================================
MOBILE: clients/gsc_report (PR: mobile/gsc-report)
-----------------------------------------------------------------------------
Per HANDOFF.md §5 (per-page card-stack pattern) + §11 (no horizontal scroll
on body content). Google Search Console report has 5 data tables + 4 chart
widgets + 4 KPI tiles + a 6-control filter bar. Desktop ships
`.gsc-table { min-width: 600px }` inside `.gsc-table-wrapper { overflow-x: auto }`
which forces sideways scrolling at 360px on every row. Pattern matches the
All Clients (`clients/index.html`) + GA4 report passes:
- filter bar -> single-column stack, 44px tap targets
- KPI grid -> 2x2 (desktop forces 1 col which makes tall stacks)
- widget rows -> single column stack, charts capped at 260px
- donut sub-tables (Ranking, Device) -> compact in-flow tables
- big tables (Country, Keywords, Pages) -> card-stack:
row 1 = full-width query/page/country title
row 2 = 2x2 grid of Impressions/Clicks/CTR/Position with ::before labels
Template does NOT extend `.results-page`, so the earlier
`.results-page .gsc-*` rules above don't apply — these target `.gsc-report`.
PR #15/#17/#19 lesson applied: every tr-as-grid pairs with
`td { width: auto !important; box-sizing: border-box }` so cells don't
inherit the desktop min-width: 600px from .gsc-table.
No data hidden on mobile — all 5 tables, all 4 charts, all 4 KPIs render.
Heatmap rgba backgrounds on metric tds (set inline by JS) are preserved.
============================================================================= */
/* -- Page wrapper: belt-and-braces no horizontal overflow ---------------- */
.gsc-report {
max-width: 100%;
overflow-x: hidden;
padding: 12px 14px;
}
/* -- Header: title + back button stack column --------------------------- */
.gsc-report .gsc-report-header {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-bottom: 12px;
}
.gsc-report .gsc-report-header .breadcrumb {
font-size: 12px;
margin-bottom: 6px !important; /* override Bootstrap's mb-2 inline class */
}
.gsc-report .gsc-title {
font-family: var(--serif);
font-weight: 500;
font-size: 24px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.gsc-report .gsc-subtitle {
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
margin: 4px 0 0;
overflow-wrap: anywhere; /* GSC property URLs are long */
}
.gsc-report .gsc-header-right .btn {
width: 100%;
min-height: 44px;
}
/* -- Filter bar: column-stack, full-width 44px tap targets -------------- */
.gsc-report .gsc-filter-bar {
padding: 12px;
border-radius: 10px;
margin-bottom: 12px;
}
.gsc-report .gsc-filters-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.gsc-report .gsc-filter-group {
width: 100%;
min-width: 0;
}
.gsc-report .gsc-filter-group > label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.gsc-report .gsc-filter-group .form-select,
.gsc-report .gsc-filter-group .form-control,
.gsc-report .gsc-filter-group select,
.gsc-report .gsc-filter-group input,
.gsc-report .gsc-filter-group .btn {
width: 100%;
min-height: 44px;
font-size: 14px;
}
/* Apply Filters group: the " " spacer label is noise once stacked */
.gsc-report .gsc-apply-group > label {
display: none;
}
.gsc-report .gsc-apply-group .btn {
font-family: var(--sans);
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* -- KPI grid: 2x2 (desktop's <768 rule sets 1 col -> 4 tall tiles) ----- */
.gsc-report .gsc-kpi-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.gsc-report .gsc-kpi-tile,
.gsc-report .gsc-kpi-tile.gsc-kpi-large,
.gsc-report .gsc-kpi-tile.gsc-kpi-dark {
padding: 12px;
border-radius: 10px;
background: var(--paper-2);
border: 1px solid var(--rule);
box-shadow: none;
min-width: 0;
}
/* The dark variant preserves its desktop background via .gsc-kpi-dark::before
overlay; we just match radius/padding above. */
.gsc-report .gsc-kpi-value,
.gsc-report .gsc-kpi-tile.gsc-kpi-large .gsc-kpi-value {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
}
.gsc-report .gsc-kpi-label {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gsc-report .gsc-kpi-delta {
font-family: var(--sans);
font-size: 10px;
margin-top: 2px;
}
/* -- Rows: single-column stack, kill any leftover grid columns --------- */
.gsc-report .gsc-row,
.gsc-report .gsc-row-hero,
.gsc-report .gsc-row-full {
display: block;
grid-template-columns: none;
margin-bottom: 12px;
}
/* -- Widget container --------------------------------------------------- */
.gsc-report .gsc-widget {
border-radius: 10px;
margin-bottom: 12px;
box-shadow: none;
min-width: 0;
}
.gsc-report .gsc-widget-header {
padding: 12px 14px;
flex-wrap: wrap;
gap: 8px;
}
.gsc-report .gsc-widget-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
}
/* Per-widget search box (Keyword Performance, Landing Page Performance) --
drops below the title to its own line at 44px tap height. */
.gsc-report .gsc-widget-search {
width: 100%;
}
.gsc-report .gsc-widget-search input {
width: 100%;
min-height: 44px;
font-size: 14px;
}
.gsc-report .gsc-widget-body {
padding: 12px 14px;
}
/* -- Chart canvases: cap height, force responsive width ---------------- */
.gsc-report .gsc-widget-body canvas {
max-width: 100% !important; /* override Chart.js inline width attr */
height: auto !important; /* let Chart.js maintain aspect ratio */
max-height: 260px;
}
/* Donut charts (Ranking, Device) -- fixed square, smaller on mobile */
.gsc-report .gsc-ranking-chart,
.gsc-report .gsc-device-chart {
width: 140px;
height: 140px;
margin: 0 auto;
}
.gsc-report .gsc-ranking-chart canvas,
.gsc-report .gsc-device-chart canvas {
max-height: 140px;
}
/* -- Ranking / Device content: stack donut over mini-table ------------- */
.gsc-report .gsc-ranking-content,
.gsc-report .gsc-device-content {
display: flex !important; /* override desktop grid-template at <768 */
flex-direction: column;
gap: 12px;
}
.gsc-report .gsc-ranking-table,
.gsc-report .gsc-device-table {
width: 100%;
overflow-x: hidden;
}
/* -- Mini tables (Ranking, Device): keep tabular, just tighten --------- */
.gsc-report .gsc-table-mini {
width: 100%;
min-width: 0;
font-size: 12px;
table-layout: fixed;
}
.gsc-report .gsc-table-mini th,
.gsc-report .gsc-table-mini td {
padding: 8px 6px;
word-break: break-word;
}
.gsc-report .gsc-table-mini th {
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
/* -- Big tables (Country, Keywords, Pages): card-stack mode ------------ */
/* 1. Cancel desktop's scroll wrapper / height cap. */
.gsc-report .gsc-table-wrapper,
.gsc-report .gsc-country-content {
max-height: none;
overflow-x: hidden;
overflow-y: visible;
border: 0;
}
/* 2. Table itself becomes a block; kill min-width: 600px. */
.gsc-report .gsc-country-content > .gsc-table,
.gsc-report .gsc-table-wrapper > .gsc-table {
display: block;
width: 100%;
min-width: 0;
font-size: 13px;
border-collapse: separate;
}
/* 3. Hide thead (labels move to ::before on each metric cell). */
.gsc-report .gsc-country-content > .gsc-table > thead,
.gsc-report .gsc-table-wrapper > .gsc-table > thead {
display: none;
}
.gsc-report .gsc-country-content > .gsc-table > tbody,
.gsc-report .gsc-table-wrapper > .gsc-table > tbody {
display: block;
width: 100%;
}
/* 4. Each row -> card. Title cell spans both columns; 4 metric cells form
a 2x2 grid beneath it. */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr,
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 8px;
row-gap: 8px;
padding: 12px;
margin: 0 0 8px 0;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: 10px;
}
/* Cancel zebra striping so even rows don't override the card background. */
.gsc-report .gsc-table-striped > tbody > tr:nth-child(even) {
background: var(--paper-2);
}
/* 5. CRITICAL (PR #15/#17/#19 lesson): td must reset width + box-sizing or
grid items inherit the desktop min-width: 600px from .gsc-table and
re-trigger horizontal scroll. */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td,
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td {
display: block;
width: auto !important; /* break inherited min-width: 600px */
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding: 0 !important; /* grid gap handles spacing */
border: 0;
text-align: left !important; /* override .text-end so labels align with values */
font-family: var(--sans);
font-size: 12px;
line-height: 1.3;
color: var(--ink-body);
overflow: hidden;
}
/* 6. First cell = card title (Query / Page / Country). Spans both cols. */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:first-child,
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:first-child {
grid-column: 1 / -1;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
white-space: normal;
overflow: visible;
overflow-wrap: anywhere; /* break long URLs / queries */
text-overflow: clip;
padding-bottom: 4px !important;
border-bottom: 1px dotted var(--rule);
}
/* 7. Metric cells (cols 2-5): label-above-value via ::before */
/* Keywords + Pages tables (in .gsc-table-wrapper): cols = Query|Imp|Clk|CTR|Pos */
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(2)::before {
content: "Impressions";
}
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(3)::before {
content: "Clicks";
}
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(4)::before {
content: "CTR";
}
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(5)::before {
content: "Position";
}
/* Country table (in .gsc-country-content): cols = Country|Imp|Clk|CTR|Pos */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(2)::before {
content: "Impressions";
}
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(3)::before {
content: "Clicks";
}
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(4)::before {
content: "CTR";
}
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(5)::before {
content: "Position";
}
/* Shared label styling */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(n+2)::before,
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(n+2)::before {
display: block;
font-family: var(--sans);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 2px;
line-height: 1.2;
}
/* Metric value styling -- sans 14px, padded so heatmap rgba bg has breathing room */
.gsc-report .gsc-country-content > .gsc-table > tbody > tr > td:nth-child(n+2),
.gsc-report .gsc-table-wrapper > .gsc-table > tbody > tr > td:nth-child(n+2) {
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
color: var(--ink);
padding: 6px 8px !important; /* breathing room around inline rgba heatmap bg */
border-radius: 6px;
}
/* 8. Unbind the desktop ellipsis caps on .gsc-cell-query / .gsc-cell-url
(max-width: 280px; white-space: nowrap) so query/URL text wraps. */
.gsc-report .gsc-cell-query,
.gsc-report .gsc-cell-url,
.gsc-report .gsc-cell-page {
max-width: 100%;
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
word-break: break-word;
}
.gsc-report .gsc-cell-url,
.gsc-report .gsc-cell-page {
font-size: 12px;
}
/* 9. Color dot + country flag inline markers -- preserve. */
.gsc-report .gsc-color-dot {
flex-shrink: 0;
margin-right: 6px;
vertical-align: middle;
}
.gsc-report .gsc-country-flag {
flex-shrink: 0;
margin-right: 6px;
vertical-align: middle;
}
/* -- Misc states -------------------------------------------------------- */
.gsc-report .gsc-global-error {
font-size: 12px;
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.gsc-report .gsc-widget-loading,
.gsc-report .gsc-widget-empty,
.gsc-report .gsc-widget-error {
font-size: 13px;
padding: 20px 12px;
}
/* =============================================================================
MOBILE: /company/subscriptions
-----------------------------------------------------------------------------
Per HANDOFF.md §4.10 (cards) / §4.12 (tables → card stacks) / §5 (no horiz
scroll on page content). Template uses .am-dashboard.company-dashboard wrap,
which already inherits a generic card-stack pattern intended for the page's
sister templates (account_hub, content/performance). Those generic rules
inject WRONG labels onto #subTable cells (Writers / Total Pages / etc. from
L6506 "anonymous" CM Team Performance rule, and zero-content data-label
eyebrows from L5312 because mobile-tables.js never tags #subTable — it has
no data-mobile="cards" attribute).
This block:
· Re-scopes the card-stack layout to #subTable with ID-specificity so the
bleeding cell-label content from L5312 / L6506 is overridden.
· Provides correct positional labels for cols 2-9 (Type / Amount / Billing
/ Monthly / Start / End / Status / Notes).
· Promotes col 1 (Name) to card title; col 10 (Actions) to a full-width
button row.
· Hides the tfoot totals row — value already in the Monthly Cost hero KPI.
· Keeps the bulk-import modal Field Reference inner table scrollable
(modal scroll is preserved by the existing L6324 rule — §11 exception).
· Stacks the collapsible Add form's col-md-* row gracefully + bumps inputs
to 40px tap targets.
CRITICAL (PR #15/#17/#19 lesson): every flipped to display:grid is
paired with `width: auto !important; box-sizing: border-box` on its
children — otherwise the desktop's th-driven table-layout widths leak back
in and re-introduce horizontal scroll.
============================================================================= */
/* /company/subscriptions — page-level alert (Supabase warning) inherits from
.am-dashboard.company-dashboard rules at L5062 — nothing to add. */
/* /company/subscriptions — hero KPI strip is 3-up on desktop; let inherited
L5072 (1fr 1fr) collapse it to 2-up. The 3rd card (Annual Cost) flows to
row 2 on its own — that's intentional, the two monetary cards anchor row 1
together so the eye reads Active → Monthly → Annual top-to-bottom-left. */
/* /company/subscriptions — card header (filter + actions cluster). Inherits
wrap + 100%-width form-control from L6273; we only need to keep the H6
readable + ensure inline buttons (Add, Bulk Import) sit on their own row. */
.am-dashboard.company-dashboard section.card > .card-header h6 {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
color: var(--ink);
flex: 1 1 100%;
margin-bottom: 4px;
}
.am-dashboard.company-dashboard section.card > .card-header .table-row-count {
font-size: 11px;
order: 99; /* push count to the end of the wrapped flex row */
}
.am-dashboard.company-dashboard section.card > .card-header .btn {
min-height: 40px;
padding: 8px 12px;
font-size: 12px;
}
/* /company/subscriptions — collapsible Add subscription form */
.am-dashboard.company-dashboard #addSubscriptionForm .card-body {
padding: 12px;
}
.am-dashboard.company-dashboard #addSubscriptionForm .row {
row-gap: 8px;
}
.am-dashboard.company-dashboard #addSubscriptionForm .form-label.small {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 4px;
}
.am-dashboard.company-dashboard #addSubscriptionForm .form-control,
.am-dashboard.company-dashboard #addSubscriptionForm .form-select,
.am-dashboard.company-dashboard #addSubscriptionForm .input-group > .form-control {
min-height: 40px;
font-size: 13px;
}
.am-dashboard.company-dashboard #addSubscriptionForm .input-group-text {
min-height: 40px;
font-size: 13px;
}
/* "Save" button — full width tap target on its own row */
.am-dashboard.company-dashboard #addSubscriptionForm button[type="submit"] {
width: 100%;
min-height: 44px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* /company/subscriptions — #subTable: override the inherited (wrong) cell
labels and grid layout from L5312 + L6506, install the correct 10-col
card-stack pattern. */
.am-dashboard.company-dashboard #subTable {
display: block;
width: 100%;
min-width: 0;
}
.am-dashboard.company-dashboard #subTable thead {
/* visually hide but keep accessible */
position: absolute !important; /* required to defeat the inherited L5177 display:none, since some AT helpers ignore display:none */
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.am-dashboard.company-dashboard #subTable tbody {
display: block;
width: 100%;
}
/* Each row → editorial card (block layout, NOT grid — sidesteps the L5312
2-col grid that would put Type in the title slot). */
.am-dashboard.company-dashboard #subTable tbody tr {
display: block !important;
width: 100% !important; /* paired with td width:auto below */
box-sizing: border-box;
padding: 12px 14px;
margin: 0 0 10px 0;
border: 1px solid var(--rule);
border-radius: 10px;
background: var(--paper-2);
/* neutralise the inherited L5312 grid + L5184 ai-row card grid */
grid-template-columns: none;
column-gap: 0;
row-gap: 0;
}
.am-dashboard.company-dashboard #subTable tbody tr > td {
display: block !important;
width: auto !important; /* paired with tr width:100% — PR #15/#17/#19 lesson */
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 3px 0 !important;
border: 0 !important;
background: transparent !important;
text-align: left !important; /* override the desktop .text-end on Amount + Monthly Equiv. */
font-family: var(--sans);
font-size: 13px;
line-height: 1.35;
color: var(--ink-body);
/* defeat the inherited L5339-L5360 grid-column / grid-row placements */
grid-column: auto;
grid-row: auto;
}
/* Col 1 (Name) — card title */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(1) {
font-family: var(--sans);
font-size: 14px !important;
font-weight: 600;
color: var(--ink) !important;
padding-bottom: 6px !important;
border-bottom: 1px dotted var(--rule) !important;
margin-bottom: 6px;
white-space: normal;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(1) a {
color: var(--ink);
text-decoration: none;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(1) a:hover,
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(1) a:focus {
color: var(--accent);
}
/* Cols 2-8: label-above-value pattern (positional labels — template has no
data-label attrs because #subTable is not tagged with data-mobile="cards"). */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(2),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(3),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(4),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(5),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(6),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(7),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(8) {
display: flex !important;
justify-content: space-between;
align-items: baseline;
width: 100% !important;
padding: 5px 0 !important;
gap: 10px;
font-size: 13px;
}
/* Override label content from the inherited L6515-L6520 "CM Team Performance"
bleed (Writers / Total Pages / Published / Revisions / Efficiency /
Cost/Page). Specificity here is (1,2,3) vs (0,4,3) — IDs trump. */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(2)::before { content: "Type"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(3)::before { content: "Amount"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(4)::before { content: "Billing"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(5)::before { content: "Monthly"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(6)::before { content: "Start"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(7)::before { content: "End"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(8)::before { content: "Status"; }
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(n+2):nth-child(-n+8)::before {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
flex: 0 0 auto;
/* defeat the inherited L5361-L5370 attr(data-label) eyebrow (would be
empty since no JS tagged this table). Our static content above wins. */
}
/* Value side of cols 2-8: align right + allow numeric values to be mono */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(2) {
/* Type cell — capitalised replacement text already provided by template */
color: var(--ink) !important;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(3),
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(5) {
font-variant-numeric: tabular-nums;
color: var(--ink) !important;
font-weight: 500;
}
/* Status badge — keep pill shape from the page's existing
.badge.bg-success / .badge.bg-secondary; just ensure it stays compact */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(8) .badge {
font-size: 10px;
padding: 3px 8px;
}
/* Col 9 (Notes) — full-width muted block under the divider, only render if
non-empty (template prints "—" for empty notes, which we hide). */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(9) {
display: block !important;
width: 100% !important;
padding: 8px 0 0 0 !important;
margin-top: 6px;
border-top: 1px dotted var(--rule) !important;
font-size: 12px !important;
color: var(--ink-3) !important;
font-style: italic;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(9):empty {
display: none !important;
}
/* (We can't CSS-hide a cell that contains only the literal "—" placeholder
without :has — which is not relied on here. The em-dash is visually subtle
at 12px italic and acceptable as a "no notes" indicator.) */
/* Col 10 (Actions) — full-width row of pill buttons. Cell contains a
div.d-flex.gap-1 with [edit-button] + [delete-form]. */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10) {
display: block !important;
width: 100% !important;
padding: 8px 0 0 0 !important;
margin-top: 6px;
border-top: 1px dotted var(--rule) !important;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10) > div.d-flex {
display: flex !important;
gap: 8px !important;
width: 100%;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10) .btn {
flex: 1 1 0;
min-height: 40px;
font-size: 13px;
padding: 8px 10px;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10) form.d-inline {
flex: 1 1 0;
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10) form.d-inline .btn {
width: 100%;
}
/* No ::before on the Actions cell — clear any inherited eyebrow */
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(10)::before {
content: none !important; /* override generic L5361 / L6529 ::before injection */
}
.am-dashboard.company-dashboard #subTable tbody tr > td:nth-child(9)::before {
content: none !important; /* notes block doesn't need a small-caps eyebrow */
}
/* Ended (text-muted) rows — keep them readable on mobile (the desktop
opacity: 0.35 from this page's