wrappers
instead of
. Extend canonical
rules to match ANY direct child div containing a .table.
============================================================ */
.card:has(> div > .table),
.card:has(> div > .data-table) {
padding: 0;
overflow: hidden;
}
.card:has(> div > .table) > h2,
.card:has(> div > .table) > h3,
.card:has(> div > .data-table) > h2,
.card:has(> div > .data-table) > h3 {
padding: 16px 20px 0;
margin-bottom: 0;
}
.card:has(> div > .table) > div,
.card:has(> div > .data-table) > div {
margin: 0;
}
.card > div > .table,
.card > div > .data-table {
margin: 0;
border-radius: 0;
box-shadow: none;
}
.card:has(> div > .table) > div > .table > thead > tr > th:first-child,
.card:has(> div > .table) > div > .table > tbody > tr > td:first-child,
.card:has(> div > .data-table) > div > .data-table > thead > tr > th:first-child,
.card:has(> div > .data-table) > div > .data-table > tbody > tr > td:first-child {
padding-left: 24px;
}
.card:has(> div > .table) > div > .table > thead > tr > th:last-child,
.card:has(> div > .table) > div > .table > tbody > tr > td:last-child,
.card:has(> div > .data-table) > div > .data-table > thead > tr > th:last-child,
.card:has(> div > .data-table) > div > .data-table > tbody > tr > td:last-child {
padding-right: 24px;
}
/* ---- copied from FF client-management-dashboard.html line 1854 ---- */
/* ============================================================
ADMIN TABLE AESTHETIC OVERLAY (Austin msg63822, 2026-07-05)
Aesthetic-only pass. NO data / markup / column / logic changes.
Spec: /Users/alfie/.openclaw/workspace/reference/admin-table-aesthetic-spec-20260705.md
Palette: #FFFFFF page · #1A1A1A text · #6B7280 secondary
#F0F0F0 border · #F7F7F7 hover · Inter 14px
Header: weight 500 (medium), Title Case (no uppercase / no letter-spacing),
#374151 text, 1px solid #EAEAEA bottom.
Rows: ~48px, 13px 16px padding, 1px #F0F0F0 divider, no zebra.
Hover: #F7F7F7 with 120ms ease.
Numbers: tabular-nums (.num / [data-num] opt-in preserved).
Status: .status-active -> green check pill · .status-inactive -> grey x pill.
Inactive rows: greyed via [data-inactive] / .row-inactive.
Scope: .table, .data-table (both HTMLs share these), but only on
:root:not(.dark) so existing dark-mode styling is untouched.
============================================================ */
:root:not(.dark) .table,
:root:not(.dark) .data-table {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: #FFFFFF;
color: #1A1A1A;
}
/* HEADER -- FC Builds-tab standard (msg65103) with corrections:
header TEXT smaller (11px vs FC 12px) + header ROW shorter (8px vs FC 12px vertical padding) */
:root:not(.dark) .table thead th,
:root:not(.dark) .data-table thead th {
background: #F5F6FA !important;
color: #6B7280 !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 8px 16px !important;
border-bottom: 1px solid #E5E7EB !important;
border-top: 0 !important;
white-space: nowrap;
vertical-align: middle;
}
/* small line-icon hook: any TH child / gets left-of-label spacing.
Existing headers that already carry a leading icon inherit alignment; adds gap only. */
:root:not(.dark) .table thead th > i.th-lead,
:root:not(.dark) .data-table thead th > i.th-lead,
:root:not(.dark) .table thead th > svg.th-lead,
:root:not(.dark) .data-table thead th > svg.th-lead {
color: #9CA3AF;
margin-right: 6px;
vertical-align: -2px;
width: 15px;
height: 15px;
}
/* ROWS -- FC Builds-tab standard (msg65103) */
:root:not(.dark) .table tbody td,
:root:not(.dark) .data-table tbody td {
padding: 8px 16px !important;
border-bottom: 1px solid #E5E7EB !important;
background: #FFFFFF;
color: #0F172A;
font-size: 14px;
vertical-align: middle;
transition: background 120ms ease;
}
:root:not(.dark) .table tbody tr,
:root:not(.dark) .data-table tbody tr {
transition: background 120ms ease;
/* approximates 48px row height with 13px padding + 14px line-height content */
}
:root:not(.dark) .table tbody tr:last-child td,
:root:not(.dark) .data-table tbody tr:last-child td {
border-bottom: 0 !important;
}
/* HOVER -- FC Builds-tab standard: light #FAFBFC, no dark shadow/overlay (msg65103 item 3) */
:root:not(.dark) .table tbody tr:hover td,
:root:not(.dark) .data-table tbody tr:hover td,
:root:not(.dark) .table tbody tr:hover,
:root:not(.dark) .data-table tbody tr:hover {
background: #FAFBFC !important;
box-shadow: none !important;
}
/* INACTIVE ROWS (greyed) ----------------------------------- */
:root:not(.dark) .table tbody tr[data-inactive="true"] td,
:root:not(.dark) .data-table tbody tr[data-inactive="true"] td,
:root:not(.dark) .table tbody tr.row-inactive td,
:root:not(.dark) .data-table tbody tr.row-inactive td {
color: #9CA3AF !important;
background: #FAFAFA;
}
/* NUMBERS: tabular + right-align ---------------------------- */
:root:not(.dark) .table td.num,
:root:not(.dark) .table th.num,
:root:not(.dark) .table td[data-num],
:root:not(.dark) .table th[data-num],
:root:not(.dark) .data-table td.num,
:root:not(.dark) .data-table th.num,
:root:not(.dark) .data-table td[data-num],
:root:not(.dark) .data-table th[data-num] {
text-align: right !important;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Also make every td that contains only a currency/number look tabular (safe: doesn't affect alignment). */
:root:not(.dark) .table tbody td,
:root:not(.dark) .data-table tbody td {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* STATUS PILLS -------------------------------------------- */
:root:not(.dark) .status-badge {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 3px 10px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4;
border: 0 !important;
white-space: nowrap;
}
:root:not(.dark) .status-badge.status-active,
:root:not(.dark) .status-active {
background: #E7F6EC !important;
color: #1E7B41 !important;
}
:root:not(.dark) .status-badge.status-active::before,
:root:not(.dark) .status-active::before {
content: "\2713"; /* checkmark */
color: #22A055;
font-weight: 700;
margin-right: 2px;
font-size: 12px;
}
:root:not(.dark) .status-badge.status-inactive,
:root:not(.dark) .status-inactive,
:root:not(.dark) .status-badge.status-archived,
:root:not(.dark) .status-archived {
background: #F2F2F2 !important;
color: #6B7280 !important;
}
:root:not(.dark) .status-badge.status-inactive::before,
:root:not(.dark) .status-inactive::before,
:root:not(.dark) .status-badge.status-archived::before,
:root:not(.dark) .status-archived::before {
content: "\2715"; /* x */
color: #9CA3AF;
font-weight: 700;
margin-right: 2px;
font-size: 12px;
}
/* Preserve mid-states (paused / warning / pending) but harmonise shape. */
:root:not(.dark) .status-badge.status-paused,
:root:not(.dark) .status-paused,
:root:not(.dark) .status-badge.status-warning,
:root:not(.dark) .status-warning,
:root:not(.dark) .status-badge.status-pending {
background: #FEF3C7 !important;
color: #92400E !important;
border-radius: 999px !important;
}
:root:not(.dark) .status-badge.status-paused::before,
:root:not(.dark) .status-paused::before,
:root:not(.dark) .status-badge.status-warning::before,
:root:not(.dark) .status-warning::before,
:root:not(.dark) .status-badge.status-pending::before {
content: "\25CF"; /* filled dot */
color: #D97706;
margin-right: 2px;
font-size: 10px;
}
/* CATEGORY DOTS (low-cardinality). Opt-in via .cat-dot on an element.
Existing .category-badge-* pills stay untouched (they carry semantic bg). */
:root:not(.dark) .cat-dot {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 400;
color: #1A1A1A;
}
:root:not(.dark) .cat-dot::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
display: inline-block;
opacity: 1;
}
:root:not(.dark) .cat-dot.cat-finance { color: #22A055; }
:root:not(.dark) .cat-dot.cat-hr { color: #F5871F; }
:root:not(.dark) .cat-dot.cat-marketing { color: #8B3FE8; }
:root:not(.dark) .cat-dot.cat-sales { color: #3B82F6; }
:root:not(.dark) .cat-dot.cat-engineering { color: #4B5563; }
/* Label text itself stays dark - only the dot inherits the category colour. */
:root:not(.dark) .cat-dot::before { background: currentColor; }
:root:not(.dark) .cat-dot { color: #1A1A1A; }
:root:not(.dark) .cat-dot.cat-finance::before { background: #22A055; }
:root:not(.dark) .cat-dot.cat-hr::before { background: #F5871F; }
:root:not(.dark) .cat-dot.cat-marketing::before { background: #8B3FE8; }
:root:not(.dark) .cat-dot.cat-sales::before { background: #3B82F6; }
:root:not(.dark) .cat-dot.cat-engineering::before { background: #4B5563; }
/* LEFT CHECKBOX COL (opt-in via .col-check / | ) */
:root:not(.dark) .table th.col-check,
:root:not(.dark) .data-table th.col-check,
:root:not(.dark) .table td.col-check,
:root:not(.dark) .data-table td.col-check {
width: 44px !important;
padding-left: 16px !important;
padding-right: 8px !important;
text-align: left !important;
}
:root:not(.dark) .table td.col-check input[type="checkbox"],
:root:not(.dark) .data-table td.col-check input[type="checkbox"],
:root:not(.dark) .table th.col-check input[type="checkbox"],
:root:not(.dark) .data-table th.col-check input[type="checkbox"] {
width: 16px; height: 16px;
border-radius: 4px;
border: 1.5px solid #D1D5DB;
background: #FFFFFF;
accent-color: #1A1A1A;
cursor: pointer;
}
/* END TABLE AESTHETIC OVERLAY ---------------------------- */
/* m2297ds (Austin msg 2287/2297): one table-header + row-button standard on every page */
:root:not(.dark) #ops-insights table thead th, :root:not(.dark) #ops-insights table tr:first-child th,
:root:not(.dark) #profit table thead th, :root:not(.dark) #finance-pl table thead th {
font-size: 13.5px !important; font-weight: 500 !important; color: #374151 !important;
background: #f9fafb !important; text-transform: none !important; letter-spacing: normal !important;
}
:root.dark #ops-insights table thead th, :root.dark #profit table thead th, :root.dark #finance-pl table thead th {
font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important;
}
#issues td button, #issues .data-table button { border-radius: 999px !important; font-weight: 500 !important; padding: 4px 12px !important; }
/* m2311btn (Austin msg 2311): one button system on the Tasks + Calendar tabs (sizes/shape only, no colour or behaviour change).
Action pill 40px, 13px/500, padding 0 16px | Filter pill 40px, 13px | Icon + close circle 40x40 | Calendar chips pill 24px, 11px/600 | Mobile (<=767px) all 44px. */
#tasks .ff-tk-btn, #tasks .ff-tk-new, #calendar .ff-tk-btn, .ff-tk-pop .ff-tk-btn, .ff-tk-modal:not(#ff-oi-modal) .ff-tk-btn {
box-sizing:border-box; height:40px; min-height:40px; padding:0 16px; font-size:13px; font-weight:500; line-height:1;
border-radius:999px; border-width:1px; display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
#tasks .ff-tk-icon, #calendar .ff-tk-btn[data-nav="-1"], #calendar .ff-tk-btn[data-nav="1"] {
box-sizing:border-box; width:40px; height:40px; min-width:40px; min-height:40px; padding:0; border-radius:999px; font-size:16px; line-height:1;
display:inline-flex; align-items:center; justify-content:center; }
.ff-tk-modal:not(#ff-oi-modal) .ff-tk-x {
box-sizing:border-box; width:40px; height:40px; min-width:40px; min-height:40px; padding:0; border-radius:999px; font-size:24px; line-height:1;
display:inline-flex; align-items:center; justify-content:center; }
#tasks .ff-tk-drop, #calendar .ff-tk-drop { box-sizing:border-box; height:40px; min-height:40px; border-radius:999px; font-size:13px; }
#tasks .ff-tk-assign { box-sizing:border-box; min-height:40px; padding:4px 12px; font-size:13px; border-radius:999px; }
#calendar .ff-cal-ev, #calendar .ff-cal-more { box-sizing:border-box; height:24px; min-height:24px; padding:0 10px; font-size:11px; font-weight:600;
line-height:24px; border-radius:999px; flex-shrink:0; }
/* m2311btn-svg: keep the + icon in New Task from shrinking to 0 when the button flexes on mobile */
#tasks .ff-tk-new svg, #tasks .ff-tk-btn svg { flex-shrink:0; min-width:12px; }
@media (max-width:767px) {
#tasks .ff-tk-btn, #tasks .ff-tk-new, #calendar .ff-tk-btn, .ff-tk-pop .ff-tk-btn, .ff-tk-modal:not(#ff-oi-modal) .ff-tk-btn,
#tasks .ff-tk-drop, #calendar .ff-tk-drop { height:44px; min-height:44px; }
/* m2311btn-nowrap: global mobile rule sets button white-space normal !important, which split "New Task" over 2 lines */
#tasks .ff-tk-btn, #tasks .ff-tk-new, #calendar .ff-tk-btn, .ff-tk-pop .ff-tk-btn, .ff-tk-modal:not(#ff-oi-modal) .ff-tk-btn { white-space:nowrap !important; }
/* m2311btn-minw: global mobile min-width:44px let flex squeeze New Task below its content width */
#tasks .ff-tk-new, #tasks .ff-tk-btn, #calendar .ff-tk-btn, .ff-tk-pop .ff-tk-btn, .ff-tk-modal:not(#ff-oi-modal) .ff-tk-btn { min-width:max-content; }
#tasks .ff-tk-icon, #calendar .ff-tk-btn[data-nav="-1"], #calendar .ff-tk-btn[data-nav="1"], .ff-tk-modal:not(#ff-oi-modal) .ff-tk-x {
width:44px; height:44px; min-width:44px; min-height:44px; }
#tasks .ff-tk-assign { min-height:44px; }
#calendar .ff-cal-ev, #calendar .ff-cal-more { height:44px; min-height:44px; line-height:44px; }
/* m2311btn-chipwrap: keep calendar chips on one line with ellipsis (global mobile rule forces wrapping) */
#calendar .ff-cal-ev, #calendar .ff-cal-more { white-space:nowrap !important; text-overflow:ellipsis; }
}
/* ---- copied from FF client-management-dashboard.html line 2135 ---- */
/* 2026-09-28 Austin msg 2169: one dropdown style on every surface; chevron with right padding */
select:not([multiple]):not([size]) { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px 12px !important; padding-right:38px !important; cursor:pointer; }
:root.dark select:not([multiple]):not([size]) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; }
/* ---- copied from FF client-management-dashboard.html line 2142 ---- */
/* M2536_T1 (Austin msg 2536): smooth admin. Login fields fade in one after another, the app fades in (opacity only)
after login and on load, sidebar tab switches crossfade (old section fades out over the new one), freshly loaded data fades in. */
@keyframes ffM2536Fade{from{opacity:0}to{opacity:1}}
@keyframes ffM2536Field{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.unified-login .login-card{animation:none!important}
.unified-login .login-card>*{animation:ffM2536Field .5s cubic-bezier(.22,.61,.36,1) both}
.unified-login .login-card>*:nth-child(1){animation-delay:40ms}.unified-login .login-card>*:nth-child(2){animation-delay:90ms}
.unified-login .login-card>*:nth-child(3){animation-delay:150ms}.unified-login .login-card>*:nth-child(4){animation-delay:210ms}
.unified-login .login-card>*:nth-child(5){animation-delay:260ms}.unified-login .login-card>*:nth-child(6){animation-delay:300ms}
.unified-login .login-card>*:nth-child(n+7){animation-delay:360ms}
.unified-login{transition:opacity .2s ease}.unified-login.ff-login-out{opacity:0}
.has-token #app-container{animation:ffM2536Fade .34s cubic-bezier(.22,.61,.36,1) both}
.polish-section-entering{transform:none!important}
.polish-section-entered{transform:none!important;transition:opacity 220ms cubic-bezier(.22,.61,.36,1)!important}
.ff-xfade-out{transition:opacity 210ms ease!important;opacity:0!important}
@media (prefers-reduced-motion: reduce){.unified-login .login-card>*,.has-token #app-container{animation:none!important}.unified-login,.ff-xfade-out,.polish-section-entered{transition:none!important}}
/* ---- copied from FF client-management-dashboard.html line 9913 ---- */
:root{
--polish-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--polish-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--polish-dur-out: 130ms;
--polish-dur-in: 200ms;
--polish-shift: 6px;
--polish-stagger: 55ms;
}
.polish-entering-app { opacity: 0; transform: translateY(var(--polish-shift)); }
.polish-app-active { opacity: 1; transform: none; transition: opacity 280ms var(--polish-ease), transform 320ms var(--polish-ease); }
.polish-shell > * { opacity: 0; transform: translateY(var(--polish-shift)); }
.polish-shell.polish-shell-in > * { opacity: 1; transform: none; transition: opacity 260ms var(--polish-ease), transform 300ms var(--polish-ease); }
.polish-shell.polish-shell-in > *:nth-child(1) { transition-delay: 0ms; }
.polish-shell.polish-shell-in > *:nth-child(2) { transition-delay: var(--polish-stagger); }
.polish-shell.polish-shell-in > *:nth-child(3) { transition-delay: calc(var(--polish-stagger) * 2); }
.polish-shell.polish-shell-in > *:nth-child(n+4) { transition-delay: calc(var(--polish-stagger) * 3); }
.polish-section-leaving { opacity: 0 !important; transform: translateY(-4px); transition: opacity var(--polish-dur-out) var(--polish-ease-out), transform var(--polish-dur-out) var(--polish-ease-out); }
.polish-section-entering{ opacity: 0; transform: translateY(var(--polish-shift)); }
.polish-section-entered { opacity: 1; transform: none; transition: opacity var(--polish-dur-in) var(--polish-ease), transform var(--polish-dur-in) var(--polish-ease); }
@media (prefers-reduced-motion: reduce){
.polish-entering-app, .polish-app-active,
.polish-shell > *, .polish-shell.polish-shell-in > *,
.polish-section-leaving, .polish-section-entering, .polish-section-entered {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
/* ---- copied from FF client-management-dashboard.html line 10028 ---- */
/* ---- 3. Inline uppercase mini stat-card labels (e.g. split-test cards)
that use inline text-transform:uppercase instead of a label class.
Catch centrally, kill uppercase only, keep everything else.
Excludes invoice/billing print docs. ---- */
.card:not(#invoice-preview-content):not(#billing-statement) div[style*="text-transform:uppercase"] {
text-transform: none !important;
letter-spacing: normal !important;
}
/* QC-F6 2026-09-04 Austin: pill-shaped selectable fields on Clients tab + client breakdown.
Scoped to controls only - containers/cards/tables keep their existing radius. */
#clients input[type="text"], #clients input[type="search"], #clients input[type="number"],
#clients input[type="date"], #clients select, #clients .filter-pill, #clients .crm-filter,
#order-breakdown-content input[type="text"], #order-breakdown-content input[type="number"],
#order-breakdown-content input[type="date"], #order-breakdown-content select,
#billing-breakdown-content input[type="text"], #billing-breakdown-content input[type="number"],
#billing-breakdown-content input[type="date"], #billing-breakdown-content select {
border-radius: 999px !important;
}
#clients button.btn-filter, #clients .chip, #clients .tag-select { border-radius: 999px !important; }
/* textareas stay rectangular - a pill textarea is unusable */
#clients textarea, #order-breakdown-content textarea, #billing-breakdown-content textarea {
border-radius: 10px !important;
}
/* m2169 J Calendar */
.ff-cal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ff-cal-title{font-size:15px;font-weight:600;text-align:center;white-space:nowrap;padding:0 2px} /* m2348: smaller month text */
.ff-cal-navgrp{display:inline-flex;align-items:center;gap:0}
.ff-cal-nav{border:0;background:transparent;color:var(--text-primary);font-size:22px;line-height:1;width:28px;height:36px;min-width:28px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;border-radius:6px}
.ff-cal-nav:hover{color:var(--text-secondary)}
@media (max-width:767px){#calendar .ff-cal-nav{width:36px;min-width:36px;height:44px;min-height:44px}}
.ff-cal-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;margin-bottom:12px;color:var(--text-secondary)}
.ff-cal-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid;margin-right:6px;vertical-align:-1px}
.ff-cal-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.ff-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));min-width:780px}
.ff-cal-wd{padding:8px 10px;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;border-bottom:1px solid var(--border)}
.ff-cal-cell{min-height:112px;padding:6px;border-right:1px solid var(--border-light,var(--border));border-bottom:1px solid var(--border-light,var(--border));display:flex;flex-direction:column;gap:3px}
.ff-cal-cell:nth-child(7n){border-right:0}
.ff-cal-cell.out{background:var(--bg-hover);opacity:.6}
.ff-cal-d{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:2px}
.ff-cal-cell.today .ff-cal-d{background:#111;color:#fff;border-radius:999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.ff-cal-ev{display:block;width:100%;text-align:left;border:0;border-radius:6px;padding:3px 6px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;min-height:22px}
.ff-cal-more{border:0;background:transparent;color:var(--text-muted);font-size:11px;text-align:left;cursor:pointer;padding:2px 6px;font-family:inherit}
/* m2169 2026-09-28 FF Tasks = FC dash task board */
.ff-tk-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.ff-tk-search{position:relative;flex:1;min-width:220px;max-width:340px}
.ff-tk-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.ff-tk-search input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:999px;font-size:13px;background:var(--bg-card);color:var(--text-primary);outline:none;font-family:inherit;min-height:40px;box-sizing:border-box}
.ff-tk-drop{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);padding:8px 14px;border-radius:999px;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;min-height:40px}
.ff-tk-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);z-index:30;overflow:hidden}
.ff-tk-menu.open{display:block}
.ff-tk-menu button{display:block;width:100%;text-align:left;padding:10px 14px;background:transparent;color:var(--text-primary);border:0;font-size:13px;font-family:inherit;cursor:pointer}
.ff-tk-menu button:hover,.ff-tk-menu button.on{background:var(--bg-hover)}
.ff-tk-count{font-size:12px;color:var(--text-muted);white-space:nowrap}
.ff-tk-new{background:#111;color:#fff;border:1px solid #111;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;min-height:40px}
.ff-tk-scroll{overflow-x:auto;scrollbar-width:none;border:1px solid var(--border);border-radius:12px;background:var(--bg-card)}
.ff-tk-scroll::-webkit-scrollbar{display:none}
.ff-tk-table{width:100%;min-width:880px;margin:0}
.ff-tk-table td{vertical-align:middle}
.ff-tk-title{font-weight:500;color:var(--text-primary)}
.ff-tk-done .ff-tk-title{color:var(--text-muted);text-decoration:line-through}
.ff-tk-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);cursor:pointer}
.ff-tk-icon:hover{color:var(--text-primary);border-color:var(--text-muted)}
.ff-tk-prio{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;margin-left:6px;background:#fef3c7;color:#92400e}
.ff-tk-prio.critical{background:#fee2e2;color:#991b1b}
.ff-tk-due{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary);white-space:nowrap}
.ff-tk-due.today{background:#fef3c7;color:#92400e}
.ff-tk-due.overdue{background:#fee2e2;color:#991b1b;font-weight:600}
.ff-tk-assign{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:transparent;border:1px dashed transparent;border-radius:10px;padding:4px 6px;cursor:pointer;text-align:left;font-family:inherit;min-height:36px;color:var(--text-primary)}
.ff-tk-assign:hover{border-color:var(--border);background:var(--bg-hover)}
.ff-tk-person{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.ff-tk-unas{font-size:12.5px;color:var(--text-muted)}
.ff-tk-av{width:24px;height:24px;border-radius:50%;background:#111;color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;vertical-align:middle}
.ff-tk-av img{width:100%;height:100%;object-fit:cover}
.ff-tk-gp{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;color:var(--gc);background:color-mix(in srgb,var(--gc) 14%,transparent);white-space:nowrap}
@media (max-width:768px){.ff-m2494-pill{min-height:44px!important}} /* M2494 */
.ff-tk-btn{background:#111;color:#fff;border:1px solid #111;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;min-height:36px}
.ff-tk-btn.ghost{background:var(--bg-card);color:var(--text-primary);border-color:var(--border)}
.ff-tk-btn.danger{background:var(--bg-card);color:#b91c1c;border-color:#fecaca}
.ff-tk-btn:disabled{opacity:.6;cursor:default}
.ff-tk-pop{position:absolute;z-index:1000;width:280px;max-height:420px;overflow:auto;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:10px}
.ff-tk-pop label,.ff-tk-chips label{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:13px;cursor:pointer;color:var(--text-primary)}
.ff-tk-pop-h{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:8px 4px 2px}
.ff-tk-pop-f{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;position:sticky;bottom:-10px;background:var(--bg-card);padding:8px 0 2px}
.ff-tk-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.ff-tk-box{background:var(--bg-card);color:var(--text-primary);border-radius:16px;width:100%;max-width:620px;max-height:92vh;overflow:auto;padding:24px;box-shadow:0 24px 64px rgba(0,0,0,.2)}
.ff-tk-box-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ff-tk-box-h h3{margin:0;font-size:18px}
.ff-tk-x{width:40px;height:40px;border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--text-muted)}
.ff-tk-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ff-tk-pill{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--bg-hover);color:var(--text-secondary)}
.ff-tk-pill.done{background:#dcfce7;color:#166534}
.ff-tk-f{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:14px}
.ff-tk-f input,.ff-tk-f textarea,.ff-tk-f select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--bg-card);color:var(--text-primary);font-weight:400;min-height:42px}
/* m2348-css (Austin msg 2348): Tasks board = FC Tasks tab (page icon, one-line titles, cell padding, pill sizes) */
#tasks .ff-tk-table tbody td{padding:12px 14px;font-size:13.5px;vertical-align:middle}
#tasks .ff-tk-table thead th{padding:6px 14px}
#tasks .ff-tk-title{font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tasks .ff-tk-table{min-width:760px} /* m2348: fits 1200px desktop without clipping Complete */
#tasks .ff-tk-client{color:var(--text-secondary) !important;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tasks .ff-tk-doc{width:auto;height:auto;min-width:0;min-height:0;padding:0;border:none;background:none;color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
#tasks .ff-tk-doc:hover{color:var(--text-primary)}
#tasks .ff-tk-who{font-size:13.5px}
#ff-tk-pop .ff-tk-poprow:hover,#ff-tk-modal .ff-tk-opt:hover{background:var(--bg-hover)}
#ff-tk-modal .ff-tk-lbx{min-width:32px;min-height:32px}
@media (max-width:767px){
#tasks .ff-tk-doc{min-width:44px;min-height:44px;margin-left:-14px}
#ff-tk-modal{padding:16px 10px !important}
#ff-tk-modal .ff-tk-lbbody{padding:22px !important}
#ff-tk-modal .ff-tk-lbbtn{min-height:44px;white-space:nowrap !important}
#ff-tk-modal .ff-tk-lbx{min-width:44px;min-height:44px}
}
.ff-tk-prio,.ff-tb-prio{display:none !important} /* m2348: priority hidden in the UI (DB value untouched) */
.ff-tk-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ff-tk-chips{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-weight:400}
.ff-tk-box-f{display:flex;gap:8px;align-items:center;margin-top:8px}
.ff-tk-err{color:#b91c1c;font-size:13px;margin-top:8px;min-height:1em}
@media (max-width:720px){.ff-tk-search{max-width:none;flex-basis:100%}.ff-tk-row3{grid-template-columns:1fr}.ff-tk-new{flex:1;justify-content:center}}
/* QC-F2 2026-09-04 FF Task Hub - card/pill styling mirrored from the FC task board */
.ff-tb-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ff-tb-pills { display:flex; gap:8px; flex-wrap:wrap; }
.ff-tb-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary);
font-size:13px; font-weight:500; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; }
.ff-tb-pill:hover { border-color:var(--text-muted); }
.ff-tb-pill.active { background:#111; color:#fff; border-color:#111; }
/* M2360_TOOLBAR (Austin msg 2360): one toolbar outside the table card: search left, pill filters, pill sort, grey count right */
.ff-m2360-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.ff-m2360-search{min-width:240px;flex:0 1 320px;padding:8px 14px;border-radius:999px !important;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit;min-height:36px;box-sizing:border-box}
.ff-m2360-bar select{border-radius:999px !important;border:1px solid var(--border) !important;padding:8px 34px 8px 14px !important;font-size:13px !important;min-height:36px;background-color:var(--bg-card) !important;color:var(--text-primary);font-family:inherit;min-width:0 !important;width:auto}
.ff-m2360-bar input[type=date]{border-radius:999px !important;border:1px solid var(--border);padding:7px 12px;font-size:13px;min-height:36px;background:var(--bg-card);color:var(--text-primary);font-family:inherit;box-sizing:border-box}
.ff-m2360-count{margin-left:auto;font-size:13px;color:var(--text-muted);white-space:nowrap}
#po-lifecycle-action-bar select,#po-lifecycle-action-bar input,#billing-client-filter,#billing-currency-filter,#ret-log select{border-radius:999px !important;padding:8px 34px 8px 14px !important;font-size:13px !important;min-height:36px;border:1px solid var(--border) !important;background-color:var(--bg-card) !important;font-family:inherit}
#po-lifecycle-action-bar input{padding:8px 14px !important;min-width:220px}
#transition button[onclick="loadTransitionData()"],#transition button[onclick="loadOrderProcessingLog()"],#transition label[for="transition-client-filter"]{display:none !important}
#ret-claims #ffpc-note{display:none !important}
#ret-claims .ffpc-bar input[type=search]{order:-1}
#alerts-pager-prev,#alerts-pager-next{border-radius:999px !important}
:root.dark .dim-pill.ff-tb-pill{background:var(--bg-card) !important;color:var(--text-secondary) !important;border-color:var(--border) !important}
:root.dark .dim-pill.ff-tb-pill.active{background:#111 !important;color:#fff !important;border-color:#111 !important}
@media (max-width:767px){.ff-m2360-search,#po-lifecycle-action-bar input{flex:1 1 100%;min-width:0 !important}.ff-m2360-bar select,.ff-m2360-bar input[type=date]{flex:1 1 40%;min-height:44px}.ff-m2360-count{margin-left:0;flex-basis:100%}.ff-m2360-bar .ff-tb-pill{min-height:36px}}
.ff-tb-count { font-size:12px; opacity:.75; }
.ff-tb-search { min-width:260px; padding:8px 14px; border-radius:999px; border:1px solid var(--border);
background:var(--bg-card); color:var(--text-primary); font-size:13px; font-family:'Inter',sans-serif; }
.ff-tb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.ff-tb-card { border:1px solid var(--border); border-radius:12px; background:var(--bg-card); padding:14px 16px; }
.ff-tb-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ff-tb-brand { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ff-tb-prio { font-size:11px; padding:2px 8px; border-radius:999px; font-weight:600; }
.ff-tb-prio-high { background:#fef3c7; color:#92400e; }
.ff-tb-prio-critical { background:#fee2e2; color:#991b1b; }
.ff-tb-prio-low { background:#f1f5f9; color:#475569; }
.ff-tb-title { font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:4px; line-height:1.35; }
.ff-tb-instr { font-size:12.5px; color:var(--text-secondary); line-height:1.45; margin-bottom:10px; }
.ff-tb-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.ff-tb-avatar { width:24px; height:24px; border-radius:50%; background:#111; color:#fff; font-size:10px;
font-weight:600; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ff-tb-who { font-size:12px; color:var(--text-secondary); }
.ff-tb-due { font-size:12px; color:var(--text-muted); padding:2px 8px; border-radius:999px; background:var(--bg-hover); }
.ff-tb-due.overdue { background:#fee2e2; color:#991b1b; font-weight:600; }
.ff-tb-done-badge { font-size:11px; padding:2px 10px; border-radius:999px; background:#dcfce7; color:#166534; font-weight:600; margin-left:auto; }
.ff-tb-done-btn { margin-left:auto; padding:5px 12px; border-radius:999px; border:1px solid var(--border);
background:var(--bg-card); color:var(--text-secondary); font-size:12px; cursor:pointer; font-family:'Inter',sans-serif; }
.ff-tb-done-btn:hover { background:#111; color:#fff; border-color:#111; }
|