:root { --bg:#f0efeb; --surface:#fff; --surface2:#f9f8f5; --border:#e5e3dc; --border2:#d4d1c8; --text:#1a1916; --text2:#6b6860; --text3:#9a978f; --accent:#1e3a5f; --accent-light:#e8edf4; --accent-mid:#2d5a8e; --green:#2a7d4f; --green-bg:#eaf5ef; --orange:#c4621a; --orange-bg:#fdf0e6; --red:#b93a3a; --red-bg:#fdf0f0; --yellow:#b08c1a; --yellow-bg:#fdf8e6; --purple:#5a3a8e; --purple-bg:#f3eef8; --gold:#f59e2a; --rail-w:72px; --panel-w:224px; --nav-w:calc(var(--rail-w) + var(--panel-w)); --header-h:52px; --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.06); } *{box-sizing:border-box;margin:0;padding:0;} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;min-height:100vh;} /* ── AUTH SCREEN ── */ #auth-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--accent); background-image: radial-gradient(circle at 20% 50%, rgba(45,90,142,.4) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(245,158,42,.08) 0%, transparent 50%); } .auth-card { background: var(--surface); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.25); width: 420px; padding: 40px; } .auth-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .auth-logo-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 18px; color: #fff; font-weight: 600; } .auth-logo-text { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--accent); font-weight: 600; } .auth-tagline { font-size: 13px; color: var(--text3); margin-bottom: 32px; } .auth-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 24px; } .auth-tab { padding: 8px 20px; font-size: 14px; font-weight: 500; color: var(--text3); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; font-family: 'DM Sans', sans-serif; } .auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .auth-form-group { margin-bottom: 14px; } .auth-label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 5px; } .auth-input { width: 100%; padding: 9px 12px; border: 1px solid var(--border2); border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text); background: var(--surface); outline: none; transition: border-color .15s; } .auth-input:focus { border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-light); } .auth-btn { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: background .15s; } .auth-btn:hover { background: var(--accent-mid); } .auth-error { background: var(--red-bg); border: 1px solid #f0c0c0; color: var(--red); padding: 9px 12px; border-radius: var(--radius); font-size: 12px; margin-bottom: 14px; display: none; } /* ── APP SHELL ── */ #app { display: none; } .app-body { display: flex; min-height: 100vh; } /* ── NAV RAIL ── */ #budget-table thead th { background: var(--accent); color: #fff; border-bottom: none; } .nav-rail { width: var(--rail-w); background: var(--accent); position: fixed; top:0; left:0; bottom:0; z-index: 120; display: flex; flex-direction: column; align-items: center; padding: 0 0 12px; } .rail-logo { width: 100%; padding: 14px 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .rail-logo-mark { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 16px; color: #fff; font-weight: 600; } .rail-logo-sub { font-size: 8px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .12em; text-align: center; } .rail-items { flex: 1; width: 100%; padding: 8px 0; overflow-y: auto; } .rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px; cursor: pointer; color: rgba(255,255,255,.5); transition: all .15s; border-left: 3px solid transparent; } .rail-item:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); } .rail-item.active { color: #fff; background: rgba(255,255,255,.13); border-left-color: var(--gold); } .rail-item svg { width: 20px; height: 20px; flex-shrink: 0; } .rail-label { font-size: 9px; letter-spacing: .03em; font-weight: 500; text-align: center; line-height: 1.2; } /* External collaborators (GC / contractor / view-only): allowlist the rails. Hide EVERY rail, then re-show only Projects, Tasks, and Help. Any new or dynamically-injected rail is hidden by default and can never leak. !important beats the inline display:flex some rails set via JS. */ body.external-collab .rail-item { display: none !important; } body.external-collab #rail-allprojects, body.external-collab #rail-tasks, body.external-collab #rail-help { display: flex !important; } body.external-collab #tara-fab { display: none !important; } .rail-footer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); } .rail-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; } .rail-avatar:hover { background: rgba(255,255,255,.25); } /* ── NAV PANEL ── */ .nav-panel { width: var(--panel-w); background: #163158; position: fixed; top:0; left: var(--rail-w); bottom:0; z-index: 110; display: flex; flex-direction: column; overflow: visible; box-shadow: 2px 0 8px rgba(0,0,0,.15); } .panel-project-card { padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } /* ── ADMIN MODE ────────────────────────────────────────────────────────── The admin panel reuses the project panel's structure but is deliberately recolored (deep bronze vs the app navy) so it's unmistakable you're in admin mode editing company-wide settings. */ .nav-panel.admin-nav { background: linear-gradient(180deg, #43361a 0%, #2e2512 100%); } .admin-mode-banner { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--gold, #c9a84c); color: #2e2512; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 6px 8px; flex-shrink: 0; } .admin-nav .panel-nav-item.active { background: rgba(201,168,76,.22); } .admin-nav .panel-nav-section { color: rgba(201,168,76,.85); } /* Desktop uses the admin panel; the legacy horizontal tab strip remains the mobile fallback (the panel is hidden ≤768px like the project panel). */ @media (min-width: 769px) { #admin-tab-strip { display: none !important; } } /* PROPERTY MANAGEMENT panel — banner-only app identity: the panel keeps the default navy background (no recolor), only the banner is tinted so it's unmistakable which app you're in. */ .pm-mode-banner { display: flex; align-items: center; justify-content: center; gap: 6px; background: #14b8a6; color: #06302b; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 6px 8px; flex-shrink: 0; } .pm-nav .panel-nav-item.active { background: rgba(20,184,166,.22); } /* Desktop uses the PM panel; the property page's horizontal tab strip is the mobile fallback (panel hidden ≤768px like the project panel). */ @media (min-width: 769px) { #re-tab-strip { display: none !important; } } .panel-project-selector { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .panel-project-selector-label { font-size: 10px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em; } .panel-project-selector-btn { font-size: 10px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); border: none; border-radius: 4px; padding: 2px 7px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .panel-project-selector-btn:hover { color: #fff; background: rgba(255,255,255,.15); } .panel-project-name { font-size: 14px; font-weight: 700; color: var(--gold); margin-bottom: 3px; line-height: 1.3; font-family: 'Playfair Display', serif; } .panel-project-meta { font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.6; } .panel-project-status { display: inline-block; font-size: 10px; font-weight: 700; color: #4ade80; letter-spacing: .08em; margin-top: 4px; } .panel-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .panel-nav::-webkit-scrollbar { width: 4px; } .panel-nav::-webkit-scrollbar-track { background: transparent; } .panel-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; } /* ── COLLAPSIBLE NAV SECTIONS ── */ .panel-nav-section { font-size: 9px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .12em; padding: 10px 16px 4px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .panel-nav-section:hover { color: rgba(255,255,255,.6); } .panel-nav-section .nav-chevron { font-size: 10px; transition: transform .2s; opacity: .5; } .panel-nav-section.collapsed .nav-chevron { transform: rotate(-90deg); } .panel-nav-group { overflow: hidden; transition: max-height .25s ease; } .panel-nav-group.collapsed { max-height: 0 !important; } /* nav-hidden for rail-level pages */ .nav-panel.nav-hidden { display: none !important; } /* ── NAV COLLAPSE BUTTON ── */ #nav-collapse-btn { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 13px; height: 44px; background: var(--surface); border: 1px solid var(--border); border-left: none; border-radius: 0 6px 6px 0; cursor: pointer; z-index: 115; display: flex; align-items: center; justify-content: center; box-shadow: 2px 0 5px rgba(0,0,0,.08); transition: background .15s, width .2s; padding: 0; outline: none; } #nav-collapse-btn::after { content: '‹'; font-size: 10px; color: var(--text3); line-height: 1; display: block; } #nav-collapse-btn:hover { background: var(--accent-light); } #nav-collapse-btn:hover::after { color: var(--accent); } /* Collapsed state */ .nav-panel { transition: width .2s ease; overflow: visible; } .nav-panel.nav-collapsed { width: 0 !important; } .nav-panel.nav-collapsed .panel-project-card, .nav-panel.nav-collapsed .panel-nav, .nav-panel.nav-collapsed > *:not(#nav-collapse-btn) { opacity: 0; pointer-events: none; visibility: hidden; } .nav-panel.nav-collapsed #nav-collapse-btn::after { content: '›'; } .nav-panel.nav-collapsed #nav-collapse-btn { right: -13px; } @media (max-width: 768px) { #nav-collapse-btn { display: none !important; } } /* ── SETTINGS TABS ── */ .settings-tab { background:none; border:none; padding:10px 16px; font-size:12px; font-weight:500; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:.15s; } .settings-tab:hover { color:var(--text2); } .settings-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } /* Nav panel flex so settings button stays at bottom */ .nav-panel { display:flex; flex-direction:column; } .panel-nav { flex:1; overflow-y:auto; } /* ── TOGGLE SWITCH ── */ .toggle-switch { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; } .toggle-switch input { opacity:0; width:0; height:0; } .toggle-slider { position:absolute; cursor:pointer; inset:0; background:#ccc; border-radius:22px; transition:.25s; } .toggle-slider:before { content:''; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 1px 3px rgba(0,0,0,.2); } .toggle-switch input:checked + .toggle-slider { background:var(--green); } .toggle-switch input:checked + .toggle-slider:before { transform:translateX(16px); } .toggle-switch input:disabled + .toggle-slider { opacity:.5; cursor:not-allowed; } /* ── MOBILE RESPONSIVE ── */ /* Mobile hamburger button — hidden on desktop */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--text2); padding: 4px; } .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 105; backdrop-filter: blur(2px); } .mobile-overlay.open { display: block; } @media (max-width: 768px) { :root { --rail-w: 0px; --panel-w: 260px; --nav-w: 0px; } /* Hide rail on mobile */ .nav-rail { display: none; } /* Hide collapse button on mobile - not needed */ #nav-collapse-btn { display: none !important; } /* Panel slides in from left as drawer */ .nav-panel { left: 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 120; box-shadow: 4px 0 20px rgba(0,0,0,.3); } .nav-panel.mobile-open { transform: translateX(0); } /* Main content takes full width — override any JS inline styles */ .main { margin-left: 0 !important; } /* Topbar gets hamburger */ .mobile-menu-btn { display: flex; align-items: center; } /* Content padding reduced */ .content { padding: 16px 14px; } /* Stat row becomes 2-col grid on mobile */ .stat-row { grid-template-columns: 1fr 1fr !important; gap: 8px; } /* Split panels — table takes full width, detail card hidden (shown as bottom sheet) */ .split { display: block !important; } .split-panel { min-width: unset !important; width: 100% !important; } .detail-card { display: none !important; /* hidden on mobile, shown as bottom sheet drawer instead */ } /* Budget table — allow scroll */ #budget-table { min-width: 900px; font-size: 11px; } #budget-table th, #budget-table td { padding: 6px 8px !important; } /* Phone budget: hide the low-value Category column and PIN Code + Item, so the user always knows which line they're on while the money columns scroll — before this, landing on Budget showed no dollar figures at all and nothing hinted the table scrolls sideways. The pinned column's drop-shadow doubles as the "more content this way" affordance. (:not([colspan]) skips the group-header/TOTAL rows, whose colspans would make nth-child counting wrong; browsers auto-shrink their colspans.) */ #budget-table th:nth-child(2):not([colspan]), #budget-table td:nth-child(2):not([colspan]) { display: none; } #budget-table th:nth-child(1):not([colspan]), #budget-table td:nth-child(1):not([colspan]) { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 54px; min-width: 54px; max-width: 54px; } #budget-table th:nth-child(3):not([colspan]), #budget-table td:nth-child(3):not([colspan]) { position: sticky; left: 54px; z-index: 2; background: var(--surface); min-width: 130px; max-width: 150px; white-space: normal; box-shadow: 3px 0 6px rgba(0,0,0,.10); } #budget-table thead th:nth-child(1):not([colspan]), #budget-table thead th:nth-child(3):not([colspan]) { z-index: 5; background: var(--accent); } /* Modals — full screen on mobile */ .modal-overlay { padding: 0; align-items: flex-end; } .modal { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; max-height: 92vh; overflow-y: auto; } /* Meeting editor full screen */ #me-content { padding: 16px !important; } #meeting-editor .modal { border-radius: 0 !important; max-height: 100vh; } /* Topbar breadcrumb on small screens — drop the ORG root (and its separator) to save room and show the PROJECT name instead, so a project page reads "Project › Page" rather than the cut-off "Org › Page". The project name + module separator follow their JS-driven inline display (shown on project pages, hidden on rail pages). The project name truncates with an ellipsis so the current page stays visible. */ .bc-org-wrap, #bc-org-sep { display: none !important; } #bc-project-sep { display: none !important; } #bc-project-name { min-width: 0; } #bc-project-name-text { display: inline-block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Hide topbar user email */ .topbar-user { display: none; } /* Toolbar buttons wrap */ .dash-welcome { flex-wrap: wrap; gap: 8px; } .dash-welcome > div:last-child { flex-wrap: wrap; } /* Tables — allow horizontal scroll */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Action board scroll */ #ai-board-container { padding-bottom: 16px; } /* Bottom nav bar for mobile — key modules */ .mobile-bottom-nav { display: none; } .mobile-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; color: rgba(255,255,255,.6); cursor: pointer; font-size: 9px; font-weight: 500; } .mobile-bottom-nav-item.active { color: var(--gold); } .mobile-bottom-nav-item svg { width: 20px; height: 20px; } /* Bottom-bar customize modal: keep the catalog icons a consistent size */ #mnav-grid svg { width: 22px; height: 22px; } /* Waffle menu items */ .mobile-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 8px; font-weight: 500; } .mobile-menu-item:hover { background: var(--surface2); } .mobile-menu-item svg { flex-shrink: 0; color: var(--text2); } .mobile-menu-item.active { color: var(--accent); background: var(--accent-light); } .mobile-menu-item.active svg { color: var(--accent); } /* Waffle menus as an icon board: a grid of icon+label tiles instead of a single column of names. Section headers / dividers span the full row. */ .mobile-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start; } .mobile-menu-grid > *:not(.mobile-menu-item) { grid-column: 1 / -1; } .mobile-menu-grid > .mobile-menu-item { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 10px 4px; min-height: 68px; font-size: 11px; line-height: 1.2; border-radius: 10px; background: var(--surface2); font-weight: 600; border: 1px solid var(--border); } .mobile-menu-grid > .mobile-menu-item svg { width: 22px; height: 22px; color: var(--accent); } .mobile-menu-grid > .mobile-menu-item.active { background: var(--accent-light); border-color: var(--accent); } .mobile-menu-grid > .mobile-menu-item:active { transform: scale(.96); } /* Bottom nav bar for mobile */ .mobile-bottom-nav { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; background: var(--accent); z-index: 100; border-top: 1px solid rgba(255,255,255,.1); padding-bottom: env(safe-area-inset-bottom); } /* Only shown inside a project — hidden on global rails (Home, All Projects, …) */ .mobile-bottom-nav.nav-hidden { display: none !important; } /* Add bottom padding so content isn't hidden behind bottom nav */ /* Clear the fixed bottom nav (the base .content rule below the media queries sets padding:24px and would otherwise win, so this needs !important). */ .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; } /* Home cards: a 3-column masonry grid is unusable on a phone (cards get ~115px wide and the row-span masonry overlaps them). Force a clean single-column stack — override the JS-set per-card column/row spans and the 8px auto-rows. */ #home-card-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; } #home-card-grid > [data-card-id] { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 0 !important; } /* Project dashboard cards: one full-width card per row on phones so no card gets squished into a narrow track. Overrides the JS-set per-card spans and the inline auto-fill template. */ #dash-card-grid { grid-template-columns: 1fr !important; } #dash-card-grid > .dash-widget { grid-column: 1 / -1 !important; } /* Invoice preview popout: stack the preview over the details on phones. */ #invoice-preview-modal .ipv-split { flex-direction: column !important; } #invoice-preview-modal #ipv-preview { flex: 1 1 50% !important; min-height: 0; } #invoice-preview-modal #ipv-details { width: auto !important; border-left: none !important; border-top: 1px solid var(--border); } /* Mobile bottom sheet for detail cards */ .mobile-detail-sheet { position: fixed; bottom: 0; left: 0; right: 0; z-index: 150; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.15); max-height: 75vh; overflow-y: auto; transform: translateY(100%); transition: transform .3s ease; padding-bottom: env(safe-area-inset-bottom); } .mobile-detail-sheet.open { transform: translateY(0); } .mobile-detail-sheet-handle { width: 36px; height: 4px; background: var(--border2); border-radius: 2px; margin: 10px auto 0; cursor: pointer; } .mobile-sheet-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 149; backdrop-filter: blur(2px); } .mobile-sheet-backdrop.open { display: block; } } @media (max-width: 480px) { .stat-row { grid-template-columns: 1fr 1fr !important; } /* .form-row is a GRID (see base rule) — the old flex-direction override was a no-op, which is why paired fields clipped on phones. */ .form-row { grid-template-columns: 1fr !important; flex-direction: column !important; } .btn-sm { padding: 5px 8px; font-size: 11px; } } /* All Projects on phones: collapse the 8 filter controls behind the "Filters & sort" toggle so the list isn't pushed two screens down. The search input (first child) stays visible. */ @media (max-width: 768px) { #all-proj-filters-toggle { display: inline-flex !important; align-items: center; gap: 6px; } #all-proj-filterbar > :not(:first-child) { display: none; } #all-proj-filterbar.filters-open > :not(:first-child) { display: revert; } /* Hide the always-on "Ask Tara" floating button on mobile (overrides the inline display:flex). */ #tara-fab { display: none !important; } } .panel-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: rgba(255,255,255,.7); cursor: pointer; transition: all .15s; font-size: 13px; font-weight: 400; border-left: 3px solid transparent; } .panel-nav-item:hover { color: #fff; background: rgba(255,255,255,.07); } .panel-nav-item.active { color: #fff; background: rgba(255,255,255,.12); border-left-color: var(--gold); font-weight: 500; } .panel-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .8; } .panel-nav-badge { margin-left: auto; background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; } .panel-nav-item.active .panel-nav-badge { background: var(--gold); color: var(--accent); } /* ── BETA tags (see 17_beta.js) ── */ .beta-pill { display: inline-block; margin-left: 7px; vertical-align: middle; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; padding: 1px 6px; border-radius: 9px; text-transform: uppercase; } .beta-pill-hdr { font-size: 10px; padding: 2px 8px; vertical-align: middle; position: relative; top: -2px; } .panel-nav-item .beta-pill { margin-left: 6px; } .rail-item { position: relative; } .beta-rail-dot { position: absolute; top: 3px; right: 6px; min-width: 13px; height: 13px; background: #f59e0b; color: #fff; font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; border-radius: 7px; padding: 0 2px; border: 2px solid var(--rail-bg); box-sizing: content-box; pointer-events: none; } /* ── MAIN CONTENT ── */ .main { margin-left: var(--nav-w); flex: 1; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .app-body { display: flex; height: 100vh; overflow: hidden; } .topbar { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 12px; flex-shrink: 0; z-index: 50; } .topbar-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); flex: 1; } .bc-sep { color: var(--text3); } .bc-link { color: var(--accent-mid); cursor: pointer; } .bc-link:hover { text-decoration: underline; } .bc-current { color: var(--text); font-weight: 600; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .topbar-user { font-size: 12px; color: var(--text3); } .topbar-logout { font-size: 11px; color: var(--text3); background: none; border: 1px solid var(--border2); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-family: 'DM Sans', sans-serif; } .topbar-logout:hover { border-color: var(--accent); color: var(--accent); } .content { padding: 24px 24px 24px 20px; flex: 1; overflow-y: auto; min-height: 0; } /* ── SHARED COMPONENTS ── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-mid); } .btn-outline { background: transparent; color: var(--text2); border: 1px solid var(--border2); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .btn-sm { padding: 5px 10px; font-size: 11px; } .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; } .badge-green { background: var(--green-bg); color: var(--green); } .badge-orange { background: var(--orange-bg); color: var(--orange); } .badge-red { background: var(--red-bg); color: var(--red); } .badge-yellow { background: var(--yellow-bg); color: var(--yellow); } .badge-blue { background: var(--accent-light); color: var(--accent-mid); } .badge-purple { background: var(--purple-bg); color: var(--purple); } .badge-gray { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow); min-width: 0; } /* The text block must be allowed to shrink so a long value wraps inside the card instead of bleeding past its edge. */ .stat-card > :not(.stat-icon) { min-width: 0; flex: 1; } .stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stat-icon svg { width: 16px; height: 16px; } .stat-label { font-size: 11px; color: var(--text2); margin-bottom: 2px; } /* Money/figures must NEVER wrap mid-number ("$17,420,0 / 00" looked broken). nowrap + hidden, and fitStatValues() in core.js shrinks the font until the value fits its card — so long figures get smaller, not split or clipped. */ .stat-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; } .stat-sub { font-size: 10px; color: var(--text3); margin-top: 2px; } /* Split layout: table left, detail right */ .split { display: grid; grid-template-columns: 1fr 380px; gap: 16px; align-items: start; } .split-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface2); } .panel-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; } .panel-count { font-size: 11px; background: var(--border); color: var(--text2); padding: 1px 7px; border-radius: 10px; font-weight: 600; } .panel-spacer { flex: 1; } .search-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); } .search-wrap { flex: 1; position: relative; } .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text3); } .search-input { width: 100%; padding: 6px 9px 6px 28px; border: 1px solid var(--border); border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text); background: var(--bg); outline: none; } .search-input:focus { border-color: var(--accent-mid); background: #fff; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } thead th { padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 500; color: var(--text3); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; vertical-align: middle; } tbody tr:hover { background: var(--bg); cursor: pointer; } tbody tr.selected { background: var(--accent-light); } .td-link { color: var(--accent-mid); font-weight: 500; } .td-link:hover { text-decoration: underline; } .td-mono { font-family: 'DM Mono', monospace; font-size: 11px; } /* DM Mono's default zero is slashed (Ø), which is hard to read in budget/finance figures. Render every monospace figure in DM Sans with tabular (fixed-width) numerals instead: clean zeros, and columns still line up. The attribute selector catches the inline font-family on table cells/inputs; !important is needed to beat those inline styles. */ .td-mono, [style*="DM Mono"] { font-family: 'DM Sans', sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: .01em; } /* AI minutes-import spinner (#98) */ .imp-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: imp-spin .8s linear infinite; } @keyframes imp-spin { to { transform: rotate(360deg); } } /* Rich-text agenda notes (#99) */ .rt-edit:empty:before { content: attr(data-ph); color: var(--text3); pointer-events: none; } .rt-edit:focus { outline: none; border-color: var(--accent) !important; } .rt-edit ul, .rt-edit ol { margin: 4px 0 4px 20px; padding: 0; } .rt-edit li { margin: 2px 0; } .rt-edit p { margin: 0 0 6px; } /* Tables inserted in the discussion box. Attributes are stripped on save, so all styling is by element selector (no reliance on class/inline style). */ .rt-edit table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 12px; } .rt-edit th, .rt-edit td { border: 1px solid var(--border); padding: 4px 7px; text-align: left; vertical-align: top; min-width: 36px; } .rt-edit th { background: var(--accent-light, #eef1f5); font-weight: 700; color: var(--text1, #1f2937); } .rt-edit td:empty:before, .rt-edit th:empty:before { content: "\00a0"; } /* Dark header tables — override global th style */ #co-tracker-table thead th, #exp-line-table thead th, table.dark-header thead th { color: #fff !important; background: var(--accent) !important; font-weight: 700 !important; } /* Detail card */ .detail-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-y: auto; overflow-x: hidden; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); } /* Expand-to-fullscreen control on every detail panel (Task 15) */ .detail-expand-btn { position: absolute; top: 12px; right: 12px; z-index: 3; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text2); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 7px; } .detail-expand-btn:hover { color: var(--accent); border-color: var(--accent); } /* In the expanded view, let the body grow full-height (not the 520px sidebar cap) */ #detail-expand-body .detail-body { max-height: none; } #detail-expand-body .detail-card { position: static; box-shadow: none; border: none; max-height: none; overflow: visible; } .detail-header { padding: 16px; border-bottom: 1px solid var(--border); background: var(--surface2); } .detail-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-family: 'Playfair Display', serif; } .detail-meta { font-size: 11px; color: var(--text3); } .detail-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface2); overflow-x: auto; } .detail-tab { padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all .15s; } .detail-tab:hover { color: var(--text); } .detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .detail-body { padding: 16px; max-height: 520px; overflow-y: auto; } .detail-actions { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface2); display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; row-gap: 8px; } .detail-field { margin-bottom: 12px; } .detail-field-label { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px; } .detail-field-value { font-size: 13px; color: var(--text); } /* Budget table: scroll inside its card with sticky headings + totals footer, so a large budget doesn't force scrolling the whole page to reach controls. */ #budget-scroll { overflow: auto; max-height: 60vh; } #budget-table thead th { position: sticky; z-index: 3; } #budget-table thead tr:first-child th { top: 0; line-height: 14px; } /* group header row (~22px tall) */ #budget-table thead tr:nth-child(2) th { top: 22px; background: var(--accent); } /* column header row */ #budget-table tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--accent); } /* Empty state */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text3); } .empty-state svg { width: 40px !important; height: 40px !important; max-width: 40px !important; margin: 0 auto 12px; display: block; opacity: .4; } .empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; display: block; opacity: .4; } .empty-state-title { font-size: 14px; font-weight: 600; color: var(--text2); margin-bottom: 4px; } .empty-state-sub { font-size: 12px; } /* Section heading */ .section-heading { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; font-family: 'Playfair Display', serif; } .section-sub { font-size: 12px; color: var(--text3); margin-bottom: 20px; } /* Module panels */ .module { display: none; } .module.active { display: block; } /* Dashboard welcome */ .dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; } .dash-welcome-text h1 { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text); margin-bottom: 4px; } .dash-welcome-text p { font-size: 13px; color: var(--text3); } .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .dash-card-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } .dash-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .dash-item:last-child { border-bottom: none; } .dash-item-label { color: var(--text2); } .dash-item-value { font-weight: 600; color: var(--text); } /* No-project state */ .no-project { text-align: center; padding: 60px 24px; } .no-project svg { width: 48px; height: 48px; margin: 0 auto 16px; display: block; color: var(--text3); opacity: .5; } .no-project h2 { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--text); margin-bottom: 6px; } .no-project p { font-size: 13px; color: var(--text3); margin-bottom: 20px; } /* New project modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; display: flex; align-items: center; justify-content: center; display: none; } .modal-overlay.open { display: flex; } /* Flex column + height cap so tall modals scroll their body and keep the header + footer (Save/Cancel) visible instead of overflowing off-screen. */ .modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); width: 480px; max-width: 95vw; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; } /* Expense report dialog: a centered popout by default, expandable to fullscreen */ .exp-dialog-box { width: min(1000px, 96vw); max-height: 92vh; border-radius: 12px; box-shadow: var(--shadow-md); } #exp-editor.exp-fullscreen .exp-dialog-box { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } #exp-editor.exp-fullscreen { padding: 0; } .modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .modal-title { font-size: 16px; font-weight: 700; color: var(--text); font-family: 'Playfair Display', serif; } .modal-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 20px; line-height: 1; } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1 1 auto; } .modal-footer { flex-shrink: 0; } .modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface2); } .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 5px; } .form-input { width: 100%; padding: 8px 11px; border: 1px solid var(--border2); border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text); background: var(--surface); outline: none; transition: border-color .15s; } /* Placeholders read as hints, not entered data (was browser-default dark). */ input::placeholder, textarea::placeholder { color: var(--text3); opacity: 1; font-style: italic; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: var(--text3); font-style: italic; } /* Consistent native file inputs — the "Choose file" button matches .btn-outline so every upload control reads the same across the app (Task 14). */ input[type="file"] { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--text2); max-width: 100%; } input[type="file"]::file-selector-button { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 6px 12px; margin-right: 10px; cursor: pointer; transition: all .15s; } input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } input[type="file"]::-webkit-file-upload-button { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; background: var(--surface2); color: var(--text); border: 1px solid var(--border2); border-radius: 6px; padding: 6px 12px; margin-right: 10px; cursor: pointer; } /* Reusable drag-and-drop upload zone (data-drop-input). */ .upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 18px; border: 1.5px dashed var(--border2); border-radius: 8px; background: var(--surface2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; } .upload-zone:hover { border-color: var(--accent-mid); background: var(--accent-light); } .upload-zone .uz-label { font-size: 12px; font-weight: 600; color: var(--text2); } .upload-zone .uz-sub { font-size: 11px; color: var(--text3); } /* drag-over state for ANY drop target (upload-zone or existing dashed boxes) */ .dropzone-active { border-color: var(--accent) !important; background: var(--accent-light) !important; box-shadow: 0 0 0 3px var(--accent-light); } /* Import dropdown menu (People / Contacts top bars) */ .import-menu { position: absolute; top: 38px; right: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.16); padding: 6px; display: none; z-index: 60; } .import-menu.open { display: block; } .import-menu-item { padding: 9px 11px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--text); white-space: nowrap; } .import-menu-item:hover { background: var(--surface2); } /* Clickable tag chips (project metadata classification, Airtable-style) */ .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--border2); border-radius: 14px; font-size: 12px; color: var(--text2); cursor: pointer; user-select: none; transition: all .12s; background: var(--surface); } .tag-chip:hover { border-color: var(--accent-mid); color: var(--text); } .tag-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .form-input:focus { border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-light); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Budget: de-emphasized "Go to" cross-module links (task #25) */ .bud-link { background:none; border:none; padding:0; cursor:pointer; font-size:12px; font-weight:600; color:var(--accent); } .bud-link:hover { text-decoration:underline; } /* #179: standalone full-screen OAC tab (opened via "↗ Tab" / #meeting deep link). Make the meeting editor fill the screen edge-to-edge instead of a centered card. */ body.meeting-tab-mode #meeting-editor { padding: 0 !important; } body.meeting-tab-mode #meeting-editor > div { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; } /* In tab mode, hide the whole app shell so the dashboard/home page never flashes behind the meeting while it loads. The meeting editor (.modal-overlay, not a .module) is unaffected. A clean "Loading meeting…" placeholder shows until the editor opens. The class is set at first paint (top of core.js) so nothing else ever renders. */ body.meeting-tab-mode .nav-rail, body.meeting-tab-mode .nav-panel, body.meeting-tab-mode .topbar, body.meeting-tab-mode .module { display: none !important; } body.meeting-tab-mode .main { padding: 0 !important; } body.meeting-tab-mode { background: var(--bg, #f4f6f8); } body.meeting-tab-mode .app-body::after { content: "Loading meeting\2026"; position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; color: var(--text3, #8a93a0); font-size: 14px; letter-spacing: .02em; } /* Global search / command palette (#183) */ #cmdk-results .cmdk-group { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text3); padding:8px 10px 4px; } #cmdk-results .cmdk-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; } #cmdk-results .cmdk-row.sel { background:var(--accent-light); } #cmdk-results .cmdk-ico { width:18px; text-align:center; flex:none; color:var(--text3); font-size:13px; } #cmdk-results .cmdk-main { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600; color:var(--text); } #cmdk-results .cmdk-sub { flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text3); } #cmdk-results .cmdk-empty { padding:18px 12px; text-align:center; color:var(--text3); font-size:12px; } @media (max-width: 760px) { #cmdk-trigger { min-width:0 !important; } .cmdk-trigger-label { display:none; } } /* No keyboard → no keyboard-shortcut hint. */ @media (pointer: coarse) { #cmdk-trigger-key { display: none; } } /* Condensed budget table — tighter rows so more line items fit on one screen (#budget-table). Keeps horizontal padding; halves vertical padding + slightly smaller text. Scoped to the budget table only. */ #budget-table tbody td { padding-top: 4px; padding-bottom: 4px; } #budget-table thead th { padding-top: 5px; padding-bottom: 5px; } #budget-table tbody td, #budget-table thead th { font-size: 11.5px; } #budget-table .btn-sm { padding: 2px 7px; font-size: 11px; line-height: 1.45; } /* ── Parties / provenance strip (who performs each role; in-house vs outsourced) ── */ .parties-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 14px; } .party-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border2); border-radius: 999px; background: var(--card, #fff); font-size: 11.5px; line-height: 1.4; } .party-chip .party-role { font-weight: 500; color: var(--text2, #3a3a37); } .party-chip .party-org { color: var(--text3, #76746c); } .party-chip-ext { border-color: var(--amber, #b9802a); background: var(--amber-bg, #fbf3e4); } .party-chip .party-ext { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--amber, #97631a); border: 1px solid var(--amber, #d9b16a); border-radius: 4px; padding: 0 4px; } .party-manage { border: 1px dashed var(--border2); background: transparent; color: var(--text3, #76746c); font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer; } .party-manage:hover { border-color: var(--accent); color: var(--accent); } /* ── Project-role read-only mode: hide write controls the member can't use ── The backend already 403s these actions (RBAC guard); this hides the dead buttons so view-only / restricted members don't see them. */ body.proj-readonly .module .btn-primary, .module.module-readonly .btn-primary, body.proj-readonly .module [data-write], .module.module-readonly [data-write] { display: none !important; } /* common destructive / mutation controls flagged by their handler. Patterns chosen to miss read-safe actions: "mport" hits Import but not Export, "pload" hits Upload, never Print/Export/Download. */ body.proj-readonly .module button[onclick*="elete"], .module.module-readonly button[onclick*="elete"], body.proj-readonly .module button[onclick*="emove"], .module.module-readonly button[onclick*="emove"], body.proj-readonly .module button[onclick*="mport"], .module.module-readonly button[onclick*="mport"], body.proj-readonly .module button[onclick*="pload"], .module.module-readonly button[onclick*="pload"] { display: none !important; } /* a quiet "view only" ribbon at the top of any read-only module */ body.proj-readonly .module.active > .dash-welcome::after, .module.module-readonly.active > .dash-welcome::after { content: "👁 View only — changes are disabled for your role on this project"; display: block; flex-basis: 100%; order: 99; margin-top: 6px; padding: 5px 10px; border-radius: 8px; background: var(--amber-bg, #fbf3e4); color: var(--amber, #8a5a12); border: 1px solid var(--amber, #e0bd79); font-size: 11.5px; font-weight: 500; } /* ── Electronic-signature modal tabs ── */ .esign-tab { border:none; background:transparent; color:var(--text2); padding:6px 16px; font-size:13px; border-radius:6px; cursor:pointer; font-weight:500; } .esign-tab.active { background:var(--accent); color:#fff; } /* ── Actions list: keep the Title column readable on small screens ── Progressively drop the lower-value columns (and the secondary row buttons) so the task title gets the available width instead of collapsing. */ @media (max-width: 720px) { .ai-col-due, .ai-col-assignees, .ai-col-project { display: none; } /* Make Title claim all remaining width so it stops collapsing into a thin, over-wrapped column with dead space to its right. */ th.ai-col-title, td.ai-col-title { width: 100%; } } @media (max-width: 560px) { .ai-col-priority { display: none; } .ai-row-extra-btn { display: none; } } /* ── Global background-activity center (bottom-right floating pill) ───────── */ .activity-center { position: fixed; right: 18px; bottom: 18px; z-index: 9998; font-size: 12px; } .activity-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--text); color: #fff; border: none; border-radius: 22px; padding: 9px 15px; cursor: pointer; font-weight: 600; max-width: 340px; box-shadow: 0 6px 20px rgba(0,0,0,.22); } .activity-pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; } .activity-pill-count { background: rgba(255,255,255,.25); border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; min-width: 18px; text-align: center; } .activity-spinner { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: activitySpin .7s linear infinite; } .activity-spinner-sm { width: 13px; height: 13px; border-color: var(--border2); border-top-color: var(--accent); } @keyframes activitySpin { to { transform: rotate(360deg); } } .activity-list { margin-bottom: 8px; padding: 6px; max-width: 340px; max-height: 300px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.18); } .activity-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 8px; } .activity-row:hover { background: var(--surface2); } .activity-row-text { display: flex; flex-direction: column; min-width: 0; } .activity-row-label { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-row-detail { color: var(--text3); font-size: 11px; margin-top: 1px; } @media (max-width: 560px) { .activity-center { right: 10px; bottom: 70px; } .activity-pill { max-width: 240px; } } /* ── Searchable combobox (autocomplete + browse) ── */ .combo { position: relative; display: inline-block; width: 100%; } .combo .combo-input { padding-right: 26px; } /* In the All-Projects filter toolbar, combo-enhanced filters (Status/Type/Client) should size to their input and sit inline beside the native