/* === PDQ DESIGN SYSTEM — COLOR + TYPE TOKENS === Defined globally so they're available in mobile media queries below. Desktop rules keep their existing hardcoded hex values — tokens are only CONSUMED inside mobile breakpoint blocks (≤768px / ≤1024px / ≤600px). */ :root { --ink: #0F1E2E; --ink-soft: #3B4A5C; --ink-muted: #6B7A8C; --line: #E4EBEE; --canvas: #FFFFFF; --surface-1: #F4F8F8; --surface-2: #EAF1F1; --blue: #2B7FB8; --blue-deep: #1A5A87; --blue-tint: #E8F1F7; --green: #3E9B63; --green-deep: #2A7048; --green-tint: #E5F1EA; --warn: #B45309; --warn-tint: #FBEFD8; --danger: #B42318; --danger-tint: #FDECEA; --escalate: #EA580C; --escalate-tint: rgba(234, 88, 12, 0.08); --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Lock the page to the device width so a wide child (e.g. a many-column table) can never stretch the viewport horizontally. Wide tables live inside their own .table-scroll / .lead-summary-wrap containers, which scroll internally instead of pushing the whole page sideways. */ html, body { overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #1a1a2e; } /* === LOGIN OVERLAY — full-viewport gate, division-grouped layout === */ /* When no user is logged in we add .login-gate to . This hides the header and dashboard completely so nothing leaks through behind the overlay — login is a true gate, not just a top layer. */ html.login-gate { background: #0a1020; } html.login-gate body > header, html.login-gate body > .container, html.login-gate body > #updateBanner { display: none !important; } html.login-gate body { background: radial-gradient(1000px 600px at 10% -10%, rgba(59,130,246,0.14), transparent 60%), radial-gradient(900px 500px at 95% 110%, rgba(249,115,22,0.10), transparent 60%), linear-gradient(180deg, #0a1020, #0f1830); color: #eef2ff; overflow: hidden; } .login-overlay { --bg-0: #0a1020; --bg-1: #0f1830; --panel: #141e3a; --panel-2: #1a2647; --panel-hover: #22305a; --border: #283860; --border-soft: #1f2c52; --text: #eef2ff; --text-dim: #98a6c7; position: fixed; inset: 0; z-index: 20000; background: radial-gradient(1000px 600px at 10% -10%, rgba(59,130,246,0.14), transparent 60%), radial-gradient(900px 500px at 95% 110%, rgba(249,115,22,0.10), transparent 60%), linear-gradient(180deg, var(--bg-0), var(--bg-1)); color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; overflow-y: auto; } .login-shell { width: 100%; min-height: 100vh; display: flex; flex-direction: column; padding: clamp(14px, 1.6vw, 24px); gap: clamp(14px, 1.6vw, 22px); } /* Top header: logo + title on the left, dispatch + locations on the right */ .login-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 8px 0; } .login-brand { display: flex; align-items: center; gap: 14px; } .login-brand-logo { width: clamp(52px, 5vw, 68px); height: clamp(52px, 5vw, 68px); border-radius: 12px; background: #fff; display: grid; place-items: center; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); flex-shrink: 0; } .login-brand-logo img { width: 100%; height: 100%; object-fit: contain; } .login-brand-text h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.5px; line-height: 1.05; text-transform: uppercase; color: var(--text); margin: 0; } .login-brand-text p { font-size: clamp(12px, 1vw, 14px); color: var(--text-dim); margin-top: 4px; font-weight: 500; } .login-top-right { text-align: right; font-size: clamp(11px, 0.9vw, 13px); color: var(--text-dim); } .login-top-right strong { color: var(--text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: 0.4px; text-transform: uppercase; display: block; } .login-locations { margin-top: 2px; line-height: 1.5; } .login-locations b { color: #c9d4ec; font-weight: 700; } /* Division grid — 12-col, division spans per spec */ .login-divisions { flex: 1; display: grid; gap: clamp(12px, 1.2vw, 18px); grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; } /* Every division key needs a span here. A key with no rule falls back to the 1-of-12 default and renders as an unreadable sliver — which is what 'contentsup' was doing between 721px and 1099px, where these rules apply and the desktop grid in index.html has not taken over yet. */ .login-division[data-d="leadership"] { grid-column: span 4; } .login-division[data-d="office"] { grid-column: span 4; } .login-division[data-d="rebuild"] { grid-column: span 4; } .login-division[data-d="sales"] { grid-column: span 4; } .login-division[data-d="contentsup"] { grid-column: span 5; } .login-division[data-d="pm"] { grid-column: span 7; } .login-division[data-d="crew"] { grid-column: span 5; } @media (max-width: 1200px) { .login-division[data-d="leadership"] { grid-column: span 6; } .login-division[data-d="office"] { grid-column: span 6; } .login-division[data-d="rebuild"] { grid-column: span 6; } .login-division[data-d="sales"] { grid-column: span 6; } .login-division[data-d="contentsup"] { grid-column: span 6; } .login-division[data-d="pm"] { grid-column: span 6; } .login-division[data-d="crew"] { grid-column: span 12; } } @media (max-width: 720px) { .login-division { grid-column: span 12 !important; } } .login-division { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border-soft); border-radius: 16px; padding: clamp(14px, 1.3vw, 20px); display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); position: relative; overflow: hidden; min-height: 0; } .login-division::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--division-color); } .login-division::after { content: ''; position: absolute; top: -40%; right: -20%; width: 60%; height: 100%; background: radial-gradient(closest-side, var(--division-color) 0%, transparent 70%); opacity: 0.08; pointer-events: none; } /* These drive the card's top accent bar, title dot, avatar ring and hover border. The `color` field on LOGIN_DIVISIONS is documentation only — the renderer never reads it — so a division with no rule here comes out with no accent at all, which is what 'contentsup' had been doing. Keep the two in sync when adding a division. */ .login-division[data-d="leadership"] { --division-color: #f59e0b; } .login-division[data-d="office"] { --division-color: #60a5fa; } .login-division[data-d="rebuild"] { --division-color: #ea580c; } .login-division[data-d="sales"] { --division-color: #22c55e; } .login-division[data-d="contentsup"] { --division-color: #14b8a6; } .login-division[data-d="pm"] { --division-color: #a78bfa; } .login-division[data-d="crew"] { --division-color: #ef4444; } .login-division-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: clamp(8px, 0.8vw, 12px); border-bottom: 1px solid var(--border-soft); } .login-division-title { display: flex; align-items: center; gap: 10px; } .login-division-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--division-color); box-shadow: 0 0 12px var(--division-color); } .login-division-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); } .login-division-count { font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; } .login-people { display: grid; gap: clamp(10px, 1vw, 14px); grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 15vw, 220px), 1fr)); grid-auto-rows: minmax(64px, 1fr); flex: 1; } .login-person { display: flex; align-items: center; gap: clamp(10px, 0.9vw, 14px); background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft); border-radius: 12px; padding: clamp(12px, 1vw, 16px) clamp(14px, 1.1vw, 18px); cursor: pointer; text-align: left; color: var(--text); font-family: inherit; min-width: 0; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .login-person:hover { background: var(--panel-hover); border-color: var(--division-color); transform: translateY(-1px); } .login-person:active { transform: translateY(0); } .login-person:focus-visible { outline: 2px solid var(--division-color); outline-offset: 2px; } .login-person-avatar { width: clamp(40px, 3.5vw, 54px); height: clamp(40px, 3.5vw, 54px); border-radius: 50%; border: 2px solid var(--division-color); object-fit: cover; background: var(--panel-hover); flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.35); } .login-person-avatar.login-person-avatar-fallback { display: grid; place-items: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); color: var(--division-color); letter-spacing: 0.5px; } .login-person-name { font-weight: 600; font-size: clamp(14px, 1.15vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text); } .login-prompt { text-align: center; font-size: clamp(11px, 0.95vw, 13px); color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; } /* === USER BADGE in header === */ /* Single horizontal row so the right side of the header reads cleanly. */ .user-badge { display: flex; align-items: center; gap: 8px; padding-left: 4px; } .user-badge-name { font-size: 13px; font-weight: 700; color: #ffffff; background: rgba(255,255,255,0.12); padding: 7px 14px; border-radius: 999px; line-height: 1; } .user-badge-settings, .user-badge-changepw { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; line-height: 1; } .user-badge-settings:hover, .user-badge-changepw:hover { background: rgba(255,255,255,0.08); } .user-badge-logout { font-size: 12px; font-weight: 700; color: #1a1a2e; background: #eab308; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; line-height: 1; } .user-badge-logout:hover { background: #facc15; } header { background: #032e5b; color: white; /* Bottom padding tightened from 18px → 6px so the gap between the navy header and the tab nav (in .container) reads as a single visual seam instead of an empty band. */ padding: 18px 32px 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* Top section sits at a slightly lighter shade than the dashboard-nav row. Negative side margins extend it to the header's edges; the bottom margin leaves a small dark buffer band before the dashboard buttons. */ .header-top { display: flex; align-items: center; justify-content: space-between; background: #0a4378; margin: -18px -32px 18px -32px; padding: 14px 32px; } .header-top h1 { font-size: 28px; font-weight: 700; letter-spacing: 0.5px; } .header-right { text-align: right; font-size: 12px; color: #a0a8c0; } .header-right .update-time { color: #6ee7b7; font-weight: 600; } /* Desktop hides the mobile selector; it is shown only inside the 768px block below */ #mobileDashSelector { display: none; } /* Mobile-only elements hidden on desktop */ .mob-top-right { display: none; } .mob-search-bar { display: none; } .mob-popover { display: none; } .mob-nav-row { display: none; } .dashboard-nav { display: flex; gap: 6px; flex-wrap: nowrap; padding-bottom: 6px; align-items: stretch; width: 100%; } .dashboard-btn { padding: 12px 6px; border: 2px solid transparent; background: rgba(255,255,255,0.08); color: #a0a8c0; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 8px; transition: all 0.2s; white-space: nowrap; width: 100%; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .dashboard-btn:hover { color: white; background: rgba(255,255,255,0.15); } .dashboard-btn.active { background: #4a7c59; color: white; } .dashboard-btn > .dash-btn-label { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Small "— Measurables Not Confirmed" note rendered inside certain nav buttons. Muted enough to read as a footnote on the dark nav background, and bumped brighter on hover / on the green .active background. */ .dash-btn-note { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; line-height: 1.2; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-width: 0; } .dashboard-btn:hover .dash-btn-note { color: rgba(255,255,255,0.75); } .dashboard-btn.active .dash-btn-note { color: rgba(255,255,255,0.8); } /* Buttons sit in .dashboard-btn-wrap. All wraps are the same height (parent align-items:stretch); flex:1 on the button makes it grow to fill the wrap, so buttons with and without the note stay equal height. */ .dashboard-btn-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 0% !important; min-width: 0 !important; } .dashboard-btn-wrap > .dashboard-btn { flex: 1; } /* Top padding trimmed from 24px → 10px so the tab nav sits closer to the navy header band; horizontal + bottom padding unchanged. */ .container { max-width: 100%; margin: 0 auto; padding: 10px 24px 24px; } .stats-bar { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .rc-stats-strip { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; } .stat-card { background: white; border-radius: 10px; padding: 18px 24px; flex: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; justify-content: center; align-items: center; } .stat-card .label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .stat-card .value { font-size: 28px; font-weight: 700; color: #032e5b; margin-top: 4px; } .stat-card .value.money { color: #059669; } .stat-card .value.danger { color: #dc2626; } .tabs { display: flex; gap: 4px; margin-bottom: 0; flex-wrap: wrap; } .mobile-tabs { display: none; } .overview-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } .tab { padding: 10px 20px; background: #d1d5db; border: none; border-radius: 10px 10px 0 0; cursor: pointer; font-size: 13px; font-weight: 600; color: #4b5563; transition: all 0.2s; } .tab:hover { background: #e5e7eb; } .tab.active { background: white; color: #1a1a2e; } .tab .badge { background: #6b7280; color: white; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 6px; } .tab.active .badge { background: #032e5b; } .table-container { background: white; border-radius: 0 10px 10px 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; } .table-container.no-tabs { border-radius: 10px; } .toolbar { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .search-box { padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; width: 280px; flex: 1 1 200px; min-width: 160px; max-width: 320px; outline: none; transition: border-color 0.2s; } .search-box:focus { border-color: #1a1a2e; } .filter-select { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; outline: none; background: white; cursor: pointer; flex: 0 1 auto; min-width: 140px; } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 15px; } thead th { background: #f0f4f8; padding: 12px 16px; text-align: left; font-weight: 600; color: #032e5b; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #032e5b; cursor: pointer; user-select: none; white-space: nowrap; } thead th:hover { background: #f0f1f3; } thead th .sort-arrow { margin-left: 4px; color: #9ca3af; font-size: 10px; } thead th .sort-arrow.active { color: #1a1a2e; } tbody tr { border-bottom: 1px solid #f0f1f3; transition: background 0.15s; } tbody tr:hover { background: #f8f9fb; } tbody td { padding: 12px 16px; white-space: normal; word-wrap: break-word; font-size: 15px; vertical-align: top; } .job-number { font-weight: 600; color: #007bff; } .money { font-weight: 600; color: #059669; } .balance-due { font-weight: 700; color: #dc2626; } .balance-zero { font-weight: 600; color: #059669; } .days-good { font-weight: 700; color: #059669; background: #ecfdf5; border-radius: 4px; padding: 2px 8px; text-align: center; } .days-bad { font-weight: 700; color: #dc2626; background: #fef2f2; border-radius: 4px; padding: 2px 8px; text-align: center; } .days-yellow { font-weight: 700; color: #b45309; background: #fffbeb; border-radius: 4px; padding: 2px 8px; text-align: center; } .note-cell { position: relative; white-space: normal; max-height: 280px; overflow-y: auto; line-height: 1.4; font-size: 13px; -webkit-overflow-scrolling: touch; touch-action: pan-y; } .note-cell[data-job-number] { cursor: pointer; } .note-cell[data-job-number]:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 6px; } .note-history-divider { border: none; border-top: 1px dashed #d1d5db; margin: 6px 0; } .note-history-item { opacity: 0.6; font-size: 12px; } .note-history-item .note-date { font-size: 10px; color: #9ca3af; } .note-date { font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 2px; } .note-text { color: #374151; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; max-width: 100%; } .note-email-badge { display: inline-block; background: #e0e7ff; color: #3730a3; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.3px; } .note-subject { font-weight: 700; color: #1e293b; font-size: 13px; margin-bottom: 2px; } .note-from { font-size: 11px; color: #6b7280; margin-bottom: 2px; } .note-body { color: #374151; font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; } .note-html { line-height: 1.5; } .note-html p { margin: 0 0 4px; } .note-html br + br { display: block; content: ""; margin-top: 8px; } .note-html a { color: #2563eb; text-decoration: underline; } .note-html b, .note-html strong { font-weight: 600; } .note-html ul, .note-html ol { margin: 2px 0; padding-left: 16px; } .note-html li { margin-bottom: 2px; } .note-aging-green { background: #dcfce7; border-left: 4px solid #22c55e; padding: 6px 8px; border-radius: 4px; } .note-aging-green .note-date { color: #15803d; font-weight: 700; } .note-aging-yellow { background: #fef3c7; border-left: 4px solid #eab308; padding: 6px 8px; border-radius: 4px; } .note-aging-yellow .note-date { color: #a16207; font-weight: 700; } .note-aging-red { background: #fee2e2; border-left: 4px solid #ef4444; padding: 6px 8px; border-radius: 4px; } .note-aging-red .note-date { color: #dc2626; font-weight: 700; } /* Collections table */ .collections-table { table-layout: fixed; width: 100%; } .collections-table td { overflow: hidden; text-overflow: ellipsis; } .collections-table th { overflow: visible; white-space: nowrap; text-overflow: clip; } .collections-table .col-customer { width: 165px; white-space: normal; word-wrap: break-word; } .collections-table .col-money { width: 110px; text-align: right; font-variant-numeric: tabular-nums; } .collections-table .col-money-wide { width: 110px; text-align: right; font-variant-numeric: tabular-nums; } .collections-table .col-note { width: 150px; white-space: normal; } /* Tracker tables (Rebuild & Contents): use auto layout so headers fit fully. Parent .table-scroll provides overflow-x:auto when content is wider than viewport. */ .tracker-table { table-layout: auto !important; min-width: 1100px; } .tracker-table th { white-space: nowrap !important; overflow: visible !important; } .tracker-table td { overflow: visible !important; text-overflow: clip !important; vertical-align: middle !important; } /* Sales tables (Michael/Hunter): min-width so all columns fit; parent .table-scroll provides horizontal scroll if the viewport is narrower. Long unbreakable strings in note cells wrap via break-word so the table doesn't balloon. */ .sales-table { min-width: 1200px; table-layout: auto; } .sales-table th { white-space: nowrap; } .sales-table td .note-cell, .sales-table td .note-text, .sales-table td .note-body { word-break: break-word; overflow-wrap: anywhere; } .aging-current { background: rgba(63,185,80,0.1); } .aging-d30 { background: rgba(227,179,65,0.15); } .aging-d60 { background: rgba(240,136,62,0.15); } .aging-critical { background: rgba(215,58,73,0.15); } /* Job group styling — same customer (YY-NNNN prefix) */ tr.job-group-header td { background: #e8eefb !important; border-top: 2.5px solid #2563eb !important; border-left: 2.5px solid #2563eb !important; border-right: 2.5px solid #2563eb !important; padding: 6px 12px !important; font-size: 13px; font-weight: 600; color: #1e3a5f; } tr.job-group-header td:first-child { border-top-left-radius: 6px; } tr.job-group-header td:last-child { border-top-right-radius: 6px; } .kanban-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important; transform: translateY(-2px); } .kanban-col { transition: outline 0.15s; } .cal-day:hover { background: #f1f5f9 !important; } .wh-job-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .wh-slot:hover { border-color: #93c5fd !important; } .job-group-badge { display: inline-block; background: #2563eb; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; margin-left: 10px; vertical-align: middle; } .job-group-invoiced { display: inline-block; font-size: 13px; font-weight: 600; color: #374151; margin-left: 12px; vertical-align: middle; } tr.job-group-row td:first-child { border-left: 2.5px solid #2563eb !important; } tr.job-group-row td:last-child { border-right: 2.5px solid #2563eb !important; } tr.job-group-last td:first-child { border-left: 2.5px solid #2563eb !important; border-bottom: 2.5px solid #2563eb !important; border-bottom-left-radius: 6px; } tr.job-group-last td:last-child { border-right: 2.5px solid #2563eb !important; border-bottom: 2.5px solid #2563eb !important; border-bottom-right-radius: 6px; } tr.job-group-last td { border-bottom: 2.5px solid #2563eb !important; } /* Estimate Tracker Styles */ .compliance-banner { margin-bottom: 20px; display: none; border-radius: 10px; overflow: hidden; } .compliance-banner.visible { display: block; } .compliance-banner h2 { font-size: 20px; font-weight: 700; } .compliance-banner .legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .update-banner { display: flex; align-items: center; justify-content: center; gap: 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; padding: 12px 24px; text-align: center; font-size: 14px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: translateY(-100%); transition: transform 0.4s ease-out; pointer-events: none; } .update-banner.visible { transform: translateY(0); pointer-events: auto; } .update-banner button { background: white; color: #1d4ed8; border: none; padding: 6px 18px; border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; } .update-banner button:hover { background: #e0e7ff; } .update-banner .dismiss-btn { background: transparent; color: rgba(255,255,255,0.8); font-size: 18px; padding: 4px 8px; border-radius: 4px; } .update-banner .dismiss-btn:hover { color: white; background: rgba(255,255,255,0.15); } @keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .stat-card.green-border { border-left: 4px solid #22c55e; background: #f0fdf4; } .stat-card.yellow-border { border-left: 4px solid #eab308; background: #fefce8; } .stat-card.red-border { border-left: 4px solid #ef4444; background: #fef2f2; } .stat-card.stat-card-active { border-left: 4px solid #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,0.25); } .stat-card.orange-border { border-left: 4px solid #f97316; background: #fff7ed; } .ws-badge { display:inline-block; font-size:10px; font-weight:700; color:#065f46; background:#d1fae5; padding:1px 6px; border-radius:8px; white-space:nowrap; } .ws-badge.ws-pending { color:#6b7280; background:#f3f4f6; } @media (max-width: 768px) { .ws-mi { display:none; } } .job-chips { display:flex; flex-wrap:wrap; gap:3px 5px; margin-top:4px; } .job-chip { position:relative; display:inline-flex; align-items:center; font-size:11px; font-weight:600; color:#374151; background:#f3f4f6; padding:1px 7px; border-radius:10px; white-space:nowrap; line-height:1.55; cursor:help; } .job-chip-priority.pri-high { color:#991b1b; background:#fee2e2; } .job-chip-priority.pri-med { color:#92400e; background:#fef3c7; } .job-chip-priority.pri-low { color:#065f46; background:#d1fae5; } .job-chip-priority.pri-other { color:#1e40af; background:#dbeafe; } .job-chip-selfpay { color:#065f46; background:#d1fae5; } .job-chip-onhold { color:#92400e; background:#fef3c7; border:1px dashed #d97706; padding:0 6px; } /* Completed Without Paperwork — warn-amber chip signalling a job whose work is done but paperwork (COS / invoicing / signed docs) is still missing. */ .job-chip-cwp { color:#92400e; background:#fef3c7; border:1px solid #f59e0b; font-weight:700; letter-spacing:0.01em; padding:1px 8px; } /* Active MIT — KPI subtitle + CWP toggle pill */ .mit-kpi-sub { margin-top:2px; font-size:11px; font-weight:600; color:#374151; line-height:1.35; letter-spacing:0.01em; } .mit-kpi-sub-cwp { color:#b45309; } .mit-cwp-toggle-row { display:flex; align-items:center; gap:12px; margin-top:10px; padding:6px 2px; flex-wrap:wrap; } .mit-cwp-toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; } .mit-cwp-toggle input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .mit-cwp-toggle-track { position:relative; display:inline-block; width:34px; height:18px; background:#cbd5e1; border-radius:999px; transition:background 0.15s ease; } .mit-cwp-toggle-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.18); transition:transform 0.15s ease; } .mit-cwp-toggle input:checked + .mit-cwp-toggle-track { background:#f59e0b; } .mit-cwp-toggle input:checked + .mit-cwp-toggle-track .mit-cwp-toggle-thumb { transform:translateX(16px); } .mit-cwp-toggle input:focus-visible + .mit-cwp-toggle-track { box-shadow:0 0 0 3px rgba(245, 158, 11, 0.35); } .mit-cwp-toggle-label { font-size:13px; font-weight:600; color:#374151; } .mit-cwp-toggle-count { font-size:11px; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #f59e0b; padding:2px 8px; border-radius:999px; letter-spacing:0.02em; } @media (max-width: 768px) { .mit-cwp-toggle-label { font-size:12px; } .mit-cwp-toggle-row { margin-top:8px; gap:8px; } } /* Hover/tap tooltip — dark pill above the chip explaining what it means. Anchored to the chip's LEFT edge (instead of centered) so leftmost chips in narrow containers (mobile cards, leftmost table cells) don't overflow off the left side of the screen. max-width also clamps to the viewport so the pill stays readable on 420px phones. */ .job-chip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 0; background: #1f2937; color: #fff; font-size: 11px; font-weight: 500; padding: 5px 9px; border-radius: 6px; white-space: normal; width: max-content; max-width: min(240px, calc(100vw - 32px)); text-align: left; box-shadow: 0 4px 10px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.12s ease-out; z-index: 200; } .job-chip::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 12px; border: 5px solid transparent; border-top-color: #1f2937; opacity: 0; pointer-events: none; transition: opacity 0.12s ease-out; z-index: 200; } .job-chip:hover::after, .job-chip.is-tipped::after, .job-chip:hover::before, .job-chip.is-tipped::before { opacity: 1; } .job-chip[data-tip=""]::after, .job-chip[data-tip=""]::before { display: none; } .rc-row-red { background: #fef2f2 !important; } .rc-row-red:hover { background: #fee2e2 !important; } .rc-row-yellow { background: #fffbeb !important; } .rc-row-yellow:hover { background: #fef3c7 !important; } .rc-row-green { background: #f0fdf4 !important; } .rc-row-green:hover { background: #dcfce7 !important; } .rc-row-orange { background: #fff7ed !important; } .rc-row-orange:hover { background: #ffedd5 !important; } .rc-row-warn-exception { background: var(--warn-tint) !important; } .rc-row-warn-exception:hover { background: #fde68a !important; } /* Status-compliance outline (Rebuild & Contents playbook rule): green while the job is within its current stage's business-day budget, red once it goes over. Drawn with inset box-shadows on the cells so the outline is continuous around the whole row regardless of border-collapse, and layers over the day-tint bg. */ .rc-row-status-green > td { box-shadow: inset 0 3px 0 #16a34a, inset 0 -3px 0 #16a34a; } .rc-row-status-green > td:first-child { box-shadow: inset 0 3px 0 #16a34a, inset 0 -3px 0 #16a34a, inset 3px 0 0 #16a34a; } .rc-row-status-green > td:last-child { box-shadow: inset 0 3px 0 #16a34a, inset 0 -3px 0 #16a34a, inset -3px 0 0 #16a34a; } .rc-row-status-red > td { box-shadow: inset 0 3px 0 #dc2626, inset 0 -3px 0 #dc2626; } .rc-row-status-red > td:first-child { box-shadow: inset 0 3px 0 #dc2626, inset 0 -3px 0 #dc2626, inset 3px 0 0 #dc2626; } .rc-row-status-red > td:last-child { box-shadow: inset 0 3px 0 #dc2626, inset 0 -3px 0 #dc2626, inset -3px 0 0 #dc2626; } .status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; } .status-dot.green { background: #22c55e; } .status-dot.yellow { background: #eab308; } .status-dot.red { background: #ef4444; } .status-dot.orange { background: #f97316; } .day-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-weight: 700; font-size: 15px; min-width: 36px; text-align: center; } .day-badge.green { background: #dcfce7; color: #166534; } .day-badge.yellow { background: #fef3c7; color: #92400e; } .day-badge.red { background: #fee2e2; color: #991b1b; } .day-badge.orange { background: #ffedd5; color: #9a3412; } /* Next Steps ribbon */ .next-steps-row td { padding: 0 !important; border-top: none !important; } .next-steps-ribbon { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; margin: 0 8px 8px; border-radius: 0 0 8px 8px; font-size: 12px; line-height: 1.4; } .next-steps-ribbon.green { background: #f0fdf4; border: 1px solid #bbf7d0; border-top: 2px solid #22c55e; } .next-steps-ribbon.yellow { background: #fffbeb; border: 1px solid #fde68a; border-top: 2px solid #eab308; } .next-steps-ribbon.orange { background: #fff7ed; border: 1px solid #fed7aa; border-top: 2px solid #f97316; } .next-steps-ribbon.red { background: #fef2f2; border: 1px solid #fecaca; border-top: 2px solid #ef4444; } .next-steps-label { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; padding-top: 1px; color: #6b7280; } .next-steps-text { color: #374151; } .next-steps-text strong { font-weight: 700; } .next-steps-ribbon .next-steps-script { display: block; margin-top: 4px; padding: 6px 10px; background: rgba(255,255,255,0.7); border-radius: 6px; border: 1px dashed #d1d5db; font-style: italic; color: #1e293b; line-height: 1.5; } .next-steps-ribbon .next-steps-script strong { font-style: normal; } .null-value { color: #9ca3af; font-style: italic; } .no-data { text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 16px; } /* Lead Summary Table */ .lead-summary-wrap { width: 100%; flex: 0 0 100%; overflow-x: auto; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .lead-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .lead-summary-table th { background: #032e5b; color: white; padding: 8px 10px; text-align: center; font-weight: 600; font-size: 12px; white-space: nowrap; border: 1px solid #1a4a7a; } .lead-summary-table th:first-child { text-align: left; min-width: 130px; } .lead-summary-table td { padding: 6px 10px; text-align: center; border: 1px solid #e5e7eb; white-space: nowrap; } .lead-summary-table td:first-child { text-align: left; font-weight: 600; color: #032e5b; background: #f0f4f8; } .lead-summary-table tbody tr:hover { background: #f8f9fb; } .lead-summary-table .money-row td:not(:first-child) { color: #059669; font-weight: 600; } .lead-summary-table .pct-row td:not(:first-child) { color: #7c3aed; font-weight: 600; } .loading { text-align: center; padding: 80px 20px; color: #6b7280; font-size: 18px; } .row-count { padding: 12px 20px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #6b7280; text-align: right; } /* Leadership Team Overview — stat carousel (mobile only) */ .co-stats-carousel { display: none; } @media (max-width: 768px) { /* ---- Compact sticky top bar ---- */ header { padding: 0; position: sticky; top: 0; z-index: 200; } .header-top { display: flex; align-items: center; height: 44px; padding: 0 10px; margin: 0; gap: 8px; } .header-top h1 { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-top h1 img { height: 26px !important; flex-shrink: 0; } .header-right { display: none !important; } .container { padding: 12px; } /* Reserve room for floating Claude chip so it does not cover trailing content */ #mainContent { padding-bottom: 80px; } /* Mobile icon buttons (search + avatar) */ .mob-top-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .mob-icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: white; font-size: 16px; cursor: pointer; touch-action: manipulation; } .mob-icon-btn:active { background: rgba(255,255,255,0.2); } .mob-avatar { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; background: #4a7c59; } /* Mobile search bar (slide-in row below top bar) */ .mob-search-bar { display: none; align-items: center; gap: 8px; padding: 6px 12px 8px; } .mob-search-bar.open { display: flex; } .mob-search-slot { flex: 1; position: relative; } .mob-search-slot .job-search-wrap { width: 100%; margin: 0; } .mob-search-slot .job-search-input { width: 100% !important; font-size: 16px !important; background: rgba(255,255,255,0.1) !important; color: white !important; border-color: rgba(255,255,255,0.3) !important; padding: 10px 14px 10px 40px !important; } .mob-search-slot .job-search-input::placeholder { color: rgba(255,255,255,0.6) !important; } .mob-search-slot .job-search-input:focus { width: 100% !important; background: rgba(255,255,255,0.15) !important; } .mob-search-slot .job-search-icon { font-size: 16px; left: 12px; } .mob-search-slot .job-search-results { min-width: 0 !important; max-width: 100%; } .mob-search-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,0.1); color: white; font-size: 15px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; touch-action: manipulation; } .mob-search-close:active { background: rgba(255,255,255,0.2); } /* Mobile avatar popover */ .mob-popover { display: none; flex-direction: column; gap: 10px; position: absolute; right: 12px; top: 46px; background: #1e2840; border-radius: 10px; padding: 14px; z-index: 300; box-shadow: 0 8px 24px rgba(0,0,0,0.4); min-width: 180px; } .mob-popover.open { display: flex; } .mob-year-select { padding: 8px 12px; border: 2px solid #5a9c6d; border-radius: 8px; background: #4a7c59; color: white; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%; } .mob-popover-user { font-size: 14px; font-weight: 600; color: #e0e7ff; padding: 2px 0; } .mob-popover-logout { padding: 8px 14px; background: rgba(250,204,21,0.15); border: 1px solid #facc15; border-radius: 6px; color: #facc15; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: center; touch-action: manipulation; } .mob-popover-logout:active { background: rgba(250,204,21,0.25); } /* 2-column dashboard + tab nav row */ .mob-nav-row { display: flex; gap: 6px; padding: 4px 10px 6px; } .mob-nav-row .mobile-dash-selector { flex: 1; width: auto; } .mob-nav-row .mobile-tabs { flex: 1; margin-top: 0 !important; } .mob-nav-row #mobileDashSelector { margin-bottom: 0 !important; } /* Hide the desktop dashboard button grid; show the dropdown selector instead */ .dashboard-nav { display: none !important; } #mobileDashSelector { display: block; margin-bottom: 4px; } .mobile-dash-selector { position: relative; width: 100%; } .mobile-dash-trigger { width: 100%; min-height: 40px; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 8px; border: 2px solid transparent; background: rgba(255,255,255,0.08); color: #a0a8c0; box-sizing: border-box; text-align: left; transition: all 0.15s; } .mobile-dash-trigger.open { border-radius: 8px 8px 0 0; } .mobile-dash-chevron { font-size: 14px; transition: transform 0.15s; flex-shrink: 0; } .mobile-dash-trigger.open .mobile-dash-chevron { transform: rotate(180deg); } /* Prevent long sub-tab names from wrapping and inflating the header */ .mobile-dash-trigger #mobileTabLabel, .mobile-dash-trigger span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); } /* Date-range pickers on phones (owner 2026-07): the label block may stack above, but the preset buttons + date inputs stay on ONE horizontal line that scrolls sideways — the old wrap rule stacked ~7 controls on top of each other (Cycle Time, PM Stats) and was unreadable. */ .date-range-picker { flex-wrap: wrap !important; } .date-range-controls { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; justify-content: flex-start !important; min-width: 0 !important; max-width: 100%; } .date-range-controls > * { flex: 0 0 auto; min-width: 0; } .date-range-controls input[type="date"] { min-width: 0; } .mobile-dash-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #1e2840; border: 2px solid rgba(255,255,255,0.14); border-top: none; border-radius: 0 0 10px 10px; z-index: 300; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .mobile-dash-dropdown.open { display: block; } .mobile-dash-item { width: 100%; min-height: 48px; padding: 13px 16px; display: flex; align-items: center; font-size: 15px; font-weight: 600; cursor: pointer; border: none; border-top: 1px solid rgba(255,255,255,0.07); border-left: 3px solid transparent; border-radius: 0; background: transparent; color: #a0a8c0; text-align: left; box-sizing: border-box; letter-spacing: 0.1px; } .mobile-dash-item:first-child { border-top: none; } .mobile-dash-item:active { background: rgba(255,255,255,0.08); } .mobile-dash-item-active { background: rgba(74,124,89,0.35) !important; color: #fff !important; } /* Stats: 2-column grid, prevent overflow */ .stats-bar { gap: 8px; } .stat-card { min-width: calc(50% - 4px); padding: 10px 12px; overflow: hidden; } .stat-card .label { font-size: 10px; } .stat-card .value { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-card .value.money { font-size: 16px; } /* Rebuild & Contents stat strip: horizontal swipe instead of overflow-clip. The strip overflows the 375px viewport and used to clip leftmost/rightmost cards; make it a scroll-snap row so users can swipe through pairs. */ .rc-stats-strip { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 10px 6px; mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%); } .rc-stats-strip::-webkit-scrollbar { display: none; } .rc-stats-strip > .stat-card { flex: 0 0 auto; min-width: calc(50% - 14px); scroll-snap-align: start; } /* Estimates to be Written / Waiting for Approval stage cards (owner 2026-07): stack full-width one under another with a distinct color per stage (green → red ramp matching the playbook), replacing the swipe carousel. Scoped to the bare strip under #statsBar so the Active REC/CPO/CON tab's .rc-stats-wrap carousel is untouched. */ #statsBar > .rc-stats-strip { flex-direction: column; overflow-x: visible; scroll-snap-type: none; padding: 0; mask-image: none; -webkit-mask-image: none; } #statsBar > .rc-stats-strip > .stat-card { width: 100%; min-width: 0; box-sizing: border-box; border-left: 6px solid #94a3b8; /* Total / Not Set */ } #statsBar > .rc-stats-strip > .stat-card:nth-child(2) { border-left-color: #22c55e; background: #f0fdf4; } #statsBar > .rc-stats-strip > .stat-card:nth-child(3) { border-left-color: #84cc16; background: #f7fee7; } #statsBar > .rc-stats-strip > .stat-card:nth-child(4) { border-left-color: #eab308; background: #fefce8; } #statsBar > .rc-stats-strip > .stat-card:nth-child(5) { border-left-color: #f97316; background: #fff7ed; } #statsBar > .rc-stats-strip > .stat-card:nth-child(6) { border-left-color: #ef4444; background: #fef2f2; } /* Active REC/CPO/CON carousel: .csc-page's min-width:100% alone lets grid content push it past the viewport (csc-3 natural size > 1fr share), so the rightmost "WORK IN PROGRESS" cell clips at the viewport edge. Cap the page to track width so minmax(0,1fr) actually constrains columns. */ .rc-stats-wrap .csc-page { max-width: 100%; } .rc-stats-wrap .csc-label { word-break: break-word; hyphens: auto; } /* Sub-tabs: dropdown selector matching dashboard nav pattern */ .mobile-tabs { display: block !important; position: relative; margin-top: 6px; } .mobile-tabs:empty { display: none !important; } .desktop-tabs { display: none !important; } /* Toolbar: stack vertically */ .toolbar { padding: 12px; gap: 8px; flex-wrap: wrap; } .search-box { width: 100%; } .filter-select { width: calc(50% - 4px); font-size: 13px; } /* Rebuild / tracker detail card: strip verbose explanations on mobile. Keep the tab title, job count, and DASH DATA pills — hide the prose paragraphs and compliance column. Show the pre-built short summary. */ .rebuild-card-body { padding: 10px 14px !important; flex-direction: column !important; gap: 0 !important; } .rebuild-card-verbose { display: none !important; } .rebuild-card-short { display: block !important; } .rebuild-card-hdr { font-size: 12px !important; margin-bottom: 4px !important; } /* Data tables → stacked card layout below 768px. Each row becomes a bordered card; each cell shows its column label (from data-col="ColumnName" stamped by _labelTableCells in JS) as a muted prefix via ::before. No horizontal scroll, no sticky column. Desktop layout is fully preserved — all rules live inside this media query. Analytics/pivot tables (closing ratios, lead summaries) opt out below via .closing-ratio-table / .lead-summary-table overrides. */ .table-scroll { overflow-x: visible !important; } .table-scroll > table { min-width: 0 !important; font-size: 14px; } .table-scroll > table, .table-scroll > table > thead, .table-scroll > table > tbody, .table-scroll > table > tbody > tr, .table-scroll > table > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; } .table-scroll > table > thead { display: none; } .table-scroll > table > tbody > tr { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .table-scroll > table > tbody > tr:hover { background: #fff; } .table-scroll > table > tbody > tr > td { border: none; padding: 6px 0; font-size: 13px; white-space: normal; word-wrap: break-word; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .table-scroll > table > tbody > tr > td:not(:last-child) { border-bottom: 1px dashed #f0f1f3; } .table-scroll > table > tbody > tr > td[data-col]::before { content: attr(data-col); flex: 0 0 40%; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 2px; } /* First column (usually customer/job identity) gets full width and no side label — it's the card headline. */ .table-scroll > table > tbody > tr > td:first-child { flex-direction: column; align-items: stretch; padding-bottom: 8px; } .table-scroll > table > tbody > tr > td:first-child::before { display: none; } /* "No matching records" / group-header rows use colspan — keep them rendered inline on mobile instead of as a blank label row. */ .table-scroll > table > tbody > tr.job-group-header, .table-scroll > table > tbody > tr.no-data { background: #f8f9fb; padding: 12px; } .table-scroll > table > tbody > tr.job-group-header > td, .table-scroll > table > tbody > tr.no-data > td { flex-direction: column; align-items: stretch; } .table-scroll > table > tbody > tr.job-group-header > td::before, .table-scroll > table > tbody > tr.no-data > td::before { display: none; } /* Connect group header to its job cards — remove the gap so the customer banner and each job row read as one visual unit. The blue left-border accent is preserved via job-group-row / job-group-last. */ .table-scroll > table > tbody > tr.job-group-header { border-radius: 10px 10px 0 0 !important; margin-bottom: 0 !important; border-bottom: none !important; } .table-scroll > table > tbody > tr.job-group-row { border-top: none !important; border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-left: 3px solid #2563eb !important; } .table-scroll > table > tbody > tr.job-group-last { border-top: none !important; border-radius: 0 0 10px 10px !important; margin-top: 0 !important; margin-bottom: 10px !important; border-left: 3px solid #2563eb !important; } /* Last Note: full-width row so the note text has room to breathe. Stack the label above the note content instead of squeezing it into the 60% value column. */ .table-scroll > table > tbody > tr > td[data-col="Last Note"] { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; } .table-scroll > table > tbody > tr > td[data-col="Last Note"]::before { flex: none !important; } .note-cell { max-height: 280px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } /* Analytics tables opt out of card reflow — keep horizontal scroll so the pivot structure stays intact. */ .lead-summary-wrap, .closing-ratio-wrap, [data-table-layout="grid"], .table-scroll, .sc90-scroll, .mob-hscroll-hint { position: relative; overflow-x: auto !important; -webkit-overflow-scrolling: touch; /* Right-edge gradient fade hints more content exists horizontally. Widened to 48px so the fade is legible on small screens. */ -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); } /* Animated chevron pinned to the right edge reinforces the fade so users notice the table scrolls horizontally. */ .lead-summary-wrap::after, .closing-ratio-wrap::after, [data-table-layout="grid"]::after, .table-scroll::after, .sc90-scroll::after, .mob-hscroll-hint::after { content: '\203A'; position: absolute; right: 8px; top: 50%; color: rgba(30,41,59,0.7); font-size: 22px; font-weight: 700; line-height: 1; pointer-events: none; z-index: 2; animation: sc-hint-pulse 2s ease-in-out infinite; } @keyframes sc-hint-pulse { 0%, 100% { opacity: 0.4; transform: translate(0, -50%); } 50% { opacity: 0.9; transform: translate(4px, -50%); } } /* Persistent thin scrollbar so "there's more content" is visible even before the user touches the table. */ .lead-summary-wrap::-webkit-scrollbar, .closing-ratio-wrap::-webkit-scrollbar, [data-table-layout="grid"]::-webkit-scrollbar, .table-scroll::-webkit-scrollbar, .sc90-scroll::-webkit-scrollbar, .mob-hscroll-hint::-webkit-scrollbar { height: 6px; display: block !important; } .lead-summary-wrap::-webkit-scrollbar-thumb, .closing-ratio-wrap::-webkit-scrollbar-thumb, [data-table-layout="grid"]::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .sc90-scroll::-webkit-scrollbar-thumb, .mob-hscroll-hint::-webkit-scrollbar-thumb { background: rgba(30,41,59,0.35); border-radius: 3px; } .lead-summary-wrap table, .closing-ratio-wrap table, [data-table-layout="grid"] table, [data-table-layout="grid"] table > thead, [data-table-layout="grid"] table > tbody, [data-table-layout="grid"] table > tbody > tr, [data-table-layout="grid"] table > tbody > tr > td { display: revert !important; } [data-table-layout="grid"] table > tbody > tr > td::before { display: none !important; } /* Monthly Trends revenue pivot: keep the Division label (first column) visible while the user scrolls the month columns horizontally. */ .lead-summary-table th:first-child, .lead-summary-table td:first-child { position: sticky; left: 0; z-index: 2; } .lead-summary-table th:first-child { background: #032e5b; } .lead-summary-table td:first-child { background: #f0f4f8; } /* Overview charts + monthly trend grids: stack on mobile */ .overview-charts-grid { grid-template-columns: 1fr; } #coByMonthTrendsGrid { grid-template-columns: 1fr !important; } #opsMonthlyChartsGrid { grid-template-columns: 1fr !important; } /* Compliance banner */ .compliance-banner { font-size: 13px; } .compliance-banner h2 { font-size: 17px !important; } /* Note cells */ .note-cell { max-height: 280px; } /* Overview stat cards in inline stats rows */ .stats-bar > div { width: 100%; } /* (Legacy 2-col rule removed 2026-07 — it was a no-op while the strips were inline flex, but once .ops-stat-strip switched them to grid its higher specificity overrode the intended 3-per-row phone layout.) */ .stats-bar > div > div { gap: 8px !important; } } @media (max-width: 480px) { /* Keep top bar as a row — mobile header is always a compact single row */ .header-top { flex-direction: row !important; align-items: center !important; gap: 8px !important; } .stat-card { min-width: calc(50% - 4px); padding: 8px 10px; } .stat-card .value { font-size: 16px; } .stat-card .value.money { font-size: 14px; } .stat-card .label { font-size: 9px; } .filter-select { width: 100%; } .dashboard-btn { font-size: 11px; padding: 7px 2px; } } /* === Collections Visual Dashboard === */ .collections-visual { --cv-bg: #f0f2f5; --cv-surface: #ffffff; --cv-surface2: #f8fafc; --cv-border: #e5e7eb; --cv-text: #1a1a2e; --cv-muted: #6b7280; --cv-accent: #059669; --cv-current: #16a34a; --cv-d30: #ca8a04; --cv-d60: #ea580c; --cv-d90: #dc2626; --cv-critical: #991b1b; background: var(--cv-bg); color: var(--cv-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 24px; border-radius: 10px; min-height: 600px; } .collections-visual h2 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 20px; color: var(--cv-text); } .collections-visual .cv-section-title { font-size: 16px; font-weight: 700; color: var(--cv-text); margin-bottom: 16px; margin-top: 28px; } .collections-visual .cv-kpi-row { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .collections-visual .cv-aging-bar { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 12px; padding: 24px; margin-bottom: 28px; } .collections-visual .cv-aging-bar-track { display: flex; height: 36px; border-radius: 8px; overflow: hidden; margin-top: 12px; } .collections-visual .cv-aging-bar-segment { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; transition: width 0.5s ease; } .collections-visual .cv-aging-legend { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; } .collections-visual .cv-aging-legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cv-muted); } .collections-visual .cv-aging-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .collections-visual .cv-charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; margin-bottom: 28px; } .collections-visual .cv-chart-card { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 10px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .collections-visual .cv-chart-card h3 { font-size: 16px; font-weight: 700; color: var(--cv-text); margin-bottom: 16px; } .collections-visual .cv-chart-canvas-wrap { position: relative; max-height: 300px; } .collections-visual .cv-bar-row { display: flex; align-items: center; margin-bottom: 10px; gap: 12px; } .collections-visual .cv-bar-label { font-size: 13px; font-weight: 600; color: var(--cv-text); min-width: 140px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collections-visual .cv-bar-track { flex: 1; background: #e5e7eb; border-radius: 6px; height: 24px; overflow: hidden; } .collections-visual .cv-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; display: flex; align-items: center; padding-left: 8px; font-size: 11px; font-weight: 600; color: #fff; } .collections-visual .cv-bar-amount { font-size: 13px; font-weight: 700; color: var(--cv-text); min-width: 100px; text-align: right; } .collections-visual .cv-priority-table { width: 100%; border-collapse: collapse; font-size: 14px; } .collections-visual .cv-priority-table thead th { background: var(--cv-surface2); color: var(--cv-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cv-border); } .collections-visual .cv-priority-table tbody tr { border-bottom: 1px solid var(--cv-border); transition: background 0.15s; } .collections-visual .cv-priority-table tbody tr:hover { background: var(--cv-surface2); } .collections-visual .cv-priority-table tbody td { padding: 10px 14px; white-space: nowrap; color: var(--cv-text); } .collections-visual .cv-priority-table a { color: var(--cv-accent); text-decoration: none; } .collections-visual .cv-priority-table a:hover { text-decoration: underline; } .collections-visual .cv-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; } .collections-visual .cv-badge-current { background: #dcfce7; color: #15803d; } .collections-visual .cv-badge-30 { background: #fef3c7; color: #92400e; } .collections-visual .cv-badge-60 { background: #ffedd5; color: #9a3412; } .collections-visual .cv-badge-90 { background: #fee2e2; color: #991b1b; } .collections-visual .cv-badge-critical { background: #fecaca; color: #7f1d1d; } .collections-visual .cv-money { font-weight: 700; } .collections-visual .cv-priority-wrap { background: var(--cv-surface); border: 1px solid var(--cv-border); border-radius: 10px; padding: 24px; margin-top: 20px; overflow-x: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .collections-visual .cv-priority-wrap h3 { font-size: 16px; font-weight: 700; color: var(--cv-text); margin-bottom: 16px; } @media (max-width: 768px) { .collections-visual .cv-kpi-row { flex-direction: column; } .collections-visual .cv-bar-label { min-width: 100px; font-size: 11px; } .collections-visual .cv-charts-grid { grid-template-columns: 1fr; } } /* === JEAN COLLECTIONS DASHBOARD === */ .meredith-collections { background: #f3f4f6; padding: 0; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .meredith-header-bar { background: #1a1a2e; display: flex; justify-content: space-between; align-items: center; padding: 18px 28px; } .meredith-header-bar h2 { font-size: 24px; font-weight: 700; color: #ffffff; margin: 0; } .meredith-date-pill { font-size: 13px; color: #cbd5e1; font-weight: 500; border: 1px solid #334155; border-radius: 20px; padding: 5px 14px; background: rgba(255,255,255,0.05); } .meredith-subtitle-bar { background: #1a1a2e; padding: 0 28px 14px; font-size: 13px; color: #94a3b8; } .meredith-blue-banner { background: #1e3a5f; display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 14px; color: #ffffff; font-weight: 600; } .meredith-blue-banner .meredith-banner-right { font-size: 12px; color: #93c5fd; font-weight: 400; } .meredith-kpi-row { display: flex; gap: 16px; padding: 20px 0; flex-wrap: wrap; } /* Meredith KPI cards use .stat-card as base — color + centering variants only */ .stat-card.meredith-kpi-tasks { background: #fef3c7; text-align: center; } .stat-card.meredith-kpi-completed { background: #d1fae5; text-align: center; } .stat-card.meredith-kpi-remaining { background: #fef9c3; text-align: center; } .stat-card.meredith-kpi-score { background: #fee2e2; text-align: center; } .stat-card.meredith-kpi-tasks .label { color: #92400e; } .stat-card.meredith-kpi-completed .label { color: #065f46; } .stat-card.meredith-kpi-remaining .label { color: #854d0e; } .stat-card.meredith-kpi-score .label { color: #991b1b; } .stat-card .meredith-kpi-sub { font-size: 11px; color: #6b7280; margin-top: 2px; } /* Measurables row — Weighted Days Outstanding + Percent HQT */ .measurables-row { display: flex; gap: 16px; padding: 0 28px 8px; flex-wrap: wrap; } .stat-card.measurable-card { background: #f8fafc; text-align: center; min-width: 220px; flex: 1; } .stat-card.measurable-card .label { color: #334155; } .stat-card.measurable-card .value { color: #0f172a; } .measurable-caption { font-size: 11px; color: #6b7280; margin-top: 6px; font-family: 'DM Mono','JetBrains Mono',ui-monospace,monospace; letter-spacing: 0.02em; } .measurable-note { font-size: 11px; color: #9ca3af; margin-top: 4px; font-style: italic; } .measurable-breakdown { margin-top: 8px; width: 100%; } .measurable-breakdown summary { cursor: pointer; color: #2563eb; font-size: 11px; font-weight: 600; list-style: none; user-select: none; display: inline-block; } .measurable-breakdown summary::-webkit-details-marker { display: none; } .measurable-breakdown summary:hover { text-decoration: underline; } .measurable-breakdown[open] summary { color: #1e40af; } .measurable-popover { margin: 8px 0 0; padding: 10px 12px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; } .measurable-popover .mblock-label { color: #6b7280; } .measurable-popover .mblock-val { color: #0f172a; font-weight: 600; text-align: right; } .measurable-popover .mblock-sub-header { grid-column: 1 / -1; font-size: 11px; color: #334155; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; } .measurable-popover .mblock-sub { grid-column: 1 / -1; font-size: 11px; color: #475569; padding-left: 8px; } @media (max-width: 768px) { .measurables-row { padding: 0 16px 8px; gap: 10px; } .stat-card.measurable-card { min-width: calc(50% - 5px); padding: 10px 12px; } .measurable-caption { font-size: 10px; } } /* Combined compact stats strip — Tasks / Completed / Remaining / Score / Weighted Outstanding / % HQT */ .meredith-stats-strip { display: flex; gap: 8px; padding: 10px 28px 6px; flex-wrap: wrap; } .meredith-stat-cell { flex: 1 1 0; min-width: 130px; padding: 8px 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; } .meredith-sc-label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; } .meredith-sc-value { font-size: 20px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; } .meredith-stat-cell.meredith-sc-tasks { background: #fef3c7; border-color: #fde68a; } .meredith-stat-cell.meredith-sc-tasks .meredith-sc-label { color: #92400e; } .meredith-stat-cell.meredith-sc-completed { background: #d1fae5; border-color: #a7f3d0; } .meredith-stat-cell.meredith-sc-completed .meredith-sc-label { color: #065f46; } .meredith-stat-cell.meredith-sc-remaining { background: #fef9c3; border-color: #fde68a; } .meredith-stat-cell.meredith-sc-remaining .meredith-sc-label { color: #854d0e; } .meredith-stat-cell.meredith-sc-score { background: #fee2e2; border-color: #fecaca; } .meredith-stat-cell.meredith-sc-score .meredith-sc-label { color: #991b1b; } .meredith-stat-cell.meredith-sc-wdo { background: #f1f5f9; border-color: #cbd5e1; } .meredith-stat-cell.meredith-sc-wdo .meredith-sc-label { color: #334155; } .meredith-stat-cell.meredith-sc-hqt { background: #eef2ff; border-color: #c7d2fe; } .meredith-stat-cell.meredith-sc-hqt .meredith-sc-label { color: #3730a3; } @media (max-width: 768px) { .meredith-stats-strip { padding: 8px 16px 4px; gap: 6px; } .meredith-stat-cell { min-width: calc(50% - 3px); padding: 6px 10px; } .meredith-sc-value { font-size: 17px; } } /* HQT pill — clickable to open a past-weeks picker */ .meredith-stat-cell.hqt-clickable { position: relative; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .meredith-stat-cell.hqt-clickable:hover { background: #e0e7ff; border-color: #a5b4fc; } .hqt-range-sub { font-size: 10px; color: #4338ca; font-weight: 600; letter-spacing: 0.02em; margin-top: 1px; } .hqt-picker { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 240px; max-width: 320px; max-height: 320px; overflow-y: auto; background: #ffffff; border: 1px solid #c7d2fe; border-radius: 8px; box-shadow: 0 10px 24px rgba(15,23,42,0.15); padding: 8px; font-family: inherit; cursor: default; text-align: left; } .hqt-picker-header { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px 8px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; } .hqt-picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #111827; } .hqt-picker-item:hover { background: #eef2ff; } .hqt-picker-item.hqt-picker-current { background: #f5f3ff; } .hqt-picker-item.hqt-picker-current:hover { background: #ede9fe; } .hqt-picker-label { flex: 1 1 auto; font-weight: 500; } .hqt-picker-tag { font-size: 9px; font-weight: 700; background: #6366f1; color: #fff; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .hqt-picker-val { font-variant-numeric: tabular-nums; font-weight: 700; color: #4338ca; } .hqt-picker-empty { padding: 12px; font-size: 12px; color: #6b7280; line-height: 1.4; font-style: italic; } /* HQT picker variant attached to the Overall measurables card */ .stat-card.measurable-card.hqt-clickable { cursor: pointer; position: relative; } .stat-card.measurable-card.hqt-clickable:hover { background: #fafafa; } .stat-card.measurable-card .hqt-range-sub { display: block; font-size: 11px; color: #4338ca; margin-top: 4px; } /* Compliance progress section */ .meredith-progress-section { padding: 16px 28px 20px; } /* Compact variant — Today's progress + Compliance this week stacked tightly under stats strip */ .meredith-progress-section.meredith-progress-compact { padding: 4px 28px 4px; } .meredith-progress-section.meredith-progress-compact .meredith-progress-header { margin-bottom: 4px; } .meredith-progress-section.meredith-progress-compact .meredith-prog-value { font-size: 16px; } .meredith-progress-section.meredith-progress-compact .meredith-progress-bar { height: 10px; } .meredith-progress-section.meredith-progress-compact-last { padding-bottom: 10px; } .meredith-progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .meredith-progress-header .meredith-prog-label { font-size: 14px; font-weight: 600; color: #374151; } .meredith-progress-header .meredith-prog-value { font-size: 22px; font-weight: 700; color: #1a1a2e; } .meredith-progress-bar { width: 100%; height: 16px; background: #e5e7eb; border-radius: 8px; overflow: hidden; } .meredith-progress-fill { height: 100%; border-radius: 8px; transition: width 0.5s ease; } .meredith-progress-legend { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; } .meredith-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6b7280; } .meredith-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* Active collections header */ .meredith-active-header { background: #1a1a2e; display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; margin-top: 8px; } .meredith-active-header .meredith-active-title { font-size: 16px; font-weight: 600; color: #ffffff; } .meredith-jobs-pill { font-size: 11px; color: #4b5563; border: 1px solid #d1d5db; border-radius: 20px; padding: 2px 10px; background: rgba(0,0,0,0.03); white-space: nowrap; display: inline-block; } .meredith-col-first { display: flex; flex-direction: column; gap: 3px; } .meredith-col-label { font-size: 15px; font-weight: 700; color: #374151; } /* Column headers */ .meredith-col-headers { display: grid; grid-template-columns: 1.7fr 0.85fr 1.05fr 1.25fr 1.25fr 1.45fr 1.55fr; gap: 10px; padding: 10px 20px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; align-items: end; } .meredith-col-headers span { font-size: 15px; font-weight: 700; color: #374151; } /* Job cards list — block layout so cards always stack regardless of any descendant CSS overrides. The previous flex-column layout was occasionally tiling cards horizontally when an assoc-mini note contained a long no-break email/URL string. */ .meredith-cards-list { display: block; padding: 0 16px 16px; } .meredith-job-card { display: block; border-radius: 10px; overflow: hidden; margin-top: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); /* Defensive: keep cards full-width regardless of overflowing assoc-mini notes containing long no-break strings (URLs, emails). */ width: 100%; min-width: 0; } .meredith-job-card.meredith-status-red { background: #fef2f2; border-left: 4px solid #ef4444; } .meredith-job-card.meredith-status-yellow { background: #fffbeb; border-left: 4px solid #f59e0b; } .meredith-job-card.meredith-status-green { background: #f0fdf4; border-left: 4px solid #10b981; } .meredith-job-card.sue-escalating { background: var(--escalate-tint) !important; border-left: 4px solid var(--escalate) !important; } .sue-lance-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 6px; border: 1.5px solid var(--escalate); background: transparent; color: var(--escalate); cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s, color 0.15s; white-space: nowrap; } .sue-lance-btn.active { background: var(--escalate); color: #fff; border-color: var(--escalate); } .meredith-job-row { display: grid; grid-template-columns: 1.7fr 0.85fr 1.05fr 1.25fr 1.25fr 1.45fr 1.55fr; gap: 10px; padding: 10px 20px; align-items: start; } /* Associated job sub-rows (sibling jobs that share the YY-NNNN base prefix). Pending Sales siblings render as a full grid row; everything else collapses into the compact .meredith-job-assoc-mini strip below — same pattern Operations uses for closed sibling jobs. */ .meredith-job-assoc-row { display: grid; grid-template-columns: 1.7fr 0.85fr 1.05fr 1.25fr 1.25fr 1.45fr 1.55fr; gap: 10px; padding: 9px 20px 9px 32px; align-items: start; background: rgba(15, 23, 42, 0.035); border-top: 1px dashed rgba(15, 23, 42, 0.12); font-size: 13px; color: #475569; } .meredith-assoc-badge { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; background: #e0e7ff; color: #3730a3; margin-right: 6px; vertical-align: middle; } .meredith-job-assoc-row .meredith-assoc-customer { font-weight: 700; color: #334155; line-height: 1.35; } .meredith-job-assoc-row .meredith-assoc-customer a { color: #1d4ed8; text-decoration: none; font-weight: 800; } .meredith-job-assoc-row .meredith-assoc-customer a:hover { text-decoration: underline; } .meredith-job-assoc-row .meredith-assoc-applied { font-size: 12px; font-style: italic; color: #64748b; line-height: 1.4; padding: 4px 0; } .meredith-job-assoc-row .meredith-assoc-status-pill { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 8px; background: #f1f5f9; color: #334155; margin-top: 4px; } /* Compact one-line strip for non-Pending-Sales associated jobs. Mirrors the Operations dashboard's grey closed-sibling treatment: greyed out, low visual weight, just a job-# anchor + status + amount + truncated note. */ .meredith-job-assoc-mini { display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 5px 20px 5px 32px; background: #f3f4f6; border-top: 1px solid rgba(15, 23, 42, 0.08); border-left: 4px solid #9ca3af; font-size: 11px; color: #6b7280; overflow: hidden; } .meredith-job-assoc-mini .meredith-assoc-badge { margin-right: 0; flex-shrink: 0; } .meredith-job-assoc-mini .meredith-assoc-mini-job { font-family: monospace; font-weight: 700; color: #475569; flex-shrink: 0; } .meredith-job-assoc-mini .meredith-assoc-mini-job a { color: #2563eb; text-decoration: none; } .meredith-job-assoc-mini .meredith-assoc-mini-job a:hover { text-decoration: underline; } .meredith-job-assoc-mini .meredith-assoc-mini-div { font-size: 10px; color: #64748b; font-weight: 600; flex-shrink: 0; } .meredith-job-assoc-mini .meredith-assoc-mini-status { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 8px; background: #e5e7eb; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .meredith-job-assoc-mini .meredith-assoc-mini-amt { font-size: 11px; color: #475569; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .meredith-job-assoc-mini .meredith-assoc-mini-note { flex: 1; min-width: 0; max-width: 100%; font-size: 10px; color: #9ca3af; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Belt-and-suspenders: if a single token is too long for the column, force a break instead of pushing the parent card wider. */ word-break: break-all; overflow-wrap: anywhere; } @media (max-width: 768px) { .meredith-job-assoc-mini { flex-wrap: wrap; gap: 6px; } .meredith-job-assoc-mini .meredith-assoc-mini-note { flex: 1 1 100%; } } .meredith-job-customer { display: flex; flex-direction: column; } .meredith-job-customer .meredith-cust-name { font-size: 15px; font-weight: 700; color: #1a1a2e; } .meredith-job-customer .meredith-cust-name a { color: #1a1a2e; text-decoration: none; } .meredith-job-customer .meredith-cust-name a:hover { color: #2563eb; text-decoration: underline; } .meredith-job-customer .meredith-cust-sub { font-size: 12px; color: #9ca3af; margin-top: 2px; } .meredith-contact-btn { display: inline-flex; align-items: center; gap: 5px; background: #f5f3ff; border: 1px solid #c4b5fd; border-radius: 6px; font-size: 12px; font-weight: 600; font-family: inherit; padding: 5px 12px; color: #6366f1; cursor: pointer; margin-top: 6px; line-height: 1.4; transition: background .12s, color .12s, border-color .12s; } .meredith-contact-btn:hover { background: #ede9fe; color: #4f46e5; border-color: #a78bfa; } .meredith-contact-popup-overlay { position: fixed; inset: 0; z-index: 9999; } .meredith-contact-popup { position: fixed; z-index: 10000; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.16); padding: 14px 18px; min-width: 250px; max-width: 340px; font-family: inherit; font-size: 13px; } .meredith-contact-popup-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; } .meredith-contact-popup a { text-decoration: none; color: #2563eb; } .meredith-contact-popup a:hover { text-decoration: underline; } .meredith-job-balance { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; color: #dc2626; } .meredith-job-days { font-size: 16px; font-weight: 700; color: #1a1a2e; } .meredith-job-calls { display: flex; flex-direction: column; gap: 4px; } .meredith-call-slot { display: flex; align-items: center; gap: 6px; font-size: 12px; } /* Completed calls fade — the eye should jump to what's still outstanding. */ .meredith-call-slot.meredith-call-done { color: #9ca3af; font-weight: 400; opacity: 0.7; } .meredith-call-slot.meredith-call-pending { color: #b45309; font-weight: 600; } .meredith-job-contact { display: flex; flex-direction: column; gap: 4px; } .meredith-contact-time { font-size: 14px; font-weight: 600; color: #374151; } .meredith-contact-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; } .meredith-contact-status .meredith-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .meredith-contact-status.meredith-cs-green .meredith-status-dot { background: #10b981; } .meredith-contact-status.meredith-cs-green { color: #059669; } .meredith-contact-status.meredith-cs-yellow .meredith-status-dot { background: #d97706; } .meredith-contact-status.meredith-cs-yellow { color: #d97706; } .meredith-contact-status.meredith-cs-red .meredith-status-dot { background: #ef4444; } .meredith-contact-status.meredith-cs-red { color: #ef4444; } .meredith-job-note { position: relative; display: flex; flex-direction: column; gap: 2px; } .meredith-note-date { font-size: 13px; font-weight: 700; color: #1a1a2e; } .meredith-note-text { font-size: 12px; color: #6b7280; line-height: 1.4; } /* Next step box */ .meredith-nextstep-box { padding: 10px 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #374151; line-height: 1.5; } .meredith-job-card.meredith-status-red .meredith-nextstep-box { background: #fde8e8; } .meredith-job-card.meredith-status-yellow .meredith-nextstep-box { background: #fef3c7; } .meredith-job-card.meredith-status-green .meredith-nextstep-box { background: #dcfce7; } /* Full-width Last Note row below the data grid */ .meredith-note-fullrow { padding: 0 20px 10px; cursor: pointer; transition: background-color 0.12s ease; } .meredith-note-fullrow:hover { background: rgba(37,99,235,0.04); } .meredith-note-fullrow:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 6px; } .meredith-note-fullrow .note-cell { min-height: 96px; max-height: 200px; overflow-y: auto; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; } .meredith-note-fullrow .note-cell .note-text { font-size: 13.5px; line-height: 1.55; } .meredith-nextstep-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: #1a2e3f; color: #ffffff; padding: 3px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } /* This week mini progress */ .meredith-week-progress { padding: 8px 20px 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; } .meredith-week-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: #065f46; color: #ffffff; padding: 2px 8px; border-radius: 3px; white-space: nowrap; } .meredith-week-text { color: #6b7280; font-weight: 500; } .meredith-mini-bar { width: 80px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; } .meredith-mini-fill { height: 100%; border-radius: 3px; background: #10b981; } /* Per-invoice child rows (multi-invoice customers) */ .coll-customer-children.collapsed { display: none; } .coll-invoice-child-row { display: flex; align-items: center; flex-wrap: nowrap; padding: 5px 20px 5px 36px; border-top: 1px solid rgba(0,0,0,0.06); background: rgba(0,0,0,0.015); gap: 0; font-size: 12px; color: #374151; overflow: hidden; } .coll-child-sep { color: #d1d5db; margin: 0 5px; flex-shrink: 0; } /* RingCentral call verification indicators */ .meredith-rc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.3px; } .meredith-rc-verified { background: #dcfce7; color: #166534; } .meredith-rc-dash-only { background: #fef3c7; color: #92400e; } .meredith-rc-call-detail { font-size: 11px; color: #6b7280; margin-top: 2px; } .meredith-rc-call-detail .rc-duration { color: #059669; font-weight: 600; } /* RC-verified still resolves as "done" — muted so outstanding slots stay prominent. The RC badge next to the label keeps the source visible without re-drawing attention. */ .meredith-call-slot.meredith-call-rc-verified { background: #f9fafb; color: #6b7280; border-color: #e5e7eb; opacity: 0.85; } .meredith-rc-loading { font-size: 11px; color: #9ca3af; font-style: italic; } @media (max-width: 768px) { .meredith-kpi-row { flex-direction: column; } .meredith-col-headers { display: none; } .meredith-job-row { grid-template-columns: 1fr; gap: 8px; } /* 45 Day Collections + Sue (owner 2026-07): the adjuster-contact (call/email) cell and the Last Dash Note cell are noise on a phone — drop them from the stacked cards. */ .meredith-job-row .meredith-job-calls, .meredith-job-row .coll-last-note-cell, .meredith-job-assoc-row .meredith-job-calls, .meredith-job-assoc-row .coll-last-note-cell { display: none !important; } /* Collections Summary hero stats (owner 2026-07): fold the 4-up row to 2×2 — Total AR Jobs + Outstanding Balance on row 1, the two Overall measurables on row 2 — and hide the formula captions/breakdowns. */ #collSummaryHeroStats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } #collSummaryHeroStats .measurable-caption, #collSummaryHeroStats .measurable-breakdown { display: none !important; } /* Finance Measurable Goals: narrow title column so the period columns scroll into reach; view toggle stays on one line; footnote prose off. */ #cfgBody .cfg-titlecol { width: 150px !important; } #cfgBody td:first-child span { white-space: normal !important; font-size: 11px !important; } #cfgToggle { flex-wrap: nowrap !important; overflow-x: auto; } #cfgToggle button { padding: 5px 8px !important; font-size: 10px !important; white-space: nowrap; flex: 0 0 auto; } .cfg-footnotes { display: none !important; } /* Invoicing + Waiting for Final Closure supervisor cards: max 3 per row, wrapping below, instead of one long swipe row. */ .coll-inv-cards { flex-wrap: wrap !important; overflow-x: visible !important; } .coll-inv-cards > .coll-inv-card { flex: 1 1 calc(33.333% - 8px) !important; max-width: calc(33.333% - 6px); box-sizing: border-box; } /* Meredith/Sue: taller note block on phones so the note is scannable at a glance */ .meredith-note-fullrow .note-cell { min-height: 130px; max-height: 260px; padding: 12px 14px; font-size: 14px; line-height: 1.55; } .meredith-note-fullrow .note-cell .note-text { font-size: 14px; line-height: 1.6; } /* Meredith/Sue header: title on its own row, pills (Summary + date) wrap beneath */ .meredith-header-bar { flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 14px 18px; } .meredith-header-bar h2 { width: 100%; font-size: 17px; line-height: 1.25; } /* Per-invoice child rows: allow natural wrap instead of nowrap+overflow:hidden */ .coll-invoice-child-row { flex-wrap: wrap !important; overflow: visible !important; gap: 4px 10px; } .coll-invoice-child-row > span[style*="flex:0 0"], .coll-invoice-child-row > span[style*="flex: 0 0"] { flex: 0 0 auto !important; } } /* === PLAYBOOK STYLES === */ .playbook-container { margin-top: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .playbook-header { background: white; color: #1a1a2e; display: flex; justify-content: space-between; align-items: center; padding: 24px; border-radius: 10px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .playbook-header h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; } .playbook-header .playbook-brand { font-size: 13px; color: #6b7280; letter-spacing: 0.5px; } .playbook-section-card { background: white; border-radius: 10px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .playbook-section-title { font-size: 13px; font-weight: 700; color: #2563eb; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0; } .playbook-bullet-list { list-style: none; padding: 0; margin: 0; } .playbook-bullet-list li { position: relative; padding: 10px 14px 10px 26px; font-size: 14px; line-height: 1.65; color: #1f2937; border-radius: 6px; } .playbook-bullet-list li:nth-child(odd) { background: #f8fafc; } .playbook-bullet-list li::before { content: ''; position: absolute; left: 8px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; } .playbook-warning { background: #fef2f2; border-left: 4px solid #dc2626; padding: 14px 18px; margin: 14px 0 0; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.6; color: #991b1b; } .playbook-warning .playbook-warn-icon { font-weight: 700; margin-right: 6px; } .playbook-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; } .playbook-grid-card { background: #f8fafc; border-radius: 8px; padding: 16px 18px; border-left: 3px solid #2563eb; } .playbook-grid-card .pgc-title { font-size: 13px; font-weight: 700; color: #1f2937; margin-bottom: 4px; } .playbook-grid-card .pgc-desc { font-size: 13px; color: #6b7280; line-height: 1.5; } .playbook-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin: 4px 6px 4px 0; letter-spacing: 0.2px; } .playbook-badge.green { background: #d1fae5; color: #065f46; } .playbook-badge.yellow { background: #fef3c7; color: #92400e; } .playbook-badge.red { background: #fee2e2; color: #991b1b; } .playbook-timeline { position: relative; padding-left: 36px; margin: 16px 0 24px; } .playbook-timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; background: #d1d5db; border-radius: 3px; } .playbook-tl-item { position: relative; margin-bottom: 18px; } .playbook-tl-item:last-child { margin-bottom: 0; } .playbook-tl-dot { position: absolute; left: -31px; top: 12px; width: 13px; height: 13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); z-index: 1; } .playbook-tl-dot.green { background: #059669; } .playbook-tl-dot.yellow { background: #d97706; } .playbook-tl-dot.orange { background: #ea580c; } .playbook-tl-dot.red { background: #dc2626; } .playbook-tl-dot.darkred { background: #7f1d1d; } .playbook-tl-card { position: relative; background: #f8fafc; border-radius: 8px; padding: 14px 18px; border-left: 3px solid #e2e8f0; } .playbook-tl-card.has-day-badge { padding-right: 620px; } .tl-day-badge { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .tl-day-pills { display: flex; flex-direction: row; gap: 6px; align-items: stretch; } .tl-week-pill { display: inline-flex; align-items: center; justify-content: center; padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; background: #eef2ff; color: #3730a3; border: 1px solid #e0e7ff; white-space: nowrap; } .tl-day-pill { display: flex; align-items: center; justify-content: center; text-align: center; min-width: 300px; padding: 14px 18px; border-radius: 8px; font-size: 16px; font-weight: 700; letter-spacing: 0.2px; white-space: nowrap; } .tl-day-pill.green { background: #dcfce7; color: #166534; } .tl-day-pill.red { background: #fee2e2; color: #991b1b; } .pb-cycle { margin: 16px 0 22px; } .pb-cycle-note { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; } .pb-cycle-note-dot { width: 8px; height: 8px; border-radius: 50%; background: #9ca3af; flex: 0 0 auto; } .pb-cycle-scroll { overflow-x: auto; } .pb-cycle-grid { display: grid; gap: 5px; min-width: 760px; } .pb-cycle-band { border-radius: 8px; padding: 10px 7px; text-align: center; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; justify-content: center; } /* Total Job Cycle bands use progressively deeper greens (set inline per stage) so the bar never reads as a compliance red/green status. */ .pb-cycle-band-week { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; opacity: 0.85; } .pb-cycle-band-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; opacity: 0.75; } .pb-cycle-band-title { font-size: 11px; font-weight: 700; line-height: 1.25; margin: 3px 0; } .pb-cycle-band-range { font-size: 11px; font-weight: 700; opacity: 0.9; } .tl-subs { margin-top: 10px; padding-left: 14px; border-left: 2px dashed #cbd5e1; display: flex; flex-direction: column; gap: 8px; } .tl-sub { background: #fff; border-radius: 6px; padding: 8px 12px; border-left: 3px solid #cbd5e1; } .tl-sub-green { border-left-color: #16a34a; background: #f0fdf4; } .tl-sub-yellow { border-left-color: #d97706; background: #fffbeb; } .tl-sub-red { border-left-color: #dc2626; background: #fef2f2; } .tl-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 2px; } .tl-sub-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #374151; } .tl-sub-range { font-size: 11px; font-weight: 700; color: #6b7280; } .tl-sub-title { font-size: 13px; font-weight: 700; color: #1f2937; margin-bottom: 2px; } .tl-sub-desc { font-size: 12px; color: #4b5563; line-height: 1.5; } .pb-cycle-days { margin-top: 5px; } .pb-cycle-day { text-align: center; font-size: 11px; font-weight: 600; color: #6b7280; background: #f1f5f9; border-radius: 4px; padding: 4px 0; } .playbook-tl-card .tl-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .playbook-tl-card .tl-title { font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 4px; } .playbook-tl-card .tl-desc { font-size: 13px; color: #4b5563; line-height: 1.55; } .playbook-color-matrix-wrap { margin: 14px 0 6px; overflow-x: auto; } .playbook-color-matrix { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; } .playbook-color-matrix th, .playbook-color-matrix td { padding: 12px 14px; border-radius: 8px; text-align: center; vertical-align: middle; font-size: 14px; } .playbook-color-matrix .pcm-row-header { background: transparent; text-align: left; color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; padding-left: 4px; width: 30%; } .playbook-color-matrix .pcm-col-header { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .playbook-color-matrix .pcm-col-header.green { background: #dcfce7; color: #166534; } .playbook-color-matrix .pcm-col-header.yellow { background: #fef3c7; color: #92400e; } .playbook-color-matrix .pcm-col-header.orange { background: #ffedd5; color: #9a3412; } .playbook-color-matrix .pcm-col-header.red { background: #fee2e2; color: #991b1b; } .playbook-color-matrix .pcm-row-name { background: #f8fafc; text-align: left; border-left: 3px solid #e2e8f0; } .playbook-color-matrix .pcm-row-title { font-weight: 700; color: #1f2937; font-size: 14px; margin-bottom: 2px; } .playbook-color-matrix .pcm-row-sub { font-size: 11px; color: #6b7280; font-weight: 400; line-height: 1.4; } .playbook-color-matrix .pcm-cell { font-weight: 700; font-size: 15px; } .playbook-color-matrix .pcm-cell.green { background: #dcfce7; color: #166534; } .playbook-color-matrix .pcm-cell.yellow { background: #fef3c7; color: #92400e; } .playbook-color-matrix .pcm-cell.orange { background: #ffedd5; color: #9a3412; } .playbook-color-matrix .pcm-cell.red { background: #fee2e2; color: #991b1b; } .playbook-color-matrix .pcm-cell.empty { background: #f8fafc; color: #cbd5e1; font-weight: 400; } @media (max-width: 768px) { .playbook-color-matrix { border-spacing: 3px; } .playbook-color-matrix th, .playbook-color-matrix td { padding: 8px 6px; font-size: 12px; } .playbook-color-matrix .pcm-cell { font-size: 13px; } .playbook-color-matrix .pcm-row-title { font-size: 12px; } .playbook-color-matrix .pcm-row-sub { display: none; } } .playbook-person-label { font-size: 15px; font-weight: 700; color: #1f2937; margin: 28px 0 6px; } .playbook-person-label .playbook-person-sub { font-weight: 400; font-size: 13px; color: #6b7280; margin-left: 8px; } @media (max-width: 768px) { .playbook-section-card { padding: 20px 16px; } .playbook-header { padding: 14px 16px; flex-direction: column; gap: 4px; align-items: flex-start; } .playbook-grid-2x2 { grid-template-columns: 1fr; } .pb-stl-steps { display: none; } } /* === PLAYBOOK TERMINOLOGY === */ .pb-terminology-list { list-style: none; padding: 0; margin: 0; } .pb-terminology-list li.pb-term-item { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 10px 36px 10px 26px; font-size: 14px; line-height: 1.55; color: #1f2937; border-radius: 6px; } .pb-terminology-list li.pb-term-item:nth-child(odd) { background: #f8fafc; } .pb-terminology-list li.pb-term-item::before { content: ''; position: absolute; left: 8px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; } .pb-term-name { font-weight: 700; color: #1f2937; outline: none; min-width: 80px; padding: 2px 6px; border-radius: 4px; border: 1px dashed transparent; white-space: pre-wrap; word-break: break-word; } .pb-term-name:hover { border-color: #cbd5e1; } .pb-term-name:focus { border-color: #2563eb; border-style: solid; background: #fff; } .pb-term-name:empty::before { content: attr(data-placeholder); color: #9ca3af; font-weight: 500; } .pb-term-dash { color: #9ca3af; font-weight: 400; padding: 2px 0; flex-shrink: 0; } .pb-term-def { flex: 1; color: #1f2937; outline: none; padding: 2px 6px; border-radius: 4px; border: 1px dashed transparent; white-space: pre-wrap; word-break: break-word; } .pb-term-def:hover { border-color: #cbd5e1; } .pb-term-def:focus { border-color: #2563eb; border-style: solid; background: #fff; } .pb-term-def:empty::before { content: attr(data-placeholder); color: #9ca3af; } .pb-term-del { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border: none; background: transparent; color: #9ca3af; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 4px; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; } .pb-terminology-list li.pb-term-item:hover .pb-term-del { opacity: 1; } .pb-term-del:hover { background: #fee2e2; color: #991b1b; } .pb-term-empty { font-size: 13px; color: #9ca3af; font-style: italic; padding: 8px 0 12px; } .pb-add-term-btn { margin-top: 12px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #2563eb; background: #eff6ff; border: 1px dashed #93c5fd; border-radius: 6px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .pb-add-term-btn:hover { background: #dbeafe; border-color: #2563eb; border-style: solid; } /* Field Guide */ .fg-wrap { margin-top: 24px; } .fg-section-card { background: white; border-radius: 10px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-bottom: 16px; } .fg-title { font-size: 18px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; } .fg-sub { font-size: 13px; color: #6b7280; margin-bottom: 16px; } .fg-tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; } .fg-tab-btn { padding: 6px 14px; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 6px; font-size: 12px; font-weight: 600; color: #4b5563; cursor: pointer; transition: all 0.15s; } .fg-tab-btn:hover { background: #e5e7eb; } .fg-tab-btn.active { background: #032e5b; color: white; border-color: #032e5b; } .fg-panel { display: none; } .fg-panel.active { display: block; } .fg-stat-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .fg-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: all 0.15s; position: relative; flex: 1; min-width: 120px; } .fg-stat:hover { border-color: #2563eb; background: #eff6ff; } .fg-stat.selected { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,0.2); } .fg-stat-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; } .fg-stat-val { font-size: 18px; font-weight: 800; color: #032e5b; margin-top: 2px; } .fg-col-row { display: flex; background: #f0f4f8; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; margin-bottom: 16px; } .fg-col { padding: 10px 12px; font-size: 11px; font-weight: 700; color: #032e5b; text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer; border-right: 1px solid #e2e8f0; transition: all 0.15s; text-align: center; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fg-col:last-child { border-right: none; } .fg-col:hover { background: #dbeafe; color: #1d4ed8; } .fg-col.selected { background: #2563eb; color: white; } .fg-explain { display: none; background: #f0f7ff; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 16px; animation: fgSlideIn 0.2s ease-out; } .fg-explain.visible { display: flex; gap: 16px; align-items: flex-start; } .fg-explain-arrow { color: #2563eb; font-size: 20px; font-weight: 800; flex-shrink: 0; margin-top: 2px; } .fg-explain-body { flex: 1; } .fg-explain-title { font-size: 14px; font-weight: 700; color: #1e3a5f; margin-bottom: 4px; } .fg-explain-field { display: inline-block; background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin: 2px 2px 6px 0; font-family: 'DM Mono', monospace; } .fg-explain-calc { font-size: 13px; color: #374151; line-height: 1.5; } .fg-explain-close { background: none; border: none; font-size: 16px; color: #9ca3af; cursor: pointer; padding: 0 4px; flex-shrink: 0; } .fg-explain-close:hover { color: #374151; } @keyframes fgSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* Job Search */ .job-search-wrap { position: relative; } .job-search-input { padding: 20px 18px 20px 50px; border: 2px solid #5a9c6d; border-radius: 10px; background: #4a7c59; color: #ffffff; font-size: 18px; font-weight: 600; width: 800px; outline: none; transition: border-color 0.2s, width 0.2s; } .job-search-input::placeholder { color: rgba(255,255,255,0.6); } .job-search-input:focus { border-color: #7dba8e; width: 860px; background: #3d6a4b; } .job-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); font-size: 20px; pointer-events: none; } .job-search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: white; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); min-width: 420px; max-height: 400px; overflow-y: auto; z-index: 10000; border: 1px solid #e5e7eb; } .job-search-results.visible { display: block; } .job-search-result { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f1f3; transition: background 0.1s; } .job-search-result:last-child { border-bottom: none; } .job-search-result:hover { background: #f0f4ff; } .job-search-result-base { font-weight: 700; color: #032e5b; font-size: 14px; } .job-search-result-customer { font-size: 12px; color: #6b7280; margin-left: 8px; font-weight: 400; } .job-search-result-jobs { font-size: 12px; color: #374151; margin-top: 3px; } .job-search-result-tabs { font-size: 11px; color: #6b7280; margin-top: 2px; } .job-search-tab-link { display: inline-block; background: #e0e7ff; color: #3730a3; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; margin: 1px 2px; cursor: pointer; transition: background 0.1s; text-decoration: none; } .job-search-tab-link:hover { background: #c7d2fe; } .job-search-no-results { padding: 16px; text-align: center; color: #9ca3af; font-size: 13px; } .job-search-highlight { animation: jobSearchPulse 2s ease-out; } @keyframes jobSearchPulse { 0% { background: #fef08a; box-shadow: 0 0 0 4px rgba(250,204,21,0.4); } 100% { background: transparent; box-shadow: none; } } /* ========================================================================== MOBILE / TABLET RESPONSIVE BLOCK — applies only below 1024px. Desktop (≥1024px) and the TV-display layout are intentionally untouched. ========================================================================== */ @media (max-width: 1024px) { /* Stop the page itself from creating a horizontal scrollbar. Tables still scroll inside their .table-scroll wrappers. */ html, body { max-width: 100vw; overflow-x: hidden; } /* iOS Safari ignores overflow-x:hidden on / for the visual viewport, so a wide child (e.g. a many-column table) can still stretch the page sideways and let it pinch-zoom past the screen edges. Clipping the real wrapper element instead is honored on iOS. `clip` (not `hidden`) avoids creating a scroll container, so the sticky tab nav still works. Wide tables keep their own internal scroll via .table-scroll / .lead-summary-wrap, so nothing becomes unreachable. */ .container, #mainContent { max-width: 100%; overflow-x: clip; } /* When a desktop PDF layout is active, reset any inline widths on the main content column so it goes full width on mobile. */ .pdf-layout-active .main-content, .with-pdf-panel { width: 100% !important; max-width: 100% !important; } /* Login overlay: force single-column grid below 1024px so tablets don't get stuck with a cramped multi-column division layout. */ .login-divisions { grid-template-columns: 1fr !important; gap: 12px; } /* Dashboard nav: wrap buttons across multiple rows instead of overflowing. */ .dashboard-nav { flex-wrap: wrap; justify-content: flex-start; gap: 6px; } .dashboard-btn { flex: 0 1 auto; } /* Search-results overlay: cap at viewport so min-width:420px doesn't clip off-screen on narrow phones. */ .job-search-results, #jobSearchResults { min-width: 0 !important; max-width: 95vw; } /* Neutralize large inline min-widths that assume desktop. Covers panels like the Fire Guard sidebar (min-width:320px), PDF viewer wrapper (min-width:400px), and search overlays (min-width:420px). */ [style*="min-width:320px"], [style*="min-width: 320px"], [style*="min-width:400px"], [style*="min-width: 400px"], [style*="min-width:420px"], [style*="min-width: 420px"] { min-width: 0 !important; max-width: 100% !important; } /* Chart canvases follow their container instead of bursting out. */ canvas { max-width: 100% !important; height: auto !important; } /* Monthly Revenue by Division (Leadership → Monthly Trends): the global `canvas { height:auto !important }` above collapses this Chart.js bar chart to 0 on mobile. Give the container an explicit min-height so bars have room to render. */ .co-monthly-rev-card { min-height: 320px; } .co-monthly-rev-card canvas { min-height: 260px; height: 260px !important; } /* Update banner — smaller on narrow screens. */ .update-banner { font-size: 13px; padding: 6px 10px; } /* ── Leadership Team: swipeable stat carousel ─────────────────────────── */ .co-stats-desktop { display: none !important; } .co-stats-carousel { display: block; } .csc-track { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .csc-track::-webkit-scrollbar { display: none; } .csc-page { min-width: 100%; flex-shrink: 0; scroll-snap-align: start; background: #fff; /* overridden by Phase 4 → var(--canvas) */ border-radius: 16px; padding: 18px 20px 16px; box-shadow: 0 3px 16px rgba(3,46,91,0.12); /* TODO: #032e5b not in token set; overridden by Phase 4 */ box-sizing: border-box; height: 190px; display: flex; flex-direction: column; overflow: hidden; } .csc-page-label { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #94a3b8; /* TODO: slate-400, no token match (≠ --ink-muted #6B7A8C); overridden by Phase 4 */ margin-bottom: 10px; flex-shrink: 0; } .csc-stats { display: grid; flex: 1; align-items: center; align-content: center; } .csc-2 { grid-template-columns: repeat(2,1fr); gap: 10px 16px; } .csc-3 { grid-template-columns: repeat(3,1fr); gap: 4px; } .csc-4 { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); gap: 10px 8px; } .csc-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .csc-label { font-size: 9px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #94a3b8; /* TODO: slate-400, no token match; overridden by Phase 4 */ margin-bottom: 4px; line-height: 1.3; } .csc-value { font-size: 38px; font-weight: 800; color: #032e5b; /* TODO: PDQ navy, no token match (≠ --ink #0F1E2E); overridden by Phase 4 */ line-height: 1; } .csc-4 .csc-value { font-size: 30px; } .csc-money { color: #059669; } /* TODO: emerald-600, no token match (≠ --green #3E9B63); overridden by Phase 4 */ .csc-dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 10px; } .csc-dot-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; } .csc-dot { width: 7px; height: 7px; border-radius: 50%; border: 2px solid #032e5b; /* TODO: PDQ navy, no token match; overridden by Phase 4 */ background: transparent; display: block; transition: background 0.2s, transform 0.2s; opacity: 0.4; } .csc-dot-active { background: #032e5b; opacity: 1; transform: scale(1.3); } /* TODO: same; overridden by Phase 4 */ } /* --- Touch devices: don't let :hover states stick after a tap. ----------- */ @media (hover: none) { /* iOS/Android apply :hover on tap and it stays until you tap elsewhere. Reset common hover-driven visual changes so buttons return to rest. :active still fires on tap and handles per-tap feedback below. */ .tab:hover, .dashboard-btn:hover, .fg-stat:hover, .fg-col:hover, .job-search-result:hover, .job-search-tab-link:hover, .login-person-btn:hover { filter: none; transform: none; } .tab:active, .dashboard-btn:active, .login-person-btn:active { opacity: 0.75; } } /* ========================================================================== MOBILE DESIGN SYSTEM RESKIN All rules are scoped to mobile breakpoints. Desktop rules above are untouched. :root tokens defined at the top are consumed only here. ========================================================================== */ /* ── Phase 2 · Top bar + nav ────────────────────────────────────────────── */ @media (max-width: 768px) { body { font-family: var(--font); } /* Header: blue-deep replaces the existing dark navy */ header { background: var(--blue-deep); } /* Title text in top bar */ .header-top h1 { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* Icon buttons: 36×36 circle, translucent white */ .mob-icon-btn { width: 36px; height: 36px; background: rgba(255,255,255,0.12); border-radius: 50%; } /* Avatar button: remove the previous green, use translucent circle */ .mob-avatar { background: rgba(255,255,255,0.12); font-size: 14px; } .mob-icon-btn:active { background: rgba(255,255,255,0.22); } /* Avatar popover panel */ .mob-popover { background: var(--ink); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .mob-year-select { background: var(--blue); border-color: var(--blue); color: white; } .mob-popover-user { color: var(--canvas); font-family: var(--font); } .mob-popover-logout { background: rgba(180,83,9,0.12); /* TODO: --warn alpha; no rgba token. rgb(180,83,9) = #B45309 */ border-color: var(--warn); color: var(--warn); } .mob-popover-logout:active { background: rgba(180,83,9,0.24); } /* TODO: --warn alpha */ /* 2-column nav row below top bar */ .mob-nav-row { background: var(--blue-deep); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 6px 12px 10px; } /* Dashboard dropdown trigger */ .mobile-dash-trigger { font-family: var(--font); font-size: 14px; font-weight: 600; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); border-radius: 6px; } /* Dashboard dropdown menu */ .mobile-dash-dropdown { background: var(--ink); border: 1px solid rgba(255,255,255,0.1); border-top: none; } .mobile-dash-item { font-family: var(--font); font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); } .mobile-dash-item:active { background: rgba(255,255,255,0.08); } .mobile-dash-item-active { background: rgba(43,127,184,0.3) !important; /* TODO: --blue alpha; no rgba token. rgb(43,127,184) = #2B7FB8 */ color: white !important; } /* ── Phase 3 · List rows ────────────────────────────────────────────── */ /* Page background tint */ .container { background: var(--surface-1); } /* Table container: no card wrapper on mobile */ .table-container { background: var(--canvas); box-shadow: none; border-radius: 0; } /* Toolbar */ .toolbar { background: var(--surface-1); border-bottom: 1px solid var(--line); } .search-box { border-color: var(--line); color: var(--ink); background: var(--canvas); font-family: var(--font); } .search-box:focus { border-color: var(--blue); } .filter-select { border-color: var(--line); color: var(--ink); background: var(--canvas); font-family: var(--font); } /* Strip card appearance → flush list rows with 3px accent bar */ .table-scroll > table > tbody > tr { border: none; border-left: 3px solid var(--blue); border-bottom: 1px solid var(--line); border-radius: 0 !important; margin-bottom: 0 !important; margin-top: 0 !important; padding: 12px 18px; background: var(--canvas) !important; box-shadow: none !important; } .table-scroll > table > tbody > tr:active { background: var(--surface-1) !important; } /* Dividers between individual cell rows */ .table-scroll > table > tbody > tr > td:not(:last-child) { border-bottom: 1px dashed var(--line); } /* Data-col label prefix text */ .table-scroll > table > tbody > tr > td[data-col]::before { color: var(--ink-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; } /* Cell body text */ .table-scroll > table > tbody > tr > td { font-family: var(--font); color: var(--ink-soft); font-size: 13px; } /* First cell (card headline): primary weight */ .table-scroll > table > tbody > tr > td:first-child { color: var(--ink); font-size: 14px; font-weight: 600; } /* Status-based accent bar colors */ .table-scroll > table > tbody > tr.rc-row-green, .table-scroll > table > tbody > tr.aging-current { border-left-color: var(--green) !important; background: var(--canvas) !important; } .table-scroll > table > tbody > tr.rc-row-yellow, .table-scroll > table > tbody > tr.rc-row-orange, .table-scroll > table > tbody > tr.rc-row-warn-exception, .table-scroll > table > tbody > tr.aging-d30, .table-scroll > table > tbody > tr.aging-d60 { border-left-color: var(--warn) !important; background: var(--canvas) !important; } .table-scroll > table > tbody > tr.rc-row-red, .table-scroll > table > tbody > tr.aging-critical { border-left-color: var(--danger) !important; background: var(--canvas) !important; } /* Job group rows: blue-tint header, flush accent */ .table-scroll > table > tbody > tr.job-group-header { border-radius: 0 !important; background: var(--blue-tint) !important; border-left: 3px solid var(--blue) !important; border-top: none !important; border-bottom: 1px solid var(--line) !important; margin-bottom: 0 !important; } .table-scroll > table > tbody > tr.job-group-header > td { color: var(--blue-deep); } .table-scroll > table > tbody > tr.job-group-row { border-left: 3px solid var(--blue) !important; border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .table-scroll > table > tbody > tr.job-group-last { border-left: 3px solid var(--blue) !important; border-radius: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Strip desktop box-border from td elements — desktop paints top/left/right/bottom borders on individual tds for the group-box look; on mobile we use TR-level accent only, so reset all td-level borders here. */ .table-scroll > table > tbody > tr.job-group-header > td, .table-scroll > table > tbody > tr.job-group-row > td, .table-scroll > table > tbody > tr.job-group-last > td { border: none !important; border-radius: 0 !important; } /* No-data rows: no accent bar */ .table-scroll > table > tbody > tr.no-data { border-left: none !important; padding: 24px 20px !important; } .table-scroll > table > tbody > tr.no-data > td { color: var(--ink-muted) !important; } /* Stat cards: KPI strip pattern — flush cells with dividers, no shadow */ .stats-bar { gap: 0; margin-bottom: 0; background: var(--canvas); flex-wrap: wrap; } .stat-card { background: var(--canvas); box-shadow: none; border-radius: 0; border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: calc(50%); flex: 1 1 calc(50%); padding: 16px 14px; overflow: hidden; } .stat-card:nth-child(even) { border-right: none; } .stat-card .label { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-muted); text-transform: uppercase; margin-bottom: 6px; } .stat-card .value { font-family: var(--font); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-card .value.money { color: var(--green); } .stat-card .value.danger { color: var(--danger); } /* Row count footer */ .row-count { font-family: var(--font); font-size: 11px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-1); padding: 10px 20px; } /* Data value colors + mono font for job identifiers */ .job-number { color: var(--blue); font-family: var(--mono); } .money { color: var(--green); font-variant-numeric: tabular-nums; } .balance-due { color: var(--danger); font-variant-numeric: tabular-nums; } .balance-zero { color: var(--green); font-variant-numeric: tabular-nums; } /* Note aging bands */ .note-aging-green { background: var(--green-tint); border-left-color: var(--green); } .note-aging-yellow { background: var(--warn-tint); border-left-color: var(--warn); } .note-aging-red { background: var(--danger-tint); border-left-color: var(--danger); } /* Meredith/Sue collections: font + header tokens */ .meredith-collections { font-family: var(--font); } .meredith-header-bar { background: var(--blue-deep); } .meredith-subtitle-bar { background: var(--blue-deep); } .meredith-active-header { background: var(--ink); } .meredith-job-balance { color: var(--danger); } /* Collections visual: font token */ .collections-visual { font-family: var(--font); } } /* ── Phase 4 · KPI Carousels ────────────────────────────────────────────── */ /* Carousels are shown at ≤1024px; these rules restyle the cards to match */ /* the KPI-strip and feature-zone patterns from the design system. */ @media (max-width: 1024px) { /* Carousel page: remove floating card → flush tile */ .csc-page { border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--line); background: var(--canvas); padding: 18px 20px 14px; height: auto; min-height: 150px; } /* Section label above stats (e.g. "ACTIVE JOBS") */ .csc-page-label { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } /* Individual stat label */ .csc-label { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } /* Stat value — matches KPI strip spec: 20px 700 */ .csc-value { font-family: var(--font); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } /* Money values */ .csc-money { color: var(--green); } /* Dot indicators: blue tokens */ .csc-dot { border-color: var(--blue); } .csc-dot-active { background: var(--blue); opacity: 1; } /* Collapse grid gaps; add --line dividers between stat cells instead */ .csc-2 { gap: 0; } .csc-3 { gap: 0; } .csc-4 { gap: 0; } .csc-stat { padding: 16px 14px; } /* 2-col: divider after first cell */ .csc-2 .csc-stat { border-right: 1px solid var(--line); } .csc-2 .csc-stat:last-child { border-right: none; } /* 3-col: divider after each except last */ .csc-3 .csc-stat { border-right: 1px solid var(--line); } .csc-3 .csc-stat:last-child { border-right: none; } /* 4-col 2×2 grid: vertical divider within each row, horizontal between rows */ .csc-4 .csc-stat:nth-child(1) { border-right: 1px solid var(--line); } .csc-4 .csc-stat:nth-child(2) { border-right: none; } .csc-4 .csc-stat:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); } .csc-4 .csc-stat:nth-child(4) { border-right: none; border-top: 1px solid var(--line); } /* Allow grid cells to shrink below intrinsic width so columns share available space evenly. Otherwise the third cell (e.g. "COLLECTED %" / "43.x%") overflows the viewport and gets clipped on page 2. */ .csc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .csc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csc-stat { min-width: 0; padding: 16px 6px; } .csc-value { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csc-label { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } } /* ── Phase 5 · Buttons, status labels, section headings ─────────────────── */ @media (max-width: 768px) { /* Day badges → inline uppercase colored text; strip pill backgrounds */ .day-badge { background: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .day-badge.green { color: var(--green-deep) !important; } .day-badge.yellow { color: var(--warn) !important; } .day-badge.red { color: var(--danger) !important; } .day-badge.orange { color: var(--warn) !important; } /* Status dots: design system token colors */ .status-dot.green { background: var(--green); } .status-dot.yellow { background: var(--warn); } .status-dot.red { background: var(--danger); } .status-dot.orange { background: var(--warn); } /* Next-steps ribbon: token borders */ .next-steps-ribbon.green { background: var(--green-tint); border-top-color: var(--green); border-color: var(--green-tint); } .next-steps-ribbon.yellow { background: var(--warn-tint); border-top-color: var(--warn); border-color: var(--warn-tint); } .next-steps-ribbon.orange { background: var(--warn-tint); border-top-color: var(--warn); border-color: var(--warn-tint); } .next-steps-ribbon.red { background: var(--danger-tint); border-top-color: var(--danger); border-color: var(--danger-tint); } .next-steps-text { color: var(--ink-soft); } .next-steps-label { color: var(--ink-muted); } /* Collections badges: token tints (pill shape preserved in CV dashboard because the table structure relies on them; only colors updated) */ .collections-visual .cv-badge-current { background: var(--green-tint); color: var(--green-deep); } .collections-visual .cv-badge-30 { background: var(--warn-tint); color: var(--warn); } .collections-visual .cv-badge-60 { background: var(--warn-tint); color: var(--warn); } .collections-visual .cv-badge-90 { background: var(--danger-tint); color: var(--danger); } .collections-visual .cv-badge-critical { background: var(--danger-tint); color: var(--danger); } /* Meredith collections RC verification badges */ .meredith-rc-verified { background: var(--green-tint); color: var(--green-deep); } .meredith-rc-dash-only { background: var(--warn-tint); color: var(--warn); } /* Update banner: blue token */ .update-banner { background: var(--blue-deep); } .update-banner button { color: var(--blue-deep); } /* Tab badges */ .tab .badge { background: var(--ink-muted); } .tab.active .badge { background: var(--blue-deep); } /* Job search results: token colors */ .job-search-result-base { color: var(--blue-deep); } .job-search-tab-link { background: var(--blue-tint); color: var(--blue-deep); } .job-search-tab-link:hover { background: var(--blue-tint); } } /* ── Phase 6 · Flush edges (≤600px) ─────────────────────────────────────── */ @media (max-width: 600px) { /* App container: full-bleed, no padding wrapper */ .container { padding: 0; max-width: 100%; } /* Table container: flush with no border-radius */ .table-container, .table-container.no-tabs { border-radius: 0; box-shadow: none; margin: 0; } /* Rows: fully flush, edge-to-edge */ .table-scroll > table > tbody > tr { border-radius: 0 !important; margin: 0 !important; padding: 12px 16px; } /* Stat cards: flush padding */ .stat-card { padding: 16px 14px; } /* Next-steps ribbon: no border-radius, no side margin */ .next-steps-ribbon { margin: 0; border-radius: 0; } /* Compliance banner: flush */ .compliance-banner { border-radius: 0; } /* Update banner: reduce padding on narrow screens */ .update-banner { padding: 8px 12px; } } /* ── Welcome Card (all screen sizes) ────────────────────────────────────── */ .mwc { background: var(--surface-1); border-bottom: 2px solid var(--line); } .mwc-header { background: var(--blue-deep); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; } .mwc-mark { width: 30px; height: 30px; background: var(--green); border-radius: 7px; display: grid; place-items: center; font-family: var(--font); font-weight: 700; font-size: 14px; color: white; flex-shrink: 0; letter-spacing: 0; } .mwc-meta { text-align: right; } .mwc-meta-date { font-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.8); line-height: 1.5; } .mwc-meta-time { font-family: var(--font); font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.4; } .mwc-body { padding: 18px 20px 16px; } .mwc-hello { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 2px; line-height: 1.2; } .mwc-tagline { font-size: 13px; color: var(--ink-muted); margin-bottom: 14px; } .mwc-priority-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; } .mwc-jobs { border-top: 1px solid var(--line); } .mwc-job-row { display: flex; align-items: stretch; padding: 11px 0; border-bottom: 1px solid var(--line); gap: 10px; cursor: pointer; } .mwc-job-row:active { background: var(--surface-2); margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .mwc-job-accent { width: 3px; border-radius: 2px; flex-shrink: 0; align-self: stretch; min-height: 36px; } .mwc-job-accent.green { background: var(--green); } .mwc-job-accent.blue { background: var(--blue); } .mwc-job-accent.warn { background: var(--warn); } .mwc-job-accent.danger { background: var(--danger); } .mwc-job-body { flex: 1; min-width: 0; } .mwc-job-line1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; } .mwc-job-name { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; } .mwc-job-amount { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .mwc-job-line2 { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-muted); } .mwc-status { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mwc-status.ok { color: var(--green-deep); } .mwc-status.info { color: var(--blue-deep); } .mwc-status.wait { color: var(--warn); } .mwc-status.bad { color: var(--danger); } .mwc-on-track { padding: 12px 0 4px; font-size: 13px; color: var(--green-deep); font-weight: 600; } /* Desktop: center the card at a comfortable reading width */ @media (min-width: 769px) { #mobileWelcomeCard { max-width: 480px; margin: 48px auto; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,0.10); } } /* ── Phase 7 · Status labels, section headings, top bar polish ───────────── */ /* Mobile-only. Companion to Phase 2 (top bar) and Phase 5 (status labels). */ /* ── 7a · Top bar ────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Design guide: padding 18px 20px 16px; let height follow content */ .header-top { height: auto; padding: 18px 20px 16px; } /* Logo mark: 30×30 square, radius 7px (overrides inline height:48px) */ .header-top h1 img { width: 30px !important; height: 30px !important; border-radius: 7px !important; object-fit: cover; object-position: left center; /* left-justify the logo inside the box */ flex-shrink: 0; } /* Wordmark: 17px 600 (overrides Phase 2's 15px) */ .header-top h1 { font-size: 17px; } } /* ── 7b · Status labels → inline colored text ────────────────────────────── */ @media (max-width: 768px) { /* "X jobs" group-header badge: strip pill → 11px 600 uppercase blue-deep */ .job-group-badge { background: none !important; border-radius: 0 !important; padding: 0 !important; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--blue-deep); margin-left: 8px; vertical-align: baseline; } /* Tab count badges: strip pill → inline muted number */ .tab .badge { background: none !important; border-radius: 0 !important; padding: 0 !important; color: var(--ink-muted); font-weight: 600; } .tab.active .badge { color: var(--blue-deep); } /* Meredith jobs pill in dark theme col header */ .meredith-col-headers .meredith-jobs-pill { border-color: #475569 !important; background: rgba(255,255,255,0.06) !important; color: #cbd5e1 !important; } } /* ── 7c · Section headings ───────────────────────────────────────────────── */ @media (max-width: 768px) { /* Job-group header: design-guide section-heading pattern */ .table-scroll > table > tbody > tr.job-group-header > td { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--ink); font-family: var(--font); } /* Hide "Customer: " prefix and "— Base job: YY-NNNN" — show only name + badge */ .gh-prefix, .gh-base { display: none; } /* Collections Visual section titles: font token + design-guide size */ .collections-visual .cv-section-title { font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--ink); } } /* ── Mobile 2-line job-row card ───────────────────────────────────────── _buildMobileCards() in JS prepends to every data row in renderTable(). Hidden on desktop; block on mobile via cascade. */ td.mob-card { display: none; } @media (max-width: 768px) { /* Row wrapper: flush-edge design-guide style replaces rounded card */ .table-scroll > table > tbody > tr:has(> td.mob-card) { border: none; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; padding: 0; box-shadow: none; background: var(--canvas); } .table-scroll > table > tbody > tr:has(> td.mob-card):active { background: var(--surface-1); } /* Group child rows: mob-card-bar provides the status-colored accent; remove the TR-level blue border so there is no double-accent. */ .table-scroll > table > tbody > tr:has(> td.mob-card).job-group-row, .table-scroll > table > tbody > tr:has(> td.mob-card).job-group-last { border-left: none !important; } /* Indent child card body to visually tie it to the parent group header */ .table-scroll > table > tbody > tr:has(> td.mob-card).job-group-row > td.mob-card .mob-card-body, .table-scroll > table > tbody > tr:has(> td.mob-card).job-group-last > td.mob-card .mob-card-body { padding-left: 32px; } /* Hide all standard data cells; keep mob-card + Last Note visible */ .table-scroll > table > tbody > tr:has(> td.mob-card) > td:not(.mob-card):not([data-col="Last Note"]) { display: none !important; } /* mob-card cell: full-width, no extra padding or label prefix */ .table-scroll > table > tbody > tr > td.mob-card { padding: 0 !important; border: none !important; border-bottom: none !important; flex-direction: unset; align-items: unset; } .table-scroll > table > tbody > tr > td.mob-card::before { display: none !important; } /* Sales Jobs → Visits: the visit-log cell stays on screen on phones. Mugs logs house-account stops from the truck, so hiding it with the rest of the columns would make the whole feature desktop-only. Only HIS rows carry data-visit-job, so the empty cells on other rows stay hidden by the rule above. Renders as its own full-width block under the 2-line card. */ .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell[data-visit-job] { display: block !important; width: auto; padding: 2px 16px 10px 23px !important; border-bottom: none !important; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell[data-visit-job]::before { display: none !important; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-btn { padding: 9px 12px; font-size: 13px; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-log { max-height: 168px; } /* Finger-sized controls. At desktop metrics the ✕ is an 11px glyph in a 22px box — unhittable on a phone, which is why deleting a visit only worked on the desktop. Both controls get a real tap target here, and the rows get room to breathe so they aren't adjacent by accident. */ .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-line { gap: 8px; padding: 2px 0; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-when { font-size: 12.5px; padding: 10px 8px; border-color: #f1f3f5; background: #fbfcfd; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-pencil { font-size: 13px; color: #15803d; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-undo { width: 40px; height: 40px; font-size: 16px; color: #b91c1c; background: #fff; border-color: #e5e7eb; } /* 16px keeps iOS from zooming the page when the picker opens. */ .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-dt { font-size: 16px; padding: 9px 8px; } .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-save, .table-scroll > table > tbody > tr:has(> td.mob-card) > td.sj-visit-cell .sj-visit-cancel { font-size: 13px; padding: 10px 12px; } /* Last Note: left-indent to align with card body text */ .table-scroll > table > tbody > tr:has(> td.mob-card) > td[data-col="Last Note"] { padding: 4px 16px 10px 23px !important; border-bottom: none !important; } /* ── 2-line card internals ── */ .mob-card-inner { display: flex; align-items: stretch; } .mob-card-bar { width: 3px; flex-shrink: 0; } .mob-bar-green { background: var(--green); } .mob-bar-blue { background: var(--blue); } .mob-bar-warn { background: var(--warn); } .mob-bar-danger { background: var(--danger); } .mob-card-body { flex: 1; padding: 14px 20px; min-width: 0; } .mob-card-line1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; } .mob-card-name { font-size: 15px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .mob-card-amount { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; flex-shrink: 0; white-space: nowrap; } .mob-card-line2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .mob-card-detail { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .mob-card-line3 { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; } .mob-card-addr { font-size: 11px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* Status color reuses .mwc-status.ok/.info/.wait/.bad defined above */ } /* ====================================================== MOBILE: Dashboard Updates tab — collapse horizontal layouts and prevent side-by-side panels from overflowing the viewport. ====================================================== */ @media (max-width: 768px) { /* Hero header: title + button → stack vertically, full-width button */ .du-hero { flex-direction: column !important; align-items: stretch !important; padding: 16px !important; gap: 12px; } #dashUpdatesSaveToLive { width: 100% !important; font-size: 14px !important; padding: 10px 16px !important; } /* Idea Board & Card Tracker: side-by-side panels → stacked column */ .du-side-by-side { flex-direction: column !important; padding: 16px !important; gap: 12px !important; } /* Fixed-width left form column → full width */ .du-form-col { width: 100% !important; min-width: 0 !important; } /* Kanban board: 3 side-by-side columns → vertical stack */ .du-kanban-board { flex-direction: column !important; } .du-kanban-board .kanban-col { max-height: 300px !important; } /* How It Works: 2-col grids → single column */ .du-grid-2col { grid-template-columns: 1fr !important; } /* Changelog: 2-col update card grid → single column */ .du-update-grid { grid-template-columns: 1fr !important; } /* Schedule calendar: let the 5-col grid share available width so Fri isn't clipped on narrow phones. Cells use min-width:0 so they can shrink below their intrinsic content width, and inner text is allowed to wrap so headers/cards stay inside the cell. */ .du-cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .du-cal-scroll > div { min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .du-cal-scroll > div > div { min-width: 0; overflow: hidden; } .du-cal-scroll .cal-day { padding: 4px !important; } .du-cal-scroll .cal-card { padding: 6px 8px !important; } /* 2026 Budget: heading was 26px + 22px subtitle and wrapped to 4 lines on narrow phones. Shrink type and keep the "of $Y" segment nowrap. */ .budget-progress-title { font-size: 16px !important; line-height: 1.25 !important; } .budget-progress-amounts { font-size: 15px !important; margin-top: 6px !important; } } /* ====================================================== MOBILE: Collections aging — 4-col → 2×2 grid at ≤600px, fallback to 1-col at ≤380px so dollar amounts aren't truncated. ====================================================== */ @media (max-width: 600px) { .cv-aging-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .cv-aging-grid .stat-card { min-width: 0 !important; } .cv-aging-grid .stat-card .value { font-size: 16px !important; white-space: normal !important; } .cv-aging-grid .stat-card .value.money { font-size: 15px !important; } } @media (max-width: 380px) { .cv-aging-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════════════════ DESKTOP RESPONSIVE — tighten layout for MacBook-class viewports. Both blocks are guarded with min-width:769px so mobile rules (≤768px) are completely unaffected. Test targets: 1280px 13" MacBook Air at 100% zoom 1440px 14-16" MacBook Pro at 100% zoom 1920px external monitor (unchanged — base rules still apply) ═══════════════════════════════════════════════════════════════════ */ /* ── 1440px: moderate tightening for 14-16" MacBook Pro ─────────── */ @media (min-width: 769px) and (max-width: 1440px) { header { padding: 14px 24px; } .header-top { margin-bottom: 10px; } .header-top h1 { font-size: 22px; } .dashboard-btn { padding: 11px 5px; font-size: 14px; } .container { padding: 16px 20px; } .stat-card { padding: 14px 18px; } .stat-card .value { font-size: 23px; } .search-box { width: 220px; } tbody td { font-size: 14px; padding: 10px 14px; } thead th { font-size: 12px; padding: 10px 14px; } .job-search-input { padding: 14px 14px 14px 42px; } .job-search-input:focus { width: 500px !important; } .job-search-icon { font-size: 18px; left: 14px; } #yearFilter { padding: 8px 10px !important; font-size: 13px !important; } /* Planner sidebars (inline-styled, override via ID/class) */ #plannerSidebar { width: 200px !important; } .rp-sidebar { width: 260px !important; } /* WDP + Rebuild Planner label column (inline grid, override via class) */ .wdp-grid-row { grid-template-columns: 90px repeat(5, 1fr) !important; } } /* ── 1280px: compact baseline for 13" MacBook Air ───────────────── */ @media (min-width: 769px) and (max-width: 1280px) { header { padding: 10px 20px; } .header-top { margin-bottom: 6px; } .header-top h1 { font-size: 20px; } .dashboard-btn { padding: 9px 4px; font-size: 13px; } .dash-btn-note { font-size: 9px; letter-spacing: 0.3px; } .container { padding: 12px 16px; } .stat-card { padding: 12px 14px; } .stat-card .value { font-size: 20px; } .search-box { width: 180px; } tbody td { font-size: 13px; padding: 9px 12px; } thead th { font-size: 12px; padding: 9px 12px; } .job-search-input { padding: 10px 12px 10px 38px; } .job-search-input:focus { width: 340px !important; } .job-search-icon { font-size: 16px; left: 12px; } #yearFilter { padding: 6px 8px !important; font-size: 12px !important; } /* Planner sidebars */ #plannerSidebar { width: 180px !important; } .rp-sidebar { width: 220px !important; } /* WDP + Rebuild Planner label column */ .wdp-grid-row { grid-template-columns: 80px repeat(5, 1fr) !important; } } /* ========================================================================= DEPT SUMMARY BUTTON (Meredith / Sue tab headers) ========================================================================= */ .dept-summary-btn { background: transparent; border: 1px solid rgba(251,191,36,0.5); color: #fbbf24; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background 0.15s, border-color 0.15s; } .dept-summary-btn:hover { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.8); } /* ========================================================================= JEAN-DAILY — coaching report modal (shared by all dept summaries) ========================================================================= */ .meredith-daily-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; } .meredith-daily-modal { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.14); } .meredith-daily-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; background: #ffffff; } .meredith-daily-title { font-size: 18px; font-weight: 700; color: #032e5b; margin: 0 0 4px; } .meredith-daily-subtitle { font-size: 12px; color: #6b7280; font-weight: 400; } .meredith-daily-close { background: transparent; border: none; color: #9ca3af; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; margin-top: -2px; } .meredith-daily-close:hover { color: #374151; background: #f3f4f6; } .meredith-daily-report { flex: 1; overflow-y: auto; padding: 20px 24px; background: #ffffff; } .meredith-daily-loading { text-align: center; padding: 60px 20px; color: #6b7280; font-size: 14px; } .meredith-daily-error { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; padding: 16px; color: #dc2626; font-size: 13px; } .meredith-daily-content h1 { font-size: 17px; font-weight: 700; color: #032e5b; margin: 20px 0 8px; } .meredith-daily-content h2 { font-size: 15px; font-weight: 700; color: #032e5b; margin: 16px 0 6px; } .meredith-daily-content h3 { font-size: 13px; font-weight: 700; color: #374151; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; } .meredith-daily-content p { font-size: 13px; color: #374151; margin: 0 0 10px; line-height: 1.6; } .meredith-daily-content ul, .meredith-daily-content ol { font-size: 13px; color: #374151; margin: 0 0 10px; padding-left: 22px; line-height: 1.6; } .meredith-daily-content li { margin-bottom: 4px; } .meredith-daily-content blockquote { border-left: 3px solid #2563eb; margin: 10px 0; padding: 6px 14px; background: #eff6ff; border-radius: 0 6px 6px 0; font-style: italic; color: #374151; font-size: 13px; } .meredith-daily-content hr { border: none; border-top: 1px solid #e5e7eb; margin: 16px 0; } .meredith-daily-content code { background: #f3f4f6; border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: monospace; color: #032e5b; } .meredith-daily-content strong { font-weight: 700; color: #111827; } .meredith-daily-content em { font-style: italic; } .meredith-daily-footer { padding: 12px 24px; border-top: 1px solid #e5e7eb; font-size: 11px; color: #6b7280; flex-shrink: 0; background: #f9fafb; } @media (max-width: 639px) { .meredith-daily-overlay { padding: 0; align-items: flex-end; } .meredith-daily-modal { border-radius: 14px 14px 0 0; max-height: 92vh; } .meredith-daily-header { padding: 16px 16px 12px; } .meredith-daily-title { font-size: 15px; } .meredith-daily-report { padding: 14px 16px; } .meredith-daily-footer { padding: 10px 16px; } } /* ========================================================================= COLL-SUM — Collections / Operations / RC coaching summary cards ========================================================================= */ .coll-sum-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .coll-sum-page-title { font-size: 18px; font-weight: 700; color: #032e5b; margin: 0 0 3px; } .coll-sum-subtitle { font-size: 12px; color: #6b7280; } .coll-sum-toggle { display: flex; gap: 0; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; } .coll-sum-toggle-btn { background: #fff; border: none; color: #374151; font-size: 12px; font-weight: 600; padding: 6px 16px; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; } .coll-sum-toggle-btn.active { background: #032e5b; color: #fff; } .coll-sum-toggle-btn:not(.active):hover { background: #f3f4f6; color: #1f2937; } .coll-sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; } .coll-sum-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px 20px 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 10px; } .coll-sum-card-header { display: flex; flex-direction: column; gap: 2px; } .coll-sum-card-label { font-size: 14px; font-weight: 700; color: #111827; } .coll-sum-card-role { font-size: 11px; color: #6b7280; } .coll-sum-card-grade { min-height: 36px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .coll-sum-grade-pill { font-size: 15px; font-weight: 700; padding: 3px 12px; border-radius: 6px; letter-spacing: 0.02em; } .coll-sum-grade-pill.green { background: #dcfce7; color: #15803d; } .coll-sum-grade-pill.yellow { background: #fef9c3; color: #a16207; } .coll-sum-grade-pill.orange { background: #ffedd5; color: #c2410c; } .coll-sum-grade-pill.red { background: #fee2e2; color: #dc2626; } .coll-sum-grade-pill.grey { background: #f3f4f6; color: #6b7280; font-size: 12px; font-weight: 500; } .coll-sum-job-count { font-size: 11px; color: #6b7280; } .coll-sum-card-action { flex: 1; } .coll-sum-top-action { font-size: 12px; color: #374151; line-height: 1.45; } .coll-sum-view-btn { align-self: flex-start; background: #2563eb; border: none; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-family: inherit; transition: background 0.15s; } .coll-sum-view-btn:hover { background: #1d4ed8; } .coll-sum-view-btn:disabled { opacity: 0.4; cursor: not-allowed; } .coll-sum-card-ts { font-size: 10px; color: #9ca3af; min-height: 14px; } .coll-sum-footer { font-size: 11px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 12px; margin-bottom: 24px; } @media (max-width: 900px) { .coll-sum-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .coll-sum-grid { grid-template-columns: 1fr; } .coll-sum-header { gap: 10px; } .coll-sum-page-title { font-size: 16px; } } /* === OPS SUMMARY — combined clock/dispatch row + compact coaching cards === */ /* Live Clock-In Status (left) + Truck Dispatch (right); stacks on narrow. */ .ops-clock-dispatch-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: stretch; /* both cards same height */ margin-bottom: 24px; } /* Hosts are flex columns so each card (flex:1) fills the full row height even when a refresh bar renders above the clock board card. */ .ops-clock-dispatch-row > div { display: flex; flex-direction: column; min-width: 0; } @media (max-width: 1280px) { .ops-clock-dispatch-row { grid-template-columns: 1fr; } } /* Compact variant for the Ops coaching grid — 6 cards across in one row. */ .ops-sum-compact { gap: 8px; } .ops-sum-compact .coll-sum-card { padding: 10px 12px; gap: 6px; } .ops-sum-compact .coll-sum-card-label { font-size: 12px; } .ops-sum-compact .coll-sum-card-role { font-size: 10px; } .ops-sum-compact .coll-sum-card-grade { min-height: 24px; gap: 6px; } .ops-sum-compact .coll-sum-grade-pill { font-size: 13px; padding: 2px 9px; } .ops-sum-compact .coll-sum-job-count { font-size: 10px; } .ops-sum-compact .coll-sum-top-action { font-size: 11px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ops-sum-compact .coll-sum-view-btn { font-size: 11px; padding: 4px 10px; } .ops-sum-compact .coll-sum-card-ts { font-size: 9px; min-height: 0; } .ops-sum-trend-btn { background: #475569; } .ops-sum-trend-btn:hover { background: #334155; } /* === WEEKLY TREND ANALYSIS CARD === */ .wta-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px 24px 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-top: 28px; margin-bottom: 24px; } .wta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .wta-title { font-size: 18px; font-weight: 800; color: #032e5b; line-height: 1.2; } .wta-subtitle { font-size: 12px; color: #6b7280; margin-top: 2px; } .wta-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .wta-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #374151; cursor: pointer; user-select: none; } .wta-toggle input { cursor: pointer; } .wta-legend-chips { display: flex; gap: 8px; flex-wrap: wrap; } .wta-chip { display: inline-flex; align-items: center; gap: 6px; background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; cursor: pointer; transition: background 0.12s, border-color 0.12s, opacity 0.12s; } .wta-chip.muted { opacity: 0.38; } .wta-chip .wta-chip-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); } .wta-period { appearance: none; background: #ffffff; border: 1px solid #d1d5db; color: #111827; font-size: 12px; font-weight: 600; padding: 6px 28px 6px 12px; border-radius: 8px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .wta-chart-row { display: flex; gap: 14px; align-items: stretch; } .wta-grade-legend { flex: 0 0 128px; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: #f9fafb; border: 1px solid #eef0f3; border-radius: 8px; font-size: 11px; } .wta-grade-legend-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 700; padding: 2px 4px 6px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; } .wta-grade-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; border-radius: 5px; gap: 6px; } .wta-grade-row .wta-grade-letter { font-weight: 800; font-size: 12px; min-width: 20px; } .wta-grade-row .wta-grade-range { font-size: 10.5px; color: #4b5563; font-variant-numeric: tabular-nums; } .wta-chart-wrap { flex: 1; position: relative; min-height: 320px; min-width: 0; } .wta-chart-wrap canvas { width: 100% !important; height: 320px !important; display: block; } .wta-endpill { position: absolute; transform: translate(6px, -50%); background: #ffffff; border: 1.5px solid currentColor; color: #111827; padding: 2px 8px; font-size: 11px; font-weight: 800; border-radius: 999px; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .wta-heatmap-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid #eef0f3; border-radius: 8px; } .wta-heatmap { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 780px; } .wta-heatmap th, .wta-heatmap td { padding: 6px 6px; text-align: center; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; font-variant-numeric: tabular-nums; } .wta-heatmap th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; background: #f9fafb; font-weight: 700; white-space: nowrap; } .wta-heatmap td:first-child, .wta-heatmap th:first-child { text-align: left; padding-left: 12px; font-weight: 700; color: #111827; background: #fafbfc; position: sticky; left: 0; z-index: 1; } .wta-heatmap td.wta-hm-cell { font-weight: 800; color: #111827; } .wta-heatmap td.wta-hm-trend { font-weight: 700; font-size: 14px; } .wta-trend-up { color: #16a34a; } .wta-trend-down { color: #dc2626; } .wta-trend-flat { color: #9ca3af; } .wta-foot { margin-top: 14px; font-size: 11.5px; color: #6b7280; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; } .wta-foot .wta-foot-arrows { display: flex; gap: 12px; } .wta-foot .wta-foot-arrows span { display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 900px) { .wta-chart-row { flex-direction: column; } .wta-grade-legend { flex-direction: row; flex-wrap: wrap; flex: 0 0 auto; } .wta-grade-legend-title { width: 100%; } .wta-grade-row { flex: 1 1 96px; } } /* === EMAIL GAP SUMMARY BANNER (compact 1-line) === */ .email-gap-banner { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 6px; margin: 10px 20px 0; font-size: 12px; flex-wrap: wrap; } .email-gap-banner .egp-banner-text { font-size: 12px; color: #78350f; flex: 1; min-width: 100px; } /* === EMAIL GAP ALERTS PANEL (legacy — kept for compat) === */ .email-gap-panel { background: #fff; border: 1.5px solid #fbbf24; border-radius: 8px; margin: 14px 20px 0; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 13px; overflow: hidden; } .egp-header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fffbeb; cursor: pointer; user-select: none; border-bottom: 1px solid #fde68a; flex-wrap: wrap; } .egp-header:hover { background: #fef3c7; } .egp-title { font-weight: 700; font-size: 13px; color: #92400e; flex-shrink: 0; } .egp-badge { font-size: 11px; font-weight: 700; color: #fff; border-radius: 10px; padding: 1px 8px; flex-shrink: 0; } .egp-sync { font-size: 11px; color: #78716c; flex-shrink: 0; } .egp-refresh-btn { margin-left: auto; background: #fff; border: 1px solid #d97706; color: #b45309; border-radius: 5px; padding: 2px 10px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s; flex-shrink: 0; } .egp-refresh-btn:hover { background: #fef3c7; } .egp-refresh-btn:disabled { opacity: .5; cursor: wait; } .egp-body { padding: 12px 16px 14px; } .egp-body.egp-collapsed { display: none; } .egp-section { margin-bottom: 12px; } .egp-section:last-child { margin-bottom: 0; } .egp-section-title { font-weight: 700; font-size: 12px; color: #374151; margin-bottom: 6px; } .egp-job-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; margin-bottom: 3px; flex-wrap: wrap; background: #f9fafb; border: 1px solid #f3f4f6; cursor: pointer; transition: background .12s; } .egp-job-row:hover { background: #eff6ff; border-color: #bfdbfe; } .egp-job-row-unknown { cursor: default; } .egp-job-row-unknown:hover { background: #f9fafb; border-color: #f3f4f6; } .egp-job-num { font-weight: 700; font-size: 12px; color: #1e3a5f; flex-shrink: 0; min-width: 72px; } .egp-customer { font-size: 12px; color: #374151; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .egp-email-count { font-size: 11px; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 1px 7px; font-weight: 700; flex-shrink: 0; } .egp-newest { font-size: 11px; color: #6b7280; flex-shrink: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .egp-detail { font-size: 11px; color: #6b7280; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .egp-mailbox { font-size: 10px; color: #9ca3af; flex-shrink: 0; } /* ── AI Summary Modal ──────────────────────────────────────────────── */ #ai-summary-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.52); backdrop-filter: blur(2px); } #ai-summary-modal.ai-modal-hidden { display: none; } #ai-summary-card { background: #fff; border-radius: 12px; width: min(760px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.28); overflow: hidden; } .ai-modal-header { background: #032e5b; color: #fff; padding: 16px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; } .ai-modal-job-num { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; } .ai-modal-customer-name { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 3px; } .ai-modal-header-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .ai-modal-copy-btn { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; } .ai-modal-copy-btn:hover { background: rgba(255,255,255,0.22); } .ai-modal-close-btn { background: none; border: none; color: rgba(255,255,255,0.75); font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; transition: color .15s; } .ai-modal-close-btn:hover { color: #fff; } #ai-modal-body { flex: 1; overflow-y: auto; padding: 26px 30px; -webkit-overflow-scrolling: touch; } .ai-modal-section { margin-bottom: 22px; } .ai-modal-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #032e5b; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1.5px solid #e2e8f0; } .ai-modal-section-content { font-size: 14px; color: #1e293b; line-height: 1.65; } .ai-modal-section-content ul, .ai-modal-section-content ol { margin: 4px 0 0; padding-left: 20px; } .ai-modal-section-content li { margin-bottom: 5px; } .ai-modal-loading { color: #9ca3af; font-size: 14px; font-style: italic; padding: 48px 0; text-align: center; } .ai-modal-error { color: #dc2626; font-size: 14px; padding: 20px 0; } /* ── Notes Detail Modal (Meredith/Sue full-notes popup) ───────────────── */ #notes-detail-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } #notes-detail-modal.nd-hidden { display: none; } #notes-detail-card { background: #fff; border-radius: 12px; width: min(1200px, calc(100vw - 24px)); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.32); overflow: hidden; } .nd-header { background: linear-gradient(135deg, #032e5b 0%, #0b4a8c 100%); color: #fff; padding: 16px 20px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-shrink: 0; } .nd-header-info { flex: 1; min-width: 0; } .nd-header-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; word-break: break-word; } .nd-header-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 16px; } .nd-header-meta-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .nd-header-meta-label { font-size: 9.5px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; } .nd-header-meta-value { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nd-close-btn { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; transition: color .15s; flex-shrink: 0; } .nd-close-btn:hover { color: #fff; } .nd-body { flex: 1; overflow-y: auto; padding: 20px 24px; -webkit-overflow-scrolling: touch; background: #f9fafb; } .nd-ai-summary { background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 0 8px 8px 0; padding: 14px 44px 14px 16px; margin-bottom: 18px; position: relative; } .nd-ai-summary-title { font-size: 11px; font-weight: 700; color: #1d4ed8; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; } .nd-ai-summary-body { font-size: 13.5px; color: #1e293b; line-height: 1.55; } .nd-ai-summary-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #1d4ed8; font-size: 20px; font-weight: 700; cursor: pointer; line-height: 1; border-radius: 4px; padding: 0; } .nd-ai-summary-close:hover { background: rgba(37,99,235,0.12); } .nd-ai-summary.nd-summary-dismissed { display: none; } .nd-ai-summary-show { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 14px; display: none; } .nd-ai-summary-show.nd-show-visible { display: inline-block; } .nd-ai-summary-generate { margin-top: 10px; background: #2563eb; color: #fff; border: none; border-radius: 5px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .nd-ai-summary-generate:hover { background: #1d4ed8; } .nd-ai-summary-generate:disabled { opacity: 0.6; cursor: wait; } .nd-notes-title { font-size: 11px; font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; } .nd-notes-body { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; } .nd-notes-body .note-date { font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 4px; } .nd-notes-body .note-text { font-size: 14px; color: #1f2937; line-height: 1.55; word-wrap: break-word; overflow-wrap: break-word; } .nd-notes-body hr.note-history-divider { border: none; border-top: 1px dashed #d1d5db; margin: 10px 0; } /* ── Notes modal timeline — merged Dash + Encircle feed ────────────────── Same source-chip vocabulary as the combined Notes cell (.cn-src / .cn-src-enc), sized up for the modal. Encircle entries keep the warm tint and orange rail so the two systems stay distinguishable in one feed. */ .nd-notes-title-sub { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #9ca3af; text-transform: none; letter-spacing: 0.2px; } .nd-tl-item { border-top: 1px dashed #d1d5db; padding: 12px 0 4px; } .nd-tl-item:first-child { border-top: 0; padding-top: 0; } .nd-tl-enc { background: #fff7ed; border-top: 0; border-left: 4px solid #ea580c; border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 10px 0 4px; } .nd-tl-item:first-child.nd-tl-enc { margin-top: 0; } .nd-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; } .nd-tl-meta { font-size: 12px; font-weight: 700; color: #6b7280; } .nd-tl-title { font-size: 14px; font-weight: 700; color: #7c2d12; margin-bottom: 3px; } .nd-tl-text-enc { white-space: pre-wrap; } .nd-tl-room-btn { margin-left: auto; padding: 3px 9px; font-size: 11px; font-weight: 700; color: #ea580c; background: #fff; border: 1px solid #ea580c; border-radius: 4px; cursor: pointer; white-space: nowrap; } .nd-tl-room-btn:hover { background: #ea580c; color: #fff; } .nd-tl-loading { font-size: 12px; font-weight: 600; color: #9a3412; background: #fff7ed; border: 1px dashed #fed7aa; border-radius: 6px; padding: 7px 10px; margin-bottom: 12px; } .nd-tl-loading-err { color: #b91c1c; background: #fef2f2; border-color: #fecaca; } .nd-tl-excerpt-note { font-size: 10.5px; font-style: italic; color: #9a3412; margin-top: 4px; } /* The .es-tabs bar is written against the Encircle popup's 20px/24px body padding; .nd-body matches it on desktop but not on mobile. */ @media (max-width: 600px) { #notes-detail-card { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .nd-header { padding: 14px 16px 12px; } .nd-header-meta { grid-template-columns: 1fr 1fr; gap: 8px 12px; } .nd-body { padding: 14px 14px 20px; } .nd-body .es-tabs { top: -14px; margin: -14px -14px 14px; padding: 0 14px; overflow-x: auto; } .nd-body .es-tab { padding: 10px 13px; font-size: 13px; } } /* ── Encircle Scope of Work modal — same size/shape as Last Dash modal, orange-themed to differentiate from the blue notes modal. ───────── */ #encircle-scope-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); } #encircle-scope-modal.es-hidden { display: none; } #encircle-scope-card { background: #fff; border-radius: 12px; width: min(1200px, calc(100vw - 24px)); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.32); overflow: hidden; } .es-header { background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%); color: #fff; padding: 16px 20px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-shrink: 0; } .es-header-info { flex: 1; min-width: 0; } .es-header-title { font-size: 18px; font-weight: 700; line-height: 1.2; word-break: break-word; } .es-header-subtitle { margin-top: 6px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.6px; } .es-close-btn { background: none; border: none; color: rgba(255,255,255,0.85); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 6px; transition: color .15s; flex-shrink: 0; } .es-close-btn:hover { color: #fff; } .es-body { flex: 1; overflow-y: auto; padding: 20px 24px; -webkit-overflow-scrolling: touch; background: #fff7ed; } @media (max-width: 600px) { #encircle-scope-card { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .es-header { padding: 14px 16px 12px; } .es-body { padding: 14px 14px 20px; } } /* Encircle scope link in tracker tables — orange, not green. */ .encircle-scope-link { color: #ea580c !important; transition: color .12s; } .encircle-scope-link:hover { color: #c2410c !important; text-decoration: underline !important; } /* ── Encircle scope panel tabs — Overview / Notes / Photos ───────── */ .es-tabs { display: flex; gap: 0; border-bottom: 2px solid #fed7aa; background: #fff7ed; position: sticky; top: -20px; margin: -20px -24px 16px; padding: 0 24px; z-index: 5; } .es-tab { flex: 0 0 auto; padding: 12px 20px; font-size: 14px; font-weight: 700; color: #9a3412; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; margin-bottom: -2px; display: inline-flex; align-items: center; gap: 6px; } .es-tab:hover { background: rgba(254, 215, 170, 0.4); } .es-tab-active { color: #c2410c; border-bottom-color: #ea580c; } .es-tab-count { display: inline-block; font-size: 11px; font-weight: 700; background: #fed7aa; color: #7c2d12; border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center; } .es-tab-active .es-tab-count { background: #ea580c; color: #fff; } .es-tab-pane { display: none; } .es-tab-pane-active { display: block; } .es-refresh-btn { margin-left: auto; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #ea580c; background: #fff; border: 1px solid #fed7aa; border-radius: 6px; cursor: pointer; align-self: center; margin-bottom: 6px; } .es-refresh-btn:hover { background: #fed7aa; border-color: #ea580c; } .es-refresh-btn:disabled { opacity: 0.5; cursor: wait; } .es-overview-card { background: #fff; border: 1px solid #fed7aa; border-radius: 8px; padding: 16px; margin-bottom: 12px; } .es-overview-card-label { font-size: 11px; font-weight: 700; color: #9a3412; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 10px; } .es-overview-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13px; } .es-overview-grid > .lbl { color: #9ca3af; font-weight: 600; } .es-overview-grid > .val { color: #1e293b; font-weight: 500; word-break: break-word; } .es-stat-tile { flex: 1; min-width: 80px; text-align: center; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 10px 8px; } .es-stat-tile-value { font-size: 22px; font-weight: 800; color: #c2410c; line-height: 1; } .es-stat-tile-label { font-size: 11px; font-weight: 600; color: #7c2d12; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; } /* ====================================================== MOBILE: Warehouse Management — stack sidebar above diagram ====================================================== */ @media (max-width: 768px) { .wh-main-layout { flex-direction: column !important; height: auto !important; gap: 12px !important; } .wh-sidebar { width: auto !important; min-width: 0 !important; max-height: 320px; } .wh-diagram { padding: 12px !important; } /* The 3-section pallet row is too dense for 375px; let it scroll horizontally */ .wh-sections-row { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .wh-sections-row > div { min-width: 220px; flex-shrink: 0 !important; } } /* ====================================================== MOBILE: Work Day Planner & Rebuild Planner ====================================================== */ @media (max-width: 768px) { .wdp-header-row { flex-direction: column !important; align-items: stretch !important; gap: 10px; padding: 12px 14px 4px !important; } .wdp-title { font-size: 17px !important; } .wdp-header-controls { width: 100%; justify-content: space-between; } .wdp-header-controls > input[type="text"] { flex: 1; min-width: 0; width: auto !important; } .wdp-nav-row { flex-wrap: wrap !important; gap: 8px !important; padding: 8px 14px 6px !important; } .wdp-nav-row > button, .wdp-nav-row > div[style*="display:flex"] { flex-shrink: 0; } .wdp-nav-row .wdp-week-label { width: 100%; font-size: 13px !important; order: 10; } /* Sidebar + calendar: stack vertically so the calendar can scroll horizontally */ .wdp-main { flex-direction: column !important; } #plannerSidebar, #rbPlannerSidebar { width: 100% !important; max-height: 220px !important; border-right: none !important; border-bottom: 1px solid #e5e7eb; } /* Calendar area: scrollable with fade affordance on the right edge */ .wdp-calendar-scroll { position: relative; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%); } .wdp-calendar-scroll .wdp-grid-row { min-width: 640px; } } /* ====================================================== MOBILE: Route Planner ====================================================== */ @media (max-width: 768px) { .rp-header { flex-wrap: wrap !important; gap: 8px; padding: 12px 14px !important; } .rp-header-title { width: 100%; font-size: 17px !important; } .rp-header-actions { width: 100%; flex-wrap: wrap; } .rp-day-row { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: 8px 14px !important; } .rp-day-row > button, .rp-day-row > .rp-day-label { flex-shrink: 0; } .rp-main-layout { flex-direction: column !important; height: auto !important; min-height: 0 !important; } .rp-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid #e5e7eb; max-height: 360px; } .rp-map-pane { height: 380px; flex: none !important; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE: card slot for "days pending" sibling to .mob-card-amount. Separates $ estimate (amount slot) from age in Pending Sales cards. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .mob-card-age { font-size: 11px; color: var(--ink-muted); margin-top: 2px; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE: Review Tracker — keep KPI strip + review cards inside viewport. Desktop is unaffected. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* KPI strips: 4-col + 3-col grids → 2-col so nothing overflows on 375px */ #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(4,1fr)"], #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(4,1fr)"] > div, #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(3,1fr)"] > div { padding: 14px 10px !important; min-width: 0 !important; } #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(4,1fr)"] > div > div:first-child, #reviewTrackerContent > div > div[style*="grid-template-columns:repeat(3,1fr)"] > div > div:first-child { font-size: 24px !important; } /* Review card grid: minmax(420px,1fr) overflows a 375px viewport */ #rtCardsGrid { grid-template-columns: 1fr !important; gap: 14px !important; } #rtCardsGrid .rt-card { padding: 16px !important; min-width: 0; } #rtCardsGrid .rt-card > div:first-child { flex-wrap: wrap; } #rtCardsGrid .rt-card > div:first-child > div:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rtCardsGrid .rt-card > div[style*="background"] > div[style*="display:flex"] { flex-wrap: wrap !important; } #rtCardsGrid .rt-card > div[style*="background"] > div[style*="display:flex"] > button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Filter row + overall wrapper: no horizontal scroll, wrap instead */ #reviewTrackerContent > div { padding: 16px !important; max-width: 100%; box-sizing: border-box; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE: Sales Playbook Field Guide chips — wrap to 2 per row on narrow viewports so chip labels stay readable instead of collapsing to single letters. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .fg-col-row { flex-wrap: wrap; overflow-x: visible; gap: 4px; padding: 4px; } .fg-col { flex: 0 0 calc(50% - 6px); min-width: 0; border-right: none; border-radius: 6px; background: #ffffff; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE: 90 Scorecard row titles — allow wrap so long names like "Mike and Hunter Closing Percentage" don't hard-truncate to an ellipsis. Horizontal scroll still handles overall width; this just frees the title column. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .sc90-scroll table > colgroup > col:nth-child(2) { width: 260px !important; } .sc90-scroll table > tbody > tr > td:nth-child(2), .sc90-scroll table > tr > td:nth-child(2) { overflow: visible !important; } .sc90-scroll table > tbody > tr > td:nth-child(2) > div, .sc90-scroll table > tr > td:nth-child(2) > div { overflow: visible !important; } .sc90-scroll table > tbody > tr > td:nth-child(2) > div > span:last-child, .sc90-scroll table > tr > td:nth-child(2) > div > span:last-child { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; } } /* === Demographic Analysis tab (Marketing) === Desktop: full tables. Mobile ≤600px: hide the optional "Avg Dist from HQ", "Top Source", "Top Carrier", "City" (in farthest-5), "Division" cells so the core columns (revenue, margin, jobs) stay readable without horizontal scroll. The map + charts are already responsive via inline percentage widths. */ #demographicAnalysisContainer { padding: 0; } #demographicAnalysisContainer .demo-kpi { min-width: 0; } #demographicAnalysisContainer .demo-table-wrap { -webkit-overflow-scrolling: touch; } @media (max-width: 600px) { #demographicAnalysisContainer .demo-col-dist, #demographicAnalysisContainer .demo-cell-dist, #demographicAnalysisContainer .demo-col-top-carrier, #demographicAnalysisContainer .demo-cell-top-carrier, #demographicAnalysisContainer .demo-col-city, #demographicAnalysisContainer .demo-cell-city, #demographicAnalysisContainer .demo-col-division, #demographicAnalysisContainer .demo-cell-division { display: none; } #demographicAnalysisContainer { font-size: 13px; } #demographicAnalysisContainer .demo-kpi { padding: 12px 14px; } #demographicAnalysisContainer .demo-kpi > div:nth-child(2) { font-size: 20px; } #demographicAnalysisContainer h3 { font-size: 15px !important; } #demographicAnalysisContainer table { font-size: 12px; } #demographicAnalysisContainer table th, #demographicAnalysisContainer table td { padding: 8px 6px !important; } #demographicAnalysisContainer #demoMapContainer { height: 360px !important; } #demographicAnalysisContainer .date-range-picker { padding: 10px 12px; } } /* ============================================================ Lost Jobs tab (Leadership Team) ============================================================ */ .lj-tab .lj-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lj-tab .lj-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; } .lj-tab .lj-table thead th { background: #032e5b; color: #fff; padding: 8px 10px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2px solid #021f40; white-space: nowrap; } .lj-tab .lj-table tbody td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; vertical-align: top; } .lj-tab .lj-table tbody tr:hover { background: #f8f9fb; } @media (max-width: 768px) { .lj-tab { padding: 10px !important; } .lj-tab .lj-chart-row { grid-template-columns: 1fr !important; } .lj-tab .lj-kpi { min-width: calc(50% - 6px) !important; padding: 10px 12px !important; } .lj-tab .lj-kpi > div:nth-child(2) { font-size: 18px !important; } .lj-tab .lj-table thead { display: none; } .lj-tab .lj-table, .lj-tab .lj-table tbody, .lj-tab .lj-table tr, .lj-tab .lj-table td { display: block; width: 100%; } .lj-tab .lj-table tr { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .lj-tab .lj-table td { border-bottom: 1px dashed #f1f5f9; padding: 6px 0; text-align: right !important; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; } .lj-tab .lj-table td:last-child { border-bottom: 0; } .lj-tab .lj-table td::before { content: attr(data-label); font-weight: 700; color: #6b7280; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; text-align: left; } .lj-tab .date-range-picker { flex-direction: column; align-items: stretch; gap: 10px; } .lj-tab .date-range-controls { justify-content: flex-start !important; } .lj-tab .lj-explainer > div:nth-child(2), .lj-tab .lj-explainer > div:nth-child(3) { grid-template-columns: 1fr !important; } }