/* Figtree is loaded via a in each page's (app/index/portal.html)
— more reliable than a CSS @import, which can silently fail to fetch. */
/* ==========================================================================
Theme-aware design system (brand values come from tenant-config.js)
"monday.com feel" — rounded-geometric sans (Figtree), calm-but-dense,
tokenised spacing/type/radius/elevation/motion. LIGHT is the default
(:root); DARK is opt-in via and the top-bar toggle.
Every theme-dependent colour is a CSS custom property, so the two palettes
below are the ONLY place colours are defined — component rules just consume
the variables. Non-colour tokens (metrics, radii, motion, status/priority
solids) are theme-independent and live once in :root.
========================================================================== */
:root {
color-scheme: light;
/* --- Surfaces (LIGHT) — soft, warm-neutral greys, low-contrast borders -- */
--app-bg: #F6F6F7;
--board-bg: #F6F6F7;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-hover: #F4F4F6;
--track-bg: #ECECEF;
--input-bg: #FFFFFF;
--border: #D7D7DE;
--border-subtle: #ECECEF;
/* --- Board table grid (LIGHT) — subtle cell lines that define the grid
without reading as heavy; a slightly stronger tone for the card outline
+ hover cues; a fixed neutral grey for empty status pills. */
--bt-grid: #EAEAEE;
--bt-grid-strong: #DEDEE4;
--bt-empty-status: #C4C4C4;
--bt-header: #6E7385; /* column-header text — muted medium grey, monday-style */
/* Row dividers (horizontal) read; cell dividers (vertical) barely do — vline
is ~half the hairline's contrast so the grid never reads as a spreadsheet. */
--table-hairline: #ECECEF;
--table-vline: rgba(15, 23, 42, 0.04);
--bt-empty-outline: rgba(15, 23, 42, 0.14); /* dashed outline for empty status */
--board-canvas: #EEEEF1; /* page behind the board card (slightly darker) */
/* --- App chrome (global bar + icon rail) ------------------------------ */
--global-bar-bg: #FFFFFF;
--global-bar-border: #E8E8EC;
--chrome-icon: #505565;
--chrome-icon-strong: #17181F;
--chrome-hover: #F4F4F6;
--search-bg: #F4F4F6;
--search-bg-focus: #FFFFFF;
/* --- Sidebar ---------------------------------------------------------- */
--sidebar-bg: #FFFFFF;
--sidebar-hover: #F1F5F9;
--sidebar-active: #EEF2FF;
--sidebar-active-bar: #6366F1;
--sidebar-text: #475569;
--sidebar-text-hover: #0F172A;
--sidebar-text-active: #4338CA;
--sidebar-text-strong: #0F172A;
--sidebar-muted: #94A3B8;
--sidebar-border: #E4E7EC;
/* --- Brand ------------------------------------------------------------- */
--primary: #6366F1;
--primary-hover: #4F46E5;
--primary-glow: rgba(99, 102, 241, 0.22);
--primary-light: #EEF2FF;
--accent: #A25DDC; /* secondary brand colour (logo-mark gradient); tenant.js overrides */
/* --- Text -------------------------------------------------------------- */
--text-primary: #0F172A;
--text-secondary: #475569;
--text-muted: #94A3B8;
/* --- Utility surfaces -------------------------------------------------- */
--scrollbar-thumb: #D9DEE7;
--scrollbar-thumb-hover: #C4CBD8;
--btn-secondary-hover-bg: #F8FAFC;
--btn-secondary-hover-border: #D0D5DD;
--chip-border: #D0D5DD;
--dot-ring: rgba(15, 23, 42, 0.05);
--toast-progress: rgba(15, 23, 42, 0.12);
--login-gradient: #E5E9FF;
/* --- Glass / overlays / scrims ---------------------------------------- */
--glass-bg: rgba(255, 255, 255, 0.80);
--glass-border: rgba(99, 102, 241, 0.22);
--glass-hover-glow: rgba(99, 102, 241, 0.16);
--modal-bg: rgba(255, 255, 255, 0.96);
--pop-bg: #FFFFFF;
--scrim-modal: rgba(15, 23, 42, 0.35);
--scrim-panel: rgba(15, 23, 42, 0.22);
/* --- ELEVATION (LIGHT: soft, low-spread — never borders-as-shadows) --- */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
--shadow-pop: var(--shadow-md);
--panel-shadow: -16px 0 44px rgba(15, 23, 42, 0.14);
/* --- Login error banner ----------------------------------------------- */
--error-bg: #FEE2E2;
--error-text: #B91C1C;
--error-border: #FCA5A5;
/* ======================================================================
Theme-INDEPENDENT tokens (shared by light + dark)
====================================================================== */
/* Status solids (saturated — carry white/near-black text in both themes) */
--status-todo-solid: #676879; /* "Not started" */
--status-inprogress-solid: #579BFC; /* "In Progress" */
--status-review-solid: #A25DDC; /* "Review" */
--status-done-solid: #00C875; /* "Done" */
--priority-critical-solid: #E2445C;
--priority-high-solid: #FDAB3D;
--priority-medium-solid: #579BFC;
--priority-low-solid: #676879;
--group-todo: #579BFC;
--group-inprogress: #FDAB3D;
--group-review: #A25DDC;
--group-done: #00C875;
--success: #00C875;
--danger: #E2445C;
--warning: #FDAB3D;
/* Metrics */
--sidebar-width: 228px;
--panel-width: 560px;
--global-bar-height: 48px;
--topbar-height: 48px;
--row-height: 38px;
/* --- BOARD TABLE design system (premium pass) ------------------------- *
* Every board-table metric comes from these tokens — no magic numbers in
* the bt-* rules. Heights/gutter/name-min drive the row architecture; the
* hairline/vline colour tokens are theme-aware (see the light + dark blocks
* above/below). */
--bt-row-h: 44px; /* item row */
--bt-header-h: 38px; /* column header row */
--bt-group-h: 48px; /* group header row */
--bt-summary-h: 38px; /* summary strip */
--bt-gutter: 44px; /* permanent left gutter (checkbox + drag handle) */
--bt-name-min: 300px; /* name column never narrower than this (also mirrored in board-table.js NAME_MIN) */
--bt-caps-tracking: 0.06em;
/* Board type scale */
--bt-name-size: 15px; /* item name (400) */
--bt-cell-size: 14px; /* cell text (400) */
--bt-header-size: 12px; /* column header (600 uppercase) */
--bt-status-size: 13px; /* status pill text (600) */
--bt-groupname-size: 15.5px;
/* --- SPACING scale (4-based) ----------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
/* --- TYPE scale (size / line-height / weight) ------------------------- */
--text-xs: 11px; /* column headers, meta, timestamps */
--text-sm: 13px; /* body + table cells (default) */
--text-base: 14px; /* emphasised body, primary cell */
--text-lg: 18px; /* panel / section titles */
--leading-tight: 1.3;
--leading: 1.5;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--tracking-caps: 0.04em; /* uppercase column-header tracking */
/* --- RADIUS (subtle, monday-like) ------------------------------------ */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 12px;
/* --- MOTION ----------------------------------------------------------- */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-panel: cubic-bezier(0.32, 0.72, 0, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms;
--dur: 180ms;
--dur-slow: 240ms;
--transition: var(--dur) var(--ease);
}
/* Tertiary text alias (theme-aware; maps to the existing muted tone). */
:root { --text-tertiary: var(--text-muted); }
/* ==========================================================================
DARK theme — overrides only the colour tokens
========================================================================== */
html[data-theme="dark"] {
color-scheme: dark;
/* Softer, more neutral dark greys (less blue/purple, never pure black). */
--app-bg: #1B1B20;
--board-bg: #1E1E24;
--surface: #26262C;
--surface-raised: #2E2E36;
--surface-hover: #2D2D34;
--track-bg: #1E1E24;
--input-bg: #1E1E24;
--border: #40404B;
--border-subtle: #2C2C33;
/* Board grid (DARK) — low white-alpha lines so the grid reads without heavy
rules; empty status = a muted dark grey (a bright #C4C4C4 would glare on a
dark board). */
--bt-grid: rgba(255, 255, 255, 0.07);
--bt-grid-strong: rgba(255, 255, 255, 0.11);
--bt-empty-status: #3A3A46;
--bt-header: #9B9FB2;
--table-hairline: rgba(255, 255, 255, 0.08);
--table-vline: rgba(255, 255, 255, 0.04);
--bt-empty-outline: rgba(255, 255, 255, 0.16);
--board-canvas: #17171B; /* darker than --board-bg so the card lifts */
--global-bar-bg: #151519;
--global-bar-border: #0E0E12;
--chrome-icon: #C3C6D4;
--chrome-icon-strong: #FFFFFF;
--chrome-hover: rgba(255, 255, 255, 0.08);
--search-bg: #21212F;
--search-bg-focus: #262636;
--sidebar-bg: #292938;
--sidebar-hover: #33334A;
--sidebar-active: #3D3D5C;
--sidebar-active-bar: #6C63FF;
--sidebar-text: #C3C6D4;
--sidebar-text-hover: #FFFFFF;
--sidebar-text-active: #FFFFFF;
--sidebar-text-strong: #FFFFFF;
--sidebar-muted: #7B7F9E;
--sidebar-border: rgba(255, 255, 255, 0.06);
--primary: #6C63FF;
--primary-hover: #5A52E8;
--primary-glow: rgba(108, 99, 255, 0.25);
--primary-light: rgba(108, 99, 255, 0.16);
--accent: #A25DDC;
--text-primary: #FFFFFF;
--text-secondary: #C3C6D4;
--text-muted: #7B7F9E;
--scrollbar-thumb: #3A3A55;
--scrollbar-thumb-hover: #4A4A6A;
--btn-secondary-hover-bg: #363654;
--btn-secondary-hover-border: #45456A;
--chip-border: #45456A;
--dot-ring: rgba(255, 255, 255, 0.04);
--toast-progress: rgba(255, 255, 255, 0.20);
--login-gradient: #2A2A45;
--glass-bg: rgba(37, 37, 58, 0.80);
--glass-border: rgba(108, 99, 255, 0.20);
--glass-hover-glow: rgba(108, 99, 255, 0.15);
--modal-bg: rgba(37, 37, 58, 0.92);
--pop-bg: #2A2A3E;
--scrim-modal: rgba(0, 0, 0, 0.60);
--scrim-panel: rgba(0, 0, 0, 0.35);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.24);
--shadow-md: 0 6px 22px rgba(0, 0, 0, 0.42), 0 1px 3px rgba(0, 0, 0, 0.30);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
--shadow-pop: var(--shadow-md);
--panel-shadow: -18px 0 48px rgba(0, 0, 0, 0.48);
--error-bg: rgba(226, 68, 92, 0.16);
--error-text: #FF8A9C;
--error-border: rgba(226, 68, 92, 0.30);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
/* Single UI font: Figtree (rounded-geometric, "monday" feel); system fallback. */
font-family: 'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: var(--text-sm);
line-height: var(--leading);
background: var(--app-bg);
color: var(--text-secondary);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Form controls default to the system font — force them onto the UI font. */
input, textarea, select, button, optgroup, option { font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
::selection { background: var(--primary-light); color: var(--text-primary); }
.hidden { display: none !important; }
/* Scrollbars ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
/* ==========================================================================
Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 16px; font-size: 13px; font-weight: 600;
border-radius: var(--radius-md); border: 1px solid transparent;
transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
white-space: nowrap; color: var(--text-secondary);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 12px var(--primary-glow); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 4px 18px var(--primary-glow); }
.btn-secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--danger); border-color: rgba(226, 68, 92, 0.5); }
.btn-danger:hover:not(:disabled) { background: rgba(226, 68, 92, 0.14); border-color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); border: none; }
.btn-icon:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-block { width: 100%; }
/* ==========================================================================
Forms
========================================================================== */
.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 12px; }
.form-row > .form-group { flex: 1; }
.form-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.input, .textarea, .select {
width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit;
color: var(--text-primary); background: var(--input-bg);
border: 1px solid var(--border); border-radius: var(--radius-md);
transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus, .select:focus {
outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.select {
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394A3B8'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.select option { background: var(--surface-raised); color: var(--text-primary); }
.form-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.checkbox-row input, input[type="checkbox"] { accent-color: var(--primary); }
/* ==========================================================================
Badges
========================================================================== */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600;
border-radius: 4px; white-space: nowrap; color: #fff;
}
.badge-priority-critical { background: var(--priority-critical-solid); }
.badge-priority-high { background: var(--priority-high-solid); color: #1B1B2A; }
.badge-priority-medium { background: var(--priority-medium-solid); }
.badge-priority-low { background: var(--priority-low-solid); }
.badge-status-todo { background: var(--status-todo-solid); }
.badge-status-in_progress { background: var(--status-inprogress-solid); }
.badge-status-review { background: var(--status-review-solid); }
.badge-status-done { background: var(--status-done-solid); }
.badge-neutral { background: var(--surface-raised); color: var(--text-secondary); border: 1px solid var(--border); }
.badge-new { background: var(--danger); color: #fff; letter-spacing: 0.02em; border-radius: 999px; }
.role-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 4px; text-transform: capitalize; color: #fff; }
.role-pill.admin { background: var(--danger); }
.role-pill.manager { background: var(--warning); color: #1B1B2A; }
.role-pill.member { background: var(--primary); }
.role-pill.client { background: var(--status-todo-solid); }
/* ==========================================================================
Avatars
========================================================================== */
.avatar {
width: 30px; height: 30px; border-radius: 50%;
background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; object-fit: cover; flex-shrink: 0;
border: 2px solid var(--surface);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar-lg { width: 46px; height: 46px; font-size: 17px; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
/* ==========================================================================
App shell — global bar / icon strip / sidebar / main
========================================================================== */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* --- Global top bar (48px) ---------------------------------------------- */
.global-bar {
height: var(--global-bar-height); flex-shrink: 0;
display: flex; align-items: center; gap: 16px; padding: 0 14px;
background: var(--global-bar-bg);
border-bottom: 1px solid var(--global-bar-border); z-index: 40;
}
.global-logo {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff; font-weight: 800; font-size: 17px; flex-shrink: 0;
}
.global-bar-spacer { flex: 1; }
.global-bar-icons { display: flex; align-items: center; gap: 4px; }
.global-icon-btn {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm); background: transparent; border: none;
color: var(--chrome-icon); font-size: 15px; transition: background var(--transition), color var(--transition);
}
.global-icon-btn:hover { background: var(--chrome-hover); color: var(--chrome-icon-strong); }
/* --- Body row (sidebar + main) ------------------------------------------ */
.app-body { flex: 1; display: flex; min-height: 0; }
/* --- Sidebar (228px) ---------------------------------------------------- */
.sidebar {
width: var(--sidebar-width); flex-shrink: 0;
background: var(--sidebar-bg);
box-shadow: inset -1px 0 0 var(--sidebar-border);
display: flex; flex-direction: column; min-height: 0;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.sidebar-brand-mark {
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--accent));
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px; flex-shrink: 0;
}
.sidebar-brand-name { font-weight: 600; font-size: 15px; color: var(--sidebar-text-strong); }
/* When a tenant supplies logoMarkUrl, the mark tiles render an ![]()
that fills
the square (cropped) instead of a letter. */
.global-logo .brand-mark-img, .sidebar-brand-mark .brand-mark-img,
.sidebar-workspace-mark .brand-mark-img, .login-brand-mark .brand-mark-img {
width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; }
.sidebar-workspace {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; margin-bottom: 8px; border-radius: var(--radius-md);
cursor: pointer; transition: background var(--transition);
}
.sidebar-workspace:hover { background: var(--sidebar-hover); }
.sidebar-workspace-mark {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; color: #fff;
background: linear-gradient(135deg, var(--primary), var(--accent));
}
.sidebar-workspace-name { color: var(--sidebar-text-strong); font-weight: 600; font-size: 13px; line-height: 1.25; }
.sidebar-workspace-sub { color: var(--sidebar-muted); font-size: 11px; }
.sidebar-workspace-chevron { margin-left: auto; display: inline-flex; align-items: center; color: var(--sidebar-muted); transform: rotate(90deg); }
.sidebar-workspace-chevron .ic { width: 13px; height: 13px; }
.sidebar-section-label {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--sidebar-muted); padding: 14px 10px 6px;
}
.sidebar-section-toggle {
display: flex; align-items: center; justify-content: space-between;
color: var(--sidebar-muted); padding: 14px 10px 6px; width: 100%;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
background: none; border: none; cursor: pointer; transition: color var(--transition);
}
.sidebar-section-toggle:hover { color: var(--sidebar-text); }
.sidebar-section-tools { display: flex; align-items: center; gap: 2px; }
.sidebar-section-toggle .chev { display: inline-flex; align-items: center; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.sidebar-section-toggle .chev .ic { width: 12px; height: 12px; }
.sidebar-section-toggle.collapsed .chev { transform: rotate(0deg); }
.sidebar-section-add {
opacity: 0; display: inline-flex; align-items: center; justify-content: center;
background: none; border: none; color: var(--sidebar-text);
width: 22px; height: 22px; border-radius: var(--radius-sm);
transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.sidebar-section-add .ic { width: 15px; height: 15px; }
.sidebar-empty-note { padding: 4px 16px 8px; color: var(--sidebar-muted); font-size: var(--text-xs); }
.sidebar-section-toggle:hover .sidebar-section-add { opacity: 1; }
.sidebar-section-add:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.sidebar-nav-item {
position: relative; display: flex; align-items: center; gap: 10px;
height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 400; color: var(--sidebar-text); margin-bottom: 2px;
transition: background 100ms var(--ease), color 100ms var(--ease);
}
.sidebar-nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.sidebar-nav-item.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 500; }
.sidebar-nav-item::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
width: 3px; height: 20px; border-radius: 0 3px 3px 0;
background: var(--sidebar-active-bar); transition: transform 150ms var(--ease);
}
.sidebar-nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--sidebar-muted); flex-shrink: 0; transition: color var(--transition); }
.sidebar-nav-icon .ic { width: 18px; height: 18px; }
.sidebar-nav-item:hover .sidebar-nav-icon, .sidebar-nav-item.active .sidebar-nav-icon { color: currentColor; }
.sidebar-nav-label { flex: 1; }
.sidebar-project-item {
position: relative; display: flex; align-items: center; gap: 10px;
height: 32px; padding: 0 8px 0 16px; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 400; color: var(--sidebar-text); margin-bottom: 2px;
transition: background 100ms var(--ease), color 100ms var(--ease);
}
.sidebar-project-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.sidebar-project-item.active { background: var(--sidebar-active); color: var(--sidebar-text-active); font-weight: 500; }
.sidebar-project-item::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
width: 3px; height: 18px; border-radius: 0 3px 3px 0;
background: var(--sidebar-active-bar); transition: transform 150ms var(--ease);
}
.sidebar-project-item.active::before { transform: translateY(-50%) scaleY(1); }
.sidebar-project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sidebar-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-add-project {
display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 16px;
font-size: 13px; color: var(--sidebar-muted); border-radius: var(--radius-sm);
}
.sidebar-add-project:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.sidebar-footer { padding: 10px; border-top: 1px solid var(--sidebar-border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); transition: background var(--transition); }
.sidebar-user:hover { background: var(--sidebar-hover); }
.sidebar-user-info { flex: 1; overflow: hidden; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--sidebar-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { font-size: 11px; color: var(--sidebar-muted); text-transform: capitalize; }
.build-stamp { text-transform: none; opacity: 0.8; font-variant-numeric: tabular-nums; }
/* --- Main column -------------------------------------------------------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--board-bg); }
.topbar {
height: var(--topbar-height); flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; background: var(--board-bg);
border-bottom: 1px solid var(--border-subtle);
}
.topbar-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); letter-spacing: -0.02em; }
.topbar-subtitle { font-size: 11px; color: var(--text-muted); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.vibe-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; gap: 12px; }
.vibe-topbar-left { min-width: 0; }
.vibe-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.view-switcher { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); padding: 3px; border-radius: var(--radius-md); }
.view-pill, .view-toggle-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer;
transition: all var(--transition);
}
.view-pill:hover, .view-toggle-btn:hover { color: var(--text-primary); }
.view-pill.active, .view-toggle-btn.active { background: var(--primary); color: #fff; box-shadow: 0 1px 8px var(--primary-glow); }
.view-toggle { display: inline-flex; gap: 2px; background: var(--surface); padding: 3px; border-radius: var(--radius-md); }
.tool-btn {
width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
color: var(--text-secondary); font-size: 14px; transition: all var(--transition);
}
.tool-btn:hover { background: var(--surface-hover); color: var(--text-primary); border-color: var(--chip-border); }
.content { flex: 1; overflow-y: auto; padding: 24px; }
.content-narrow { max-width: 880px; margin: 0 auto; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.page-header h1 { font-size: 22px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.page-header p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); }
/* Center the empty-state glyph whether it's an emoji (text) or a line-icon SVG.
The SVG carries display:block (from .ic) + a fixed 16px size, so without this
it left-aligned as a small orphaned glyph beside the centered copy. */
.empty-state-icon { display: flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 12px; opacity: 0.5; }
.empty-state-icon .ic { width: 40px; height: 40px; }
.empty-state h3 { color: var(--text-secondary); font-size: 15px; margin-bottom: 6px; }
.empty-state p { font-size: 13px; }
/* ==========================================================================
Cards & generic surfaces
========================================================================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* --- Dashboard stat cards (glass-morphism) ------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
position: relative; overflow: hidden;
padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
background: var(--glass-bg);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 0 24px var(--glass-hover-glow); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-card-icon {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700;
}
.stat-card-value { font-size: 30px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }
.stat-card-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.section-block { margin-bottom: 24px; }
/* --- Project cards ------------------------------------------------------ */
.project-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.project-card {
padding: 0; overflow: hidden; cursor: pointer; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-lg);
display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.project-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-md), 0 0 20px var(--glass-hover-glow); }
.project-card-band { height: 6px; display: block; padding: 0; flex-shrink: 0; }
.project-card-band > span { display: none; }
.project-card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.project-card-band-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.project-card-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.project-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.project-card-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project-card-meta { display: flex; align-items: center; justify-content: space-between; }
.progress-bar { height: 6px; border-radius: 999px; background: var(--track-bg); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--success); border-radius: 999px; transition: width 600ms var(--ease); }
.progress-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; display: flex; justify-content: space-between; }
/* --- Activity feed (staggered fade-in) ---------------------------------- */
.activity-feed { display: flex; flex-direction: column; gap: 2px; }
.activity-item {
display: flex; gap: 10px; padding: 9px 8px; border-radius: var(--radius-sm);
transition: background var(--transition);
opacity: 0; animation: activity-in 320ms var(--ease) forwards;
}
.activity-item:hover { background: var(--surface-hover); }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 0 3px var(--dot-ring); }
.activity-text { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.activity-text b { color: var(--text-primary); font-weight: 600; }
.activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
@keyframes activity-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.upcoming-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--transition); }
.upcoming-item:hover { background: var(--surface-hover); }
.upcoming-item:last-child { border-bottom: none; }
.upcoming-item-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-item-date { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.upcoming-item-date.overdue { color: var(--danger); font-weight: 600; }
.inbox-banner {
display: flex; align-items: center; gap: 12px;
background: var(--primary-light); border: 1px solid var(--glass-border);
border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 20px;
}
.inbox-banner-icon { font-size: 18px; }
.inbox-banner-text { flex: 1; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.inbox-banner-text b { color: var(--text-primary); font-weight: 700; }
/* ==========================================================================
MONDAY GROUPED BOARD TABLE (mb-*)
========================================================================== */
.mb-board { display: flex; flex-direction: column; gap: 22px; }
.mb-group-header { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; cursor: pointer; user-select: none; }
.mb-group-caret { font-size: 11px; color: var(--group-color, var(--primary)); transition: transform 150ms var(--ease); cursor: pointer; }
.mb-group.collapsed .mb-group-caret { transform: rotate(-90deg); }
.mb-group-color-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--group-color, var(--primary)); flex-shrink: 0; }
.mb-group-name { font-size: 14px; font-weight: 600; color: var(--group-color, var(--primary)); }
.mb-group-count {
font-size: 12px; font-weight: 600; color: var(--text-muted);
background: var(--surface-raised); border: 1px solid var(--border); padding: 1px 9px; border-radius: 999px;
}
.mb-table-wrap {
border-left: 4px solid var(--group-color, var(--primary));
border-radius: 0 var(--radius-sm) var(--radius-sm) 0; overflow: hidden;
max-height: 4000px; transition: max-height 200ms var(--ease), opacity 150ms var(--ease);
}
.mb-group.collapsed .mb-table-wrap { max-height: 0; opacity: 0; border-left-color: transparent; }
.mb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.mb-table thead th {
text-align: left; height: var(--row-height); padding: 0 14px;
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-muted); background: var(--surface);
border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mb-table thead th.mb-th-center { text-align: center; }
.mb-th-name { width: 40%; }
.mb-table tbody td {
padding: 0; height: var(--row-height); vertical-align: middle;
border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.mb-table tbody tr:last-child td { border-bottom: none; }
.mb-table tbody tr { transition: background 100ms var(--ease); }
.mb-table tbody tr:hover { background: var(--surface-hover); }
.mb-table tbody tr.mb-row-selected { background: var(--surface-hover); }
.mb-table tbody tr.mb-row-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.mb-cell { padding: 0 14px; font-size: 13px; }
.mb-cell-title { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--text-primary); }
.mb-title-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
/* Drag handle + hover row action icons */
.mb-drag-handle {
opacity: 0; cursor: grab; color: var(--text-muted); font-size: 12px; line-height: 1;
padding: 0 2px; user-select: none; transition: opacity 100ms var(--ease);
}
.mb-table tbody tr:hover .mb-drag-handle { opacity: 1; }
.mb-row-actions { display: inline-flex; gap: 2px; opacity: 0; transform: translateX(8px); transition: opacity 120ms var(--ease), transform 120ms var(--ease); }
.mb-table tbody tr:hover .mb-row-actions { opacity: 1; transform: translateX(0); }
.mb-row-icon {
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 6px; color: var(--text-muted); font-size: 13px; background: none; border: none; cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.mb-row-icon:hover { background: var(--surface-raised); color: var(--text-primary); }
.mb-expand { color: var(--text-muted); font-size: 13px; background: none; border: none; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.mb-expand:hover { background: var(--surface-raised); color: var(--primary); }
/* Full-fill coloured status/priority cells */
.mb-fill-cell { width: 150px; padding: 0; }
.mb-fill {
display: flex; align-items: center; justify-content: center; position: relative;
height: var(--row-height); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: background-color 250ms var(--ease), filter var(--transition);
}
.mb-fill:hover { filter: brightness(1.08); }
.mb-fill .mb-fill-caret { position: absolute; right: 8px; opacity: 0; font-size: 9px; transition: opacity var(--transition); }
.mb-fill:hover .mb-fill-caret { opacity: 0.85; }
.mb-fill.s-todo { background: var(--status-todo-solid); }
.mb-fill.s-in_progress { background: var(--status-inprogress-solid); }
.mb-fill.s-review { background: var(--status-review-solid); }
.mb-fill.s-done { background: var(--status-done-solid); }
.mb-fill.p-critical { background: var(--priority-critical-solid); }
.mb-fill.p-high { background: var(--priority-high-solid); color: #1B1B2A; }
.mb-fill.p-medium { background: var(--priority-medium-solid); }
.mb-fill.p-low { background: var(--priority-low-solid); }
/* Inline editors replacing a cell's content */
.mb-inline-select, .mb-inline-input {
width: 100%; height: var(--row-height); border: 2px solid var(--primary);
font-family: inherit; font-size: 13px; padding: 0 10px;
background: var(--surface-raised); color: var(--text-primary); outline: none;
}
.mb-inline-select { cursor: pointer; }
.mb-inline-select option { background: var(--surface-raised); }
.mb-inline-input.mb-title-input { font-weight: 500; }
.mb-cell-assignee { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mb-cell-date { cursor: pointer; color: var(--text-secondary); }
.mb-cell-date:hover, .mb-cell-assignee:hover { color: var(--primary); }
.mb-cell-date.overdue { color: var(--danger); font-weight: 600; }
.mb-cell-muted { color: var(--text-muted); }
.mb-table tbody td.mb-edit-cell { cursor: pointer; }
/* Drag / drop */
.mb-row-dragging { opacity: 0.9; transform: rotate(1deg); box-shadow: var(--shadow-lg); background: var(--surface-raised) !important; }
.mb-group.mb-drop-target .mb-table-wrap { box-shadow: inset 0 0 0 2px var(--primary), 0 0 18px var(--primary-glow); }
.mb-drop-line { height: 2px; background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); animation: drop-line-in 100ms var(--ease); }
@keyframes drop-line-in { from { opacity: 0; } to { opacity: 1; } }
.mb-row-flash { animation: row-flash 300ms var(--ease); }
@keyframes row-flash { 0% { background: var(--sidebar-active); } 100% { background: transparent; } }
/* Inline "+ Add item" row */
.mb-add-row {
display: flex; align-items: center; gap: 8px; height: var(--row-height); padding: 0 14px;
font-size: 13px; font-weight: 500; color: var(--text-muted);
border-top: 1px dashed var(--border); cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.mb-add-row:hover { background: var(--surface-hover); color: var(--primary); }
.mb-add-input-row { overflow: hidden; max-height: 0; transition: max-height 150ms var(--ease); border-top: 1px dashed var(--border); }
.mb-add-input-row.open { max-height: var(--row-height); }
.mb-add-input {
width: 100%; height: var(--row-height); border: none; border-left: 4px solid var(--primary);
background: var(--surface-raised); color: var(--text-primary); font-family: inherit; font-size: 13px;
padding: 0 14px; outline: none; opacity: 0; transition: opacity 100ms var(--ease) 100ms;
}
.mb-add-input-row.open .mb-add-input { opacity: 1; }
/* Status / priority colour dropdown */
.status-pop {
position: absolute; z-index: 1400; min-width: 176px; padding: 6px;
background: var(--pop-bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-pop);
transform-origin: top center; transform: scale(0.95); opacity: 0;
transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}
.status-pop.open { transform: scale(1); opacity: 1; }
.status-pop.closing { transform: scale(0.95); opacity: 0; transition: transform 120ms var(--ease), opacity 120ms var(--ease); }
.status-pop-option {
display: flex; align-items: center; justify-content: center; width: 100%;
height: 32px; margin: 4px 0; border-radius: 4px; cursor: pointer;
color: #fff; font-size: 13px; font-weight: 600; border: none;
transition: filter var(--transition);
}
.status-pop-option:hover { filter: brightness(1.10); }
/* ==========================================================================
Generic table / list view
========================================================================== */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
text-align: left; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
cursor: pointer; white-space: nowrap; user-select: none;
}
.table th:hover { color: var(--text-secondary); }
.table th .sort-arrow { margin-left: 4px; opacity: 0.5; }
.table td { padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-secondary); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background 100ms var(--ease); cursor: pointer; }
.table tbody tr:hover { background: var(--surface-hover); }
.table-title-cell { font-weight: 500; color: var(--text-primary); }
.table-cell-muted { color: var(--text-muted); }
/* ==========================================================================
Kanban board
========================================================================== */
.kanban-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; height: 100%; }
.kanban-column { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--track-bg); border: 1px solid var(--border); border-radius: var(--radius-md); max-height: 100%; }
.kanban-column.drag-over { box-shadow: inset 0 0 0 2px var(--primary); }
.kanban-column-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; color: #fff; }
.kanban-column-header.hd-todo { background: var(--status-todo-solid); }
.kanban-column-header.hd-in_progress { background: var(--status-inprogress-solid); }
.kanban-column-header.hd-review { background: var(--status-review-solid); }
.kanban-column-header.hd-done { background: var(--status-done-solid); }
.kanban-column-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #fff; }
.kanban-column-count { font-size: 11.5px; font-weight: 600; background: rgba(255, 255, 255, 0.28); color: #fff; padding: 1px 8px; border-radius: 999px; }
.kanban-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.kanban-card {
background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
border-radius: var(--radius-sm); padding: 12px; cursor: grab; box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: 8px;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-left-color: var(--primary-hover); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kanban-card-tag { font-size: 10.5px; background: var(--track-bg); color: var(--text-secondary); padding: 2px 7px; border-radius: 999px; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.kanban-card-due { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.kanban-card-due.overdue { color: var(--danger); font-weight: 600; }
.kanban-add-card { margin: 0 10px 10px; font-size: 13px; color: var(--text-muted); padding: 8px 4px; border-radius: var(--radius-sm); }
.kanban-add-card:hover { background: var(--surface-hover); color: var(--primary); }
/* ==========================================================================
Timeline / Gantt
========================================================================== */
.timeline-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: auto; }
.timeline-grid { display: grid; min-width: 900px; }
.timeline-head-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.timeline-head-label { padding: 10px 16px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.timeline-head-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px, 1fr); }
.timeline-day { text-align: center; font-size: 10.5px; color: var(--text-muted); padding: 10px 0; border-left: 1px solid var(--border-subtle); }
.timeline-day.today { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.timeline-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--border-subtle); }
.timeline-row:last-child { border-bottom: none; }
.timeline-row-label { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.timeline-row-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(28px, 1fr); }
.timeline-track-cell { border-left: 1px solid var(--border-subtle); }
.timeline-bar { position: absolute; top: 8px; height: 22px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; box-shadow: var(--shadow-sm); }
/* ==========================================================================
Modal (glass backdrop + spring pop)
========================================================================== */
.modal-backdrop {
position: fixed; inset: 0; background: var(--scrim-modal);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 1000; opacity: 0; transition: opacity 200ms var(--ease); padding: 20px;
}
.modal-backdrop.open { opacity: 1; }
.modal {
background: var(--modal-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
transform: scale(0.94) translateY(8px); opacity: 0;
transition: transform 200ms var(--spring), opacity 200ms var(--ease);
}
.modal-backdrop.open .modal { transform: scale(1) translateY(0); opacity: 1; }
.modal-wide { max-width: 680px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-close { color: var(--text-muted); font-size: 18px; padding: 4px 8px; border-radius: var(--radius-sm); background: none; border: none; }
.modal-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.modal-footer.space-between { justify-content: space-between; }
/* ==========================================================================
Task detail slide-in panel (560px)
========================================================================== */
.panel-backdrop {
position: fixed; inset: 0; background: var(--scrim-panel);
z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease);
}
.panel-backdrop.open { opacity: 1; pointer-events: auto; }
.task-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-width); max-width: 94vw;
background: var(--surface); border-left: 1px solid var(--border-subtle);
box-shadow: var(--panel-shadow);
z-index: 1001; transform: translateX(100%); opacity: 0;
transition: transform var(--dur-slow) var(--ease-panel), opacity var(--dur-slow) var(--ease);
display: flex; flex-direction: column; will-change: transform;
}
.task-panel.open { transform: translateX(0); opacity: 1; }
.task-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.task-panel-header-actions { display: flex; align-items: center; gap: var(--space-2); }
.task-panel-body { flex: 1; overflow-y: auto; padding: 20px; }
.task-panel-title {
font-size: 19px; font-weight: 600; width: 100%; border: none; outline: none;
padding: 4px 6px; margin-bottom: 16px; margin-left: -6px; background: transparent;
color: var(--text-primary); font-family: inherit; resize: none; line-height: 1.35;
border-radius: var(--radius-sm);
}
.task-panel-title:focus { background: var(--surface-hover); }
.task-panel-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.task-panel-field-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.task-panel-section { margin-bottom: 20px; }
.task-panel-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
.subtask-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.subtask-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }
.subtask-row span { flex: 1; font-size: 13px; color: var(--text-secondary); }
.subtask-row span.done { text-decoration: line-through; color: var(--text-muted); }
.subtask-remove { color: var(--text-muted); font-size: 14px; opacity: 0; background: none; border: none; transition: opacity var(--transition); }
.subtask-row:hover .subtask-remove { opacity: 1; }
.add-subtask-row { display: flex; gap: 8px; margin-top: 8px; }
.comment-item { display: flex; gap: 10px; margin-bottom: 16px; }
.comment-body { flex: 1; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.comment-author { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.comment-time { font-size: 11px; color: var(--text-muted); }
.comment-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.comment-compose { display: flex; gap: 10px; margin-top: 4px; }
.comment-compose textarea { min-height: 56px; }
/* ==========================================================================
Toast notifications
========================================================================== */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
position: relative; display: flex; align-items: center; gap: 10px; overflow: hidden;
background: var(--surface-raised); color: var(--text-primary); font-size: 13px; font-weight: 500;
padding: 12px 18px 14px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
border: 1px solid var(--border); border-left: 3px solid var(--text-muted); max-width: 360px;
transform: translateY(20px); opacity: 0; transition: transform 160ms var(--spring), opacity 160ms var(--ease);
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.hide { transform: translateX(30px); opacity: 0; transition: transform 250ms var(--ease), opacity 250ms var(--ease); }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast-icon { flex-shrink: 0; }
.toast::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
background: var(--toast-progress); transform-origin: left; animation: toast-progress 3.2s linear forwards;
}
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ==========================================================================
Login page
========================================================================== */
.login-page {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 30% -10%, var(--login-gradient) 0%, var(--app-bg) 55%); padding: 20px;
}
.login-card { width: 100%; max-width: 380px; padding: 36px 32px; text-align: center; background: var(--surface); border: 1px solid var(--border); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-brand-mark {
width: 46px; height: 46px; border-radius: 13px;
background: linear-gradient(135deg, var(--primary), var(--accent));
display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 20px;
}
.login-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.login-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.auth-tabs { display: flex; background: var(--track-bg); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 22px; }
.auth-tab { flex: 1; padding: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); border-radius: 5px; background: none; border: none; transition: all var(--transition); }
.auth-tab.active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.google-btn {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
padding: 11px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface-raised); font-size: 14px; font-weight: 600; color: var(--text-primary);
transition: all var(--transition);
}
.google-btn:hover { background: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); }
.login-error { background: var(--error-bg); color: var(--error-text); font-size: 13px; padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 16px; text-align: left; border: 1px solid var(--error-border); }
.login-hint { font-size: 12px; color: var(--text-muted); margin-top: 18px; line-height: 1.5; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.form-links { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 4px; }
.form-links a, .form-links button { color: var(--primary); font-weight: 500; background: none; border: none; padding: 0; }
.form-links a:hover, .form-links button:hover { text-decoration: underline; }
/* ==========================================================================
Vault
========================================================================== */
.vault-lock-screen { max-width: 400px; margin: 60px auto; text-align: center; padding: 36px; }
.vault-lock-icon { font-size: 34px; margin-bottom: 14px; }
.vault-category-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vault-category-pill { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; transition: all var(--transition); }
.vault-category-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.credential-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.credential-card-top { display: flex; align-items: center; justify-content: space-between; }
.credential-card-name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.credential-card-cat { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.credential-field { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
.credential-field-label { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; }
.credential-field-value { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12.5px; color: var(--text-secondary); }
.credential-actions { display: flex; gap: 6px; margin-top: 4px; }
.access-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.access-chip { font-size: 11.5px; background: var(--track-bg); color: var(--text-secondary); padding: 3px 9px; border-radius: 999px; display: flex; align-items: center; gap: 5px; }
/* ==========================================================================
Users admin table
========================================================================== */
.user-row-name { display: flex; align-items: center; gap: 10px; }
/* ==========================================================================
Client portal
========================================================================== */
.portal-shell { min-height: 100vh; background: var(--app-bg); }
.portal-topbar { height: 56px; background: var(--global-bar-bg); border-bottom: 1px solid var(--global-bar-border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.portal-content { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.portal-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.portal-tab { padding: 10px 4px; margin-right: 24px; font-size: 14px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; transition: all var(--transition); }
.portal-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.request-card { padding: 16px 18px; margin-bottom: 12px; }
.request-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.request-status-track { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.request-status-step { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--text-muted); position: relative; padding-top: 14px; }
.request-status-step::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.request-status-step.done { color: var(--success); }
.request-status-step.done::before { background: var(--success); }
.request-status-step.current { color: var(--primary); }
.request-status-step.current::before { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
/* ==========================================================================
File attachments
========================================================================== */
.file-dropzone { border: 2px dashed var(--border); border-radius: 10px; background: var(--track-bg); padding: 22px 16px; text-align: center; margin-bottom: 16px; transition: border-color var(--transition), background var(--transition); }
.file-dropzone.dragover { border-color: var(--primary); background: var(--primary-light); }
.file-dropzone-icon { font-size: 22px; margin-bottom: 6px; }
.file-dropzone-text { font-size: 13.5px; color: var(--text-secondary); }
.fa-browse { background: none; border: none; color: var(--primary); font-weight: 600; padding: 0; cursor: pointer; }
.fa-browse:hover { text-decoration: underline; }
.fa-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.fa-list { display: flex; flex-direction: column; gap: 8px; }
.fa-empty { font-size: 13px; color: var(--text-muted); padding: 12px 2px; }
.fa-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-raised); transition: box-shadow var(--transition), border-color var(--transition); }
.fa-card:hover { border-color: var(--chip-border); box-shadow: var(--shadow-sm); }
.fa-card-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; }
.fa-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 7px; background: var(--track-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; }
.fa-icon-img { position: relative; }
.fa-icon-img img { width: 38px; height: 38px; object-fit: cover; transition: transform 150ms var(--ease); }
.fa-icon-img:hover img { transform: scale(1.05); }
.fa-icon-img:hover::after { content: ""; position: absolute; left: 0; top: 44px; z-index: 30; width: 160px; height: 160px; border-radius: 10px; box-shadow: var(--shadow-lg); background-image: var(--thumb); background-size: cover; background-position: center; }
.fa-meta { min-width: 0; }
.fa-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-sub { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fa-icon-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: none; background: none; color: var(--text-secondary); font-size: 14px; cursor: pointer; }
.fa-icon-btn:hover { background: var(--surface-hover); }
.fa-del:hover { background: rgba(226, 68, 92, 0.16); color: var(--danger); }
.fa-inline-btn { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 3px; }
.fa-inline-btn:hover { text-decoration: underline; }
.panel-files-btn { position: relative; }
.file-count-badge { min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
/* ==========================================================================
Misc utilities + loaders
========================================================================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--surface-raised); border-top-color: var(--primary); animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-loader { display: flex; align-items: center; justify-content: center; height: 100%; padding: 60px; }
/* Theme toggle — show the glyph for the theme you'll switch TO.
Light mode → moon (go dark); dark mode → sun (go light). */
.theme-toggle .theme-toggle-sun { display: none; }
.theme-toggle .theme-toggle-moon { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }
/* Sidebar project-dot one-time pulse (added by app-main on first render) */
@keyframes dot-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; } 50% { transform: scale(1.5); } 100% { transform: scale(1); box-shadow: 0 0 0 6px transparent; } }
.sidebar-project-dot.pulse-once { animation: dot-pulse 700ms var(--ease); }
/* ==========================================================================
Dynamic board table (bt-*) — typed columns, inline editing (Phase 1)
========================================================================== */
/* Scrolls both axes (max-height is set in JS to fill the viewport) so the
group/column headers can position:sticky to its top. */
/* The scroll viewport is the CANVAS (app/board bg). Each GROUP is its own
contained card (lifted --surface, 12px rounded corners, accent stripe) sitting
on the canvas with a 32px gap between cards. This is the vertical + horizontal
scroll container the sticky group/column headers pin to. */
.bt-wrap { overflow: auto; background: var(--board-bg); border-radius: var(--radius-lg); }
/* ELASTIC sizing: `table-layout: fixed` + `width: 100%` means the fixed columns
take their widths and the ONE width-less column (the primary name col)
absorbs the rest — so there is never dead space to the right. `min-width` is
set inline per render (gutter + Σ column minimums + name-min + add-col) so
columns floor at their minimum and the board scrolls horizontally instead of
any column silently collapsing/unmounting. */
.bt-table { border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); table-layout: fixed; width: 100%; }
.bt-col-handle { width: var(--bt-gutter); }
.bt-col-end { width: 46px; } /* holds the "+ add column" control; no dead space */
body.bt-col-resizing { cursor: col-resize; user-select: none; }
.bt-th {
position: relative; height: var(--bt-header-h); text-align: left; padding: 0 var(--space-3); white-space: nowrap; user-select: none;
font-size: var(--bt-header-size); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--bt-caps-tracking); color: var(--bt-header);
background: var(--surface); border-bottom: 1px solid var(--table-hairline); border-right: 1px solid var(--table-vline);
}
/* --- Line icons (shared) --------------------------------------------------- */
.ic { display: block; flex-shrink: 0; }
.bt-drag, .bt-open, .bt-group-menu, .bt-th-menu, .bt-addcol, .bt-subth-menu, .bt-subaddcol, .bt-plus-dot { display: inline-flex; align-items: center; justify-content: center; }
.bt-th-icon .ic { width: 15px; height: 15px; }
.bt-plus-dot .ic { width: 13px; height: 13px; }
.bt-subtoggle .ic { width: 12px; height: 12px; }
.bt-addgroup { display: inline-flex; align-items: center; gap: var(--space-2); }
.bt-addgroup .ic { width: 15px; height: 15px; }
.bt-th-inner { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-width: 0; }
.bt-th-icon { display: inline-flex; align-items: center; opacity: 0.7; flex-shrink: 0; }
.bt-th-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-th-handle { padding: 0; }
.bt-th-add { text-align: left; padding: 0 var(--space-2); }
.bt-th-menu { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; opacity: 0; border: none; background: none; color: var(--text-tertiary); border-radius: var(--radius-sm); cursor: pointer; transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.bt-th:hover .bt-th-menu { opacity: 1; }
/* Resize handle at the header's right edge (reveals on hover). */
.bt-col-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.bt-col-resize::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 3px; width: 2px; border-radius: 2px; background: transparent; transition: background var(--dur-fast) var(--ease); }
.bt-th:hover .bt-col-resize::after { background: var(--border); }
.bt-col-resize:hover::after { background: var(--primary); }
.bt-th-menu:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-addcol { width: 28px; height: 28px; border: none; background: none; color: var(--text-muted); font-size: 16px; border-radius: 6px; cursor: pointer; }
.bt-addcol:hover { background: var(--surface-hover); color: var(--primary); }
.bt-th[draggable="true"] { cursor: grab; }
.bt-th-dragging { opacity: 0.5; }
.bt-th-over { box-shadow: inset 2px 0 0 var(--primary); }
/* Stacked group sections — colored left accent runs down every row's first
cell so a group reads as one continuous block (gap rows excluded). */
.bt-group > tr:not(.bt-group-gap) > :first-child { border-left: 3px solid var(--group-color, var(--primary)); }
/* 32px canvas gap between group cards (from the scale). */
.bt-group-gap > td { height: var(--space-6); padding: 0; border: none; background: var(--board-bg); }
/* Empty (0-item) groups collapse to just header + "+ Add task" — no column
header row, no summary band — so they don't eat vertical space. */
.bt-group-empty .bt-colhead,
.bt-group-empty .bt-summary-row { display: none; }
.bt-group-header[draggable="true"] { cursor: grab; }
/* Group header + its column-header row stick to the top of the scroll area.
(The sticky lives on this higher-specificity selector so it isn't lost.) */
/* Group header: 48px, no fill of its own (the card surface shows through). Stays
surface-backed so it can mask rows scrolling under it while sticky. */
.bt-group-cell { height: var(--bt-group-h); padding: 0 var(--space-3); background: var(--surface); transition: background var(--dur-fast) var(--ease); }
.bt-group-header:hover .bt-group-cell { background: var(--surface-hover); }
.bt-group-header .bt-group-cell { position: sticky; top: 0; z-index: 5; }
/* Each group is a rounded CARD: the header rounds the top corners, the summary
strip (or, for empty groups, the "+ Add Item" row) rounds the bottom — so the
surface + accent stripe read as one contained block on the darker canvas. */
.bt-group-header .bt-group-cell { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.bt-summary-row .bt-sum-handle { border-bottom-left-radius: var(--radius-lg); }
.bt-summary-row .bt-sum-end { border-bottom-right-radius: var(--radius-lg); }
.bt-group-empty .bt-add-cell { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.bt-group.collapsed .bt-group-cell { border-radius: var(--radius-lg); }
/* Keep the group title readable when the board is scrolled right: pin the
header content to the left edge of the scroll viewport. */
.bt-group-cell-inner { position: sticky; left: var(--space-3); display: inline-flex; align-items: center; }
.bt-colhead .bt-th { position: sticky; top: var(--bt-group-h); z-index: 4; }
/* Chevron icon points right; expanded group = pointing down, collapsed = right. */
.bt-group-caret { display: inline-flex; align-items: center; color: var(--group-color, var(--primary)); margin-right: var(--space-1); cursor: pointer; transform: rotate(90deg); transition: transform var(--dur) var(--ease); }
.bt-group.collapsed .bt-group-caret { transform: rotate(0deg); }
.bt-group-caret .ic { width: 14px; height: 14px; }
/* Colored dot before the group name (matches the group accent). */
.bt-group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--group-color, var(--primary)); margin-right: var(--space-2); flex-shrink: 0; }
.bt-group-name { font-size: var(--bt-groupname-size); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.bt-group-count { margin-left: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; padding: 1px var(--space-2); }
.bt-group-menu { margin-left: 8px; width: 22px; height: 22px; opacity: 0; border: none; background: none; color: var(--text-muted); border-radius: 4px; cursor: pointer; font-size: 14px; vertical-align: middle; }
.bt-group-header:hover .bt-group-menu { opacity: 1; }
.bt-group-menu:hover { background: var(--surface-hover); color: var(--text-primary); }
/* Collapse: keep only the header row visible. */
.bt-group.collapsed > tr:not(.bt-group-header) { display: none; }
/* Group drag-reorder + item drop-target affordances. */
.bt-group-dragging { opacity: 0.45; }
.bt-group-over .bt-group-cell { box-shadow: inset 0 3px 0 var(--primary); }
.bt-group-droptarget .bt-add-cell { color: var(--primary); background: var(--primary-light); }
.bt-addgroup {
margin-top: 12px; height: 34px; padding: 0 14px; border: 1px dashed var(--border);
background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600;
border-radius: var(--radius-md); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.bt-addgroup:hover { color: var(--primary); border-color: var(--primary); background: var(--surface-hover); }
.bt-group-palette { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 2px; max-width: 200px; }
/* Full-width horizontal hairline; barely-there vertical vline. Background-only
hover (no border/transform/shadow → zero layout shift). */
.bt-td { height: var(--bt-row-h); padding: 0; vertical-align: middle; color: var(--text-secondary); font-size: var(--bt-cell-size); background: var(--surface); border-bottom: 1px solid var(--table-hairline); border-right: 1px solid var(--table-vline); transition: background var(--dur-fast) ease-out; }
.bt-row { transition: background var(--dur-fast) ease-out; }
.bt-row:hover .bt-td { background: var(--surface-hover); }
.bt-td[data-edit] { cursor: pointer; }
/* Editable-cell hover cue — a faint inset ring on the CELL only (not the row). */
.bt-td[data-edit]:hover { box-shadow: inset 0 0 0 1px var(--bt-grid-strong); }
.bt-td-end { border-right: none; } /* outer edge carries no border (card frames it) */
.bt-handle-cell { text-align: center; }
.bt-drag { opacity: 0; cursor: grab; color: var(--text-muted); font-size: 12px; user-select: none; }
.bt-row:hover .bt-drag { opacity: 1; }
/* Drag ghost: the lifted row dims + recedes; the drop target shows a clear
2px indicator line where the row will land. */
.bt-row-dragging td { opacity: 0.4; }
.bt-row-over td { box-shadow: inset 0 2px 0 var(--primary); }
.bt-row-over td:first-child::before {
content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin-top: -2.5px;
border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface);
}
.bt-row-over td:first-child { position: relative; }
.bt-plain { padding: 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-num { text-align: right; }
.bt-cell-empty { color: var(--text-muted); }
/* Empty free-text / date / number / link cells render nothing until the cell is
hovered, then a faint "Add…" placeholder — no persistent empty-state noise. */
.bt-add-hint { color: var(--text-muted); opacity: 0; transition: opacity var(--dur-fast) ease-out; }
.bt-td[data-edit]:hover .bt-add-hint { opacity: 1; }
.bt-primary { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); color: var(--text-primary); font-size: var(--bt-name-size); font-weight: var(--weight-normal); }
.bt-primary-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-td-primary[data-edit] { cursor: text; }
/* ONE "Open" pill, pinned flush-right inside the name cell, revealed on row
hover only. The zone carries a short left-fade gradient in the ROW's own
background so the truncating name slides cleanly underneath the opaque pill —
never a hard overlap, no tooltip, zero horizontal shift (name width is fixed).
Everything (label + icon) lives INSIDE the single pill button. */
.bt-open-zone {
position: absolute; top: 0; right: 0; bottom: 0;
display: flex; align-items: center; justify-content: flex-end;
padding: 0 var(--space-2) 0 44px; pointer-events: none; opacity: 0;
background: linear-gradient(to right, transparent, var(--surface) 46%);
transition: opacity var(--dur-fast) ease-out;
}
/* Zone stays pointer-events:none so clicks over the faded name tail still reach
the cell (inline edit); only the pill is interactive. */
.bt-row:hover .bt-open-zone,
.bt-row-selected .bt-open-zone { opacity: 1; }
.bt-row:hover .bt-open-zone { background: linear-gradient(to right, transparent, var(--surface-hover) 46%); }
.bt-row-selected .bt-open-zone { background: linear-gradient(to right, transparent, var(--surface-hover) 46%); }
.bt-open-pill {
pointer-events: auto;
display: inline-flex; align-items: center; gap: var(--space-1);
height: 26px; padding: 0 var(--space-2);
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text-secondary);
font-size: 12px; font-weight: var(--weight-semibold); white-space: nowrap;
cursor: pointer; box-shadow: var(--shadow-sm);
transition: color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
}
.bt-open-pill:hover { color: var(--primary); border-color: var(--primary); }
.bt-open-pill .ic { width: 14px; height: 14px; }
/* Mobile has no hover: keep the pill visible so a tap opens the panel. */
@media (max-width: 768px) {
.bt-open-zone { opacity: 1; pointer-events: auto; }
.bt-td-primary[data-edit] { cursor: pointer; }
}
/* Per-item chat/updates bubble (monday-style): sits just left of the open
control, revealed on row hover. When the item carries updates it stays
visible with an unread dot. Sits above the open-zone overlay (z-index) so it
routes its own clicks straight to the Updates tab. */
/* Updates bubble: kept ONLY as a persistent unread indicator (has-updates), sat
just LEFT of the Open pill so the two never overlap on hover. It no longer
reveals on plain hover — so a normal row shows exactly ONE control (the Open
pill), matching Monday; the updates feature stays reachable via the item panel
and the indicator here. */
.bt-chat {
position: absolute; right: 84px; top: 50%; transform: translateY(-50%); z-index: 3;
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border: none; background: none; color: var(--text-muted); border-radius: var(--radius-sm);
cursor: pointer; opacity: 0; pointer-events: none; transition: color 120ms var(--ease), background 120ms var(--ease);
}
.bt-chat .ic { width: 16px; height: 16px; }
.bt-chat:hover { background: var(--surface-hover); color: var(--primary); }
.bt-chat.has-updates { opacity: 1; pointer-events: auto; color: var(--primary); }
.bt-chat-dot { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.bt-row:hover .bt-chat-dot { box-shadow: 0 0 0 2px var(--surface-hover); }
/* Uniform line-icon sizing across chrome controls + swapped menu/empty glyphs
so the whole set reads at one consistent stroke + scale. */
.view-pill .ic, .btn .ic, .tool-btn .ic, .btn-icon .ic { width: 15px; height: 15px; }
.global-icon-btn .ic { width: 18px; height: 18px; }
.bt-pop-item .ic, .bt-pop-action .ic { flex-shrink: 0; }
.bt-check .ic { width: 15px; height: 15px; }
.bt-empty-icon .ic { width: 18px; height: 18px; }
.notif-empty-icon .ic, .ip-empty-icon .ic { width: 20px; height: 20px; }
/* Rounded status pill that fills most of the cell (monday-style): full-
saturation palette background (exact token, no dimming), single centered
white line, ellipsis for long labels, subtle darken on hover. */
/* Status fills the cell edge-to-edge with 0 radius — the cell border defines the
shape. Text 13/500, centered white, ellipsis for overflow ("Approved - POSTED"
no longer clips out of the cell). */
.bt-status {
box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
height: 100%; margin: 0; padding: 0 var(--space-2);
border-radius: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: var(--bt-status-size); font-weight: var(--weight-semibold); letter-spacing: 0;
color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
transition: filter var(--dur-fast) ease-out, background-color var(--dur) var(--ease);
}
.bt-td-status[data-edit]:hover .bt-status { filter: brightness(0.94); }
/* Empty status = transparent with a subtle dashed outline + muted "—", not a
solid grey block that reads as broken. */
.bt-status-empty { background: transparent; border: 1px dashed var(--bt-empty-outline); color: var(--text-muted); text-shadow: none; font-weight: var(--weight-normal); }
.bt-people { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--space-3); }
/* 26px circles, 1.5px ring in the card colour so overlapping assignees separate
cleanly; images cropped square-to-circle so logos never squash. */
.bt-people .avatar { width: 26px; height: 26px; font-size: 10.5px; border: none; box-shadow: 0 0 0 1.5px var(--surface); border-radius: 50%; object-fit: cover; }
.bt-people .avatar-stack .avatar { margin-left: -8px; }
.bt-people .avatar-stack .avatar:first-child { margin-left: 0; }
.bt-row:hover .bt-people .avatar { box-shadow: 0 0 0 1.5px var(--surface-hover); }
.bt-row-selected .bt-people .avatar { box-shadow: 0 0 0 1.5px var(--primary-light); }
/* "+N" overflow chip past three assignees. */
.bt-avatar-more { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -8px; border-radius: 50%; background: var(--surface-raised); color: var(--text-secondary); font-size: 10px; font-weight: var(--weight-semibold); box-shadow: 0 0 0 1.5px var(--surface); }
.bt-row:hover .bt-avatar-more { box-shadow: 0 0 0 1.5px var(--surface-hover); }
.bt-plus-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--border); color: var(--text-muted); font-size: 12px; }
/* Empty assignee: nothing until ROW hover, then a dashed 26px circle. */
.bt-people .bt-plus-dot { width: 26px; height: 26px; border-color: var(--bt-empty-outline); box-shadow: none; opacity: 0; transition: opacity var(--dur-fast) ease-out; }
.bt-row:hover .bt-people .bt-plus-dot { opacity: 1; }
.bt-link { padding: 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-link a { color: var(--primary); }
/* File cell: small image thumbnails / type chips, +N overflow. */
.bt-files { display: flex; align-items: center; height: 100%; padding: 0 var(--space-3); }
.bt-files-thumbs { gap: var(--space-1); }
/* Empty files cell: nothing until CELL hover, then a faint "+". */
.bt-files .bt-plus-dot { opacity: 0; transition: opacity var(--dur-fast) ease-out; }
.bt-td-files[data-edit]:hover .bt-plus-dot { opacity: 1; }
.bt-thumb-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; border: 1px solid var(--border-subtle); background: var(--track-bg); text-decoration: none; }
.bt-thumb-link:hover { border-color: var(--primary); }
.bt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-thumb-doc { font-size: 13px; }
.bt-thumb-more { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); background: var(--track-bg); border-radius: 999px; padding: 0 6px; height: 18px; display: inline-flex; align-items: center; }
.bt-file-chip { font-size: 12px; color: var(--text-secondary); background: var(--track-bg); border-radius: 6px; padding: 2px 8px; }
/* ==========================================================================
FROZEN FIRST COLUMN — the drag-handle + NAME column stay pinned to the left
while the rest of the columns scroll horizontally (monday parity). Works
alongside the vertical sticky group/column headers.
========================================================================== */
.bt-handle-cell, .bt-sum-handle, .bt-th-handle,
.bt-td-primary, .bt-sum-primary, .bt-th-primary { position: sticky; background: var(--surface); }
.bt-handle-cell, .bt-sum-handle, .bt-th-handle { left: 0; }
.bt-td-primary, .bt-sum-primary, .bt-th-primary { left: var(--bt-gutter); }
/* Right-edge shadow reads the name column as PINNED — only while the board is
actually scrolled horizontally (is-hscroll toggled in JS), not permanently. */
.bt-wrap.is-hscroll .bt-td-primary,
.bt-wrap.is-hscroll .bt-sum-primary,
.bt-wrap.is-hscroll .bt-th-primary { box-shadow: 6px 0 10px -6px rgba(15, 23, 42, 0.16); }
.bt-handle-cell, .bt-sum-handle, .bt-td-primary, .bt-sum-primary { z-index: 3; }
/* Sticky group header gains a soft bottom shadow once scrolled vertically. */
.bt-wrap.is-vscroll .bt-group-header .bt-group-cell { box-shadow: 0 5px 8px -5px rgba(15, 23, 42, 0.20); }
/* Colhead frozen cells also stick vertically (top:38 from .bt-colhead .bt-th),
so they must sit ABOVE the scrolling headers (z:4). Source order beats the
equal-specificity .bt-colhead .bt-th rule above. */
.bt-colhead .bt-th-handle, .bt-colhead .bt-th-primary { z-index: 7; }
html[data-theme="dark"] .bt-wrap.is-hscroll .bt-td-primary,
html[data-theme="dark"] .bt-wrap.is-hscroll .bt-sum-primary,
html[data-theme="dark"] .bt-wrap.is-hscroll .bt-th-primary { box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .bt-wrap.is-vscroll .bt-group-header .bt-group-cell { box-shadow: 0 5px 8px -5px rgba(0, 0, 0, 0.55); }
/* Inline cell editor: an inset focus ring rather than a heavy 2px border. */
.bt-inline-input { width: 100%; height: var(--bt-row-h); border: 1px solid transparent; box-shadow: inset 0 0 0 2px var(--primary); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-primary); font-family: inherit; font-size: var(--text-sm); padding: 0 var(--space-3); outline: none; }
.bt-add-cell { height: var(--bt-row-h); padding: 0 var(--space-3); color: var(--text-tertiary); font-weight: var(--weight-medium); cursor: pointer; transition: color var(--dur-fast) ease-out, background var(--dur-fast) ease-out; }
.bt-add-cell:hover { color: var(--primary); background: var(--surface-hover); }
/* Keep the "+ Add Item" label pinned to the left of the scroll viewport (like
the group title) so the frozen name column can't slide over and clip it when
the board is scrolled horizontally. */
.bt-add-label { position: sticky; left: var(--space-3); display: inline-flex; align-items: center; }
/* Summary STRIP (36px): no borders, no seam — just content under the columns
that actually have a summary (battery under status, count under files/number/
people). Every other cell is fully blank. The group accent stripe continues
through it via the shared `:first-child` left-border rule. */
.bt-summary-row .bt-sum {
height: var(--bt-summary-h); padding: 0 var(--space-3); vertical-align: middle;
background: var(--surface); border: none;
}
.bt-sum-handle { width: var(--bt-gutter); padding: 0; }
.bt-sum-end { width: 46px; }
.bt-sum-number { text-align: right; }
.bt-sum-num, .bt-sum-count { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-tertiary); }
/* Battery: rounded stacked bar, segment colours match the pills exactly, an
inline count on segments wide enough to hold it, hairline dividers between
segments, tooltip (title) always present. */
.bt-battery { display: flex; align-items: stretch; height: 16px; width: 100%; max-width: 200px; border-radius: 999px; overflow: hidden; background: var(--track-bg); }
.bt-battery-seg { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 2px; box-shadow: inset -1px 0 0 var(--surface); transition: width 220ms var(--ease); }
.bt-battery-seg:last-child { box-shadow: none; }
.bt-battery-seg.blank { background: var(--bt-empty-status); }
.bt-seg-count { font-size: 9.5px; font-weight: var(--weight-semibold); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.2); line-height: 1; }
/* Board popovers (status / people / files / column menus) — fade + scale from
the top-left origin, elevated with --shadow-md. */
.bt-pop {
position: absolute; z-index: 1500; background: var(--pop-bg); border: 1px solid var(--border);
border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-1) var(--space-1) var(--space-1); max-height: 340px; overflow: auto;
opacity: 0; transform: scale(0.96) translateY(-4px); transform-origin: top left; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bt-pop.open { opacity: 1; transform: scale(1) translateY(0); }
.bt-status-opt { display: block; width: 100%; height: 32px; margin: 3px 0; border: none; border-radius: 6px; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.bt-status-opt:hover { filter: brightness(1.08); }
.bt-status-clear { background: var(--surface-raised) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }
.bt-pop-action { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 4px; padding: 8px; border: none; background: none; color: var(--primary); font-weight: 600; cursor: pointer; border-radius: 6px; font-size: 13px; }
.bt-pop-action:hover { background: var(--surface-hover); }
.bt-pop-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 4px 6px 6px; font-weight: 600; }
.bt-pop-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 6px; font-size: 13px; text-align: left; }
.bt-pop-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-pop-item.bt-danger { color: var(--danger); }
.bt-people-search { margin-bottom: 6px; }
.bt-people-list { display: flex; flex-direction: column; gap: 2px; }
.bt-people-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 6px; font-size: 13px; text-align: left; }
.bt-people-opt:hover { background: var(--surface-hover); }
.bt-people-opt.sel { color: var(--text-primary); font-weight: 500; }
.bt-check { margin-left: auto; color: var(--primary); }
.bt-files-list { display: flex; flex-direction: column; gap: 2px; }
.bt-file-add { display: block; margin-top: 6px; padding: 8px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; color: var(--primary); cursor: pointer; font-weight: 600; font-size: 13px; }
.bt-file-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; }
.bt-file-name { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-file-ic { display: inline-flex; align-items: center; flex-shrink: 0; }
.bt-file-ic .ic { width: 14px; height: 14px; }
.bt-file-rm { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.bt-file-rm .ic { width: 14px; height: 14px; }
.bt-empty-note { color: var(--text-muted); font-size: 12.5px; padding: 8px; }
/* Status label editor */
.lbl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lbl-swatch { width: 26px; height: 26px; border-radius: 6px; cursor: pointer; flex-shrink: 0; border: 1px solid var(--border); }
.lbl-text { flex: 1; min-width: 120px; }
.lbl-del { flex-shrink: 0; }
.lbl-palette { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; padding: 6px 0 2px 34px; }
.lbl-palette[hidden] { display: none; }
.lbl-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.lbl-dot.sel { outline: 2px solid var(--text-primary); outline-offset: 2px; }
/* ==========================================================================
COLUMN HEADER MENU + SAVED VIEWS + BULK ACTIONS
========================================================================== */
/* --- Column header sort/filter indicators + always-present menu button ----- */
.bt-th-sort, .bt-th-filter { display: inline-flex; align-items: center; margin-left: 4px; color: var(--primary); flex-shrink: 0; }
.bt-th-sort .ic, .bt-th-filter .ic { width: 13px; height: 13px; }
.bt-th-sorted .bt-th-title { color: var(--text-primary); }
.bt-pop-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.bt-pop-item.active { color: var(--primary); background: var(--primary-light); }
/* --- Saved-views tab bar (above the board) --------------------------------- */
.bt-views { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--bt-grid); flex-wrap: wrap; }
.bt-view-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.bt-view-tab {
display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
border: none; background: none; color: var(--text-secondary); font-size: var(--text-sm);
font-weight: var(--weight-medium); border-radius: var(--radius-sm); cursor: pointer;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bt-view-tab:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-view-tab.active { color: var(--primary); background: var(--primary-light); font-weight: var(--weight-semibold); }
.bt-view-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.bt-view-tab-menu { display: inline-flex; align-items: center; opacity: 0.55; border-radius: 4px; padding: 1px; }
.bt-view-tab-menu:hover { opacity: 1; background: var(--surface-hover); }
.bt-view-tab .ic, .bt-view-tool .ic, .bt-view-badge .ic, .bt-view-tab-menu .ic { width: 14px; height: 14px; }
.bt-view-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.bt-view-tool {
display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary);
font-size: 12.5px; font-weight: var(--weight-medium); border-radius: var(--radius-sm); cursor: pointer;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bt-view-tool:hover { color: var(--text-primary); border-color: var(--text-tertiary); background: var(--surface-hover); }
.bt-view-update { color: var(--primary); border-color: var(--primary); }
.bt-view-update:hover { color: var(--primary); border-color: var(--primary); }
.bt-view-badge {
display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 600;
}
/* --- Bulk selection: row + group-header checkboxes, selected-row highlight -- */
.bt-handle-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bt-row-h); }
.bt-rowcheck { display: inline-flex; align-items: center; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.bt-row:hover .bt-rowcheck, .bt-row-selected .bt-rowcheck { opacity: 1; }
.bt-rowcheck input, .bt-selall input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--primary); }
.bt-selall { display: inline-flex; align-items: center; margin-right: 8px; }
.bt-row-selected .bt-td { background: var(--primary-light); }
.bt-row-selected:hover .bt-td { background: var(--primary-light); }
.bt-row-selected .bt-handle-cell, .bt-row-selected .bt-td-primary { background: var(--primary-light); }
/* --- Filter popover (per column type) -------------------------------------- */
.bt-filter-pop { min-width: 240px; }
.bt-filter-checks { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow: auto; padding: 2px; }
.bt-filter-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.bt-filter-check:hover { background: var(--surface-hover); }
.bt-filter-check input { flex-shrink: 0; accent-color: var(--primary); }
.bt-status-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.bt-status-swatch-empty { background: var(--track-bg); border: 1px solid var(--border); }
.bt-filter-row { display: flex; gap: 6px; padding: 4px 2px; }
.bt-filter-col { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.bt-filter-num { width: 96px; }
.bt-filter-search { margin-bottom: 6px; }
.bt-filter-text { margin: 4px 0; }
.bt-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.bt-filter-actions .bt-pop-action { width: auto; margin-top: 0; padding: 6px 16px; }
.bt-filter-actions .bt-pop-item { width: auto; padding: 6px 8px; }
/* --- Floating bulk-action bar (bottom center) ------------------------------ */
.bt-bulkbar {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 1400;
display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 24px);
padding: 8px 10px 8px 18px; background: var(--pop-bg); border: 1px solid var(--border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bt-bulkbar.open { opacity: 1; transform: translate(-50%, 0); }
.bt-bulk-count { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.bt-bulk-count b { color: var(--text-primary); }
.bt-bulk-actions { display: flex; align-items: center; gap: 2px; overflow-x: auto; }
.bt-bulk-btn {
display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; white-space: nowrap;
border: none; background: none; color: var(--text-secondary); font-size: 13px; font-weight: var(--weight-medium);
border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.bt-bulk-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-bulk-btn .ic { width: 15px; height: 15px; }
.bt-bulk-btn.bt-danger { color: var(--danger); }
.bt-bulk-btn.bt-danger:hover { background: var(--surface-hover); color: var(--danger); }
.bt-bulk-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: none; background: none; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; }
.bt-bulk-close:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-bulk-close .ic { width: 16px; height: 16px; }
/* ==========================================================================
Responsive — desktop → tablet (768) → phone (375). Off-canvas sidebar,
stacking grids, scroll-not-clip for dense tables, ≥44px tap targets.
========================================================================== */
/* Hamburger + drawer backdrop: desktop-hidden, revealed under 768px. */
.nav-toggle {
display: none;
width: 44px; height: 44px; flex-shrink: 0;
align-items: center; justify-content: center;
background: transparent; border: none; border-radius: var(--radius-sm);
color: var(--chrome-icon); font-size: 20px; line-height: 1;
transition: background var(--transition), color var(--transition);
}
.nav-toggle:hover { background: var(--chrome-hover); color: var(--chrome-icon-strong); }
.sidebar-backdrop { display: none; }
/* --- Tablet & below: 4-across stats → 2, single-column dashboard ---------- */
@media (max-width: 900px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.dashboard-grid { grid-template-columns: 1fr; }
.task-panel { width: 100%; max-width: 100%; }
.mb-table { font-size: 12.5px; }
}
/* --- ≤768px: off-canvas sidebar + mobile chrome -------------------------- */
@media (max-width: 768px) {
/* Hamburger appears; the icon rail and secondary chrome fold away. */
.nav-toggle { display: inline-flex; }
.global-bar { padding: 0 8px; gap: 10px; }
.global-bar-icons .global-icon-btn:not(.theme-toggle) { display: none; }
/* Sidebar slides in from the left over a tap-to-dismiss backdrop. */
.sidebar {
position: fixed; top: var(--global-bar-height); left: 0; bottom: 0;
width: 264px; max-width: 82vw; z-index: 60;
transform: translateX(-100%);
transition: transform 260ms var(--ease-panel);
box-shadow: var(--shadow-lg);
}
.app-shell.nav-open .sidebar { transform: translateX(0); }
.sidebar-backdrop {
display: block; position: fixed; left: 0; right: 0; bottom: 0;
top: var(--global-bar-height); z-index: 55; background: var(--scrim-panel);
opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease);
}
.app-shell.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
/* Tap targets ≥44px + reveal hover-only affordances on touch. */
.btn { min-height: 44px; }
.btn-sm { min-height: 40px; }
.global-icon-btn, .nav-toggle, .tool-btn, .btn-icon { min-width: 44px; min-height: 44px; }
.sidebar-nav-item, .sidebar-project-item, .sidebar-add-project, .sidebar-workspace { min-height: 44px; }
.view-pill, .view-toggle-btn, .portal-tab, .auth-tab { min-height: 44px; }
.mb-row-icon { width: 34px; height: 34px; }
.mb-row-actions { opacity: 1; transform: none; }
.mb-drag-handle { opacity: 0.55; }
.sidebar-section-add { opacity: 1; }
/* Top bar: truncate titles, keep a single scrollable toolbar row. */
.content { padding: 16px; }
.topbar { padding: 0 12px; }
.topbar > div:first-child { min-width: 0; }
.topbar-title, .topbar-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { gap: 6px; flex-shrink: 0; }
.vibe-topbar { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.vibe-topbar::-webkit-scrollbar { height: 0; }
.vibe-topbar-left { min-width: 0; }
.vibe-topbar-left, .vibe-topbar-right, .view-switcher { flex-shrink: 0; }
/* Page headers stack their action below the title. */
.page-header { flex-direction: column; align-items: stretch; gap: 12px; }
/* Dense data tables scroll inside their own container — never clip, never
push the page wide. Drop the least-critical (last) column, tighten fills.
min-width:0 on the grid/flex items lets the wrapper shrink so its own
overflow-x (not the page) absorbs the table width. */
.dashboard-grid > *, .mb-board, .mb-group { min-width: 0; }
.mb-table-wrap { overflow-x: auto; overflow-y: hidden; }
.mb-table { min-width: 560px; }
.mb-fill-cell { width: 108px; }
.mb-table thead th:last-child, .mb-table tbody td:last-child { display: none; }
.table-wrap { overflow-x: auto; }
.table { min-width: 560px; }
/* Client portal chrome. */
.portal-topbar { height: 52px; padding: 0 16px; }
.portal-content { padding: 20px 16px; }
.portal-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.portal-tabs::-webkit-scrollbar { height: 0; }
.portal-tab { flex-shrink: 0; margin-right: 16px; white-space: nowrap; }
}
/* --- ≤560px: phone — single-column everything ---------------------------- */
@media (max-width: 560px) {
.stat-grid { grid-template-columns: 1fr; }
.task-panel-field-grid { grid-template-columns: 1fr; }
.form-row { flex-direction: column; gap: 0; }
.content { padding: 14px; }
.page-header h1 { font-size: 19px; }
.modal-header, .modal-footer { padding-left: 16px; padding-right: 16px; }
.modal-body { padding: 16px; }
.task-panel-body { padding: 16px; }
.stat-card-value { font-size: 26px; }
}
/* ==========================================================================
ITEM DETAIL PANEL (ip-*) — Updates / Files / Activity (Phase 3)
Reuses .task-panel / .panel-backdrop shell; adds tabs, a rich composer,
@mention chips, an updates feed, and the notifications bell.
========================================================================== */
.ip-header { flex-wrap: wrap; gap: 8px; }
.ip-header-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ip-title {
flex: 1; min-width: 0; font-size: 18px; font-weight: 600; color: var(--text-primary);
background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
padding: 4px 8px; margin-left: -4px; font-family: inherit; outline: none;
}
.ip-title:hover { background: var(--surface-hover); }
.ip-title:focus { background: var(--surface-hover); border-color: var(--border); }
/* Board-discussion panel: static title + "all board members" note. Reuses the
item panel's .ip-panel / .ip-body shell for identical look + slide-in. */
.ip-title-static { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.ip-title-static .ic { color: var(--text-secondary); }
.bd-note {
display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
padding: 10px 12px; border-radius: var(--radius-md);
background: var(--surface-hover, var(--track-bg)); border: 1px solid var(--border);
color: var(--text-secondary); font-size: var(--text-sm);
}
.bd-note .ic { color: var(--text-secondary); flex-shrink: 0; }
.ip-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ip-tab {
appearance: none; background: none; border: none; cursor: pointer;
padding: 12px 12px 10px; font-size: 13px; font-weight: 600; color: var(--text-muted);
border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.ip-tab:hover { color: var(--text-secondary); }
.ip-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.ip-body { padding: 16px 20px; }
/* --- Composer --- */
.ip-composer { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; margin-bottom: 18px; }
.ip-composer-compact { margin: 8px 0 4px; }
.ip-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); flex-wrap: wrap; }
.ip-tb {
display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px;
padding: 0 6px; border: none; background: none; color: var(--text-secondary); cursor: pointer;
border-radius: 6px; font-size: 13px; font-family: inherit;
}
.ip-tb:hover { background: var(--surface-hover); color: var(--text-primary); }
.ip-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.ip-editor {
min-height: 64px; max-height: 260px; overflow-y: auto; padding: 10px 12px; font-size: 13.5px;
line-height: 1.55; color: var(--text-primary); outline: none;
}
.ip-editor:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.ip-editor p { margin: 0 0 6px; }
.ip-editor ul, .ip-editor ol { margin: 4px 0 4px 20px; }
.ip-editor a, .ip-update-body a { color: var(--primary); }
.ip-composer-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.ip-composer-files:not(:empty) { padding: 6px 12px; }
.ip-composer-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; }
/* --- Mention chips + dropdown --- */
.ip-mention {
display: inline-block; padding: 0 4px; border-radius: 4px; font-weight: 600;
color: var(--primary); background: var(--primary-light); white-space: nowrap;
}
.ip-mention-pop {
position: fixed; z-index: 1200; min-width: 240px; max-width: 280px; max-height: 260px; overflow-y: auto;
background: var(--pop-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-pop); padding: 4px;
}
.ip-mention-opt {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none;
background: none; cursor: pointer; border-radius: 6px; text-align: left; color: var(--text-secondary); font-size: 13px;
}
.ip-mention-opt:hover, .ip-mention-opt.active { background: var(--surface-hover); color: var(--text-primary); }
.ip-mention-team { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border); font-size: 12px; }
.ip-mention-name { display: block; font-weight: 500; }
.ip-mention-sub { display: block; font-size: 11px; color: var(--text-muted); }
/* --- Feed --- */
.ip-feed { display: flex; flex-direction: column; gap: 14px; }
.ip-empty, .notif-empty { color: var(--text-muted); font-size: 13px; padding: 12px 2px; }
.ip-update { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--surface); }
.ip-update-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ip-author { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ip-time { font-size: 11px; color: var(--text-muted); }
.ip-edited { font-style: italic; }
.ip-update-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; word-break: break-word; }
.ip-update-body ul, .ip-update-body ol { margin: 4px 0 4px 20px; }
.ip-filechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ip-filechip {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 12px;
background: var(--track-bg); border-radius: 6px; color: var(--text-secondary); text-decoration: none;
}
.ip-filechip button { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 11px; line-height: 1; }
.ip-filechip-link:hover { color: var(--primary); }
.ip-update-actions { display: flex; gap: 12px; margin-top: 8px; }
.ip-linkbtn { border: none; background: none; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; }
.ip-linkbtn:hover { color: var(--primary); }
.ip-linkbtn.ip-danger:hover { color: var(--danger); }
.ip-replies { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ip-reply { padding: 10px; }
.ip-reply-mount:not(:empty) { margin-top: 8px; }
/* --- Files tab --- */
.ip-files-section { margin-bottom: 20px; }
.ip-update-files { display: flex; flex-direction: column; gap: 6px; }
.ip-updatefile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary); font-size: 13px; }
.ip-updatefile:hover { background: var(--surface-hover); }
.ip-updatefile-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-updatefile-by { font-size: 11px; color: var(--text-muted); }
/* --- Activity tab --- */
.ip-activity { display: flex; flex-direction: column; gap: 14px; }
.ip-activity-row { display: flex; gap: 10px; }
.ip-activity-main { flex: 1; }
.ip-activity-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ip-activity-text b { color: var(--text-primary); font-weight: 600; }
/* ==========================================================================
Notifications bell + dropdown (global bar)
========================================================================== */
.notif-wrap { position: relative; display: inline-flex; }
.notif-bell { position: relative; }
.notif-count {
position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
border-radius: 999px; pointer-events: none;
}
.notif-count.hidden { display: none; }
.notif-dropdown {
position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 92vw;
background: var(--pop-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
box-shadow: var(--shadow-pop); z-index: 1100; overflow: hidden;
opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none;
transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.notif-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 14px; border: none; background: none; cursor: pointer; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.notif-item:hover { background: var(--surface-hover); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; margin-top: 5px; flex-shrink: 0; }
.notif-item.unread { background: var(--sidebar-active); }
.notif-item.unread .notif-dot { background: var(--primary); }
.notif-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.notif-item-time { font-size: 11px; color: var(--text-muted); }
.notif-empty { text-align: center; }
/* Keep the notifications bell reachable on mobile (the other global-bar icons
collapse under 768px). Placed after the responsive block so it wins. */
.global-bar-icons .notif-wrap .notif-bell { display: inline-flex; }
/* ==========================================================================
SUBITEMS (Phase 4) — expand chevron + count on the parent row, and an
indented sub-table (its own subitemColumns) under expanded rows.
========================================================================== */
/* Expand chevron + count pill live in the LEFT (edit) half of the name cell. */
.bt-subtoggle {
flex-shrink: 0; width: 18px; height: 18px; border: none; background: none; cursor: pointer;
color: var(--text-muted); font-size: 10px; border-radius: 4px; display: inline-flex;
align-items: center; justify-content: center; opacity: 0; transition: opacity 120ms var(--ease), transform 150ms var(--ease), background 120ms var(--ease);
}
.bt-row:hover .bt-subtoggle, .bt-subtoggle.open { opacity: 1; }
.bt-subtoggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-subtoggle.open { transform: rotate(90deg); }
.bt-subcount {
flex-shrink: 0; height: 16px; padding: 0 7px; display: inline-flex; align-items: center;
font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--track-bg);
border-radius: 999px; cursor: pointer;
}
.bt-subcount.hidden { display: none; }
.bt-subcount:hover { color: var(--primary); }
/* The full-width row that holds a parent's sub-table, indented from the left. */
.bt-subcell { padding: 6px 10px 10px 42px; background: var(--track-bg); border-bottom: 1px solid var(--border); }
.bt-subwrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.bt-subtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 460px; }
.bt-subth {
position: relative; height: 30px; padding: 0 10px; text-align: left; white-space: nowrap; user-select: none;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
background: var(--surface-raised); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.bt-subth[draggable="true"] { cursor: grab; }
.bt-subth-handle { width: 28px; padding: 0; }
.bt-subth-add { width: 40px; text-align: center; padding: 0; }
.bt-subaddcol { width: 24px; height: 24px; border: none; background: none; color: var(--text-muted); font-size: 15px; border-radius: 4px; cursor: pointer; }
.bt-subaddcol:hover { background: var(--surface-hover); color: var(--primary); }
.bt-subth-menu { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0; border: none; background: none; color: var(--text-muted); border-radius: 4px; cursor: pointer; }
.bt-subth:hover .bt-subth-menu { opacity: 1; }
.bt-subth-menu:hover { background: var(--surface-hover); color: var(--text-primary); }
.bt-subtd { height: 32px; padding: 0; vertical-align: middle; color: var(--text-secondary); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.bt-subrow:hover .bt-subtd { background: var(--surface-hover); }
.bt-subtd[data-subedit] { cursor: pointer; }
.bt-subname-cell[data-subedit] { cursor: text; }
.bt-subtd-end { border-right: none; width: 6px; }
.bt-subhandle { width: 28px; text-align: center; }
.bt-subdel { display: inline-flex; align-items: center; justify-content: center; opacity: 0; border: none; background: none; color: var(--text-muted); cursor: pointer; transition: opacity 120ms var(--ease), color 120ms var(--ease); }
.bt-subdel .ic { width: 13px; height: 13px; }
.bt-subrow:hover .bt-subdel { opacity: 0.75; }
.bt-subdel:hover { opacity: 1; color: var(--danger); }
.bt-subname { padding: 0 10px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-subadd { height: 30px; padding: 0 10px; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.bt-subadd:hover { color: var(--primary); background: var(--surface-hover); }
.bt-subempty { padding: 8px 10px; color: var(--text-muted); font-size: 12px; }
/* Item-panel Subitems tab hosts the same sub-table (no indent wrapper). */
.ip-subitems .bt-subwrap { min-width: 0; }
/* ==========================================================================
EMPTY GROUPS — collapse to header + a single "+ Add Item" row. No tall
canvas. The only empty-cell that renders is the thin one-line filter note.
========================================================================== */
.bt-empty-cell {
height: var(--bt-row-h); padding: 0 var(--space-3); vertical-align: middle;
color: var(--text-muted); font-size: var(--bt-cell-size);
background: var(--surface); border-bottom: 1px solid var(--table-hairline);
}
/* Panel / dropdown empty states (updates, activity, subitems, notifications). */
.ip-empty, .notif-empty {
display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
text-align: center; color: var(--text-tertiary); font-size: var(--text-sm); padding: var(--space-5) var(--space-4);
}
.ip-empty-icon, .notif-empty-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%; margin-bottom: var(--space-1);
background: var(--track-bg); font-size: 20px;
}
.ip-empty-sub { font-size: var(--text-xs); color: var(--text-tertiary); }
/* ==========================================================================
MOTION — reveal animations + reduced-motion (design-system pass)
========================================================================== */
/* Subitem sub-table animates in on expand (the row is re-rendered on toggle). */
@keyframes bt-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bt-subwrap { animation: bt-reveal var(--dur-slow) var(--ease); }
/* Dropdown option rows + notification items get a consistent quick fade-in. */
@keyframes bt-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Honour the OS "reduce motion" setting: kill transforms/animations app-wide. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.task-panel { transform: none !important; opacity: 1; }
}
/* ==========================================================================
Long-text expand popover + inline group-rename (visual-polish pass)
========================================================================== */
.bt-text-pop { width: 320px; max-width: 90vw; padding: var(--space-2); }
.bt-text-area { width: 100%; min-height: 96px; max-height: 260px; resize: vertical; font-size: var(--text-sm); line-height: var(--leading); }
.bt-group-rename-input { max-width: 240px; height: 26px; }
/* ==========================================================================
CRM — Client Hub (dashboard) + Client Detail view
========================================================================== */
/* Rotate an icon 180° (used for the "back" chevron). */
.ic.flip { transform: rotate(180deg); }
/* --- "My work" strip (lightweight at-a-glance counts above the directory) --- */
.mywork-strip { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.mywork-chip {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4); min-width: 160px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); cursor: pointer;
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mywork-chip:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.mywork-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); }
.mywork-chip-body { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.mywork-chip-value { font-size: 20px; font-weight: var(--weight-bold); color: var(--text-primary); }
.mywork-chip-label { font-size: var(--text-xs); color: var(--text-secondary); }
/* --- Directory toolbar: title + search + status filter pills --- */
.client-hub-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.client-hub-controls { display: flex; align-items: center; gap: var(--space-2); }
.client-search { position: relative; display: inline-flex; align-items: center; }
.client-search-icon { position: absolute; left: 10px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.client-search-input {
height: 36px; padding: 0 12px 0 32px; min-width: 220px;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
color: var(--text-primary); font-size: var(--text-sm);
}
.client-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.client-filter-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.client-filter-pill {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 12px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.client-filter-pill:hover { background: var(--surface-hover, var(--track-bg)); }
.client-filter-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.client-filter-pill.active .client-filter-dot { outline: 2px solid rgba(255,255,255,0.6); }
.client-filter-dot { width: 8px; height: 8px; border-radius: 50%; }
/* --- Status pill (shared by hub cards + detail header) --- */
.client-status-pill {
display: inline-flex; align-items: center; align-self: flex-start;
padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-medium);
color: var(--pill, #888); background: color-mix(in srgb, var(--pill, #888) 16%, transparent);
}
/* --- Client cards grid --- */
.client-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.client-card {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.client-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.client-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.client-card-head { display: flex; align-items: center; gap: var(--space-3); }
.client-card-logo { width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.client-card-logo-fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--weight-bold); font-size: 16px; }
.client-card-headmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.client-card-name { font-weight: var(--weight-bold); color: var(--text-primary); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-card-contact { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); min-height: 18px; }
.client-card-contact-name { color: var(--text-primary); font-weight: var(--weight-medium); }
.client-card-contact-role { color: var(--text-secondary); font-size: var(--text-xs); }
.client-card-contact-empty { color: var(--text-muted); font-size: var(--text-sm); font-style: italic; }
.client-card-foot { display: flex; gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.client-card-stat { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-secondary); }
.client-card-stat .ic { width: 14px; height: 14px; }
.client-no-results { padding: var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }
.form-divider { height: 1px; background: var(--border); margin: var(--space-4) 0; }
/* --- Client detail header --- */
.client-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none; }
.client-back:hover { color: var(--text-primary); }
.tool-btn-danger:hover { color: var(--danger); border-color: var(--danger); }
.cd-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.cd-logo-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.cd-logo-wrap.editable { cursor: pointer; }
.cd-logo { width: 64px; height: 64px; border-radius: var(--radius-lg); object-fit: cover; }
.cd-logo-fallback { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--weight-bold); font-size: 24px; }
.cd-logo-edit {
position: absolute; right: -6px; bottom: -6px; display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
color: var(--text-secondary); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.cd-logo-wrap.editable:hover .cd-logo-edit { opacity: 1; }
.cd-logo-edit .ic { width: 13px; height: 13px; }
.cd-header-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1; }
.cd-name-static { font-size: 22px; font-weight: var(--weight-bold); color: var(--text-primary); }
.cd-name-input {
font-size: 22px; font-weight: var(--weight-bold); color: var(--text-primary);
background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
padding: 2px 6px; margin: -2px -6px; max-width: 480px;
}
.cd-name-input:hover { border-color: var(--border); }
.cd-name-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.cd-header-sub { display: flex; align-items: center; gap: var(--space-2); }
.cd-status-select { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); }
/* --- Detail two-column layout + sections --- */
.client-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: start; }
.client-detail-col { display: flex; flex-direction: column; gap: var(--space-5); }
.cd-section { padding: var(--space-4) var(--space-5) var(--space-5); }
.cd-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.cd-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); }
.cd-section-title .ic { color: var(--text-secondary); }
.cd-empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-3) 0; }
.cd-empty-icon { display: inline-flex; }
/* Contacts */
.cd-contact-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cd-contact { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cd-contact-main { flex: 1; min-width: 0; }
.cd-contact-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cd-contact-name { font-weight: var(--weight-medium); color: var(--text-primary); font-size: var(--text-sm); }
.cd-primary-badge { font-size: 10px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); padding: 1px 6px; border-radius: 999px; }
.cd-contact-role { font-size: var(--text-xs); color: var(--text-secondary); }
.cd-contact-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 4px; }
.cd-contact-link { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-secondary); text-decoration: none; }
.cd-contact-link:hover { color: var(--primary); }
.cd-contact-link .ic { width: 13px; height: 13px; }
.cd-contact-actions { display: flex; gap: 2px; flex-shrink: 0; }
/* Linked boards */
.cd-board-list { display: flex; flex-direction: column; gap: var(--space-2); }
.cd-board-row { display: flex; align-items: center; gap: var(--space-2); }
.cd-board-link { flex: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text-primary); transition: background var(--dur) var(--ease); }
.cd-board-link:hover { background: var(--track-bg); }
.cd-board-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cd-board-name { flex: 1; font-weight: var(--weight-medium); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-board-open { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.cd-board-open .ic { width: 13px; height: 13px; }
.cd-link-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 340px; overflow-y: auto; }
.cd-link-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; text-align: left; }
.cd-link-row:hover { background: var(--track-bg); }
.cd-link-add { margin-left: auto; display: inline-flex; color: var(--primary); }
/* Notes composer + feed */
.cd-composer { margin-bottom: var(--space-4); }
.cd-note-input { width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); font-size: var(--text-sm); line-height: var(--leading, 1.5); resize: vertical; }
.cd-note-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.cd-composer-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.cd-filechip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--track-bg); font-size: var(--text-xs); color: var(--text-secondary); text-decoration: none; }
.cd-filechip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 0; }
.cd-filechip-link:hover { color: var(--primary); }
.cd-filechip .ic { width: 13px; height: 13px; }
.cd-notes { display: flex; flex-direction: column; gap: var(--space-3); }
.cd-notes-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: var(--space-5) 0; }
.cd-note { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cd-note-head { display: flex; align-items: center; gap: var(--space-2); }
.cd-note-author { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-primary); }
.cd-note-time { font-size: var(--text-xs); color: var(--text-muted); }
.cd-note-actions { margin-left: auto; display: flex; gap: var(--space-2); }
.cd-note-body { margin-top: 6px; font-size: var(--text-sm); line-height: var(--leading, 1.5); color: var(--text-primary); word-break: break-word; }
.cd-note-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-note-edit { margin-top: 8px; }
.cd-edited { color: var(--text-muted); }
/* Linked-client chip in the board header */
.board-client-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--track-bg); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; }
.board-client-chip:hover { color: var(--primary); }
.board-client-chip .ic { width: 13px; height: 13px; }
/* Responsive: single column on narrow screens */
@media (max-width: 900px) {
.client-detail-grid { grid-template-columns: 1fr; }
}