) ── */
.table-wrap { overflow-x: auto; }
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.data-table th {
text-align: left;
padding: 10px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
white-space: nowrap;
background: var(--bg);
cursor: pointer;
user-select: none;
}
.data-table th:hover { color: var(--text-primary); }
.data-table td {
padding: 11px 16px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.data-table tbody tr.row-even { background: #edf1f7; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg); }
/* Clients table — JS-driven zebra striping with correct hover */
#clients-table tbody tr { background-color: #ffffff; }
#clients-table tbody tr.row-even { background-color: #f9fafb; }
#clients-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Projects table — JS-driven zebra striping with correct hover */
#projects-table tbody tr { background-color: #ffffff; }
#projects-table tbody tr.row-even { background-color: #f9fafb; }
#projects-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Team table — JS-driven zebra striping with correct hover */
#team-table tbody tr { background-color: #ffffff; }
#team-table tbody tr.row-even { background-color: #f9fafb; }
#team-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Sprint Plan alloc-table — JS-driven zebra striping, overrides nth-child(even) rule */
#alloc-table tbody tr { background-color: #ffffff; }
#alloc-table tbody tr.row-even { background-color: #f9fafb; }
#alloc-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Sprint table — JS-driven zebra striping, overrides V1 nth-child(even) rule */
#sprint-table tbody tr { background-color: #ffffff; }
#sprint-table tbody tr.row-even { background-color: #f9fafb; }
#sprint-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Time Tracking Users table — JS-driven zebra striping with correct hover */
#tt-table tbody tr { background-color: #ffffff; }
#tt-table tbody tr.row-even { background-color: #f9fafb; }
#tt-table tbody tr:hover td { background-color: #eff6ff !important; }
#comp-table tbody tr { background-color: #ffffff; }
#comp-table tbody tr.row-even { background-color: #f9fafb; }
#comp-table tbody tr:hover td { background-color: #eff6ff !important; }
#deliverables-table tbody tr { background-color: #ffffff; }
#deliverables-table tbody tr.row-even { background-color: #f9fafb; }
#deliverables-table tbody tr:hover td { background-color: #eff6ff !important; }
#categories-table tbody tr { background-color: #ffffff; }
#categories-table tbody tr.row-even { background-color: #f9fafb; }
#categories-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Utilization Settings table — JS-driven zebra striping with correct hover */
#utilization-table tbody tr { background-color: #ffffff; }
#utilization-table tbody tr.row-even { background-color: #f9fafb; }
#utilization-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Archived rows — dimmed in all table contexts */
.row-archived { opacity: 0.45; }
/* Clickable row link in tables */
.row-link { color: var(--text-primary); font-weight: 500; text-decoration: none; }
.row-link:hover { color: var(--accent); text-decoration: none; }
/* ── Badge additions (V2 types not defined in V1) ── */
.badge-muted { background: #f1f5f9; color: var(--text-secondary); }
.badge-warning { background: var(--amber-bg); color: var(--amber); }
.badge-cycle { background: var(--accent-light); color: var(--accent); }
/* ── Filter bar (list pages: clients, projects, team) ── */
.filter-bar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.filter-grid-3col {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
align-items: start;
}
.filter-toggle {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
/* Pill filter tabs (projects page, and other list pages) */
.filter-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.filter-tab {
padding: 5px 14px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--border);
background: white;
color: var(--text-secondary);
transition: background 0.12s, color 0.12s, border-color 0.12s;
user-select: none;
line-height: 1.4;
}
.filter-tab:hover {
border-color: var(--accent);
color: var(--accent);
}
.filter-tab.active {
background: var(--accent);
color: white;
border-color: var(--accent);
}
a.filter-tab {
text-decoration: none;
display: inline-block;
}
/* ── Inline select (V2 projects table; V1 only has .inline-input) ── */
.inline-select {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
font-family: inherit;
padding: 4px 8px;
outline: none;
transition: border-color 0.15s, background 0.15s;
cursor: pointer;
}
.inline-select:hover, .inline-select:focus {
border-color: var(--border);
background: var(--bg);
}
.inline-select option { background: white; color: var(--text-primary); }
/* ── Wide inline input (not in V1) ── */
.inline-input-wide { width: 180px; }
/* ── Project color dot ── */
.project-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}
/* ── Stat row (sync page layout; V1 uses .stats grid for sprint dashboard) ── */
.stat-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
}
/* Smaller font variant for long values like timestamps */
.stat-small { font-size: 14px !important; font-weight: 400 !important; line-height: 1.3 !important; }
/* ── Sync status text ── */
.sync-phase { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
.sync-detail { font-size: 13px; color: var(--text-secondary); }
/* ── Client detail cards ── */
.detail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.detail-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px 16px;
box-shadow: var(--shadow);
}
.detail-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-secondary); margin-bottom: 4px;
}
.detail-value { font-size: 15px; font-weight: 500; color: var(--text-primary); }
/* ── Form card (create/edit forms) ── */
.form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 28px 32px;
max-width: 640px;
box-shadow: var(--shadow);
}
.form-card .form-group { margin-bottom: 18px; }
.form-card .form-group:last-child { margin-bottom: 0; }
/* Select elements inside form groups (not in V1) */
.form-group select {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 14px;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
width: 100%;
appearance: auto;
}
.form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,104,232,.1); }
.form-group select option { background: white; color: var(--text-primary); }
/* ── Checkbox list (multi-select for AM/AC and project linking) ── */
.checkbox-list {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px;
max-height: 260px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 4px;
font-size: 13px;
cursor: pointer;
line-height: 1.4;
}
.checkbox-item:hover { background: rgba(0,0,0,0.03); }
.checkbox-item input[type=checkbox] {
accent-color: var(--accent);
width: 14px; height: 14px;
flex-shrink: 0;
cursor: pointer;
}
/* ── Empty state ── */
.empty-state {
text-align: center;
padding: 48px 32px;
color: var(--text-secondary);
font-size: 14px;
}
/* ── Text helper ── */
.text-muted { color: var(--text-secondary); }
/* ── Two-column split layout: primary content left, settings sidebar right ── */
.layout-split {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
align-items: stretch;
}
/* ── Dashboard cards ── */
.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px 24px;
width: 100%;
box-shadow: var(--shadow);
}
.card h3 {
font-size: 15px; font-weight: 600; margin-bottom: 6px;
font-family: 'Inter', sans-serif; color: var(--text-primary);
}
.card-hint { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
/* ── Confirmation modal ── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 400;
align-items: center;
justify-content: center;
}
.modal-dialog {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 28px 32px;
max-width: 440px;
width: calc(100% - 32px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.modal-title {
font-size: 16px; font-weight: 700;
margin-bottom: 12px;
font-family: 'Inter', sans-serif;
color: var(--text-primary);
}
.modal-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 24px;
}
.modal-body strong { color: var(--text-primary); }
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.add-upcoming-dialog {
max-width: 560px;
padding: 0;
overflow: hidden;
}
.add-upcoming-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
}
.add-upcoming-header .modal-title {
margin-bottom: 0;
}
.modal-close-button {
width: 30px;
height: 30px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
color: var(--text-secondary);
cursor: pointer;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.modal-close-button:hover {
border-color: var(--accent);
color: var(--accent);
}
.add-upcoming-body {
padding: 18px 20px 20px;
margin-bottom: 0;
}
.modal-help-text {
margin-bottom: 14px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
}
.modal-state-message {
margin-bottom: 14px;
color: var(--text-secondary);
font-size: 13px;
}
.modal-state-error {
color: var(--color-danger);
}
.manual-add-select {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
color: var(--text-primary);
font-family: inherit;
font-size: 14px;
}
.manual-add-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,104,232,.1);
}
.add-upcoming-actions {
padding: 14px 20px;
border-top: 1px solid var(--border);
background: var(--bg);
}
.sidebar-alert-count {
background: var(--amber);
color: #fff;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
}
/* ── Slide-out panel backdrop ── */
.unmapped-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.25);
z-index: 200;
}
.unmapped-overlay.open { display: block; }
/* ── Slide-out panel ── */
.unmapped-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 420px;
max-width: 95vw;
background: var(--surface);
border-left: 1px solid var(--border);
z-index: 210;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.25s ease;
box-shadow: -4px 0 24px rgba(0,0,0,0.10);
}
.unmapped-panel.open { transform: translateX(0); }
.unmapped-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.unmapped-panel-title {
font-size: 15px; font-weight: 700; margin: 0;
font-family: 'Inter', sans-serif; color: var(--text-primary);
}
.panel-close-btn {
background: none;
border: none;
color: var(--text-secondary);
font-size: 16px;
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius);
transition: color 0.15s, background 0.15s;
}
.panel-close-btn:hover { color: var(--text-primary); background: var(--bg); }
.unmapped-panel-hint {
font-size: 12px;
color: var(--text-secondary);
padding: 10px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
line-height: 1.5;
}
.unmapped-panel-body {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.unmapped-item {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.unmapped-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.unmapped-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.unmapped-select {
flex: 1;
min-width: 140px;
background: white;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 5px 8px;
color: var(--text-primary);
font-size: 12px;
font-family: inherit;
outline: none;
}
.unmapped-select:focus { border-color: var(--accent); }
.unmapped-select option { background: white; color: var(--text-primary); }
.panel-loading, .panel-empty {
font-size: 13px;
color: var(--text-secondary);
text-align: center;
padding: 32px 0;
}
/* ── Sprint Averages table ────────────────────────────────────────────────── */
/* Scroll wrapper: self-contained 2D scroll container so both sticky axes work.
overflow-y required for position:sticky top:0 to activate (avoids sticky-inside-overflow-x bug). */
.averages-wrapper {
overflow-x: auto;
overflow-y: auto;
max-height: calc(100vh - 220px);
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
}
.averages-table {
border-collapse: collapse;
width: max-content;
min-width: 100%;
font-size: 13px;
}
.averages-table th,
.averages-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
vertical-align: middle;
}
.averages-table thead th {
background: var(--bg);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: 2;
}
/* ── Shared frozen two-column report table behavior ─────────────────────────
Used by Sprint Averages (.avg-col-*) AND financial tables (.mp-col-*).
--frozen-col1-width drives both the first column's fixed width and the
second column's left: offset — one variable keeps them perfectly in sync at
every breakpoint.
First column — fixed width from the variable; overflow+ellipsis clips long
names; 2px right border is the static separator for renders
where no horizontal scroll has occurred yet.
Second column — left: mirrors first column width exactly. Three-layer
box-shadow replaces border-based separators for the sticky-
scroll case: border-collapse borders disappear or shift as
non-sticky cells scroll beneath the frozen block; box-shadow
is painted by the sticky cell itself and stays at the frozen
position regardless of scroll position.
1. inset 1px 0 0 — left divider (between col1 and col2)
2. inset -1px 0 0 — right divider reinforcement inside col2
3. 2px 0 0 — outer right seal (scrolling cells can't
bleed through)
─────────────────────────────────────────────────────────────────────────── */
/* --- First frozen column (Client / Function / Metric) -------------------- */
.avg-col-client,
.mp-col-client {
position: sticky;
left: 0;
z-index: 3;
background: white;
width: var(--frozen-col1-width);
min-width: var(--frozen-col1-width);
max-width: var(--frozen-col1-width);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
border-right: 2px solid var(--border);
}
/* Thead: higher z-index + header background so it floats above body cells */
.averages-table thead .avg-col-client,
.monthly-profit-table thead .mp-col-client {
z-index: 4;
background: var(--bg);
}
/* --- Second frozen column (Average / Total) ------------------------------- */
.avg-col-avg,
.mp-col-total {
position: sticky;
left: var(--frozen-col1-width);
z-index: 3;
overflow: visible; /* allow ::before shield to extend left */
background: white;
text-align: center;
font-weight: 600;
border-right: 2px solid var(--border);
box-shadow:
inset 1px 0 0 var(--border),
inset -1px 0 0 var(--border),
2px 0 0 var(--border);
}
/* Paint-seam shield ─────────────────────────────────────────────────────────
border-collapse tables can leave a subpixel gap between the first sticky
column's right border and the second sticky column's left box-shadow.
Scrolling content (pill badges, etc.) bleeds through that gap.
The ::before pseudo-element fills the 6 px to the LEFT of the second
sticky column with the cell's own background, sealing the gap in every
row context:
• tbody default rows → white (base rule above)
• tbody even rows → #f9fafb (explicit frozen-col row-even rule)
• tbody hover → #eff6ff (explicit frozen-col hover rule)
• thead → var(--bg) (scoped thead rule below)
• tfoot (mp-col-total) → var(--bg) (tfoot rule in monthly-profit block)
pointer-events: none so the shield cannot interfere with row hover. */
.avg-col-avg::before,
.mp-col-total::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -6px;
width: 6px;
background: inherit;
pointer-events: none;
}
/* Thead: higher z-index + header background; carry same shadow explicitly so
the frozen header block also has solid separators at all scroll positions. */
.averages-table thead .avg-col-avg,
.monthly-profit-table thead .mp-col-total {
z-index: 4;
background: var(--bg);
box-shadow:
inset 1px 0 0 var(--border),
inset -1px 0 0 var(--border),
2px 0 0 var(--border);
}
/* Table-specific widths: Sprint Averages average column vs financial Total */
.avg-col-avg { min-width: 72px; }
.mp-col-total { min-width: 110px; }
/* Zebra striping for frozen columns ─────────────────────────────────────────
position: sticky + z-index creates a stacking context that can cause some
browsers to repaint the sticky cell's background ABOVE the row-level
"tr.row-even td" override — leaving frozen cells plain white on striped
rows despite the ID-selector specificity. The ::before seam shield also
inherits from the cell, so it stays white unless the cell is correct.
Targeting the frozen-column CLASS in the row-even/hover context gives
specificity (1, 2, 2) which unambiguously overrides the base (0, 1, 0)
"background: white" rule at all repaint layers.
Table legend:
#avgtable → /sprints/averages
#mp-table → /financials/monthly-profit
#cd-hours-table → /financials/client-detail (Hours by Function)
#cd-fin-table → /financials/client-detail (Monthly Financials) */
#avgtable tbody tr.row-even .avg-col-client,
#avgtable tbody tr.row-even .avg-col-avg,
#mp-table tbody tr.row-even .mp-col-client,
#mp-table tbody tr.row-even .mp-col-total,
#cd-hours-table tbody tr.row-even .mp-col-client,
#cd-hours-table tbody tr.row-even .mp-col-total,
#cd-fin-table tbody tr.row-even .mp-col-client,
#cd-fin-table tbody tr.row-even .mp-col-total {
background-color: #f9fafb;
}
#avgtable tbody tr:hover .avg-col-client,
#avgtable tbody tr:hover .avg-col-avg,
#mp-table tbody tr:hover .mp-col-client,
#mp-table tbody tr:hover .mp-col-total,
#cd-hours-table tbody tr:hover .mp-col-client,
#cd-hours-table tbody tr:hover .mp-col-total,
#cd-fin-table tbody tr:hover .mp-col-client,
#cd-fin-table tbody tr:hover .mp-col-total {
background-color: #eff6ff !important;
}
.avg-col-month {
min-width: 80px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Sprint Averages table — JS-driven zebra striping with correct hover */
.averages-table tbody tr:nth-child(even) { background: transparent; }
#avgtable tbody tr.row-even td { background-color: #f9fafb; }
#avgtable tbody tr:hover td { background-color: #eff6ff !important; }
/* Cell color coding — pill badges inside each | , not on the td itself */
.avg-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.avg-pill.avg-cell-green { background: #d1fae5 !important; color: #065f46 !important; }
.avg-pill.avg-cell-amber { background: #fef3c7 !important; color: #92400e !important; }
.avg-pill.avg-cell-red { background: #fee2e2 !important; color: #991b1b !important; }
.avg-no-data { color: var(--text-secondary); }
/* Sortable column headers */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sort-arrow { font-size: 11px; opacity: 0.35; margin-left: 3px; }
.sort-arrow.active-asc, .sort-arrow.active-desc { opacity: 1; }
/* Legend swatches for averages page */
.avg-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
margin-right: 4px;
vertical-align: middle;
}
.avg-green { background: #d1fae5; border: 1px solid #6ee7b7; }
.avg-amber { background: var(--amber-bg); border: 1px solid #fcd34d; }
.avg-red { background: #fee2e2; border: 1px solid #fca5a5; }
.avg-empty { background: var(--bg); border: 1px solid var(--border); }
/* ── Weekly Hours Report table ─────────────────────────────────────────────── */
.wh-wrapper {
overflow-x: auto;
overflow-y: auto;
max-height: calc(100vh - 240px);
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
}
.wh-table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size: 13px;
}
.wh-table th,
.wh-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
vertical-align: middle;
}
.wh-table thead th {
background: var(--bg);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: 2;
}
/* Sticky left: Person column */
.wh-col-person {
position: sticky;
left: 0;
z-index: 3;
background: white;
width: 150px;
font-weight: 500;
border-right: 1px solid var(--border);
overflow: hidden;
text-overflow: ellipsis;
}
.wh-table thead .wh-col-person {
z-index: 4;
background: var(--bg);
}
/* Sticky right: Average column */
.wh-col-avg {
position: sticky;
right: 0;
z-index: 3;
background: white;
width: 82px;
text-align: center;
font-weight: 600;
border-left: 1px solid var(--border);
}
.wh-table thead .wh-col-avg {
z-index: 4;
background: var(--bg);
}
/* Week data columns */
.wh-col-week {
width: 82px;
text-align: center;
padding: 6px 8px;
font-variant-numeric: tabular-nums;
}
/* Pill badges inside week cells — mirror avg-pill style exactly */
.wh-pill { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; min-width: 44px; text-align: center; }
.wh-pill.wh-pill-green { background: #d1fae5 !important; color: #065f46 !important; }
.wh-pill.wh-pill-warn { background: #fef3c7 !important; color: #92400e !important; }
.wh-pill.wh-pill-crit { background: #fee2e2 !important; color: #991b1b !important; }
.wh-pill.wh-pill-neutral { background: #f3f4f6; color: var(--text-primary); }
/* Links wrapping pills inside data cells */
.wh-table td a { text-decoration: none; display: inline-flex; align-items: center; }
/* Empty cell placeholder */
.wh-cell-empty { color: var(--color-muted); font-size: 13px; }
/* PTO badge — pill shape; expands to oval for multi-character values */
.wh-pto-badge { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--text-secondary); color: var(--text-secondary); border-radius: 10px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; font-weight: 700; margin-left: 4px; flex-shrink: 0; line-height: 1; }
/* JS-driven zebra striping — override V1 nth-child; same pattern as averages table */
.wh-table tbody tr:nth-child(even) { background: transparent; }
.wh-table tbody tr.row-even td { background-color: #f9fafb; }
.wh-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Group section headers */
.wh-group-label {
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 6px;
padding-left: 2px;
}
/* btn-toggle for upcoming page */
.btn-toggle {
font-size: 12px;
font-weight: 500;
padding: 5px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: white;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s;
}
.btn-toggle:hover { border-color: var(--accent); color: var(--accent); }
.btn-toggle.btn-toggle-active {
background: var(--accent);
border-color: var(--accent);
color: white;
}
/* btn-refresh for active sprints page */
.btn-refresh {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 500;
padding: 5px 12px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: white;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s;
}
.btn-refresh:hover { border-color: var(--accent); color: var(--accent); }
/* Stat icon color variants used on sprint pages */
.stat-icon-blue { background: #dbeafe; color: #1d4ed8; }
.stat-icon-orange { background: #ffedd5; color: #ea580c; }
.stat-icon-teal { background: #ccfbf1; color: #0d9488; }
.stat-icon-red { background: #fee2e2; color: #dc2626; }
.stat-icon-green { background: #dcfce7; color: #16a34a; }
/* Sort indicator in table headers */
.sort-icon { margin-left: 4px; font-size: 10px; color: var(--text-secondary); }
/* Stat icon variants for purple and slate (used on Engagement Cycles page) */
.stat-icon-purple { background: #f3e8ff; color: #9333ea; }
.stat-icon-slate { background: #f1f5f9; color: #475569; }
/* ── Engagement Cycles page ──────────────────────────────────────────────── */
.cycles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin-top: 20px;
}
.cycle-group-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--radius-lg, 10px);
overflow: hidden;
}
.cycle-group-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.cycle-group-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
}
.cycle-group-count {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: var(--border);
border-radius: 10px;
padding: 1px 7px;
}
.cycle-client-list {
list-style: none;
margin: 0;
padding: 6px 0;
}
.cycle-client-item {
padding: 5px 16px;
border-bottom: 1px solid #f1f5f9;
font-size: 13px;
}
.cycle-client-item:last-child { border-bottom: none; }
.cycle-client-link {
color: var(--accent);
text-decoration: none;
}
.cycle-client-link:hover { text-decoration: underline; }
/* ── Monthly Profit by Client table ─────────────────────────────────────── */
/* Scroll wrapper: both axes so that sticky top/bottom and sticky left all work
inside the same scroll container. Same pattern as .averages-wrapper. */
.monthly-profit-wrapper {
overflow-x: auto;
overflow-y: auto;
max-height: calc(100vh - 320px);
min-height: 300px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: white;
}
.monthly-profit-table {
border-collapse: collapse;
width: max-content;
min-width: 100%;
font-size: 13px;
}
.monthly-profit-table th,
.monthly-profit-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
vertical-align: middle;
}
/* Sticky header row */
.monthly-profit-table thead th {
background: var(--bg);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 2px solid var(--border);
position: sticky;
top: 0;
z-index: 2;
}
/* Frozen columns 1 (Client) and 2 (Total): positioning, sizing, opaque
background, ellipsis, and sticky-scroll box-shadow separators are all
defined in the shared grouped selectors earlier in this file
(.avg-col-client, .mp-col-client / .avg-col-avg, .mp-col-total).
Table-specific min-widths (.mp-col-total min-width: 110px) are also there.
Only rules unique to this table remain in this section. */
/* Month data columns */
.mp-col-month {
min-width: 100px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Zebra striping — ID selector overrides the sticky column background */
#mp-table tbody tr.row-even td { background-color: #f9fafb; }
/* Hover scoped to tbody so tfoot rows are never highlighted */
#mp-table tbody tr:hover td { background-color: #eff6ff !important; }
/* Sticky totals footer row */
.monthly-profit-table tfoot td {
position: sticky;
bottom: 0;
z-index: 3;
background: var(--bg);
font-weight: 600;
border-top: 2px solid var(--border);
border-bottom: none;
}
/* Corner cells in the tfoot need z-index 4 (above scrolling tfoot cells
and above data rows) and must keep the footer background. */
.monthly-profit-table tfoot .mp-col-client,
.monthly-profit-table tfoot .mp-col-total {
z-index: 4;
}
/* ── Time Log Report — group / subgroup expand rows ─────────────────────── */
.tl-group-header {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 16px; margin-bottom: 2px;
cursor: pointer; background: var(--surface); border: 1px solid var(--border);
border-radius: 6px; font-weight: 700; font-size: 14px; user-select: none;
color: var(--text-primary);
}
.tl-group-header:hover { background: var(--accent-light); }
.tl-chevron { display: inline-block; font-size: 10px; color: var(--text-secondary); transition: transform 0.15s; }
.tl-chevron.open { transform: rotate(90deg); }
.tl-subgroup-header {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 16px 8px 36px; margin-bottom: 2px;
cursor: pointer; background: var(--bg); border: 1px solid var(--border);
border-radius: 4px; font-weight: 600; font-size: 13px;
user-select: none; color: var(--text-primary);
}
.tl-subgroup-header:hover { background: var(--accent-light); }
/* ── Chart container (used by Utilization Trends and any future charts) ──── */
.chart-container {
position: relative;
width: 100%;
height: 420px;
}
/* Legend list for charts — one row per person with color dot */
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin-top: 16px;
font-size: 13px;
color: var(--text-primary);
}
.chart-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.chart-legend-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* Chart + side legend two-column layout */
.chart-with-legend { display: flex; gap: 20px; align-items: flex-start; }
.chart-with-legend .chart-container { flex: 1; min-width: 0; }
.chart-with-legend .chart-legend {
flex-direction: column;
flex-wrap: nowrap;
margin-top: 0;
width: 200px;
flex-shrink: 0;
max-height: 420px;
overflow-y: auto;
}
.chart-with-legend .chart-legend-item { display: flex; }
/* ── Shared utility classes ──────────────────────────────────────────────── */
/* Filter bar form labels — used in Time Log Report, Utilization Trends, etc. */
.filter-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 4px;
display: block;
}
/* Card section headings (14px bold, e.g. "New Entries", "Add Entry") */
.card-section-heading {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 16px;
}
/* Small hint/helper text beneath form inputs */
.input-hint {
font-size: 11px;
color: var(--color-muted);
margin-top: 4px;
}
/* Empty table cell state — centered muted placeholder */
.td-empty {
color: var(--color-muted);
text-align: center;
padding: 16px;
}
/* Sync page card section divider — padding block with bottom border */
.sync-section {
padding: 20px 0;
border-bottom: 1px solid var(--border);
}
.sync-section:last-child { border-bottom: none; }
/* Collapsible section headers (Utilization Settings page) */
.collapsible-header {
padding: 16px 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
/* Collapsible section arrow indicator */
.collapsible-arrow {
font-size: 18px;
color: var(--color-muted);
transform: rotate(-90deg);
transition: transform 0.2s;
}
/* Uppercase field/section label (e.g. "Project Details", "Financial History") */
.section-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-secondary);
margin-bottom: 16px;
}
/* Collapsible inline add-form row (holidays, keywords) */
.collapsible-add-form {
padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
RESPONSIVE DESIGN — Foundation Pass
Tier 1 (≤1024px): app shell — sidebar becomes an off-canvas drawer so
all page content can use the full viewport width.
Tier 2 (≤768px): content layout — tighter padding, stacked grids, etc.
Desktop (≥1025px) behavior is entirely unchanged.
Cycle Calendar grid: 4 cols above 900px (V1 default), 2 cols ≤900px
(existing V1 rule), 1 col ≤768px (Tier 2 below).
═══════════════════════════════════════════════════════════════════════════ */
/* ── Mobile nav overlay (backdrop behind open sidebar) ─────────────────── */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 149;
}
.mobile-nav-overlay.open { display: block; }
/* ── Hamburger toggle button — hidden on desktop, shown via @media ──────── */
.mobile-nav-toggle {
display: none;
position: fixed;
top: 10px;
left: 10px;
z-index: 151;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
color: var(--text-primary);
padding: 0;
}
/* ── Medium widths: stat-card header polish when sidebar is still in the flow */
/* Grid column count is handled by the base minmax(min(100%,200px)) rule — */
/* no grid override needed here. Only the internal header alignment is tuned: */
/* icon anchors to flex-start so it tracks the first line of a wrapped label, */
/* and is locked to 34px so it can never shrink. */
@media (max-width: 1200px) {
.stat-header {
align-items: flex-start; /* icon anchors to top of label when it wraps */
gap: 10px; /* slightly more generous than the base 8px */
}
.stat-label { line-height: 1.15; } /* tighter leading for multi-line labels */
.stat-icon { flex: 0 0 34px; } /* explicit: never shrink below 34px */
}
/* ── Tier 1: @media (max-width: 1024px) — app shell / sidebar drawer ────── */
/* Sidebar moves off-canvas so all content fills the full viewport width. */
/* Applies at tablet landscape, narrow browser windows, and smaller. */
@media (max-width: 1024px) {
/* Show hamburger button */
.mobile-nav-toggle { display: flex; }
/* Sidebar: fixed off-canvas drawer, slides in when .mobile-open is added */
.sidebar {
position: fixed !important;
top: 0;
left: 0;
height: 100vh;
z-index: 150;
transform: translateX(-100%);
transition: transform 0.25s ease;
box-shadow: none;
width: var(--sidebar-width);
}
.sidebar.mobile-open {
transform: translateX(0);
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.18);
}
/* Layout: block so the fixed sidebar leaves no gap in the flow */
.layout { display: block; }
/* Main content: full viewport width; top clearance for the hamburger */
.main-content {
padding-top: 60px;
}
.main-content.wide { max-width: 100%; }
}
/* ── Tier 2: @media (max-width: 768px) — tighter content layout ─────────── */
/* Builds on top of Tier 1. Applies on phones and small-tablet portrait. */
@media (max-width: 768px) {
/* Reduce side and bottom padding on small screens */
.main-content {
padding: 16px 16px 24px;
padding-top: 60px; /* preserve hamburger clearance */
}
/* Page header: allow wrapping, reduce heading font size */
.page-header {
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.page-header h2 { font-size: 20px; }
.page-header h3 { font-size: 16px; }
/* Dashboard landing cards: tighter minimum */
.dashboard-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* 3-column filter/content grid → single column */
.filter-grid-3col { grid-template-columns: 1fr; gap: 12px; }
/* Sync-page split layout (3fr / 1fr) → single column */
.layout-split { grid-template-columns: 1fr; }
/* Form card: full width, tighter internal padding */
.form-card { max-width: 100%; padding: 20px 16px; }
/* Chart + side legend: stack vertically */
.chart-with-legend { flex-direction: column; }
.chart-with-legend .chart-legend {
width: 100%;
max-height: none;
flex-direction: row;
flex-wrap: wrap;
}
/* Table toolbar: tighter padding (already has flex-wrap) */
.table-toolbar { padding: 10px 12px; gap: 8px; }
/* Filter bar: already has flex-wrap; tighten gap */
.filter-bar { gap: 10px; }
/* Cycle Calendar: 1 column on phone — overrides the existing 900px 2-col rule */
.cycle-grid { grid-template-columns: 1fr; }
/* Stat values: slightly smaller to prevent overflow on narrow cards */
.stat-value { font-size: 1.4rem; }
/* ── Table-heavy reports pass ─────────────────────────────────────────── */
/* Period / year pills: wrap when many years are shown */
.year-pills { flex-wrap: wrap; }
/* Cycle calendar legend: wrap items on narrow screens */
.cal-legend { flex-wrap: wrap; gap: 4px 10px; }
/* Pace legend on Active Retainer Sprints: tighter gap */
.pace-legend { gap: 8px 12px; padding-right: 8px; }
/* Cap scroll-container heights on phones so tables don't consume the
whole viewport. The values are viewport-relative so they work on both
short (667px) and tall (844px) phone screens. */
.table-scroll { max-height: 55vh; }
.averages-wrapper { max-height: 60vh; }
.wh-wrapper { max-height: 60vh; }
/* Monthly-profit-wrapper: inline styles in client_detail.html use
calc(100vh - 420px) which goes negative on short viewports.
!important is required to override those inline styles. */
.monthly-profit-wrapper {
max-height: 55vh !important;
min-height: 200px !important;
}
/* Frozen two-column tables (Sprint Averages + financial tables): narrow the
first column at phone-size viewports. --frozen-col1-width drives both
the column's fixed width AND the second column's left: offset, so a
single override keeps both in sync for every table that uses the shared
.avg-col-client / .mp-col-client pattern. */
:root { --frozen-col1-width: 160px; }
/* Financial Total column: also reduce its min-width on small screens */
.mp-col-total { min-width: 80px; }
/* Weekly-hours table: override table-layout:fixed + width:100% so the
.wh-wrapper scrolls horizontally instead of squishing the 12 week
columns into the viewport width. */
.wh-table { width: max-content; min-width: 100%; }
/* Client Metrics 8-column table: force a floor width so .table-wrap
activates horizontal scroll rather than squishing columns. */
#fin-summary-table { min-width: 580px; }
}
/* ── Operational forms / admin responsive pass ───────────────────────────── */
/* ── Sync page ── */
/* Stats row: let cards wrap cleanly on narrow viewports.
The inline style uses flex-wrap:nowrap on desktop; this selector wins only
inside the media queries below via the helper class added to the element. */
.sync-stats-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.sync-stats-row .stat-card { flex: 1; min-width: 0; }
/* Two-column sync layout (controls left 3fr / summary right 1.4fr) */
.sync-split {
display: flex;
gap: 20px;
align-items: flex-start;
}
.sync-split-left { flex: 3; min-width: 0; }
.sync-split-right { flex: 1.4; min-width: 220px; }
/* Project detail top row (Project Details left / Financial History right) */
.project-detail-top {
display: flex;
gap: 20px;
margin-bottom: 24px;
align-items: stretch;
}
.project-detail-top > div { flex: 1; display: flex; flex-direction: column; }
/* Manual time entries: add-entry 2-column form grid */
.tl-add-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
/* Manual time entries: inline edit grid (6 narrow columns) */
.tl-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr 120px 120px 160px 1fr;
gap: 8px;
align-items: end;
}
/* Financial Entry: responsive per-row grid for New Entries form.
Labels live inside each field so they stay with their input when the
grid wraps — no separate column-header row or horizontal scroll needed. */
.fe-entry-row {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 6px 12px;
align-items: end;
padding: 10px 0;
border-top: 1px solid var(--border);
}
.fe-entry-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.fe-entry-field > label {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
}
.fe-entry-field select,
.fe-entry-field input[type="month"],
.fe-entry-field input[type="number"] {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 14px;
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s;
width: 100%;
min-width: 0;
appearance: auto;
}
.fe-entry-field select:focus,
.fe-entry-field input[type="month"]:focus,
.fe-entry-field input[type="number"]:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,104,232,.1);
}
.fe-entry-field select:disabled,
.fe-entry-field input:disabled {
background: #f9fafb;
color: var(--text-secondary);
cursor: not-allowed;
}
.fe-entry-actions {
display: flex;
align-items: flex-end;
gap: 8px;
white-space: nowrap;
padding-bottom: 1px;
}
/* Medium: 2-column — project full-width top row, then pairs: month+amount, rate+actions */
@media (max-width: 640px) {
.fe-entry-row {
grid-template-columns: 1fr 1fr;
row-gap: 10px;
}
.fe-entry-field.fe-entry-project { grid-column: 1 / -1; }
}
/* Phone: single column */
@media (max-width: 440px) {
.fe-entry-row { grid-template-columns: 1fr; }
.fe-entry-field.fe-entry-project { grid-column: auto; }
}
/* Financial Entry page: page-specific two-column layout.
Uses a fixed-width settings column (260-320px) so it never becomes a sliver,
and a fluid left column that holds the entry grid.
Replaces .layout-split on this page so we can stack earlier (≤1100px)
without affecting other pages that use .layout-split. */
.financial-entry-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
gap: 20px;
margin-bottom: 28px;
align-items: start;
}
@media (max-width: 1280px) {
/* Financial Entry: stack New Entries above Financial Settings.
The sidebar occupies ~240px; at 1280px only ~1040px is left for content —
stacking earlier keeps the entry form at a comfortable width. */
.financial-entry-top {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
/* Sync summary: stop sticky so it doesn't fight the off-canvas sidebar */
.sync-split-right .card { position: static; }
}
@media (max-width: 768px) {
/* Sync page: stats row wraps (handled by flex-wrap:wrap on .sync-stats-row) */
.sync-stats-row .stat-card { min-width: 130px; }
/* Sync page: two-column layout stacks */
.sync-split { flex-direction: column; }
.sync-split-right { min-width: 0; width: 100%; }
/* Project detail: top row stacks */
.project-detail-top { flex-direction: column; }
/* Manual time entries: add-entry form → single column */
.tl-add-form-grid { grid-template-columns: 1fr; }
/* Manual time entries: inline edit → two columns (date+hours narrow cols
stay wide enough to be usable; project+user get full width on their row) */
.tl-edit-grid {
grid-template-columns: 1fr 1fr;
}
/* Utilization Settings: inline add-forms (holidays, keywords)
— inputs fill the row width on phones */
.collapsible-add-form { flex-direction: column; align-items: flex-start; }
.collapsible-add-form input[type="date"],
.collapsible-add-form input[type="text"] {
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
/* Project detail: financial history max-height when stacked on mobile
so it doesn't eat the whole viewport while the form sits above */
.project-detail-top .table-wrap { max-height: 300px; }
/* Time Tracking Users: the table has many columns — allow horizontal scroll */
#tt-table { min-width: 560px; }
}
/* ── Tier 3: @media (max-width: 480px) — very small phones ─────────────── */
/* The @media (max-width: 768px) tier above already narrows --frozen-col1-width
to 160px for both Sprint Averages and financial tables, which covers all
phones (480px is a subset of 768px). No further narrowing is applied here
— 160px remains readable for typical client names at 390px viewport width. */
|