:root { --green: var(--brand-lime); --green-dark: #8A9E00; --green-light: #F5FAE0; --gray-bg: #f4f6f8; /* Top-bar height. Shared so anything that must clear the bar (the toast stack) can't drift from it — see .topbar and .toast-stack. */ --topbar-h: 56px; --gray-border: var(--gray-300); --text: #1a1a2e; --text-muted: #5b6270; --white: #ffffff; --red: #ef4444; --orange: #f59e0b; --blue: var(--brand-teal); --purple: #8b5cf6; --sf-bg: rgba(0,169,157,0.05); --sf-border: rgba(0,169,157,0.22); --sf-text: var(--teal-700); /* a11y (WCAG 1.4.11 / 2.4.7 / 1.4.3): accessible field border, focus ring, and warning text — all theme-aware so both light and dark pass. */ --field-border: var(--gray-400); --focus-ring: var(--teal-700); --warn-text: var(--amber-700); /* Manual section — referenced in JS-injected styles too */ --man-bg: rgba(181,209,0,0.07); --man-border: rgba(181,209,0,0.28); --man-text: #5a6a00; /* Row hover */ --row-hover: #edfaf9; /* Modal background */ --modal-bg: #ffffff; /* Email / preview surfaces */ --preview-bg: #f8fafc; --email-body-bg: #ffffff; /* ── LAYER SCALE (z-index) ──────────────────────────────────────────── Every global layer uses one of these — never a new magic number. Values ≤ 5 inside a component (badges over avatars, a sticky cell over its row) stay literal: they only order siblings in one stacking context. Order, low → high: */ --z-sticky: 10; /* sticky table headers, in-panel sticky bars */ --z-inline-popup: 50; /* @mention picker inside a comment composer */ --z-panel-backdrop: 89; /* shared popup backdrop — ITX chat + dock popups (under the dock/chat) */ --z-panel: 90; /* ITX chat floating panel */ --z-dock: 90; /* sidebar dock — must equal --z-panel: it hosts the ITX chat, which has to clear its 89 backdrop */ --z-modal: 100; /* every .modal-overlay */ --z-dock-above-modal:105; /* sidebar dock, raised above readinessModal's backdrop so the dock stays visible/clickable, like Calendar/ITX Assistant */ --z-modal-stacked: 150; /* a modal opened on top of another modal */ --z-modal-stacked-2:160; /* confirm raised from a stacked modal */ --z-modal-top: 200; /* confirm raised from a stacked-2 modal */ --z-dropdown: 300; /* fixed menus/tooltips that can sit over a modal */ --z-confirm: 1000; /* shared _confirmDialog — above any modal */ --z-skip-link: 2000; --z-select-menu: 2600; /* themed . Each specific class below overrides padding/size/color as needed. --sel-arrow updates automatically in dark mode via the body.dark override. */ :root { --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } body.dark, #view-docs { --sel-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } select:not([multiple]):not([size]):hover:not(:disabled) { border-color: var(--teal, var(--brand-teal)); } select:not([multiple]):not([size]):focus { outline: none; border-color: var(--focus-ring, var(--teal-700)); box-shadow: 0 0 0 3px rgba(0,120,111,0.22); } body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--gray-bg); color: var(--text); font-size: var(--fs-base); display: flex; flex-direction: column; } /* TOP BAR */ .topbar { background: linear-gradient(90deg, #0F1638 0%, #1B2059 60%, #162050 100%); color: white; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: var(--topbar-h); flex-shrink: 0; position: relative; box-shadow: 0 2px 10px rgba(15,22,56,0.5); border-bottom: 1px solid rgba(255,255,255,0.08); } .topbar-left { display: flex; align-items: center; gap: 16px; } .topbar-nav-tab { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.6); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .topbar-nav-tab:hover { background: rgba(255,255,255,0.08); color: white; border-color: rgba(255,255,255,0.15); } .topbar-nav-tab.active { background: rgba(181,209,0,0.15); color: var(--brand-lime); border-color: rgba(181,209,0,0.4); font-weight: 600; } .logo { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.5px; } .logo span { opacity: 0.7; font-weight: 300; font-size: var(--fs-base); margin-left: 8px; } .topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }.avatar { width: 32px; height: 32px; background: rgba(181,209,0,0.25); border: 1.5px solid rgba(181,209,0,0.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xs); line-height: 1; cursor: pointer; transition: background 0.15s, border-color 0.15s; flex-shrink: 0; color: rgba(255,255,255,0.9); } .avatar:hover { background: rgba(181,209,0,0.4); border-color: var(--brand-lime); } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* Author avatars (comments, activity feed, user cards) upgraded to real photos */ .act-avatar, .cm-avatar, .activity-popup-avatar, .user-card-avatar { overflow: hidden; } img.avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* User popup */ .topbar-user-wrap { position: relative; } .user-popup { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: #ffffff; border: 1px solid rgba(0,0,0,0.09); border-radius: 14px; padding: 20px 16px 14px; width: 220px; box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06); z-index: var(--z-popup); text-align: center; } .user-popup.open { display: block; } .user-popup-initials { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--lime-400) 0%, var(--lime-700) 100%); color: #1B2059; font-weight: 800; font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; overflow: hidden; } .user-popup-initials img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .user-popup-name { font-size: var(--fs-base); font-weight: 700; color: var(--gray-900); margin-bottom: 3px; } .user-popup-email { font-size: var(--fs-xs); color: var(--gray-400); margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-popup-role-badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: rgba(181,209,0,0.14); color: var(--lime-800); margin-bottom: 14px; } .user-popup-divider { height: 1px; background: var(--gray-100); margin: 0 0 12px; } .user-popup-signout { width: 100%; padding: 8px 14px; border-radius: 8px; background: #fef2f2; color: var(--brand-red); border: 1px solid rgba(220,38,38,0.18); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; transition: background 0.15s; } .user-popup-signout:hover { background: var(--red-100); } .user-popup-link { width: 100%; padding: 8px 14px; border-radius: 8px; margin: 0 0 8px; background: #f0fdfa; color: var(--teal-700); border: 1px solid rgba(0,169,157,0.22); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; text-decoration: none; transition: background 0.15s; } .user-popup-link:hover { background: #ccfbf1; } body.dark .user-popup-link { background: rgba(0,169,157,0.12); border-color: rgba(0,169,157,0.28); color: var(--teal-300); } body.dark .user-popup-link:hover { background: rgba(0,169,157,0.22); } body.dark .user-popup { background: #212127; border-color: rgba(255,255,255,0.1); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } body.dark .user-popup-name { color: var(--slate-100); } body.dark .user-popup-email { color: var(--slate-500); } body.dark .user-popup-role-badge { background: rgba(181,209,0,0.15); color: var(--lime-300); } body.dark .user-popup-divider { background: rgba(255,255,255,0.08); } body.dark .user-popup-signout { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.25); } body.dark .user-popup-signout:hover { background: rgba(220,38,38,0.22); } /* MAIN */ /* SHARED APP BACKGROUND — one backdrop spanning every view AND the task sidebar (both are children of #appBody), so all views look identical and the gradient covers the whole content area, taskbar included. */ #appBody { display: flex; flex: 1; min-height: 0; overflow: hidden; background-color: #f0f4f8; background-image: radial-gradient(ellipse at 90% 10%, rgba(181,209,0,0.15) 0%, transparent 46%), radial-gradient(ellipse at 10% 85%, rgba(0,169,157,0.18) 0%, transparent 45%), radial-gradient(ellipse at 55% 55%, rgba(124,58,237,0.10) 0%, transparent 40%), radial-gradient(ellipse at 75% 80%, rgba(181,209,0,0.10) 0%, transparent 35%), linear-gradient(145deg, #e8edf5 0%, #f5f8fb 50%, #eaf2ef 100%); background-repeat: no-repeat; } /* The Information Center (#view-docs) is always dark — backdrop included — so the dark backdrop also applies while that view is the active one. */ body.dark #appBody, #appBody:has(#view-docs.active) { background-color: #1a1b20; background-image: radial-gradient(ellipse at 90% 10%, rgba(181,209,0,0.18) 0%, transparent 48%), radial-gradient(ellipse at 10% 85%, rgba(0,169,157,0.16) 0%, transparent 45%), radial-gradient(ellipse at 55% 55%, rgba(124,58,237,0.13) 0%, transparent 40%), radial-gradient(ellipse at 75% 80%, rgba(181,209,0,0.08) 0%, transparent 35%), linear-gradient(145deg, #1b1c21 0%, #1a1b20 50%, #17181d 100%); } /* Every view is a transparent flex column that shares .main's padding, so the outer page padding is identical across Dashboard / Stats / Week / Journey. */ .main { padding: 16px 12px 12px; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* STATS */ /* Shared by the Dashboard and People Journey stat rows. auto-fit + a min track (same formula as .offb-summary) so the cards WRAP onto a second line on a narrow window instead of squeezing below a legible width. Empty auto-fit tracks collapse, so a wide window still lays all six out in one full-width row exactly like repeat(6, 1fr) did. */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; flex-shrink: 0; } .stat-card { background: linear-gradient(135deg, var(--gray-600), var(--gray-800)); border: none; border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); position: relative; overflow: hidden; color: #fff; isolation: isolate; } .stat-card::before { content: ''; position: absolute; width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.025); right: -18px; top: -22px; pointer-events: none; opacity: 0.2; z-index: 0; } .stat-card::after { content: ''; position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.035); right: 9px; top: 9px; pointer-events: none; z-index: 0; } /* KPI palette — ONE brand tonal family (teal↔lime) for category metrics, amber for "pending / in progress", red reserved for danger/attention. The neutral slate default (.stat-card) anchors the left of each row. (.blue / .orange were off-brand + the old .orange was actually purple — removed; the brand-family classes below replace them.) */ .stat-card.teal { background: linear-gradient(135deg, #0a6b63, var(--brand-teal)); } .stat-card.teal-2 { background: linear-gradient(135deg, #053f44, #0c857c); } .stat-card.lime { background: linear-gradient(135deg, var(--lime-700), var(--brand-lime)); } .stat-card.lime-2 { background: linear-gradient(135deg, #5e7a00, #9fc000); } .stat-card.amber { background: linear-gradient(135deg, var(--amber-800), var(--amber-600)); } /* matches People Doc amber */ .stat-card.red { background: linear-gradient(135deg, var(--red-800), var(--brand-red)); } .stat-card.purple { background: linear-gradient(135deg, #4c1d95, var(--brand-purple)); } /* inventory: Reserved only */ .stat-card-icon { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.20); color: #fff; } .stat-card.teal .stat-card-icon, .stat-card.teal-2 .stat-card-icon, .stat-card.lime .stat-card-icon, .stat-card.lime-2 .stat-card-icon, .stat-card.amber .stat-card-icon, .stat-card.red .stat-card-icon, .stat-card.purple .stat-card-icon { background: rgba(255,255,255,0.20); color: #fff; } body.dark .stat-card { box-shadow: 0 4px 16px rgba(0,0,0,0.40); } .stat-label { font-size: var(--fs-xs); color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 700; position: relative; z-index: 2; } .stat-value { font-size: var(--fs-2xl); font-weight: 800; line-height: 1; color: #fff; position: relative; z-index: 2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .stat-sub { font-size: var(--fs-xs); color: rgba(255,255,255,0.85); margin-top: 4px; position: relative; z-index: 2; } .stat-card-icon { z-index: 2; } .stat-card.clickable { cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; user-select: none; } .stat-card.clickable:hover { transform: translateY(-3px); box-shadow: 0 12px 20px rgba(0,0,0,0.28); } .stat-card.clickable:active { transform: scale(0.96) !important; transition: transform 0.08s; } .stat-card.stat-active { outline: 2px solid rgba(255,255,255,0.9); outline-offset: -2px; box-shadow: 0 12px 20px rgba(0,0,0,0.28); } /* TOOLBAR */ .toolbar { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.55); padding: 10px 16px; border-radius: 10px; box-shadow: 0 1px 8px rgba(0,0,0,0.08); margin-bottom: 12px; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } body.dark .toolbar { background: rgba(30,31,38,0.72); border-color: rgba(255,255,255,0.08); } .toolbar-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; } .toolbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} } .btn { padding: 7px 14px; border-radius: 7px; border: 1px solid transparent; cursor: pointer; font-size: var(--fs-md); font-weight: 500; display: flex; align-items: center; gap: 5px; transition: all 0.15s; box-sizing: border-box; line-height: 1.4; } /* ── A11Y UTILITIES (WCAG 1.3.1 / 2.4.1) ─────────────────────────────────── */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -48px; z-index: var(--z-skip-link); background: var(--white); color: var(--text); padding: 8px 14px; border-radius: 8px; border: 1px solid var(--focus-ring); font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } #appBody:focus { outline: none; } /* programmatic (skip-link) focus target, tabindex=-1 — not keyboard-tabbable */ /* M8 (WCAG 2.4.11): keep focused in-table controls clear of the sticky header. */ #tableScrollWrap tr[tabindex], #tableScrollWrap button, #tableScrollWrap select, #tableScrollWrap input, #tableScrollWrap a, #tableScrollWrap [tabindex] { scroll-margin-top: 60px; } /* m3 (WCAG 2.4.7): guarantee a visible keyboard-focus ring everywhere — the !important overrides stray inline outline:none on a few secondary fields. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; } .btn-green { background: linear-gradient(135deg, var(--lime-400) 0%, #aec400 100%); color: #1a1a2e; font-weight: 600; } .btn-green svg { transition: transform 0.18s ease; } .btn-green:hover { background: linear-gradient(135deg, var(--lime-300) 0%, #bcd400 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(181,209,0,0.45); } .btn-green:hover svg { transform: rotate(90deg) scale(1.1); } #saveBtn:hover svg { transform: none; } .btn-green:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.08s !important; box-shadow: none !important; } .btn-outline { background: rgba(255,255,255,0.72); backdrop-filter: blur(6px); color: var(--text); border-color: rgba(0,0,0,0.15); } .btn-outline:hover{ border-color: var(--gray-400); color: var(--gray-700); background: var(--gray-100); } /* Calendar button — calm resting lime border, glow on hover/focus only. (Was a perpetual idle pulse; removed so peripheral motion is reserved for the single signature email-bounce + functional status indicators.) */ .btn-cal-glow { border-color: rgba(181,209,0,0.5); transition: border-color 0.15s, box-shadow 0.15s; } .btn-cal-glow:hover, .btn-cal-glow:focus { border-color: var(--brand-lime); box-shadow: 0 0 0 3px rgba(181,209,0,0.18); } body.dark .btn-cal-glow { border-color: rgba(181,209,0,0.4); } /* Accessibility — respect the OS "reduce motion" preference: silences the signature email-bounce, the sync pulse, and all transitions for users who opt out of motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .btn-email { background: linear-gradient(135deg, #be123c 0%, #9f1239 100%); color: white; border-color: transparent; } .btn-email svg { transition: transform 0.18s ease; animation: email-bounce 3.5s ease-in-out 2s infinite; } .btn-email:hover { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(190,18,60,0.4); } #emailNextBtn:hover, #sendEmailBtn:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.28); } .btn-email:hover svg { animation-play-state: paused; transform: scale(1.2) translateY(-1px); } .btn-email:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.08s !important; box-shadow: none !important; } @keyframes email-bounce { 0%, 60%, 100% { transform: translateY(0) rotate(0deg); } 10% { transform: translateY(-4px) rotate(-8deg); } 20% { transform: translateY(-2px) rotate(6deg); } 30% { transform: translateY(-4px) rotate(-4deg); } 40% { transform: translateY(-1px) rotate(2deg); } 50% { transform: translateY(-3px) rotate(0deg); } } #emailNextBtn, #sendEmailBtn { background: linear-gradient(135deg, var(--lime-400) 0%, var(--lime-700) 100%); border-color: transparent; } #emailNextBtn:hover, #sendEmailBtn:hover { background: linear-gradient(135deg, var(--brand-lime) 0%, #6a8000 100%); } .btn-teal { background: linear-gradient(135deg, var(--brand-teal) 0%, var(--teal-800) 100%); color: white; border-color: transparent; } .btn-teal:hover { background: linear-gradient(135deg, #00c4b6 0%, var(--brand-teal) 100%); color: white; } body.dark .btn-outline { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); color: var(--text); } body.dark .btn-outline:hover{ border-color: rgba(255,255,255,0.3); color: var(--text); background: rgba(255,255,255,0.07); } .filter-input, .filter-select { padding: 5px 8px; border: 1px solid var(--field-border); border-radius: 6px; font-size: var(--fs-sm); background: var(--gray-bg); color: var(--text); transition: border-color 0.15s; height: 30px; box-sizing: border-box; } .filter-input:focus, .filter-select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(0,120,111,0.28); } .filter-input { width: 150px; } .filter-select { width: auto; max-width: 130px; background-image: var(--sel-arrow); background-position: right 7px center; padding-right: 24px; } .btn-clear-filters { padding: 5px 10px; background: transparent; border: 1px solid var(--gray-border); border-radius: 6px; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; height: 30px; box-sizing: border-box; white-space: nowrap; } .btn-clear-filters:hover { border-color: var(--brand-lime); color: var(--green-dark); } .toolbar-divider { width: 1px; height: 22px; background: var(--gray-border); flex-shrink: 0; } /* COUNTRY SCOPE CHIP */ .country-scope-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--gray-border); background: var(--white, #fff); font-size: var(--fs-sm); font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .country-scope-chip:hover { border-color: #7dd3fc; } .country-scope-chip .csc-flag { font-size: var(--fs-base); line-height: 1; } .country-scope-chip img.csc-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); vertical-align: middle; } .country-scope-chip.csc-active { background: #E0F2FE; border-color: #bae6fd; color: #0369A1; } body.dark .country-scope-chip { background: rgba(255,255,255,0.04); } body.dark .country-scope-chip.csc-active { background: rgba(3,105,161,0.25); color: #bae6fd; border-color: rgba(3,105,161,0.5); } /* COUNTRY CHOOSER MENU */ .csc-menu { position: fixed; z-index: var(--z-dropdown); min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--card-bg, #fff); border: 1px solid var(--gray-border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 5px; display: flex; flex-direction: column; gap: 1px; } .csc-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: none; background: none; border-radius: 7px; font-size: var(--fs-md); font-weight: 600; color: var(--text-main); text-align: left; cursor: pointer; white-space: nowrap; } .csc-menu-item:hover { background: var(--gray-bg, var(--slate-100)); } .csc-menu-item.csc-sel { background: #E0F2FE; color: #0369A1; } .csc-menu-item .csc-mi-globe { width: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text-soft, var(--slate-500)); } .csc-menu-item.csc-sel .csc-mi-globe { color: inherit; } .csc-menu-item img.csc-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); flex: 0 0 auto; } .csc-menu-item .csc-flag { flex: 0 0 auto; } .csc-menu-item > span:nth-child(2) { flex: 1 1 auto; } .csc-menu-item .csc-detected { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0369A1; background: #E0F2FE; padding: 1px 6px; border-radius: 999px; } .csc-menu-item.csc-sel .csc-detected { background: rgba(255,255,255,0.55); } body.dark .csc-menu { background: #23242b; border-color: rgba(255,255,255,0.12); } body.dark .csc-menu-item:hover { background: rgba(255,255,255,0.07); } body.dark .csc-menu-item.csc-sel { background: rgba(3,105,161,0.35); color: #bae6fd; } body.dark .csc-menu-item .csc-detected { color: #bae6fd; background: rgba(3,105,161,0.4); } /* DATE RANGE CALENDAR */ .dr-cal-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:32px; padding:3px 2px; cursor:pointer; border-radius:6px; transition:background .1s; user-select:none; } .dr-cal-day:hover { background:var(--gray-100) !important; } body.dark .dr-cal-day:hover { background:rgba(255,255,255,0.07) !important; } .dr-cal-day.dr-sel { background:var(--brand-lime) !important; border-radius:6px !important; } .dr-cal-day.dr-range { background:rgba(181,209,0,0.18) !important; border-radius:0 !important; } .dr-cal-day.dr-range-start { border-radius:6px 0 0 6px !important; } .dr-cal-day.dr-range-end { border-radius:0 6px 6px 0 !important; } .dr-cal-day.dr-has-rec { box-shadow:inset 0 0 0 1.5px var(--brand-lime); } .dr-cal-day.dr-has-rec:hover { box-shadow:inset 0 0 0 1.5px var(--green-dark); } .dr-cal-nav-btn { background:none; border:1px solid var(--gray-border); border-radius:6px; width:26px; height:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:border-color .1s, color .1s; } .dr-cal-nav-btn:hover { border-color:var(--brand-lime); color:var(--green-dark); } body.dark .dr-cal-nav-btn:hover { color:var(--lime-300); } /* TABLE */ .table-wrap { background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.6); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.07); flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0px; } body.dark .table-wrap { background: rgba(30,31,38,0.88); border-color: rgba(255,255,255,0.08); } .table-scroll-outer { display: flex; flex-direction: row; flex: 1; min-height: 0; } .table-scroll { overflow-x: auto; overflow-y: scroll; flex: 1; min-height: 0; border-radius: 0 0 0 10px; scrollbar-width: none; } .table-scroll::-webkit-scrollbar { display: none; } .custom-sb-track { width: 14px; flex-shrink: 0; position: relative; background: var(--slate-200); border-radius: 0 0 10px 0; } body.dark .custom-sb-track { background: var(--graphite-700); } .custom-sb-thumb { position: absolute; left: 2px; width: 10px; background: var(--brand-teal); border-radius: 99px; transition: background 0.15s; display: none; } .custom-sb-thumb:hover, .custom-sb-thumb.dragging { background: var(--brand-lime); } body.dark .custom-sb-thumb { background: var(--slate-600); } .custom-sb-track-h { height: 14px; position: relative; flex-shrink: 0; background: var(--slate-200); margin-right: 14px; } body.dark .custom-sb-track-h { background: var(--graphite-700); } .custom-sb-thumb-h { position: absolute; top: 2px; height: 10px; background: var(--brand-teal); border-radius: 99px; transition: background 0.15s; display: none; } .custom-sb-thumb-h:hover, .custom-sb-thumb-h.dragging { background: var(--brand-lime); } body.dark .custom-sb-thumb-h { background: var(--slate-600); } /* ── DASHBOARD LIST VIEW ───────────────────────────────────────────────── Alternative to the table: hires as horizontal row cards. Toggled by .dash-mode-list on .dash-main: hide the table + its custom scrollbars, show the scrollable list wrap. */ .dash-list-wrap { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; } .dash-main.dash-mode-list .table-scroll-outer, .dash-main.dash-mode-list .custom-sb-track-h { display: none; } .dash-main.dash-mode-list .dash-list-wrap { display: block; } /* Date-group sections — compact capsule dividers, mirroring the Offboarding date separators (teal/lime accent instead of crimson). */ .dash-list-section { margin-bottom: 20px; } .dash-list-section:last-child { margin-bottom: 0; } /* The sticky backdrop is what masks rows scrolling underneath, so it has to be opaque — but with square corners and no padding it read as a cut-off white slab. Rounding it plus a little padding makes it a floating band instead. No side margin: the band's edges line up exactly with the candidate cards below it, so both share the scroll container's content width. (Don't add a negative margin to widen it — the container is overflow-y:auto, which makes overflow-x compute to auto, so any bleed past the padding box can trip a horizontal scrollbar.) */ .dash-list-sep { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 6px 10px; border-radius: 12px; position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); } .dash-date-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,169,157,0.1); border: 1.5px solid rgba(0,169,157,0.28); color: var(--teal-700); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .2px; padding: 3px 11px 3px 9px; border-radius: 20px; white-space: nowrap; } .dash-date-rel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; } .dash-date-count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--white); border: 1px solid var(--gray-border); padding: 1px 8px; border-radius: 10px; white-space: nowrap; } .dash-date-fill { flex: 1; height: 1px; background: var(--gray-border); align-self: center; } .dash-date-total { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } body.dark .dash-list-sep { background: rgba(30,31,38,0.97); } body.dark .dash-date-pill { background: rgba(181,209,0,0.1); border-color: rgba(181,209,0,0.3); color: var(--brand-lime); } body.dark .dash-date-count { background: var(--surface); } /* Hire Globant email chip on each Dashboard list row. */ .nh-row-email { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; max-width: 230px; font-size: var(--fs-sm); color: var(--text-muted); background: var(--gray-bg); border: 1px solid var(--gray-border); border-radius: 8px; padding: 4px 8px; } .nh-row-email-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nh-row-email.is-missing { color: var(--brand-red); } .nh-row-copy { width: 20px; height: 20px; flex-shrink: 0; border: none; border-radius: 5px; background: rgba(0,169,157,0.13); color: var(--brand-teal); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; } .nh-row-copy:hover { background: rgba(0,169,157,0.26); } .table-header-bar { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-border); flex-shrink: 0; } .table-title { font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; gap: 8px; } .record-count { font-size: var(--fs-sm); color: var(--text-muted); } /* ── BULK ACTION BAR ── */ .bulk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 14px; margin: 0 0 2px; background: rgba(181,209,0,0.12); border: 1px solid rgba(181,209,0,0.5); border-left: 4px solid var(--brand-lime); border-radius: 9px; animation: bulkBarIn 0.14s ease-out; } @keyframes bulkBarIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } body.dark .bulk-bar { background: rgba(181,209,0,0.10); border-color: rgba(181,209,0,0.42); } .bulk-bar-left { display: flex; align-items: center; gap: 10px; } .bulk-bar-count { font-size: var(--fs-md); font-weight: 700; color: var(--text); white-space: nowrap; } .bulk-bar-clear { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); background: transparent; border: 1px solid var(--gray-border); border-radius: 6px; padding: 4px 10px; cursor: pointer; } .bulk-bar-clear:hover { color: var(--text); border-color: var(--text-muted); } .bulk-bar-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; } .bulk-bar-select { font-size: var(--fs-sm); font-family: inherit; color: var(--text); background: var(--card, #fff); border: 1px solid var(--gray-border); border-radius: 6px; padding: 5px 28px 5px 9px; } .bulk-bar-select:hover { border-color: var(--teal); } .bulk-bar-select:focus { border-color: var(--brand-lime); box-shadow: 0 0 0 3px rgba(181,209,0,0.18); } body.dark .bulk-bar-select { background: rgba(255,255,255,0.06); } .bulk-bar-apply { font-size: var(--fs-sm); font-weight: 700; color: #000; background: var(--brand-lime); border: none; border-radius: 7px; padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: filter 0.12s; } .bulk-bar-apply:hover { filter: brightness(1.06); } /* ── ACTIVE FILTER CHIPS ────────────────────────────────────────────────── One dismissible chip per active narrowing, between the toolbar and the table. Built by _renderFilterChips(); the container is hidden when empty. */ .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px 10px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 4px 8px 4px 10px; border: 1px solid var(--gray-border); border-radius: 99px; background: var(--card, #fff); font-family: inherit; font-size: var(--fs-sm); line-height: 1.3; color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; } .filter-chip:hover { border-color: var(--brand-red); background: rgba(220,38,38,0.06); } .filter-chip:focus-visible { outline: 2px solid var(--teal, var(--brand-teal)); outline-offset: 1px; } .filter-chip-k { color: var(--text-muted); font-weight: 600; flex-shrink: 0; } .filter-chip-v { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-chip-x { color: var(--text-muted); font-size: var(--fs-xs); flex-shrink: 0; } .filter-chip:hover .filter-chip-x { color: var(--brand-red); } /* "Clear all" is the same pill without a key/value split. */ .filter-chip-all { font-weight: 700; color: var(--text-muted); border-style: dashed; padding: 4px 12px; } body.dark .filter-chip { background: rgba(255,255,255,0.05); } body.dark .filter-chip:hover { background: rgba(220,38,38,0.14); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 1500px; } #nhTable.hide-project-account #col-project, #nhTable.hide-project-account #col-account, #nhTable.hide-project-account td.proj-cell, #nhTable.hide-project-account td.acct-cell { display: none; } #nhTable.hide-address #col-address, #nhTable.hide-address td.addr-cell { display: none; } td.addr-cell { text-align: center; vertical-align: middle; } td.addr-cell > div { display: flex; justify-content: center; align-items: center; } td.comments-cell { text-align: center; vertical-align: middle; } td.comments-cell > div { display: flex; justify-content: center; align-items: center; } #nhTable.hide-devices #col-devices, #nhTable.hide-devices td.devices-cell { display: none; } td.devices-cell > div { display: flex; justify-content: center; align-items: center; } .row-btn.js-devices-btn { position: relative; } .row-btn.js-devices-btn.is-empty { opacity: 0.4; } .devices-count { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px; font-size: var(--fs-xs); font-weight: 800; line-height: 1; color: #fff; background: var(--brand-purple); border-radius: 99px; } /* ── ROW EXPAND PANEL ──────────────────────────────────────────────────── */ tr[data-id]:not(.row-expand-tr) { cursor: pointer; } tr[data-id]:not(.row-expand-tr):hover > td { background: #edfaf9; } body.dark tr[data-id]:not(.row-expand-tr):hover > td { background: var(--row-hover); } tr.row-expanded > td { background: rgba(181,209,0,0.08) !important; border-bottom: none !important; } .row-expand-tr > td { padding: 0 !important; border-top: none !important; position: sticky; left: 0; overflow: hidden; } @keyframes rowExpandDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .row-expand-panel { background: var(--white); border-top: 3px solid var(--brand-lime); box-shadow: inset 0 -1px 0 var(--gray-border), 0 6px 24px rgba(0,0,0,0.07); overflow: hidden; box-sizing: border-box; animation: rowExpandDrop 0.18s ease-out; } body.dark .row-expand-panel { background: #191a1f; } .row-expand-topbar { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 8px 16px 0; padding-bottom: 8px; } .row-expand-topbar-btn { font-size: var(--fs-xs); font-weight: 600; font-family: inherit; padding: 5px 10px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; background: #a3b148; border: 1px solid var(--gray-border); color: #ffffff; transition: background 0.15s, color 0.15s; } .row-expand-topbar-btn:hover { background: var(--teal); color: #ffffff; } .row-expand-body { padding: 10px 22px 20px; display: flex; flex-direction: column; gap: 16px; } .row-expand-section-hdr { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .row-expand-section-hdr::before { content: ''; width: 3px; height: 13px; border-radius: 99px; flex-shrink: 0; } .row-expand-section-hdr.sf::before { background: var(--brand-lime); } .row-expand-section-hdr.onb::before { background: var(--brand-teal); } .row-expand-section-hdr.dev::before { background: var(--brand-purple); } .row-expand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; } .row-expand-field { background: var(--gray-bg); border: 1px solid var(--gray-border); border-radius: 10px; padding: 10px 12px; min-width: 0; overflow: hidden; } body.dark .row-expand-field { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.07); } .row-expand-field.wide { grid-column: span 2; } .row-expand-flabel { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; } .row-expand-ficon { flex-shrink: 0; opacity: 0.7; } .row-expand-fvalue { font-size: var(--fs-md); color: var(--text); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } /* ── OPERATIONAL CLEARANCE STEPPER ──────────────────────────────────────── */ .clearance-host { padding: 16px 22px 20px; border-top: 1px solid var(--gray-border); background: linear-gradient(180deg, rgba(0,169,157,0.035) 0%, transparent 60%); } body.dark .clearance-host { border-top-color: rgba(255,255,255,0.07); } .clearance-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .clearance-section-hdr { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; color: var(--brand-teal); display: flex; align-items: center; gap: 7px; } body.dark .clearance-section-hdr { color: var(--teal-300); } .clearance-section-hdr svg { flex-shrink: 0; } .clearance-summary { display: flex; align-items: center; gap: 12px; } .clearance-count { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); white-space: nowrap; letter-spacing: 0.2px; } .clearance-track { width: 110px; height: 6px; border-radius: 99px; flex-shrink: 0; background: var(--gray-border); overflow: hidden; } .clearance-track-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-lime) 0%, var(--brand-teal) 100%); transition: width 0.5s cubic-bezier(0.4,0,0.2,1); } .clearance-pill { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 11px; border-radius: 99px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .clearance-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .clr-pill-cleared { background: rgba(181,209,0,0.16); color: #6f8400; } .clr-pill-progress { background: rgba(0,169,157,0.14); color: #00857c; } .clr-pill-blocked { background: rgba(220,38,38,0.13); color: var(--brand-red); } .clr-pill-cancelled{ background: var(--gray-bg); color: var(--text-muted); } body.dark .clr-pill-cleared { color: var(--brand-lime); } body.dark .clr-pill-progress { color: var(--teal-300); } body.dark .clr-pill-blocked { color: var(--red-400); } .clearance-stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-bottom: 4px; } .clr-step { flex: 0 0 auto; width: 96px; display: flex; flex-direction: column; align-items: center; text-align: center; } .clr-connector { flex: 1 1 auto; min-width: 16px; height: 2px; border-radius: 99px; margin: 18px -4px 0; background: var(--gray-border); } .clr-connector.clr-filled { background: linear-gradient(90deg, var(--brand-lime), var(--brand-teal)); } .clr-node { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--gray-border); background: var(--gray-bg); color: var(--text-muted); margin-bottom: 8px; transition: all 0.2s; } .clr-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); line-height: 1.2; } .clr-owner { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-top: 2px; } .clr-detail { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; line-height: 1.3; word-break: break-word; } .clr-done .clr-node { background: var(--brand-lime); border-color: var(--brand-lime); color: #1a1a1a; box-shadow: 0 2px 8px rgba(181,209,0,0.3); } .clr-blocked .clr-node { background: rgba(220,38,38,0.1); border-color: var(--brand-red); color: var(--brand-red); } .clr-blocked .clr-detail { color: var(--brand-red); font-weight: 600; } .clr-active .clr-node { background: rgba(0,169,157,0.1); border-color: var(--brand-teal); color: var(--brand-teal); animation: clrPulse 2s ease-in-out infinite; } .clr-active .clr-label { color: #00857c; } body.dark .clr-active .clr-label { color: var(--teal-300); } .clr-na .clr-node { border-style: dashed; opacity: 0.5; } .clr-na .clr-label, .clr-na .clr-owner, .clr-na .clr-detail { opacity: 0.55; } .clearance-cancelled .clr-step:not(.clr-blocked) { opacity: 0.4; } .clr-dim.clr-blocked { opacity: 0.85; } @keyframes clrPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,169,157,0.35); } 50% { box-shadow: 0 0 0 6px rgba(0,169,157,0); } } /* ── SEARCH HIGHLIGHT ───────────────────────────────────────────────────── */ mark.search-hl { background: #FEF08A; color: inherit; border-radius: 2px; padding: 0 1px; } .sdot { font-size: var(--fs-xs); padding: 1px 3px; border-radius: 3px; line-height: 1.4; white-space: nowrap; }/* ── NOTIFICATION BADGE ─────────────────────────────────────────────────── */ #notifBadge { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; background: var(--red); border-radius: 50%; border: 2px solid white; display: none; pointer-events: none; } thead th { position: sticky; top: 0; z-index: 2; padding: 9px 10px; text-align: left; font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.4px; color: #E0E7FF; white-space: nowrap; cursor: pointer; user-select: none; /* Solid navy header, opaque so each th paints its own layer for sticky */ background: #141740; box-shadow: inset 0 -2px 0 0 var(--brand-teal); } body.dark thead th { color: #E0E7FF; background: #141740; box-shadow: inset 0 -2px 0 0 var(--teal-400); } /* SF / Manual column groups — slightly lighter navy so the grouping stays visible */ thead th.sf-col, thead th.man-col { background: linear-gradient(180deg, rgba(0,169,157,0.18) 0%, rgba(0,169,157,0.08) 100%), #141740; color: #CCFBF1; } body.dark thead th.sf-col, body.dark thead th.man-col { background: linear-gradient(180deg, rgba(0,169,157,0.22) 0%, rgba(0,169,157,0.10) 100%), #141740; color: #CCFBF1; } /* ── FROZEN IDENTITY COLUMNS ────────────────────────────────────────────── The table is 1500px wide across 19 columns; scrolling right to Comments or Devices used to take the Name column off-screen, leaving anonymous cells. Actions / Source / ID / Name stay pinned to the left edge. Widths must be explicit — the `left` offsets are cumulative and there is no way to derive them from intrinsic sizing. Keep --fz* and the left values in sync if any of these four columns is resized. Scoped to `tr[data-id]:not(.row-expand-tr)` so it never applies to the date-separator rows, the skeleton rows, the "no records" row (all single colspan cells) or the expand panel, which does its own `sticky; left: 0`. */ #nhTable { --fz1: 70px; --fz2: 62px; --fz3: 74px; --fz4: 168px; } #nhTable thead th:nth-child(1), #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(1) { width: var(--fz1); min-width: var(--fz1); max-width: var(--fz1); left: 0; } #nhTable thead th:nth-child(2), #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(2) { width: var(--fz2); min-width: var(--fz2); max-width: var(--fz2); left: var(--fz1); } #nhTable thead th:nth-child(3), #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(3) { width: var(--fz3); min-width: var(--fz3); max-width: var(--fz3); left: calc(var(--fz1) + var(--fz2)); } #nhTable thead th:nth-child(4), #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(4) { width: var(--fz4); min-width: var(--fz4); max-width: var(--fz4); left: calc(var(--fz1) + var(--fz2) + var(--fz3)); } #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(-n+4) { position: sticky; z-index: 1; /* above the scrolling body cells */ } #nhTable thead th:nth-child(-n+4) { z-index: 4; /* above both the frozen body cells and the other sticky th (2) */ } /* Edge cue on the last frozen column. The header keeps its own inset teal rule. */ #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(4) { box-shadow: 6px 0 8px -6px rgba(0,0,0,0.18); } #nhTable thead th:nth-child(4) { box-shadow: inset 0 -2px 0 0 var(--brand-teal), 6px 0 8px -6px rgba(0,0,0,0.28); } body.dark #nhTable thead th:nth-child(4) { box-shadow: inset 0 -2px 0 0 var(--teal-400), 6px 0 8px -6px rgba(0,0,0,0.5); } /* Below ~1100px the frozen block would eat a third of the viewport — the table is more usable scrolling as one piece. */ @media (max-width: 1100px) { #nhTable thead th:nth-child(-n+4), #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(-n+4) { position: static; left: auto; /* must be reset too — otherwise `sticky; top:0` below re-pins them */ width: auto; min-width: 0; max-width: 180px; } #nhTable tbody tr[data-id]:not(.row-expand-tr) > td:nth-child(4) { box-shadow: none; } #nhTable thead th:nth-child(-n+4) { position: sticky; top: 0; left: auto; z-index: 2; } #nhTable thead th:nth-child(4) { box-shadow: inset 0 -2px 0 0 var(--brand-teal); } } thead th[data-sort-col] { padding-right: 20px; } thead th[data-sort-col]::after { content: '↕'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); opacity: 0.25; font-style: normal; } thead th[data-sort-col][data-sort-dir]::after { opacity: 0.75; animation: sortArrowIn 0.18s ease-out; } thead th[data-sort-col][data-sort-dir="asc"]::after { content: '↑'; } thead th[data-sort-col][data-sort-dir="desc"]::after { content: '↓'; } @keyframes sortArrowIn { from { opacity: 0; transform: translateY(calc(-50% - 4px)); } to { opacity: 0.75; transform: translateY(-50%); } } tbody tr { border-bottom: 1px solid #f0f0f0; transition: background 0.1s; } tbody tr:hover td { background: var(--row-hover); } tbody td { padding: 8px 10px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; background: var(--white); } tbody td.td-email { max-width: none; overflow: visible; min-width: 210px; } tbody td.devices-cell { max-width: none; overflow: visible; } tbody tr:last-child { border-bottom: none; } @keyframes rowSaveFlash { 0% { background: rgba(181,209,0,0.30) !important; } 100% { background: transparent; } } tr.row-saved td { animation: rowSaveFlash 900ms ease-out forwards; } body.dark tr.row-saved td { animation: rowSaveFlashDark 900ms ease-out forwards; } /* List-mode card flash — the palette's "show in table" reveal (_cmdkShowInDashboard). */ /* A ring, not the row's background fade — the card has its own background. */ .nh-card.row-saved { animation: cardRevealFlash 1200ms ease-out; } @keyframes cardRevealFlash { 0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-lime) 60%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } } @keyframes rowSaveFlashDark { 0% { background: rgba(181,209,0,0.20) !important; } 100% { background: transparent; } } @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skel-cell { border-radius: 5px; background: linear-gradient(90deg, #f0f2f5 25%, #e2e6ea 50%, #f0f2f5 75%); background-size: 600px 100%; animation: shimmer 1.3s infinite linear; } body.dark .skel-cell { background: linear-gradient(90deg, var(--graphite-700) 25%, #2a2b33 50%, var(--graphite-700) 75%); background-size: 600px 100%; } .skel-row td { padding: 0 !important; border-bottom: 1px solid #f0f0f0; } /* LEGEND PILLS */ .legend { display: flex; gap: 10px; align-items: center; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); } .legend-item.clickable { cursor: pointer; padding: 3px 7px; border-radius: 6px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; user-select: none; } .legend-item.clickable:hover { background: rgba(0,0,0,0.05); border-color: var(--gray-border); } .legend-item.legend-active.sf-legend { background: rgba(0,122,255,.08); border-color: var(--blue-400); color: var(--blue-700); } .legend-item.legend-active.man-legend { background: rgba(253,186,9,.12); border-color: var(--amber-300); color: var(--amber-800); } .legend-item.legend-active.gs-legend { background: rgba(34,197,94,.12); border-color: var(--green-400); color: #166534; } body.dark .legend-item.clickable:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } body.dark .legend-item.legend-active.sf-legend { background: rgba(96,165,250,.15); border-color: var(--blue-400); color: #93c5fd; } body.dark .legend-item.legend-active.man-legend { background: rgba(253,211,77,.12); border-color: var(--amber-300); color: var(--amber-300); } body.dark .legend-item.legend-active.gs-legend { background: rgba(74,222,128,.12); border-color: var(--green-400); color: var(--green-400); } .legend-check { width: 13px; height: 13px; pointer-events: none; cursor: pointer; accent-color: var(--blue-500); flex-shrink: 0; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; } .legend-dot.sf { background: var(--sf-bg); border: 1px solid var(--sf-border); } .legend-dot.man { background: #fffbeb; border: 1px solid var(--amber-300); } .legend-dot.gs { background: #f0fdf4; border: 1px solid var(--green-400); } /* BADGES */ .badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; } .badge-green { background: #d1fae5; color: var(--emerald-800); } .badge-red { background: var(--red-100); color: var(--red-800); } .badge-orange { background: #fef3c7; color: var(--amber-800); } .badge-blue { background: var(--blue-100); color: var(--blue-800); } .badge-presencial { background: rgba(181,209,0,0.18); color: var(--lime-800); } .badge-virtual { background: rgba(109,40,217,0.12); color: var(--purple-700); } .badge-cancel { background: rgba(220,38,38,0.12); color: var(--red-800); animation: cancelHirePulse 2.8s ease-in-out infinite; } @keyframes cancelHirePulse { 0%,100%{ opacity:1; box-shadow: none; } 50%{ opacity:0.65; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); } } body.dark .badge-presencial { background: rgba(181,209,0,0.18); color: var(--lime-300); } body.dark .badge-virtual { background: rgba(167,139,250,0.15); color: var(--purple-400); } body.dark .badge-cancel { background: rgba(248,113,113,0.15); color: var(--red-400); } .badge-purple { background: #ede9fe; color: var(--purple-800); } .badge-gray { background: var(--gray-100); color: var(--gray-600); } .badge-yellow { background: #fefce8; color: #713f12; } /* ROW ACTIONS */ .row-actions { display: flex; gap: 4px; } .row-btn { width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; border: none; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; background: rgba(0,169,157,0.10); color: var(--brand-teal); } .row-btn:hover { background: rgba(0,169,157,0.22); } .row-btn.edit { background: rgba(99,102,241,0.10); color: var(--indigo-500); } .row-btn.edit:hover { background: rgba(99,102,241,0.22); } body.dark .row-btn { background: rgba(0,169,157,0.14); color: var(--teal-300); } body.dark .row-btn:hover { background: rgba(0,169,157,0.26); } body.dark .row-btn.edit { background: rgba(99,102,241,0.14); color: #a5b4fc; } body.dark .row-btn.edit:hover { background: rgba(99,102,241,0.26); } /* Cross-team discussion button (left of Edit/View) — teal accent, promoted (border + glow) when the hire's thread has unread comments. Badge count mirrors .nh-chat-btn's .nh-chat-badge, kept live by _tableRefreshChatBadges. */ .row-btn.chat { background: rgba(0,169,157,0.10); color: var(--brand-teal); } .row-btn.chat:hover { background: rgba(0,169,157,0.22); } .row-btn.chat.has-unread { box-shadow: 0 0 0 2px rgba(0,169,157,0.35); background: rgba(0,169,157,0.18); } .row-btn.chat.has-unread:hover { background: rgba(0,169,157,0.28); } body.dark .row-btn.chat { background: rgba(0,169,157,0.14); color: var(--teal-300); } body.dark .row-btn.chat:hover { background: rgba(0,169,157,0.26); } body.dark .row-btn.chat.has-unread { box-shadow: 0 0 0 2px rgba(0,169,157,0.45); background: rgba(0,169,157,0.24); } .row-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; position: absolute; top: -5px; right: -5px; border-radius: 999px; background: var(--brand-red); color: #fff; font-size: var(--fs-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .row-chat-badge[hidden] { display: none; } /* People Doc status — green when Complete, red when Incomplete/undefined (overrides edit/view colors) */ .row-btn.pdoc-done { background: rgba(16,185,129,0.12); color: var(--emerald-500); } .row-btn.pdoc-done:hover { background: rgba(16,185,129,0.24); } .row-btn.pdoc-warn { background: rgba(239,68,68,0.12); color: var(--red); } .row-btn.pdoc-warn:hover { background: rgba(239,68,68,0.24); } body.dark .row-btn.pdoc-done { background: rgba(16,185,129,0.18); color: var(--emerald-400); } body.dark .row-btn.pdoc-done:hover { background: rgba(16,185,129,0.30); } body.dark .row-btn.pdoc-warn { background: rgba(239,68,68,0.18); color: var(--red-400); } body.dark .row-btn.pdoc-warn:hover { background: rgba(239,68,68,0.30); } /* Cross-team discussion button — left of Edit/View. Purple accent (matches .cal-discussion-btn) so it reads as a distinct action from edit/view; `has-unread` promotes it and reveals the count badge. */ .row-btn { position: relative; } .row-btn.chat { background: rgba(124,58,237,0.10); color: var(--brand-purple); } .row-btn.chat:hover { background: rgba(124,58,237,0.22); } .row-btn.chat.has-unread { background: rgba(124,58,237,0.16); box-shadow: 0 0 0 2px rgba(124,58,237,0.25); } .row-btn.chat.has-unread:hover { background: rgba(124,58,237,0.26); } body.dark .row-btn.chat { background: rgba(124,58,237,0.16); color: var(--purple-400); } body.dark .row-btn.chat:hover { background: rgba(124,58,237,0.28); } body.dark .row-btn.chat.has-unread { background: rgba(124,58,237,0.22); box-shadow: 0 0 0 2px rgba(168,85,247,0.30); } .row-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; position: absolute; top: -5px; right: -5px; border-radius: 999px; background: var(--brand-red); color: #fff; font-size: var(--fs-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .row-chat-badge[hidden] { display: none; } /* MODAL */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: var(--z-modal); align-items: center; justify-content: center; } .modal-overlay.active { display: flex; } /* Layered modals — opened on top of another open modal (see --z-* scale). */ .modal-overlay.modal-stacked { z-index: var(--z-modal-stacked); } .modal-overlay.modal-stacked-2 { z-index: var(--z-modal-stacked-2); } .modal-overlay.modal-top { z-index: var(--z-modal-top); } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-overlay.active > .modal, .modal-overlay.active > .modal-email, .modal-overlay.active > .modal-hero { animation: modalSlideIn 0.22s cubic-bezier(0.34,1.1,0.64,1); } .modal { background: var(--modal-bg); border-radius: 14px; width: 760px; max-width: 95vw; max-height: 90vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.25); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--gray-border); } .modal-title { font-size: var(--fs-lg); font-weight: 600; display:flex; align-items:center; } .modal-close { width: 28px; height: 28px; border-radius: 6px; border: none; background: var(--gray-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; } .modal-close:hover { background: var(--red-100); color: var(--red); }.modal-body { padding: 20px 22px; } /* CANDIDATE MODAL HERO HEADER */ .modal-hero-header { background: linear-gradient(135deg,var(--brand-lime) 0%,#78C434 33%,#3CB869 67%,var(--brand-teal) 100%); padding: 20px 22px; display: flex; align-items: center; gap: 14px; border-radius: 0; position: relative; } .modal-hero-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(to right,var(--brand-lime),var(--brand-teal),var(--brand-lime),var(--brand-teal),var(--brand-lime)); background-size: 200% 100%; animation: green-flow 5s ease-in-out infinite alternate; pointer-events: none; } body.dark .modal-hero-header { background: linear-gradient(135deg,var(--lime-700) 0%,#518616 33%,#287C43 67%,var(--teal-800) 100%); } .modal-hero-avatar { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.22); border:2.5px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg); font-weight:700; color:#fff; flex-shrink:0; letter-spacing:-0.5px; } .modal-hero-info { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; } .modal-hero-name { font-size:var(--fs-lg); font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .modal-hero-sub { font-size:var(--fs-sm); color:rgba(255,255,255,0.82); } .modal-hero-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; } .modal-hero-btn { height:28px; padding:0 10px; border-radius:7px; border:1px solid rgba(255,255,255,0.35); background:rgba(255,255,255,0.15); color:#fff; font-size:var(--fs-xs); font-weight:600; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background 0.15s; } .modal-hero-btn:hover { background:rgba(255,255,255,0.28); } .modal-hero-btn.danger { background:rgba(220,38,38,0.22); border-color:rgba(255,150,150,0.4); } .modal-hero-btn.danger:hover { background:rgba(220,38,38,0.38); } .modal-hero-close { width:28px; height:28px; border-radius:7px; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.9); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; flex-shrink:0; } .modal-hero-close:hover { background:rgba(220,38,38,0.35); border-color:rgba(255,150,150,0.4); } /* Automation Center hero buttons match the 44px icon placeholder height */ #emailModal .modal-hero-btn { height:44px; } #emailModal .modal-hero-close { height:44px; width:44px; } /* Subtle shake for the icon glyph inside every modal hero header. The surrounding rounded box stays still — only the inner SVG/img wiggles. */ @keyframes modal-hero-icon-shake { 0%, 60%, 100% { transform: rotate(0deg); } 65% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } 85% { transform: rotate(-1deg); } } .modal-hero-header > div:has(> svg) > svg, .modal-hero-avatar { animation: modal-hero-icon-shake 3s ease-in-out infinite; transform-origin: 50% 50%; } /* FORM SECTION CARDS */ .form-section { border-radius:12px; overflow:hidden; border:1px solid var(--gray-border); margin-bottom:14px; box-shadow:0 2px 8px rgba(0,0,0,0.05); } .form-section-hdr { padding:11px 16px; display:flex; align-items:center; gap:10px; } .form-section-hdr.sf-hdr { background:linear-gradient(135deg,var(--brand-teal) 0%,#00706a 100%); } .form-section-hdr.manual-hdr { background:linear-gradient(135deg,var(--indigo-600) 0%,#3730A3 100%); } .form-section-hdr-icon { width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .form-section-hdr-title { font-size:var(--fs-sm); font-weight:700; color:#fff; } .form-section-hdr-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.78); margin-top:1px; } .form-section-body { padding:14px 16px; background:var(--modal-bg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-field { display: flex; flex-direction: column; gap: 5px; } .form-field.full { grid-column: 1 / -1; } .form-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; } .form-label .required { color: var(--red); } .form-label .owner-tag { font-size: var(--fs-xs); padding: 1px 6px; border-radius: 8px; margin-left: 4px; font-weight: 500; text-transform: none; letter-spacing: 0; } .owner-tag.recruiting { background: var(--blue-100); color: var(--blue-800); } .owner-tag.pj { background: #d1fae5; color: var(--emerald-800); } .owner-tag.tcbp { background: #ede9fe; color: var(--purple-800); } .owner-tag.logistics { background: #fef3c7; color: var(--amber-800); } .owner-tag.servicedesk { background: var(--red-100); color: var(--red-800); } .owner-tag.all { background: var(--gray-100); color: var(--gray-600); } .form-control { padding: 8px 12px; border: 1px solid var(--field-border); border-radius: 7px; font-size: var(--fs-md); font-family: inherit; background: var(--white); color: var(--text); transition: border-color 0.15s; } .form-control:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(0,120,111,0.28); } select.form-control { background-image: var(--sel-arrow); background-position: right 10px center; padding-right: 32px; } /* SF fields are visually locked */ .form-control.sf-locked { background: var(--sf-bg); border-color: var(--sf-border); color: var(--sf-text); cursor: not-allowed; font-weight: 500; } .sf-locked-note { font-size: var(--fs-xs); color: var(--sf-text); display: flex; align-items: center; gap: 4px; margin-top: 2px; opacity: 0.85; } /* "Manual" tag — SF field that was manually overridden (differs from SSFF, not synced back) */ .form-label .sf-manual-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 999px; vertical-align: middle; color: var(--amber-700); background: color-mix(in srgb, var(--amber-600) 15%, transparent); border: 1px solid color-mix(in srgb, var(--amber-600) 40%, transparent); } body.dark .form-label .sf-manual-tag { color: var(--amber-300); background: color-mix(in srgb, var(--amber-600) 22%, transparent); border-color: color-mix(in srgb, var(--amber-600) 45%, transparent); } textarea.form-control { min-height: 70px; resize: vertical; } /* NH ADDRESS TRIGGER BUTTON */ .addr-trigger-btn { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 380px; padding: 9px 13px; background: var(--gray-bg); border: 1.5px dashed var(--gray-border); border-radius: 8px; cursor: pointer; color: var(--text-muted); font-size: var(--fs-md); text-align: left; transition: border-color 0.15s, background 0.15s; } .addr-trigger-btn:hover:not(:disabled) { border-color: var(--green); background: rgba(0,166,81,0.06); color: var(--text); } .addr-trigger-btn:disabled { opacity: 0.5; cursor: not-allowed; } .addr-trigger-btn .addr-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .addr-trigger-btn .addr-trigger-chevron { flex-shrink: 0; color: var(--text-muted); } .addr-trigger-btn.has-data { border-style: solid; border-color: var(--brand-purple); color: var(--text); background: rgba(124,58,237,0.06); } .addr-trigger-btn.has-data .addr-trigger-chevron { color: var(--brand-purple); }.modal-footer { padding: 14px 22px; border-top: 1px solid var(--gray-border); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .modal-footer-note { font-size: var(--fs-xs); color: var(--text-muted); } /* ── SHARED CONFIRM MODAL (_confirmDialog) ────────────────────────────── Replaces native confirm(). Sits above every other modal so it can be raised from inside one (bulk bar, data modal). `.is-danger` swaps the accent to red for destructive actions. */ .modal-overlay.app-confirm-overlay { z-index: var(--z-confirm); } .app-confirm-modal { width: 440px; } .app-confirm-title { gap: 8px; } .app-confirm-overlay.is-danger .app-confirm-title { color: var(--danger-text); } .app-confirm-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .app-confirm-msg { font-size: var(--fs-md); line-height: 1.55; color: var(--text); white-space: pre-line; } .app-confirm-list { margin: 0; padding: 10px 14px 10px 30px; border-radius: 10px; background: var(--gray-bg); border: 1px solid var(--gray-border); font-size: var(--fs-sm); line-height: 1.7; color: var(--text); } .app-confirm-overlay.is-danger .app-confirm-list { background: var(--danger-bg); border-color: var(--danger-border); } .app-confirm-type { display: flex; flex-direction: column; gap: 6px; } .app-confirm-type-label { font-size: var(--fs-sm); color: var(--text-muted); } .app-confirm-type-label strong { color: var(--text); } .app-confirm-type-input { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--field-border); background: var(--white); color: var(--text); font-size: var(--fs-md); font-variant-numeric: tabular-nums; } .app-confirm-footer { justify-content: flex-end; gap: 10px; } .app-confirm-ok { background: #000; color: #fff; border-color: #000; } .app-confirm-ok:hover { background: var(--gray-800); } body.dark .app-confirm-ok { background: var(--green); color: #000; border-color: var(--green); } .app-confirm-overlay.is-danger .app-confirm-ok, body.dark .app-confirm-overlay.is-danger .app-confirm-ok { background: var(--brand-red); color: #fff; border-color: var(--brand-red); } .app-confirm-overlay.is-danger .app-confirm-ok:hover { background: var(--red-700); } .app-confirm-ok:disabled { opacity: 0.45; cursor: not-allowed; } .app-confirm-body [hidden] { display: none; } /* .app-confirm-type sets display:flex */ /* USER MANAGEMENT MODAL */ .user-cards-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .user-card { border:1px solid var(--gray-border); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.06); } .user-card-header { height:38px; position:relative; display:flex; justify-content:center; flex-shrink:0; } .user-card-avatar { width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); font-weight:700; color:#fff; position:absolute; bottom:-20px; box-shadow:0 2px 8px rgba(0,0,0,0.18); } .user-card-body { padding:26px 14px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; } .user-card-name { font-size:var(--fs-md); font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .user-card-email { font-size:var(--fs-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .user-card-office-row { display:flex; align-items:center; gap:5px; margin:4px 0 2px; max-width:100%; width:100%; justify-content:center; } .user-card-office { display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:3px 8px; border-radius:10px; background:rgba(0,169,157,0.10); border:1px solid rgba(0,169,157,0.25); color:var(--teal-700); font-size:var(--fs-xs); font-weight:600; min-width:0; } .user-card-office span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user-card-office--empty { background:rgba(148,163,184,0.10); border-color:rgba(148,163,184,0.30); color:var(--text-muted); font-style:italic; } .user-card-office-edit { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:22px; height:22px; border-radius:6px; background:rgba(0,169,157,0.10); border:1px solid rgba(0,169,157,0.30); color:var(--teal-700); cursor:pointer; padding:0; transition:background .15s, border-color .15s, color .15s; } .user-card-office-edit:hover { background:var(--brand-teal); border-color:var(--brand-teal); color:#fff; } .user-card-office-edit--cancel { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.30); color:var(--brand-red); } .user-card-office-edit--cancel:hover { background:var(--brand-red); border-color:var(--brand-red); color:#fff; } .add-user-row { display:grid; grid-template-columns:1fr 1fr 150px 180px auto; gap:10px; align-items:end; margin-top:20px; padding-top:18px; border-top:1px solid var(--gray-border); min-width:0; } /* ── USER PRESENCE + SESSION HISTORY (super_admin only) ── */ /* Rendered next to the "Last active" text, not overlaid on .user-card-avatar: _hydrateAvatarPhotos()/_setAvatarImg() clear the avatar's innerHTML when a real photo loads, which would silently wipe a dot nested inside it. */ .user-presence-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--slate-400); margin-right:4px; vertical-align:middle; } .user-presence-dot.is-online { background:#22c55e; } .user-card-lastactive { font-size:var(--fs-xs); color:var(--text-muted); margin:1px 0 2px; display:flex; align-items:center; justify-content:center; } .session-history-row { display:flex; flex-direction:column; gap:2px; padding:10px 4px; border-bottom:1px solid var(--gray-border); } .session-history-row:last-child { border-bottom:none; } .session-history-time { font-size:var(--fs-md); font-weight:600; color:var(--text); } .session-history-status { font-size:var(--fs-sm); color:var(--text-muted); } .session-history-agent { font-size:var(--fs-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── PERMISSION OVERRIDES (per-user granular flags) ── */ /* "Permissions" button on a user card; purple accent when the user has active overrides. */ .js-perm-override { color:var(--purple-700); border-color:rgba(124,58,237,0.35); } .js-perm-override:hover { background:rgba(124,58,237,0.08); } .js-perm-override.has-overrides { color:#fff; background:var(--brand-purple); border-color:var(--brand-purple); font-weight:600; } .js-perm-override.has-overrides:hover { background:var(--purple-700); border-color:var(--purple-700); } .perm-ov-toggles { display:flex; flex-direction:column; gap:8px; } .perm-ov-row { display:flex; align-items:center; gap:14px; padding:11px 13px; border:1px solid var(--gray-border); border-radius:10px; background:var(--gray-bg); cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; } .perm-ov-row:hover { border-color:var(--focus-ring); } /* A toggle that deviates from the base role: purple left-accent + tint. */ .perm-ov-row.is-dev { border-color:rgba(124,58,237,0.55); background:rgba(124,58,237,0.07); box-shadow:inset 3px 0 0 var(--brand-purple); } .perm-ov-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .perm-ov-label { display:flex; align-items:center; gap:7px; font-size:var(--fs-md); font-weight:600; color:var(--text); } .perm-ov-desc { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.45; } /* Small dot marking a server-enforced flag. */ .perm-ov-srv { color:var(--brand-teal); font-size:var(--fs-lg); line-height:0; font-weight:900; } /* "changed" pill on a deviating row + the inline word in the modal hint. */ .perm-ov-dev-tag { font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--purple-700); background:rgba(124,58,237,0.14); border:1px solid rgba(124,58,237,0.30); border-radius:6px; padding:1px 6px; } .perm-ov-dev-inline { color:var(--purple-700); font-weight:600; background:rgba(124,58,237,0.12); border-radius:4px; padding:0 4px; } /* Toggle switch */ .perm-ov-switch { position:relative; flex-shrink:0; width:40px; height:22px; } .perm-ov-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; } .perm-ov-slider { position:absolute; inset:0; background:var(--field-border); border-radius:999px; transition:background .18s; } .perm-ov-slider::before { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.3); transition:transform .18s; } .perm-ov-switch input:checked + .perm-ov-slider { background:var(--brand-teal); } .perm-ov-switch input:checked + .perm-ov-slider::before { transform:translateX(18px); } .perm-ov-switch input:focus-visible + .perm-ov-slider { outline:2px solid var(--focus-ring); outline-offset:2px; } /* On a deviating row the "on" switch reads purple to reinforce the custom state. */ .perm-ov-row.is-dev .perm-ov-switch input:checked + .perm-ov-slider { background:var(--brand-purple); } /* ── OFFICE SEARCH PICKER ── */ .office-picker { position:relative; } .office-picker-inputwrap { position:relative; display:flex; align-items:center; } .office-picker-input { flex:1; padding-right:26px !important; } .office-picker-clear { position:absolute; right:7px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:var(--fs-lg); line-height:1; color:var(--text-muted); padding:0 2px; } .office-picker-clear:hover { color:var(--text); } /* Dropdown: fixed position so it escapes any overflow:hidden ancestor; min-width matches the input, but expands to fit long office names */ /* ── STYLED SELECT MENU ── The themed listbox that replaces the browser's native , so the caret keeps coming from .form-control / .filter-select. Only the popup is ours. */ /* max-height is set INLINE by _positionDropdown, which clamps it to the space actually available above or below the input; the 260px here is only the starting cap for the first measure. */ .office-picker-dropdown { position:fixed; background:var(--modal-bg, #fff); border:1px solid var(--gray-border); border-radius:8px; min-width:280px; max-height:260px; overflow-y:auto; z-index: var(--z-select-menu); box-shadow:0 8px 24px rgba(0,0,0,.18); } .office-picker-country { padding:5px 12px 2px; font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; background:var(--modal-bg,#fff); position:sticky; top:0; border-bottom:1px solid var(--gray-border); } .office-picker-option { padding:6px 14px; cursor:pointer; font-size:var(--fs-sm); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .office-picker-option:hover, .office-picker-option.focused { background:var(--slate-100); } .office-picker-option.selected { background:rgba(181,209,0,.15); font-weight:600; } .office-picker-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:var(--fs-sm); font-style:italic; } body.dark .office-picker-option:hover, body.dark .office-picker-option.focused { background:rgba(255,255,255,0.08); } body.dark .office-picker-option { color:var(--text); } /* ROLE GUIDE MODAL */ .role-guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .role-card { border:1px solid var(--gray-border); border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.07); } .role-card-header { padding:14px 16px; display:flex; align-items:center; gap:10px; } .role-card-header-icon { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; } .role-card-header-name { font-size:var(--fs-md); font-weight:700; color:#fff; letter-spacing:0.1px; } .rgh-admin { background: linear-gradient(135deg,var(--lime-400) 0%,var(--lime-700) 100%); } .rgh-recruiter { background: linear-gradient(135deg,var(--blue-400) 0%,var(--blue-700) 100%); } .rgh-people { background: linear-gradient(135deg,#C084FC 0%,var(--purple-700) 100%); } .rgh-tcbp { background: linear-gradient(135deg,var(--emerald-400) 0%,var(--emerald-700) 100%); } .rgh-servicedesk{ background: linear-gradient(135deg,var(--amber-400) 0%,var(--amber-700) 100%); } .rgh-workplace { background: linear-gradient(135deg,var(--slate-400) 0%,var(--slate-600) 100%); } .rgh-logistics { background: linear-gradient(135deg,var(--orange-500) 0%,var(--orange-600) 100%); } .role-card-body { padding:12px 16px 14px; } .role-card ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; } .role-card li { font-size:var(--fs-sm); display:flex; align-items:flex-start; gap:7px; line-height:1.45; color:var(--text); } .ri { flex-shrink:0; margin-top:1px; } .ri-yes { color:var(--emerald-600); } .ri-no { color:var(--gray-400); } /* INLINE STATUS SELECT */ .inline-status-select { font-size:var(--fs-xs); padding:2px 22px 2px 6px; border-radius:10px; border:1px solid var(--gray-border); background:var(--card-bg); color:var(--text-main); font-weight:500; max-width:130px; background-position:right 5px center; } .inline-status-select:hover { border-color:var(--teal); } .inline-status-select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,169,157,0.18); } body.dark .inline-status-select { background-color:var(--card-bg); border-color:rgba(255,255,255,0.2); } /* PREVIEW BANNER */ .preview-banner { display:none; position:fixed; top:0; left:0; right:0; z-index: var(--z-system); background:var(--orange); color:#1c1917; font-size:var(--fs-md); font-weight:600; padding:8px 16px; letter-spacing:0.2px; align-items:center; justify-content:center; gap:12px; box-shadow:0 2px 8px rgba(0,0,0,0.25); } .preview-banner.active { display:flex; } body.dark .preview-banner { background:var(--amber-700); color:#fff; } .preview-banner .exit-btn { font-size:var(--fs-xs); padding:3px 10px; border:1px solid #1c1917; border-radius:6px; background:transparent; color:#1c1917; cursor:pointer; font-weight:600; } body.dark .preview-banner .exit-btn { border-color:#fff; color:#fff; } .preview-select-wrap { display:none; align-items:center; gap:6px; } .preview-select-wrap label { font-size:var(--fs-sm); color:rgba(255,255,255,0.65); white-space:nowrap; } .preview-select-wrap select { font-size:var(--fs-sm); height:30px; padding:0 28px 0 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.25); background-color:rgba(255,255,255,0.1); color:#fff; box-sizing:border-box; background-position:right 7px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .preview-select-wrap select:hover { border-color:rgba(255,255,255,0.5); } .preview-select-wrap select option { background:#1e1e2e; color:#fff; } /* EMAIL MODAL */ .email-preview { background: var(--preview-bg); border: 1px solid var(--gray-border); border-radius: 8px; padding: 16px; margin: 14px 0; color: var(--gray-900); } .email-field { margin-bottom: 8px; font-size: var(--fs-md); color: var(--gray-900); } .email-field strong { display: inline-block; min-width: 60px; color: var(--gray-500); font-size: var(--fs-sm); } .email-body { background: var(--email-body-bg); border: 1px solid var(--gray-border); border-radius: 6px; padding: 14px; margin-top: 10px; color: var(--gray-900); } .email-body { overflow-x: auto; } .email-body table { width: 100%; border-collapse: collapse; min-width: 0; } .email-body th, .email-body td { padding: 6px 10px; border: 1px solid var(--gray-200); font-size: var(--fs-sm); text-align: left; white-space: nowrap; } .email-body th { background: var(--gray-100); font-weight: 600; } /* Email-preview tables must not pick up the main hire-table's `tbody td { background: var(--white) }` rule — in dark mode that paints rows var(--gray-800) and hides the hardcoded dark text. */ .email-body tbody td { background: transparent; } .email-header-block { border-left: 4px solid var(--brand-lime); padding-left: 12px; margin-bottom: 14px; } .email-header-block h2 { font-size: var(--fs-lg); color: var(--green-dark); margin-bottom: 2px; } .email-header-block p { font-size: var(--fs-sm); color: var(--gray-500); } /* TABS */ .tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--brand-lime); margin-bottom: 16px; } .tab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; } .tab.active { color: var(--man-text); border-bottom-color: var(--brand-lime); } .tab:hover { color: var(--man-text); } .tab-content { display: none; } .tab-content.active { display: block; } /* ── EMAIL WIZARD STEPPER ──────────────────────────────── */ .email-stepper { display: flex; align-items: flex-start; margin-bottom: 20px; } .estep { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; cursor: default; } .estep.done { cursor: pointer; } .estep-circle { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gray-300); background: var(--gray-50); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: var(--gray-400); transition: all 0.25s; flex-shrink: 0; } .estep-label { font-size: var(--fs-xs); font-weight: 600; color: var(--gray-400); transition: color 0.25s; white-space: nowrap; text-align: center; } .estep.done .estep-circle { border-color: var(--brand-lime); background: var(--brand-lime); color: #fff; } .estep.done .estep-label { color: var(--gray-700); } .estep.active-lime .estep-circle { border-color: var(--brand-lime); background: var(--brand-lime); color: #000; box-shadow: 0 0 0 3px rgba(181,209,0,0.20); } .estep.active-lime .estep-label { color: var(--lime-800); font-weight: 700; } .estep.active-red .estep-circle { border-color: var(--brand-red); background: var(--brand-red); color: #fff; box-shadow: 0 0 0 3px rgba(220,38,38,0.20); } .estep.active-red .estep-label { color: var(--red-800); font-weight: 700; } /* connector: the element IS the line; ::after is the centred arrowhead */ .estep-connector { flex: 0 0 48px; align-self: flex-start; margin-top: 11px; /* = radius of 24px circle, centres line on circle */ height: 2px; background: var(--gray-200); position: relative; transition: background 0.25s; } .estep-connector::after { content: '▶'; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); color: var(--gray-300); line-height: 1; transition: color 0.25s; } .estep-connector.done { background: var(--brand-lime); } .estep-connector.done::after { color: var(--brand-lime); } .estep-connector.done-red { background: var(--brand-red); } .estep-connector.done-red::after { color: var(--brand-red); } /* ── TOAST ────────────────────────────────────────────────────────────── Stacked cards, newest on top. Every toast carries its accent in `--tc`, and the tint, border, icon and progress bar all derive from it via color-mix — so a new variant is one `--tc` line in the variant block below, never a re-skin of the card. Auto-dismiss is 10s (_TOAST_TTL_MS in the JS), paused on hover/focus, and there is always a close button — see showToast(). */ .toast-stack { position: fixed; /* Below the top bar, not over it: at top:18px the cards covered the Automation Center / settings buttons and swallowed clicks on them while a toast was up. */ top: calc(var(--topbar-h) + 10px); right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: var(--z-toast); /* The container spans the corner but must not eat clicks between cards. */ pointer-events: none; max-width: min(400px, calc(100vw - 40px)); } .toast { --tc: var(--brand-lime); position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 14px; border-radius: 15px; overflow: hidden; pointer-events: auto; color: var(--text); /* Accent wash fading left→right over the panel colour, as in the design reference. color-mix keeps it correct in both themes. */ background: linear-gradient(100deg, color-mix(in srgb, var(--tc) 16%, var(--modal-bg)) 0%, color-mix(in srgb, var(--tc) 5%, var(--modal-bg)) 45%, var(--modal-bg) 100%); border: 1px solid color-mix(in srgb, var(--tc) 26%, var(--gray-border)); box-shadow: 0 14px 40px -8px rgba(0,0,0,0.30), 0 3px 10px rgba(0,0,0,0.12); animation: toast-in .34s cubic-bezier(0.21,1.12,0.4,1) both; } .toast.is-leaving { animation: toast-out .2s ease forwards; } /* Re-firing the same message bumps the existing card instead of stacking a duplicate (see showToast) — this is the acknowledgement. */ .toast.is-bumped { animation: toast-bump .3s ease; } .toast-ic { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: var(--tc); /* Halo ring, the reference's icon treatment. */ box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc) 16%, transparent); } .toast-ic svg { display: block; } .toast-body { flex: 1; min-width: 0; padding-top: 1px; } .toast-title { font-size: var(--fs-base); font-weight: 700; line-height: 1.35; letter-spacing: -0.1px; color: var(--text); overflow-wrap: anywhere; } .toast-desc { margin-top: 2px; font-size: var(--fs-md); font-weight: 500; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; } /* Action slot — one button per card (currently "Undo" on bulk edits and deletes). Uses the card's own accent so it reads as part of the toast rather than an unrelated CTA. */ .toast-action { flex-shrink: 0; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--tc) 12%, transparent); color: var(--tc); font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; } .toast-action:hover { background: color-mix(in srgb, var(--tc) 22%, transparent); border-color: var(--tc); } .toast-action:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; } .toast-x { flex-shrink: 0; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .toast-x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } .toast-x:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; } /* Time-remaining bar — the visible half of the 10s auto-dismiss. */ .toast-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left center; background: color-mix(in srgb, var(--tc) 75%, transparent); animation: toast-prog linear forwards; } .toast.is-paused .toast-prog { animation-play-state: paused; } /* Variants: accent only. */ .toast.toast-warn { --tc: var(--orange); } .toast.toast-err { --tc: var(--brand-red); } .toast.toast-info { --tc: var(--blue-500); } .toast.toast-purple { --tc: var(--brand-purple); } .toast.toast-teal { --tc: var(--brand-teal); } @keyframes toast-in { from { opacity: 0; transform: translate3d(24px, -6px, 0) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes toast-out { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(24px,0,0) scale(.97); } } @keyframes toast-bump { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } } @keyframes toast-prog { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.is-leaving { animation: none; opacity: 0; } .toast.is-bumped { animation: none; } /* Keep the bar as a static full-width rule rather than a moving element. */ .toast-prog { animation: none; } } @media (max-width: 520px) { .toast-stack { top: calc(var(--topbar-h) + 8px); right: 12px; left: 12px; max-width: none; } } /* PERM BADGE */ .perm-badge { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 10px; margin-left: 6px; font-weight: 500; } .perm-view { background: var(--blue-100); color: var(--blue-800); } .perm-edit { background: #d1fae5; color: var(--emerald-800); } .perm-admin { background: #1B2059; color: var(--brand-lime); } /* TOPBAR BUTTONS */ .tb-btn { width: 32px; height: 32px; flex-shrink: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid rgba(181,209,0,0.3); background: rgba(181,209,0,0.06); color: rgba(255,255,255,0.72); cursor: pointer; transition: all 0.15s; font-family: inherit; position: relative; } .tb-btn:hover { background: rgba(181,209,0,0.18); border-color: rgba(181,209,0,0.6); color: var(--brand-lime); } .tb-btn:disabled { opacity: 0.5; cursor: not-allowed; } .tb-btn.spinning svg { animation: tb-spin 0.75s linear infinite; } @keyframes tb-spin { to { transform: rotate(360deg); } } /* Search (command palette) — highlighted so it reads as the primary entry point. A slow lime glow pulse on box-shadow only: no geometry change, and ::before/::after stay free for the shared data-tip tooltip. Pauses on hover/focus. */ #tbCmdPalette { border-color: rgba(181,209,0,0.55); background: rgba(181,209,0,0.12); color: var(--brand-lime); animation: tb-search-glow 2.8s ease-in-out infinite; } #tbCmdPalette:hover, #tbCmdPalette:focus-visible { animation-play-state: paused; } @keyframes tb-search-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(181,209,0,0); } 50% { box-shadow: 0 0 0 3px rgba(181,209,0,0.18), 0 0 10px rgba(181,209,0,0.35); } } @media (prefers-reduced-motion: reduce) { #tbCmdPalette { animation: none; box-shadow: 0 0 0 2px rgba(181,209,0,0.18); } } /* Sync modal — Sync Now progress animation */ #syncNowBtn.spinning svg { animation: tb-spin 0.75s linear infinite; } #syncNowBtn:disabled { opacity: 0.92; cursor: progress; } .sync-now-progress { position: relative; width: 100%; height: 3px; background: rgba(52,168,83,0.14); border-radius: 2px; overflow: hidden; } .sync-now-progress-bar { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #34A853, transparent); animation: sync-progress-slide 1.1s ease-in-out infinite; } @keyframes sync-progress-slide { 0% { left: -40%; } 100% { left: 100%; } } /* Hover tooltips */ .tb-btn[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.94); background: rgba(10,16,44,0.97); color: rgba(255,255,255,0.92); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.13s, transform 0.13s; z-index: var(--z-tooltip); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .tb-btn[data-tip]::before { content: ''; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: rgba(10,16,44,0.97); pointer-events: none; opacity: 0; transition: opacity 0.13s; z-index: var(--z-tooltip); } .tb-btn[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } .tb-btn[data-tip]:hover::before { opacity: 1; } /* Same tooltip for the Dashboard List card footer buttons (Chat, Edit/View), rendered above the icon like the topbar buttons' tooltips. The card must not clip the ::after (overflow:hidden on .nh-card); position:relative comes from the button. */ .nh-card-edit-btn[data-tip] { position: relative; } .nh-card-edit-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.94); background: rgba(10,16,44,0.97); color: rgba(255,255,255,0.92); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.13s, transform 0.13s; z-index: var(--z-tooltip); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .nh-card-edit-btn[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: rgba(10,16,44,0.97); pointer-events: none; opacity: 0; transition: opacity 0.13s; z-index: var(--z-tooltip); } .nh-card-edit-btn[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) scale(1); } .nh-card-edit-btn[data-tip]:hover::before { opacity: 1; } /* Dark toggle icons — CSS-driven */ .tb-btn .icon-sun { display: none; } .tb-btn .icon-moon { display: block; } /* ── RESPONSIVE TOPBAR ─────────────────────────────────────────── */ .tab-label { white-space: nowrap; } .tb-btn-label { display: inline; font-size: var(--fs-sm); white-space: nowrap; } /* All secondary actions live behind the gear (⚙) button at every width. */ .tb-secondary { display: none; position: absolute; top: 56px; right: 8px; background: #1B2059; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; padding: 6px; flex-direction: column; align-items: stretch; gap: 2px; z-index: var(--z-dropdown); min-width: 210px; box-shadow: 0 8px 28px rgba(0,0,0,0.45); } .tb-secondary.open { display: flex; } .tb-secondary .tb-btn { width: 100%; justify-content: flex-start; gap: 9px; height: 36px; padding: 0 12px; border-radius: 7px; } .tb-secondary .tb-btn::after, .tb-secondary .tb-btn::before { display: none !important; } .tb-secondary-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 4px 4px; } .tb-secondary .preview-select-wrap { display: flex !important; flex-direction: column; align-items: stretch; gap: 5px; padding: 6px 10px 4px; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2px; } .tb-secondary .preview-select-wrap label { color: rgba(255,255,255,0.55); font-size:var(--fs-xs); } .tb-secondary .preview-select-wrap select { width: 100%; } /* 1 100 px — icons-only nav tabs, hide sync status text */ @media (max-width: 1100px) { .tab-label { display: none; } .topbar-nav-tab { padding: 0 9px; min-width: 34px; justify-content: center; } } body.dark .tb-btn .icon-sun { display: block; } body.dark .tb-btn .icon-moon { display: none; } /* ── GOOGLE AUTH SCREEN ─────────────────────────────────────── */ /* Colores fijos — independientes del dark mode para que siempre sea legible */ #auth-screen { position: fixed; inset: 0; z-index: var(--z-auth); background: rgba(10,14,26,0.92); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; } .auth-box { background: #ffffff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 44px 40px; text-align: center; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .auth-brand { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: 2px; color: var(--gray-900); margin-bottom: 2px; } .auth-brand span { color: var(--brand-lime); } .auth-sub { font-size: var(--fs-xs); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 24px; } .auth-box p { font-size: var(--fs-md); color: var(--gray-500); margin-bottom: 28px; line-height: 1.55; } .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #3c4043; font-size: var(--fs-base); font-weight: 600; border: 1px solid #dadce0; border-radius: 8px; padding: 11px 20px; cursor: pointer; width: 100%; transition: box-shadow 0.2s; font-family: inherit; } .btn-google:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .btn-google:disabled { opacity: 0.6; cursor: not-allowed; } .auth-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(181,209,0,0.22); border-top-color: var(--brand-lime); animation: auth-spin 0.75s linear infinite; margin: 18px auto 6px; } @keyframes auth-spin { to { transform: rotate(360deg); } } #auth-msg { margin-top: 8px; font-size: var(--fs-md); color: var(--gray-500); min-height: 18px; } .auth-denied-wrap { display: none; margin-top: 14px; } .auth-denied-wrap .denied-title { color: var(--brand-red); font-size: var(--fs-md); font-weight: 600; } .auth-denied-wrap .denied-email { font-size: var(--fs-sm); color: var(--gray-500); margin: 4px 0 6px; } .auth-denied-wrap .denied-hint { font-size: var(--fs-xs); color: var(--gray-400); line-height: 1.4; } .btn-signout-auth { margin-top: 14px; background: transparent; border: 1px solid var(--gray-300); color: var(--gray-500); font-size: var(--fs-sm); border-radius: 6px; padding: 7px 18px; cursor: pointer; transition: border-color .2s, color .2s; font-family: inherit; } .btn-signout-auth:hover { border-color: var(--brand-red); color: var(--brand-red); } /* ── AUDIT LOG ───────────────────────────────────────────────────────────── */ .audit-timeline { display: flex; flex-direction: column; gap: 0; } .audit-entry { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .audit-entry:last-child { border-bottom: none; } .audit-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .audit-dot.create { background: var(--green); } .audit-dot.edit { background: var(--blue-500); } .audit-dot.import { background: var(--emerald-500); } .audit-dot.system { background: var(--gray-400); } .audit-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; } .audit-user { font-weight: 600; color: var(--text-main); } .audit-changes { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .audit-change { font-size: var(--fs-sm); color: var(--text-main); } .audit-change .field-label { font-weight: 600; } .audit-change .from-val { color: var(--brand-red); text-decoration: line-through; } .audit-change .to-val { color: var(--green-600); } .audit-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: var(--fs-md); } /* ── KNOWLEDGE BASE EDITOR ───────────────────────────────────────────────── */ .kb-doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--gray-border); border-radius: 10px; background: var(--gray-bg); transition: border-color 0.15s, box-shadow 0.15s; } .kb-doc-row:hover { border-color: var(--brand-purple); box-shadow: 0 2px 10px rgba(124,58,237,0.10); } .kb-doc-row .kb-doc-title { font-size: var(--fs-md); font-weight: 700; color: var(--text); margin-bottom: 2px; word-break: break-word; } .kb-doc-row .kb-doc-meta { font-size: var(--fs-xs); color: var(--text-muted); } .kb-doc-row .kb-doc-body { flex: 1; min-width: 0; } .kb-doc-row .kb-doc-actions { display: flex; gap: 6px; flex-shrink: 0; } .kb-doc-row .kb-doc-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--gray-border); background: var(--white); cursor: pointer; color: var(--text-muted); transition: color 0.15s, border-color 0.15s, background 0.15s; } .kb-doc-row .kb-doc-btn:hover { color: var(--brand-purple); border-color: var(--brand-purple); background: rgba(124,58,237,0.06); } .kb-doc-row .kb-doc-btn.danger:hover { color: var(--brand-red); border-color: var(--brand-red); background: rgba(220,38,38,0.06); } .kb-empty-state { text-align: center; padding: 28px 16px; color: var(--text-muted); font-size: var(--fs-md); border: 1.5px dashed var(--gray-border); border-radius: 10px; background: var(--gray-bg); } /* ── PRINT / PDF ONE-PAGER ───────────────────────────────────────────────── */ #printArea { display: none; } @media print { /* ── RECORD / HIRE PDF ─────────────────────────────────────────── */ html, body { background: #fff !important; } body:not(.printing-stats) > *:not(#printArea) { display: none !important; } body:not(.printing-stats) #printArea { display: block !important; font-family: 'Helvetica Neue', Arial, sans-serif; color: #111; background: #fff; padding: 0; width: 100%; } .print-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--brand-lime); padding-bottom: 14px; margin-bottom: 18px; } .print-logo { display: flex; align-items: center; } .print-logo img { height: 34px; width: auto; display: block; } .print-title { font-size: var(--fs-xs); color: var(--gray-500); text-align: right; } .print-name { font-size: 26px; font-weight: 800; margin-bottom: 4px; } .print-sub { font-size: var(--fs-md); color: var(--gray-500); margin-bottom: 18px; } .print-section { margin-bottom: 20px; } .print-section-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gray-400); border-bottom: 1px solid var(--gray-200); padding-bottom: 5px; margin-bottom: 10px; } .print-rows-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .print-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: var(--fs-sm); border-bottom: 1px dotted var(--gray-100); } .print-row .pl { color: var(--gray-500); } .print-row .pv { font-weight: 600; text-align: right; max-width: 60%; } .print-row .pv.mono { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--fs-xs); } /* Devices · synced from Atlas — one block per Atlas-reported device. */ .print-devices { display: flex; flex-direction: column; gap: 10px; } .print-dev { break-inside: avoid; page-break-inside: avoid; border: 1px solid var(--gray-200); border-radius: 6px; padding: 8px 12px 4px; } .print-dev-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .print-dev-name { font-size: var(--fs-sm); font-weight: 700; } .print-dev-status { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .print-dev-status.is-on { background: #ecfccb; color: #4d7c0f; } .print-dev-status.is-off { background: var(--gray-100); color: var(--gray-500); } .print-dev-none { font-size: var(--fs-xs); color: var(--gray-400); padding: 2px 0 6px; } .print-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 700; } .print-badge.presencial { background: #dcfce7; color: #166534; } .print-badge.virtual { background: var(--blue-100); color: var(--blue-800); } .print-badge.cancel { background: var(--red-100); color: var(--red-800); } .print-footer { margin-top: 24px; border-top: 1px solid var(--gray-200); padding-top: 10px; font-size: var(--fs-xs); color: var(--gray-400); display: flex; justify-content: space-between; } .print-comments { margin-top: 16px; padding: 10px 14px; background: var(--gray-50); border-left: 3px solid var(--brand-lime); font-size: var(--fs-sm); line-height: 1.6; } /* ── STATISTICS PDF ────────────────────────────────────────────── */ body.printing-stats > *:not(#appBody) { display: none !important; } body.printing-stats #appBody { display: block !important; overflow: visible !important; } body.printing-stats #taskSidebar { display: none !important; } body.printing-stats .main { display: block !important; overflow: visible !important; height: auto !important; min-height: 0 !important; padding: 14px 20px !important; background: #fff !important; } body.printing-stats .main-view { display: none !important; } body.printing-stats #view-stats { display: block !important; overflow: visible !important; height: auto !important; } body.printing-stats .stats-body { display: block !important; overflow: visible !important; height: auto !important; } body.printing-stats #stats-print-header { display: block !important; } body.printing-stats .sdash-toolbar { border: none !important; background: transparent !important; padding: 0 0 8px !important; margin-bottom: 10px !important; border-bottom: 1px solid var(--gray-200) !important; } body.printing-stats .sdash-toolbar button { display: none !important; } body.printing-stats .stats-custom-panel { display: none !important; } body.printing-stats .sdash-toolbar label { display: none !important; } body.printing-stats #stats-period-label { display: inline !important; margin-left: 0 !important; font-size: var(--fs-sm) !important; font-weight: 600 !important; color: var(--gray-500) !important; } body.printing-stats .sdash-scroll { overflow: visible !important; flex: none !important; min-height: 0 !important; height: auto !important; } body.printing-stats .sdash-grid { display: grid !important; } body.printing-stats .bar-chart-wrap { overflow: visible !important; } body.printing-stats .chart-card { break-inside: avoid; page-break-inside: avoid; background: #fff !important; border-color: var(--gray-200) !important; color: #111 !important; } body.printing-stats .chart-card-header { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Header text is dark-on-light now (the banner was slate with white text until the light-card refresh) — force readable print colours to match. */ body.printing-stats .chart-card-htitle { color: #111 !important; } body.printing-stats .chart-card-hsub { color: var(--gray-500) !important; } body.printing-stats .chart-card-header { background: #fff !important; border-bottom-color: var(--gray-200) !important; } body.printing-stats .kpi-val { color: inherit !important; } /* Cards deselected in the export picker (statsExportModal). A CLASS, not style.display: the role gates on the Offboarding / Recovery / Kit cards own their inline display, and restoring '' after printing would un-hide a card the role can't see. .sdash-pair gets the same treatment when both of its visible children are skipped, so it can't print as an empty grid row. */ body.printing-stats .chart-card.print-skip, body.printing-stats .sdash-pair.print-skip { display: none !important; } /* Was previously run together on one line with the two rules above, which left this `*` selector OUTSIDE the printing-stats scope. Keep it global on purpose — the PDF one-pager needs exact colours too — but explicit. */ * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } @page { margin: 12mm 14mm; } } /* ── STATISTICS EXPORT PICKER (statsExportModal) ── Card checklist built from the DOM by openStatsExportModal(). */ .stx-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); margin-bottom: 10px; } .stx-bulk-actions { display: flex; gap: 6px; flex-shrink: 0; } .stx-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; border: 1px solid var(--gray-border); border-radius: 10px; padding: 6px; background: var(--gray-bg); } .stx-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background .12s; } .stx-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } .stx-item input { width: 15px; height: 15px; accent-color: var(--brand-lime); cursor: pointer; flex-shrink: 0; } .stx-item-lbl { font-size: var(--fs-md); font-weight: 600; color: var(--text); } /* No global `.btn:disabled` rule exists — dim the export button explicitly when the selection is empty (see _stxSyncCount). */ #stx-export-btn.is-busy { opacity: .55; cursor: not-allowed; } /* ── DATE SEPARATOR ROW ────────────────────────────────────────────────── */ tr.date-sep td { /* z-index 3 sits above the frozen identity columns (1) and below the sticky header (4). At the old value of 1 it tied with the frozen cells, and DOM order handed the win to the rows *below* it — the Actions/ID/Name cells painted straight over the stuck date pill while scrolling. */ position: sticky; top: 33px; z-index: 3; padding: 0; background: #E2E5F0; border: none; box-shadow: inset 0 1px 0 0 rgba(0,169,157,0.22), inset 0 -1px 0 0 rgba(0,169,157,0.12); pointer-events: none; user-select: none; } .date-sep-inner { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 5px 12px; /* Left-aligned (not space-between): the table scrolls horizontally, so a right-pinned element would land off-screen past the table's scroll width. */ } .date-sep-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,169,157,0.1); border: 1.5px solid rgba(0,169,157,0.28); color: var(--teal-700); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.3px; padding: 2px 9px 2px 7px; border-radius: 20px; } .date-sep-count { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--white); border: 1px solid var(--gray-border); padding: 1px 8px; border-radius: 10px; } body.dark tr.date-sep td { background: #0E1030; box-shadow: inset 0 1px 0 0 rgba(181,209,0,0.22), inset 0 -1px 0 0 rgba(181,209,0,0.1); } body.dark .date-sep-pill { background: rgba(181,209,0,0.1); border-color: rgba(181,209,0,0.3); color: var(--brand-lime); } body.dark .date-sep-count { background: var(--surface); } tr.date-sep + tr td { border-top: none; } /* PJ date-sep sits below the sticky thead row (~33px tall) */ .pj-tbody-scroll tr.date-sep td { top: 33px; } /* Per-date Operational Clearance rollup bar (right of the date pill) */ .date-sep-left { display: inline-flex; align-items: center; gap: 8px; } .date-clr { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: 600; } .date-clr-track { width: 64px; height: 5px; border-radius: 3px; background: var(--gray-border); overflow: hidden; flex-shrink: 0; } .date-clr-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand-teal), var(--brand-lime)); transition: width 0.3s ease; } .date-clr-pct { color: var(--text-muted); font-weight: 700; min-width: 27px; } .date-clr-stat { display: inline-flex; align-items: center; gap: 4px; } .date-clr-stat::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .date-clr-cleared { color: #6f8400; } .date-clr-progress { color: #00857c; } .date-clr-blocked { color: var(--brand-red); } body.dark .date-clr-cleared { color: var(--brand-lime); } body.dark .date-clr-progress { color: var(--teal-300); } body.dark .date-clr-blocked { color: var(--red-400); } /* ── MAIN VIEW TOGGLE ───────────────────────────────────────────────────── */ .main-view { display: none; flex: 1; min-height: 0; min-width: 0; flex-direction: column; overflow: clip; overflow-clip-margin: 16px; } .main-view.active { display: flex; } .dash-content { display:flex; flex-direction:row; flex:1; min-height:0; overflow:hidden; } .dash-main { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; } .pj-body-wrap { display:flex; flex-direction:row; flex:1; min-height:0; overflow:hidden; } .stats-body { display:flex; flex-direction:row; flex:1; min-height:0; overflow:hidden; } /* ── MAIN NAV TABS ──────────────────────────────────────────────────────── */ /* ── STATS DASHBOARD ────────────────────────────────────────────────────── */ .sdash-toolbar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--white); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; border: 1px solid var(--gray-border); position: relative; /* anchors .stats-custom-panel below the toolbar */ } .sdash-toolbar label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); display:flex; align-items:center; gap:5px; } .sdash-range-btn { padding: 5px 14px; border-radius: 6px; font-size: var(--fs-sm); font-weight: 500; border: 1px solid var(--gray-border); background: var(--gray-bg); color: var(--text-muted); cursor: pointer; transition: all 0.15s; font-family: inherit; } .sdash-range-btn.active { background: rgba(181,209,0,0.15); color: #5a6a00; border-color: rgba(181,209,0,0.5); font-weight: 700; } body.dark .sdash-range-btn.active { background: rgba(181,209,0,0.18); color: var(--lime-dark-accent); border-color: rgba(181,209,0,0.4); } .sdash-range-btn:not(.active):hover { border-color: rgba(181,209,0,0.5); color: var(--text); background: rgba(181,209,0,0.07); } /* Custom date-range popover, anchored under the toolbar (which is always docked near the top of the view, so no flip/clamp logic is needed here unlike the office picker). Hidden entirely for print — the export always keeps whatever range was already applied before printing. */ .stats-custom-panel { position: absolute; top: calc(100% + 6px); left: 16px; z-index: var(--z-inline-popup); display: flex; align-items: flex-end; gap: 10px; background: var(--white); border: 1px solid var(--gray-border); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); } .stats-custom-panel label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); } .stats-custom-panel input[type="date"] { font-family: inherit; font-size: var(--fs-sm); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--gray-border); background: var(--gray-bg); color: var(--text); } /* "Live" badge on the always-current cards (Operational Health, Intake Pipeline, Offboarding, Welcome Kit Stock, Asset Recovery) — these ignore the period picker on purpose (see renderHealthRow/renderIntakeRow/etc comments), so this makes that scope visible instead of silently inconsistent with the period-aware cards next to them. */ .sdash-live-tag { margin-left: auto; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); color: var(--cc); white-space: nowrap; } /* Period-over-period comparison badges (KPI tiles, progress rows, chart subtitles). Colour is semantic — good/bad — not literal up/down; see _TONE_GOOD_WHEN_UP / _statsDeltaHtml / _statsPctPointDeltaHtml in JS. */ .kpi-delta { display: inline-block; margin-left: 6px; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; } .kpi-box .kpi-delta { display: block; margin: 4px 0 0; } .kpi-delta-good { color: var(--emerald-700); } .kpi-delta-bad { color: var(--red-700); } .kpi-delta-neutral { color: var(--text-muted); font-weight: 600; } body.dark .kpi-delta-good { color: var(--emerald-400); } body.dark .kpi-delta-bad { color: var(--red-400); } .sdash-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 8px; } /* Responsive: was a hardcoded `1fr 1fr`, which squashed both columns on a laptop and never collapsed. auto-fit + minmax gives one column under ~440px of available width and two above it, with no breakpoint to maintain. The track floor is `max(420px, 50% - half-gap)`, not a flat 420px: on a wide monitor a flat 420px floor lets auto-fit fit 3-4 tracks, and a row that only has 2 cards then fills 2 of those tracks and leaves the rest as a blank strip down the right side. Tying the floor to 50% of the container means two tracks always consume the full width — auto-fit can never fit a third — while still collapsing to one column once 50% of the container drops below 420px, same as before. align-items: start keeps this in sync with .sdash-pair below — default `stretch` was forcing a short card (e.g. the donut Split card) to match its taller row-mate's height, leaving a blank strip inside the short card instead of just ending where its content ends. */ .sdash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(420px, calc(50% - 8px)), 1fr)); gap: 16px; padding-bottom: 8px; align-items: start; } /* ── CARD SHELL ── LIGHT cards with a real per-card accent. This replaced a dark slate banner that every accent-* class resolved to identically — twelve cards that all looked the same, with hardcoded #243044 that ignored the theme. Now the accent lives in ONE custom property (`--cc`) per card: the top rail, the icon tile and the title hairline all derive from it, so adding a variant is a single `--cc` line and dark mode follows the tokens. */ .chart-card { --cc: var(--brand-teal); /* default accent (teal) */ background: var(--white); border-radius: 14px; border: 1px solid var(--gray-border); overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 18px -10px rgba(0,0,0,0.16); transition: box-shadow .16s, border-color .16s; } .chart-card:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 12px 26px -12px rgba(0,0,0,0.22); } /* The accent rail — the card's identity at a glance, scannable down the grid. */ .chart-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cc); z-index: 2; } .chart-card.full-width { grid-column: 1 / -1; } /* Paired row: two half-width chart-cards side by side, independent of the surrounding auto-flow. Spans the full grid, then lays out its own children. auto-fit here too, so when a role hides one child the other doesn't sit stranded at half width. */ .sdash-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(420px, calc(50% - 8px)), 1fr)); gap: 16px; align-items: start; } /* Header: light surface, dark text, accent-tinted icon tile. The old decorative ring/dot pseudo-elements are gone — they were white-on-slate and are invisible (or dirt) on a light card. */ .chart-card-header { padding: 15px 18px 13px; display: flex; align-items: center; gap: 11px; background: var(--white); border-bottom: 1px solid var(--gray-border); } .chart-card-hicon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); color: var(--cc); } /* Header icons are authored as `stroke="#fff"` for the old dark banner — force them to follow the accent instead of hardcoding per card. */ .chart-card-hicon svg { stroke: var(--cc); } .chart-card-htitle { font-size: var(--fs-base); font-weight: 800; color: var(--text); letter-spacing: -.1px; } .chart-card-hsub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; } .chart-card-body { padding: 18px 20px; } /* Per-card accents — the ONLY thing the accent-* classes now set. */ .chart-card.accent-lime { --cc: #7d9400; } /* darkened Globant lime: var(--brand-lime) fails contrast as text/icon on white */ .chart-card.accent-teal { --cc: var(--brand-teal); } .chart-card.accent-red { --cc: var(--brand-red); } .chart-card.accent-orange { --cc: var(--amber-600); } .chart-card.accent-purple { --cc: var(--brand-purple); } body.dark .chart-card.accent-lime { --cc: var(--brand-lime); } /* full lime is legible on the dark surface */ /* The two offboarding cards set `style="background:var(--brand-red)"` inline on their icon tile for the old dark header; the accent now covers that, and the inline value would fight it — neutralize it here rather than editing the markup in two places. */ #sdash-offb-card .chart-card-hicon, #sdash-recovery-card .chart-card-hicon { background: color-mix(in srgb, var(--cc) 14%, transparent) !important; } /* Onboarding Readiness summary card (Statistics tab) */ .sdash-readiness-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; } .sdash-readiness-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.13); transform: translateY(-1px); } /* CTA pill — accent-tinted on the light header (it was white-translucent when the header was a dark slate banner, which is invisible on white). */ .sdash-readiness-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 700; color: var(--cc); padding: 4px 11px; border-radius: 20px; background: color-mix(in srgb, var(--cc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 32%, transparent); white-space: nowrap; flex-shrink: 0; } .sdash-readiness-row { display: flex; align-items: center; gap: 30px; } .sdash-readiness-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; } .sdash-readiness-stepper-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } @media (max-width: 720px) { .sdash-readiness-row { flex-direction: column; align-items: stretch; gap: 18px; } .sdash-readiness-ring { align-self: center; } } /* Bar chart */ .bar-chart-wrap { overflow-x: auto; } .bar-chart { display: flex; align-items: flex-end; gap: 6px; min-height: 130px; } .bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 32px; } .bar-val { font-size: var(--fs-xs); font-weight: 700; color: var(--teal-700); margin-bottom: 3px; line-height: 1; } body.dark .bar-val { color: var(--teal-dark-accent); } .bar-fill { width: 100%; border-radius: 4px 4px 0 0; min-height: 3px; background: linear-gradient(180deg, #2f9e95 0%, #1f6f69 100%); transition: height 0.4s ease, background 0.15s ease; } .bar-fill:hover { background: linear-gradient(180deg, var(--brand-teal) 0%, var(--teal-700) 100%); cursor: default; } .bar-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; text-align: center; } /* Donut chart */ .donut-wrap { display: flex; align-items: center; gap: 24px; } .donut-svg { flex-shrink: 0; } .donut-legend { display: flex; flex-direction: column; gap: 8px; } .donut-leg-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); } .donut-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .donut-leg-label { color: var(--text-muted); } .donut-leg-val { font-weight: 700; color: var(--text); margin-left: auto; padding-left: 12px; } /* Progress rows */ .progress-rows { display: flex; flex-direction: column; gap: 12px; } /* Asset Recovery card (sdash-recovery-card) — the two breakdowns sit side by side on a wide card and stack on a narrow one. */ .recov-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(260px, calc(50% - 11px)), 1fr)); gap: 22px; margin-top: 16px; } .recov-block-hdr { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; } /* Per-device rows: the device's own glyph + a still-out / assigned count over the shared .progress-track bar. Icons come from _DEV_ICONS (the Devices modal's set), so a MacBook here carries the same mark it does on the hire card — Apple + Windows are FILLED brand marks, the rest stroked outlines. Each device type gets its own accent through --rdc. */ .recov-dev { display: flex; align-items: flex-start; gap: 11px; } .recov-dev-ico { --rdc: var(--slate-500); width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--rdc); background: color-mix(in srgb, var(--rdc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rdc) 28%, transparent); } /* _DEV_ICONS glyphs are authored at 22px; scale down for this denser row. */ .recov-dev-ico svg { width: 17px; height: 17px; } .recov-dev-ico--mac { --rdc: var(--gray-500); } .recov-dev-ico--windows { --rdc: var(--blue-600); } .recov-dev-ico--yubikey { --rdc: var(--brand-purple); } .recov-dev-ico--monitor { --rdc: var(--brand-teal); } .recov-dev-ico--client-device { --rdc: var(--indigo-600); } .recov-dev-ico--gaming-computer { --rdc: var(--orange-600); } .recov-dev-ico--gaming-device { --rdc: var(--pink-600); } .recov-dev-main { flex: 1; min-width: 0; } .recov-dev-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .recov-dev-lbl { font-size: var(--fs-md); font-weight: 600; color: var(--text); } .recov-dev-num { font-size: var(--fs-md); font-weight: 800; color: var(--text); flex-shrink: 0; } .recov-dev-den { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); } .progress-item {} .progress-header { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 5px; } .progress-label { font-weight: 500; color: var(--text); } .progress-pct { font-weight: 700; color: var(--text); } .progress-track { height: 7px; border-radius: 6px; background: var(--gray-bg); overflow: hidden; border: 1px solid var(--gray-border); } .progress-bar { height: 100%; border-radius: 6px; transition: width 0.5s ease; } .progress-bar.ok { background: linear-gradient(90deg, var(--brand-teal), #00c4b5); } .progress-bar.warn { background: linear-gradient(90deg, var(--orange), #f6ad2b); } .progress-bar.bad { background: linear-gradient(90deg, var(--red), #f06060); } .progress-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; } /* Dark mode for the shared bar/progress furniture — these were hardcoded for a light surface only. The teambar track is set inline in JS as rgba(0,0,0,0.05); override it here rather than threading a colour through the renderer. */ body.dark .progress-track { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); } /* Hours-by-team bars (renderSessionHoursRow). The track used to be an inline rgba(0,0,0,0.05), which is invisible on the dark graphite surface; it is a class now so both themes can style it. The FILL keeps its inline colour — that's the team colour from TEAM_META. */ .sdash-teambar-track { flex: 1; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(0,0,0,0.06); } .sdash-teambar-fill { height: 100%; border-radius: 7px; } body.dark .sdash-teambar-track { background: rgba(255,255,255,0.09); } body.dark .rs-empty-state { color: var(--text-muted); } /* Summary kpi row */ /* ── KPI TILE TONES ── Tiles carry a semantic tone class (`.kpi-t-*`) instead of inline colour literals — those were repeated across ~8 JS call sites and several were dark-on-light with no dark-mode counterpart. Everything here derives from one `--kt` accent, so a tone is a single line and dark mode is one override. See _renderStatTiles / _KPI_TONES. */ .kpi-box[class*="kpi-t-"] { background: color-mix(in srgb, var(--kt) 9%, transparent); border-color: color-mix(in srgb, var(--kt) 26%, transparent); } .kpi-box[class*="kpi-t-"] .kpi-val, .kpi-box[class*="kpi-t-"] .kpi-suffix { color: var(--kt); } .kpi-t-neutral { --kt: #5b6270; } /* reads as "just a count", no status */ .kpi-t-teal { --kt: var(--teal-700); } .kpi-t-good { --kt: var(--emerald-700); } .kpi-t-warn { --kt: var(--amber-700); } .kpi-t-bad { --kt: var(--red-700); } .kpi-t-info { --kt: var(--blue-700); } .kpi-t-lime { --kt: #5b6b00; } /* Dark mode: the light-mode foregrounds are 4–5:1 on white and far too dark on the graphite surface, so every tone lightens. The fills stay derived. */ body.dark .kpi-t-neutral { --kt: #a9b1c1; } body.dark .kpi-t-teal { --kt: #35c9bd; } body.dark .kpi-t-good { --kt: var(--emerald-400); } body.dark .kpi-t-warn { --kt: var(--amber-400); } body.dark .kpi-t-bad { --kt: var(--red-400); } body.dark .kpi-t-info { --kt: #7aa7f8; } body.dark .kpi-t-lime { --kt: var(--lime-dark-accent); } .kpi-row { display: flex; gap: 10px; margin-bottom: 14px; } .kpi-box { flex: 1; border-radius: 10px; border: 1px solid var(--gray-border); padding: 12px 10px; text-align: center; } .kpi-valwrap { display: flex; align-items: baseline; justify-content: center; gap: 2px; } .kpi-val { font-size: 26px; font-weight: 700; line-height: 1; } .kpi-suffix { font-size: var(--fs-lg); font-weight: 700; line-height: 1; } .kpi-lbl { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } /* ── MODAL BACKDROP BLUR ────────────────────────────────────────────────── */ .modal-overlay.active { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* ── HIRE ROW CARDS (Dashboard List) — date-section headers + card styles ── */ .week-section-header { display: flex; align-items: center; gap: 10px; padding: 10px 0 12px; border-bottom: 1px solid var(--gray-border); margin-bottom: 18px; position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); } body.dark .week-section-header { background: rgba(30,31,38,0.97); } .week-section-label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 8px; } .week-emoji { font-size: 0; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); flex-shrink: 0; } .week-section-header.prev-week .week-emoji { background: var(--slate-400); } .week-section-header.this-week .week-emoji { background: var(--brand-lime); } .week-section-header.next-week .week-emoji { background: var(--orange); } .week-section-header.later .week-emoji { background: var(--brand-teal); } .week-date-range-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; } .week-count-pill { font-size: var(--fs-xs); font-weight: 700; padding: 2px 9px; border-radius: 20px; } .week-count-pill.prev-week { background: rgba(148,163,184,0.18); color: var(--slate-600); } .week-count-pill.this-week { background: rgba(181,209,0,0.18); color: var(--lime-800); } .week-count-pill.next-week { background: rgba(245,158,11,0.18); color: var(--amber-800); } .week-count-pill.later { background: rgba(0,169,157,0.15); color: #065f56; } body.dark .week-count-pill.prev-week { background: rgba(148,163,184,0.2); color: var(--slate-400); } body.dark .week-count-pill.this-week { background: rgba(181,209,0,0.2); color: var(--lime-300); } body.dark .week-count-pill.next-week { background: rgba(245,158,11,0.2); color: var(--amber-300); } body.dark .week-count-pill.later { background: rgba(0,169,157,0.2); color: var(--teal-300); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } /* ── People card ── */ .nh-card { border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--gray-border); box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.05); display: flex; flex-direction: column; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; } .nh-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.14); } .nh-card-header { position: relative; height: 90px; display: flex; align-items: flex-end; justify-content: center; flex-shrink: 0; } .nh-card-header.presencial { background: linear-gradient(135deg, var(--lime-400) 0%, var(--lime-700) 100%); } .nh-card-header.virtual { background: linear-gradient(135deg, #C084FC 0%, var(--purple-700) 100%); } .nh-card-header.cancel { background: linear-gradient(135deg, var(--red-400) 0%, var(--red-800) 100%); } .nh-card-header.default { background: linear-gradient(135deg, var(--slate-400) 0%, var(--slate-600) 100%); } .nh-card-header.crimson { background: linear-gradient(135deg, #DC143C 0%, #4c0519 100%); } .nh-card-status-row { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; align-items: center; } .nh-sdot { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); backdrop-filter: blur(4px); flex-shrink: 0; } .nh-sdot.ok { background: var(--green-600); color: white; } .nh-sdot.bad { background: rgba(239,68,68,0.4); color: white; } .nh-sdot.pend { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.55); } /* Top-right stack in the card header: date chip + bulk-select checkbox below it */ .nh-card-topright { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .nh-card-date-chip { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.22); backdrop-filter: blur(6px); border-radius: 8px; padding: 4px 8px; line-height: 1.1; } .ncc-day { font-size: var(--fs-lg); font-weight: 800; color: white; } .ncc-month { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.8px; color: rgba(255,255,255,0.8); text-transform: uppercase; } .nh-card-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--slate-600); border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); z-index: 2; flex-shrink: 0; } .nh-card-avatar.presencial { background: var(--lime-700); } .nh-card-avatar.virtual { background: #00767f; } body.dark .nh-card-avatar.virtual { background: var(--brand-teal); } .nh-card-avatar.cancel { background: var(--red-800); } .nh-card-avatar.crimson { background: #9f1239; } .nh-card-body { flex: 1; padding: 34px 14px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; } .nh-card-name { font-size: var(--fs-base); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 3px; } .nh-card-role { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-bottom: 10px; } .nh-card-recruiter { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; max-width: 100%; overflow: hidden; } .nh-card-recruiter span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nh-card-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: auto; } .nh-chip { font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0.2px; } .nh-chip.presencial { background: #586a00; color: #fff; border: 1px solid transparent; box-shadow: 0 1px 4px rgba(107,128,0,0.25); } .nh-chip.virtual { background: #00767f; color: #fff; border: 1px solid transparent; box-shadow: 0 1px 4px rgba(0,150,160,0.25); } .nh-chip.cancel { background: var(--brand-red); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 4px rgba(220,38,38,0.25); } .nh-chip.office { background: rgba(100,116,139,0.08); color: var(--slate-600); border: 1px solid rgba(100,116,139,0.2); } .nh-chip.rehire { background: #ede9fe; color: var(--purple-800); border: 1px solid #c4b5fd; } body.dark .nh-chip.presencial { background: #8fa000; color: #fff; border-color: transparent; } body.dark .nh-chip.virtual { background: var(--brand-teal); color: #fff; border-color: transparent; } body.dark .nh-chip.cancel { background: var(--red-700); color: #fff; border-color: transparent; } body.dark .nh-chip.office { background: rgba(181,209,0,0.08); color: var(--brand-lime); border-color: rgba(181,209,0,0.2); } .nh-card-footer { padding: 8px 12px; border-top: 1px solid var(--gray-border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } .nh-card-edit-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--gray-border); background: var(--white); color: var(--text-muted); cursor: pointer; transition: all .15s; } .nh-card-edit-btn:hover { border-color: var(--brand-lime); color: var(--lime-800); background: rgba(181,209,0,0.08); } /* Attendance action button — teal accent to distinguish it from Details */ .nh-card-attend-btn:hover { border-color: var(--brand-teal); color: var(--teal-700); background: rgba(0,168,157,0.08); } /* Reflects current attendance state: green Attended / red No Show */ .nh-card-attend-btn.is-attended { border-color: var(--green-600); color: var(--green-700); background: rgba(22,163,74,0.10); } .nh-card-attend-btn.is-attended:hover { border-color: var(--green-700); color: var(--green-700); background: rgba(22,163,74,0.18); } .nh-card-attend-btn.is-noshow { border-color: var(--brand-red); color: var(--red-700); background: rgba(220,38,38,0.10); } .nh-card-attend-btn.is-noshow:hover { border-color: var(--red-700); color: var(--red-700); background: rgba(220,38,38,0.18); } /* Chat button (Dashboard List rows) — teal accent, left of Details. Carries an unread-message count badge; `has-unread` promotes the whole button so the row reads as "someone wrote here" at a glance. */ .nh-card-chat-btn { position: relative; } .nh-card-chat-btn:hover { border-color: var(--brand-teal); color: var(--teal-700); background: rgba(0,169,157,0.08); } .nh-card-chat-btn.has-unread { border-color: var(--brand-teal); color: var(--teal-700); background: rgba(0,169,157,0.10); } .nh-card-chat-btn.has-unread:hover { background: rgba(0,169,157,0.18); } .nh-chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; position: absolute; top: -6px; right: -6px; border-radius: 999px; background: var(--brand-red); color: #fff; font-size: var(--fs-xs); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .nh-chat-badge[hidden] { display: none; } body.dark .nh-card-chat-btn:hover, body.dark .nh-card-chat-btn.has-unread { border-color: var(--brand-teal); color: var(--teal-300); background: rgba(0,169,157,0.16); } /* ── DASHBOARD TABLE / LIST TOGGLE (Table | List) ───────────────────────── */ .cards-viewseg { display:inline-flex; gap:2px; padding:3px; background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:9px; } .cards-viewseg-btn { display:inline-flex; align-items:center; gap:5px; border:none; background:transparent; color:var(--text-muted); font-size:var(--fs-sm); font-weight:700; font-family:inherit; padding:4px 10px; border-radius:7px; cursor:pointer; transition:background .15s, color .15s; } .cards-viewseg-btn svg { width:14px; height:14px; } .cards-viewseg-btn:hover { color:var(--text); background:rgba(0,0,0,0.04); } .cards-viewseg-btn.active { background:linear-gradient(135deg,var(--brand-lime),var(--brand-teal)); color:#fff; box-shadow:0 2px 8px rgba(0,169,157,0.28); } body.dark .cards-viewseg { background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.10); } body.dark .cards-viewseg-btn:hover { background:rgba(255,255,255,0.06); } /* ── DASHBOARD LIST — HORIZONTAL ROW LAYOUT ───────────────────────────────── Offboarding-style stacked rows that reuse the People card's colors. Pieces (avatar, status dots, chips, email, Details) laid out left→right; `hc` class drives the left color spine. */ .cards-grid--list { display:flex; flex-direction:column; gap:10px; } .nh-card--row { flex-direction:row; align-items:center; gap:14px; width:100%; height:auto; padding:12px 16px 12px 22px; border-radius:14px; position:relative; /* Row cards must not clip the footer buttons' data-tip tooltip (grid cards keep overflow:hidden for their rounded header). */ overflow:visible; } /* NO transform on hover — a geometry shift makes stacked rows flicker (see CLAUDE.md pitfall). Shadow + border-color only. */ .nh-card--row:hover { transform:none; box-shadow:0 6px 20px rgba(0,0,0,0.12); border-color:rgba(0,169,157,0.45); } .nh-card--row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:14px 0 0 14px; } .nh-card--row.presencial::before { background:linear-gradient(180deg,var(--lime-400),var(--lime-700)); } .nh-card--row.virtual::before { background:linear-gradient(180deg,#C084FC,var(--purple-700)); } .nh-card--row.cancel::before { background:linear-gradient(180deg,var(--red-400),var(--red-800)); } .nh-card--row.default::before { background:linear-gradient(180deg,var(--slate-400),var(--slate-600)); } .nh-card--row.crimson::before { background:linear-gradient(180deg,#DC143C,#4c0519); } /* Avatar: grid mode absolutely-positions it under the header; here it's inline + compact. */ .nh-card--row .nh-card-avatar { position:static; transform:none; inset:auto; width:44px; height:44px; border-width:2px; flex-shrink:0; } .nh-card--row .nh-card-avatar svg { width:22px; height:22px; } /* Name / role / recruiter stack — left-aligned; chips take the flexible middle. */ .nh-card--row .nh-row-idblock { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0; flex:0 1 230px; gap:2px; } .nh-card--row .nh-card-name { margin:0; } .nh-card--row .nh-card-role { margin:0; } .nh-card--row .nh-card-recruiter { margin:2px 0 0; } .nh-card--row .nh-card-chips { flex:1 1 auto; justify-content:flex-start; margin-top:0; } /* Status dots read on the light row surface (grid dot styles assume the dark header). */ .nh-card--row .nh-card-status-row { position:static; top:auto; left:auto; flex-shrink:0; } .nh-card--row .nh-sdot.pend { background:var(--gray-bg); border:1px solid var(--gray-border); color:var(--text-muted); } .nh-card--row .nh-sdot.bad { background:var(--red); color:#fff; } /* Date chip: tint to read on the row surface instead of the header gradient. */ .nh-card--row .nh-card-date-chip { flex-shrink:0; flex-direction:row; gap:4px; align-items:baseline; padding:4px 9px; background:var(--gray-bg); border:1px solid var(--gray-border); backdrop-filter:none; } .nh-card--row .ncc-day { color:var(--text); font-size:var(--fs-base); } .nh-card--row .ncc-month { color:var(--text-muted); font-size:var(--fs-xs); } /* Footer actions sit inline at the right (no top border / stretch). */ .nh-card--row .nh-card-footer { border-top:none; padding:0; margin-left:auto; flex-shrink:0; gap:6px; width:auto; } .nh-card--row .nh-card-edit-btn { flex:0 0 auto; width:30px; height:30px; padding:0; } /* Vertical divisor between the status dots (…Yubikey) and the footer actions (Chat) — List layout only; mirrors .toolbar-divider. */ .nh-card-divider { width:1px; align-self:stretch; margin:2px 0; background:var(--gray-border); flex-shrink:0; } body.dark .nh-card-divider { background: rgba(255,255,255,0.12); } @media (max-width: 640px) { .nh-card-divider { display:none; } } @media (max-width: 640px) { .nh-card--row { flex-wrap:wrap; } .nh-card--row .nh-card-footer { width:100%; margin-left:0; justify-content:flex-start; } } /* ── PEOPLE JOURNEY — compact row cards (mirrors Dashboard List, tighter) ── */ /* Legacy neutralizer for the old inline table frame — kept for any markup still carrying the class; the live view now uses the shared .table-wrap. */ .pj-table-outer { background:transparent; box-shadow:none; overflow:visible; border-radius:0; } body.dark .pj-table-outer { background:transparent; } /* Scroll container INSIDE the shared .table-wrap card — the PJ twin of .dash-list-wrap (same padding, so cards + sticky date bands line up with the panel edge). .table-wrap is the flex column that bounds it. */ .pj-list-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; } /* The PJ toolbar's selects carry longer labels than the Dashboard's, so they need more room than the shared .filter-select 130px cap. */ #pj-search { width: 200px; } #pj-office-filter { max-width: 170px; } #pj-sort-select { max-width: 200px; } .pj-cards, #pj-cards { display:flex; flex-direction:column; padding:0; min-height: 200px; width: 100%; max-width: 100%; box-sizing: border-box; } .pj-card-section { margin-bottom:16px; } .pj-card-section:last-child { margin-bottom:0; } .pj-cards-grid { display:flex; flex-direction:column; gap:8px; width: 100%; max-width: 100%; box-sizing: border-box; } .pj-card { display:flex; align-items:center; gap:12px; width:100%; max-width:100%; padding:9px 14px 9px 18px; background:var(--white); border:1px solid var(--gray-border); border-radius:12px; position:relative; overflow:hidden; cursor:pointer; transition:box-shadow 0.15s, border-color 0.15s; box-sizing: border-box; } /* NO transform on hover — a geometry shift makes stacked rows flicker (see CLAUDE.md pitfall). Shadow + border-color only. */ .pj-card:hover { box-shadow:0 6px 18px rgba(0,0,0,0.10); border-color:rgba(0,169,157,0.45); } .pj-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; } .pj-card.presencial::before { background:linear-gradient(180deg,var(--lime-400),var(--lime-700)); } .pj-card.virtual::before { background:linear-gradient(180deg,#C084FC,var(--purple-700)); } .pj-card.cancel::before { background:linear-gradient(180deg,var(--red-400),var(--red-800)); } .pj-card.default::before { background:linear-gradient(180deg,var(--slate-400),var(--slate-600)); } .pj-card.crimson::before { background:linear-gradient(180deg,#DC143C,#4c0519); } /* Avatar: static + compact (grid mode absolutely-positions .nh-card-avatar). */ .pj-card-avatar { position:static; transform:none; inset:auto; width:34px; height:34px; border-width:2px; flex-shrink:0; } .pj-card-avatar svg { width:17px; height:17px; } .pj-card-idblock { display:flex; flex-direction:column; gap:1px; min-width:0; flex:0 1 220px; } .pj-card .nh-card-name { margin:0; font-size:var(--fs-md); } .pj-card .nh-card-role { margin:0; font-size:var(--fs-xs); } .pj-card-status { flex-shrink:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.2px; padding:2px 9px; border-radius:20px; white-space:nowrap; } .pj-card-status.is-complete { background:rgba(22,163,74,0.12); color:var(--green-700); border:1px solid rgba(22,163,74,0.3); } .pj-card-status.is-inprogress { background:rgba(245,158,11,0.14); color:var(--amber-700); border:1px solid rgba(245,158,11,0.34); } .pj-card-status.is-notstarted { background:rgba(220,38,38,0.10); color:var(--red-700); border:1px solid rgba(220,38,38,0.28); } .pj-card-meter { display:flex; align-items:center; gap:9px; flex:1 1 auto; justify-content:flex-end; } .pj-pips { display:flex; gap:3px; } .pj-pip { width:14px; height:6px; border-radius:3px; background:var(--gray-border); } .pj-pip.is-on { background:linear-gradient(90deg,var(--brand-teal),var(--brand-lime)); } /* Per-document meter icons (Offer Letter, NDA, Bank, Health, Life, Family, Affidavit). Sized here rather than on the svg width/height attributes in _pjCardHtml — CSS wins over presentational attributes, so the size and the box that bounds it stay in one place. The fixed 16px box is what keeps the row height fixed: .pj-card is align-items:center and its tallest child is the 34px avatar, so the pips have ~18px of slack and never become the height driver. Do not let this box exceed 34px without re-checking the row height. The gap tightens to 6px to offset the extra glyph width across seven pips. */ .pj-doc-pips { display:flex; gap:6px; } .pj-doc-pip { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; flex-shrink:0; color:var(--gray-border); transition:color 0.15s; cursor:pointer; } .pj-doc-pip svg { display:block; width:16px; height:16px; } .pj-doc-pip.is-on { color:var(--brand-teal); } .pj-office-label { font-size:var(--fs-xs); font-weight:600; color:var(--text-secondary); white-space:nowrap; margin-right:8px; opacity:0.8; } .pj-meter-label { font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); white-space:nowrap; min-width:46px; text-align:right; } .pj-card-details { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); background:var(--gray-bg); border:1px solid var(--gray-border); padding:5px 11px; border-radius:9px; cursor:pointer; transition:all 0.15s; } .pj-card-details:hover { border-color:var(--brand-teal); color:var(--teal-700); background:rgba(0,169,157,0.08); } body.dark .pj-card-status.is-complete { background:rgba(22,163,74,0.2); color:var(--green-400); } body.dark .pj-card-status.is-inprogress { background:rgba(245,158,11,0.2); color:var(--amber-300); } body.dark .pj-card-status.is-notstarted { background:rgba(220,38,38,0.2); color:var(--red-300); } @media (max-width:640px) { .pj-card { flex-wrap:wrap; } .pj-card-meter { justify-content:flex-start; } .pj-card-details { margin-left:auto; } } /* ── CONNECTION PILL (#connPill, _connRender) ────────────────────────────── */ .conn-pill { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; cursor:default; white-space:nowrap; --cp: var(--gray-500); color:var(--cp); background:color-mix(in srgb, var(--cp) 10%, transparent); border:1px solid color-mix(in srgb, var(--cp) 35%, transparent); } .conn-pill[hidden] { display:none; } .conn-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; } .conn-pill.is-offline { --cp: var(--warn-text); } .conn-pill.is-error { --cp: var(--danger-text); cursor:pointer; } .conn-pill.is-pending { --cp: var(--teal-600); } .conn-pill.is-pending::before { animation: conn-pulse 1.2s ease-in-out infinite; } @keyframes conn-pulse { 50% { opacity:.3; } } @media (prefers-reduced-motion: reduce) { .conn-pill.is-pending::before { animation:none; } } /* ── FORM VALIDATION (edit/add modal — _setFieldError) ───────────────────── */ .form-control.is-invalid, .addr-trigger-btn.is-invalid { border-color:var(--danger-text) !important; box-shadow:0 0 0 3px var(--danger-bg); } .field-error { margin-top:4px; font-size:var(--fs-xs); font-weight:600; color:var(--danger-text); } .field-error[hidden] { display:none; } .form-hint { margin-top:4px; font-size:var(--fs-xs); color:var(--text-muted); } /* ── COMMAND PALETTE (#cmdPalette — Ctrl/⌘+K) ──────────────────────────────── */ .modal-overlay.cmdk-overlay { align-items:flex-start; padding-top:12vh; } .cmdk { width:620px; max-width:calc(100vw - 32px); max-height:70vh; display:flex; flex-direction:column; background:var(--modal-bg); border:1px solid var(--gray-border); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.28); } .cmdk-search { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--gray-border); color:var(--text-muted); } .cmdk-input { flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--text); font:inherit; font-size:var(--fs-lg); } .cmdk-input:focus-visible { outline:none !important; } .cmdk-list { overflow-y:auto; padding:6px; flex:1; min-height:0; } .cmdk-group { padding:10px 10px 4px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); } .cmdk-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; color:var(--text); } .cmdk-item.is-sel { background:color-mix(in srgb, var(--brand-teal) 12%, transparent); } .cmdk-item-ic { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--gray-bg); border:1px solid var(--gray-border); color:var(--text-muted); } .cmdk-item.is-sel .cmdk-item-ic { color:var(--teal-600); border-color:color-mix(in srgb, var(--brand-teal) 40%, transparent); } .cmdk-item-txt { min-width:0; flex:1; } .cmdk-item-lbl { font-size:var(--fs-md); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cmdk-item-sub { font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cmdk-item-badges { display:flex; gap:4px; flex-shrink:0; } .cmdk-badge { padding:1px 7px; border-radius:999px; border:1px solid var(--gray-border); background:var(--gray-bg); font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); white-space:nowrap; } .cmdk-badge-bad { color:var(--danger-text); background:var(--danger-bg); border-color:var(--danger-border); } .cmdk-badge-warn { color:var(--warn-text); background:color-mix(in srgb, var(--warn-text) 10%, transparent); border-color:color-mix(in srgb, var(--warn-text) 35%, transparent); } /* Secondary-action hint — only on the highlighted row, so it doesn't repeat down the list. */ .cmdk-item-alt { display:none; flex-shrink:0; font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; } .cmdk-item.is-sel .cmdk-item-alt { display:inline-block; } .cmdk-empty { padding:28px 16px; text-align:center; color:var(--text-muted); font-size:var(--fs-md); } .cmdk-foot { display:flex; flex-wrap:wrap; gap:4px 16px; padding:8px 16px; border-top:1px solid var(--gray-border); font-size:var(--fs-xs); color:var(--text-muted); } .cmdk-kbd { display:inline-block; min-width:18px; padding:1px 5px; margin-right:3px; border:1px solid var(--gray-border); border-bottom-width:2px; border-radius:5px; background:var(--gray-bg); font:inherit; font-size:var(--fs-xs); text-align:center; color:var(--text-muted); } .cmdk-search .cmdk-kbd { margin-right:0; } .cmdk-foot-sep { margin-left:auto; } @media (max-width: 640px) { .cmdk-foot { display:none; } .modal-overlay.cmdk-overlay { padding-top:16px; } .cmdk-search .cmdk-kbd { display:none; } .cmdk-item-alt { display:none !important; } } /* ── UNIFIED EMPTY STATE ─────────────────────────────────────────────────── */ .empty-state-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:52px 16px; text-align:center; } .empty-state-icon { width:46px; height:46px; border-radius:13px; background:var(--gray-bg); border:1px solid var(--gray-border); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--text-muted); flex-shrink:0; } .empty-state-title { font-size:var(--fs-lg); font-weight:700; color:var(--text); margin-bottom:6px; } .empty-state-sub { font-size:var(--fs-md); color:var(--text-muted); line-height:1.65; max-width:340px; } /* Optional action under the empty-state copy (_emptyState's 3rd arg) and the load-failure variant (_errorState). Actions are delegated via [data-empty-act]. */ .empty-state-action { margin-top:14px; } /* In-chart "no data" caption (Statistics bar charts). */ .chart-empty { color:var(--text-muted); font-size:var(--fs-sm); margin:auto; } .empty-state-wrap.is-error .empty-state-icon { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); } /* ── SHARED LOADING STATE (spinner + skeleton rows) ──────────────────────── _loadingHtml(msg) — used by every view whose data arrives after first paint (Onboarding list, People Journey, Calendar, Welcome Kits, Offboarding). An empty cache is not an empty collection: show this until the first snapshot. The skeletons mirror the thin row-card geometry (42px avatar, 14px gap, 14px radius, 9px stack gap) so the list doesn't jump when real rows replace them. */ .ld-state { padding: 6px 0 4px; } .ld-head { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px 16px; color: var(--text-muted); font-size: var(--fs-md); font-weight: 600; } .ld-spinner { width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0; border: 2.5px solid color-mix(in srgb, var(--teal-600) 22%, transparent); border-top-color: var(--teal-600); animation: ld-spin .7s linear infinite; } @keyframes ld-spin { to { transform: rotate(360deg); } } .ld-skel-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 20px; border: 1px solid var(--gray-border); border-radius: 14px; background: var(--white); margin-bottom: 9px; } .ld-skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .ld-skel { background: color-mix(in srgb, var(--gray-border) 55%, transparent); border-radius: 6px; animation: ld-skel-pulse 1.25s ease-in-out infinite; } .ld-skel-avatar { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; } .ld-skel-name { width: 38%; height: 11px; } .ld-skel-sub { width: 62%; height: 9px; } .ld-skel-chip { width: 88px; height: 20px; border-radius: 999px; flex-shrink: 0; } /* Stagger the rows so the list reads as one wave rather than four blinks. */ .ld-skel-row:nth-child(2) .ld-skel { animation-delay: .12s; } .ld-skel-row:nth-child(3) .ld-skel { animation-delay: .24s; } .ld-skel-row:nth-child(4) .ld-skel { animation-delay: .36s; } @keyframes ld-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Respect a reduced-motion preference: keep the state legible, drop the motion. */ @media (prefers-reduced-motion: reduce) { .ld-spinner { animation-duration: 2s; } .ld-skel { animation: none; } } /* ── ITX ASSISTANT EMBEDDED ───────────────────────────────────────── */ .ts-itx-row { display:flex; align-items:center; gap:10px; padding:12px 14px 14px; cursor:pointer; transition:background 0.15s; flex-shrink:0; position:relative; } .ts-itx-row::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--orange-500),var(--pink-500),var(--purple-500),var(--indigo-500),var(--blue-500),var(--cyan-500),var(--emerald-500),var(--lime-500),var(--brand-lime),var(--yellow-500),var(--orange-500),var(--pink-500),var(--purple-500),var(--indigo-500),var(--blue-500),var(--cyan-500),var(--emerald-500),var(--lime-500),var(--brand-lime),var(--yellow-500)); background-size:200% 100%; animation:rainbow-slide 3s linear infinite; } .ts-itx-row:hover { background:rgba(181,209,0,0.07); } body.dark .ts-itx-row:hover { background:rgba(181,209,0,0.10); } .ts-itx-orb { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--brand-lime),var(--brand-teal)); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; } .ts-itx-orb img { width:22px; height:22px; object-fit:contain; } /* ITX Assistant opens as a floating popup (not an inline sidebar expand). position:fixed escapes the sidebar's overflow:hidden — no ancestor has a transform, so it anchors to the viewport. z-index 90 keeps it below the modal layer (z-index 100) so any modal covers it. */ .ts-itx-chat { display:none; flex-direction:column; position:fixed; right:24px; bottom:24px; width:384px; height:540px; max-height:calc(100vh - 48px); z-index: var(--z-panel); background:var(--modal-bg); border:1px solid var(--gray-border); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,0.28); overflow:hidden; transform-origin:bottom right; animation:itx-pop-in 0.26s cubic-bezier(0.22,1,0.36,1); } @keyframes itx-pop-in { from { opacity:0; transform:translateY(14px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } } /* Centered variant: the panel opens maximized (right/bottom:50% + translate(50%,50%) to center). It must keep that centering translate through the animation, otherwise the keyframe's transform overrides it and the panel flashes in the top-left quadrant before snapping to center. */ @keyframes itx-pop-in-center { from { opacity:0; transform:translate(50%,50%) scale(0.96); } to { opacity:1; transform:translate(50%,50%) scale(1); } } @media (max-width:520px) { .ts-itx-chat { right:12px; left:12px; bottom:12px; width:auto; height:auto; top:12px; } } /* Maximized ITX Assistant — grows into a large centered modal for long responses */ .ts-itx-chat.ts-itx-maximized { right:50%; bottom:50%; transform:translate(50%,50%); width:min(920px,94vw); height:min(880px,90vh); max-height:90vh; box-shadow:0 24px 70px rgba(0,0,0,0.40); animation:itx-pop-in-center 0.26s cubic-bezier(0.22,1,0.36,1); } .ts-itx-chat.ts-itx-maximized .help-messages { padding:18px 22px; gap:10px; } .ts-itx-chat.ts-itx-maximized .help-msg { max-width:80%; } /* Shared popup backdrop (_tsSyncBackdrop) — the same dim as .modal-overlay, so the ITX chat and the dock popups read as windows like Readiness Check / Search. */ .ts-pop-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index: var(--z-panel-backdrop); animation:itx-backdrop-in 0.2s ease; } @keyframes itx-backdrop-in { from { opacity:0; } to { opacity:1; } } /* Icon swap: show maximize when normal, restore when maximized */ .itx-restore-icon { display:none; } .ts-itx-chat.ts-itx-maximized .itx-max-icon { display:none; } .ts-itx-chat.ts-itx-maximized .itx-restore-icon { display:block; } .ts-itx-chat::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(to right,var(--orange-500),var(--pink-500),var(--purple-500),var(--indigo-500),var(--blue-500),var(--cyan-500),var(--emerald-500),var(--lime-500),var(--brand-lime),var(--yellow-500),var(--orange-500),var(--pink-500),var(--purple-500),var(--indigo-500),var(--blue-500),var(--cyan-500),var(--emerald-500),var(--lime-500),var(--brand-lime),var(--yellow-500)); background-size:200% 100%; animation:rainbow-slide 3s linear infinite; z-index:1; pointer-events:none; } .ts-itx-chat-hdr { background:linear-gradient(to right,var(--brand-lime),var(--brand-teal),var(--brand-lime)); background-size:200% 100%; animation:green-flow 5s ease-in-out infinite alternate; padding:14px 12px 10px; display:flex; align-items:center; gap:8px; flex-shrink:0; cursor:pointer; } .ts-itx-orb-sm { width:22px; height:22px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; } .ts-itx-orb-sm img { width:18px; height:18px; object-fit:contain; } .ts-itx-chat-title { flex:1; font-size:var(--fs-sm); font-weight:700; color:#fff; } .ts-rail-itx { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand-lime),var(--brand-teal)); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:opacity 0.15s; box-shadow:0 2px 8px rgba(181,209,0,0.35); flex-shrink:0; overflow:hidden; padding:0; } .ts-rail-itx:hover { opacity:0.82; } .ts-rail-itx img { width:22px; height:22px; object-fit:contain; }.help-hdr-btn { width:24px; height:24px; border-radius:6px; border:none; background:rgba(255,255,255,0.18); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); transition:background 0.15s; flex-shrink:0; font-family:inherit; } .help-hdr-btn:hover { background:rgba(255,255,255,0.32); } .help-messages { flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; } .help-msg { max-width:90%; font-size:var(--fs-md); line-height:1.65; padding:9px 12px; border-radius:12px; word-break:break-word; } .help-msg-user { background:linear-gradient(135deg,var(--lime-400),var(--brand-teal)); color:#fff; align-self:flex-end; border-radius:12px 12px 3px 12px; font-weight:500; } .help-msg-assistant { background:var(--gray-bg); border:1px solid var(--gray-border); color:var(--text); align-self:flex-start; border-radius:12px 12px 12px 3px; } .help-msg-row { display:flex; align-items:flex-end; gap:6px; align-self:flex-start; max-width:90%; } @keyframes bot-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } .help-msg-row .help-msg-assistant { align-self:unset; max-width:100%; } /* Dancing bird easter egg (birds / "Burney" / the platform's creator) — appended below the assistant's answer by _helpDuckHtml, never instead of it, and picked at random from _HELP_BIRD_GIFS (animated WebP). They have transparent backgrounds, so they need no plate; the caption keeps one from reading as a broken attachment. Sizing is by max-width AND max-height, not width alone, so the pool can hold a different aspect ratio later without one entry rendering tiny and another oversized (it briefly held a wide 498×280 rooster). The img keeps its real width/height attributes so the chat doesn't reflow mid-decode. prefers-reduced-motion still hides it: an animated WebP can't be paused either. */ .help-duck { margin-top:10px; padding-top:9px; border-top:1px dashed var(--gray-border); text-align:center; } .help-duck img { display:inline-block; width:auto; height:auto; max-width:min(190px, 100%); max-height:134px; } .help-duck-cap { font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); margin-top:2px; } /* prefers-reduced-motion can't pause a GIF, so hide it outright rather than animate against the user's stated preference. */ @media (prefers-reduced-motion: reduce) { .help-duck { display:none; } } .help-msg-typing { display:inline-flex; gap:5px; align-items:center; padding:11px 14px; } .help-msg-typing span { width:6px; height:6px; background:var(--text-muted); border-radius:50%; animation:dot-bounce 1.2s ease-in-out infinite; display:block; } .help-msg-typing span:nth-child(2) { animation-delay:0.2s; } .help-msg-typing span:nth-child(3) { animation-delay:0.4s; } .help-msg-meta { margin-top:6px; font-size:var(--fs-xs); color:var(--text-muted); display:flex; align-items:center; gap:6px; } .help-msg-meta.warn { color:var(--amber-700); } .help-msg-meta.info { color:var(--text-muted); } @keyframes dot-bounce { 0%,60%,100%{transform:translateY(0);opacity:0.5} 30%{transform:translateY(-5px);opacity:1} } @keyframes help-fade-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-6px)} } @keyframes help-slide-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } .help-msg-fade-out { animation:help-fade-out 0.22s ease-in forwards; pointer-events:none; } .help-msg-row, .help-msg { animation:help-slide-up 0.28s cubic-bezier(0.22,1,0.36,1) both; } .help-chips-wrap { padding:0 12px 10px; display:flex; flex-direction:column; gap:5px; flex-shrink:0; } .help-chip { text-align:left; padding:7px 11px; background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:8px; font-size:var(--fs-sm); color:var(--text); cursor:pointer; font-family:inherit; transition:background 0.15s,border-color 0.15s; line-height:1.35; } .help-chip:hover { background:rgba(181,209,0,0.1); border-color:var(--brand-lime); color:var(--lime-800); } body.dark .help-chip:hover { background:rgba(181,209,0,0.08); color:var(--brand-lime); border-color:var(--brand-lime); } .help-input-area { padding:10px 12px; border-top:1px solid var(--gray-border); display:flex; gap:8px; align-items:flex-end; flex-shrink:0; background:var(--modal-bg); } .help-input { flex:1; border:1px solid var(--field-border); border-radius:10px; padding:8px 12px; font-size:var(--fs-md); font-family:inherit; background:var(--gray-bg); color:var(--text); resize:none; line-height:1.5; min-height:36px; max-height:90px; overflow-y:auto; } .help-input:focus { outline:none; border-color:var(--focus-ring); box-shadow:0 0 0 3px rgba(0,120,111,0.28); } .help-send-btn { width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--lime-400),var(--brand-teal)); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity 0.15s; } .help-send-btn:hover { opacity:0.85; } .help-send-btn:disabled { opacity:0.35; cursor:not-allowed; } /* NOTIFICATION HISTORY */ .notif-hist-entry { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-bottom:1px solid var(--gray-border); } .notif-hist-entry:last-child { border-bottom:none; } .notif-hist-badge { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .notif-hist-info { flex:1; min-width:0; } .notif-hist-type { font-size:var(--fs-xs); font-weight:700; margin-bottom:2px; } .notif-hist-subject { font-size:var(--fs-sm); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; } .notif-hist-meta { font-size:var(--fs-xs); color:var(--text-muted); } .notif-hist-entry.is-cancelled .notif-hist-badge { opacity:0.5; } .notif-hist-entry.is-cancelled .notif-hist-subject { color:var(--text-muted); text-decoration:line-through; text-decoration-color:rgba(220,38,38,0.45); } .notif-hist-cancel-tag { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.02em; color:var(--brand-red); background:rgba(220,38,38,0.10); border:1px solid rgba(220,38,38,0.25); border-radius:5px; padding:1px 5px; margin-right:5px; vertical-align:1px; text-decoration:none; } .notif-hist-empty { text-align:center; padding:44px 20px; color:var(--text-muted); } .notif-hist-header { padding:14px 16px 10px; border-bottom:1px solid var(--gray-border); display:flex; align-items:center; justify-content:space-between; } .notif-hist-title { font-size:var(--fs-md); font-weight:700; color:var(--text); } .notif-hist-clear { font-size:var(--fs-xs); color:var(--text-muted); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; } .notif-hist-clear:hover { color:var(--brand-red); } .notif-hist-group { border-bottom:1px solid var(--gray-border); } .notif-hist-group:last-child { border-bottom:none; } .notif-hist-group-hdr { display:flex; align-items:center; gap:8px; padding:10px 16px; font-size:var(--fs-xs); font-weight:700; letter-spacing:.4px; text-transform:uppercase; border-bottom:1px solid var(--gray-border); } .notif-hist-group-icon { display:flex; align-items:center; } .notif-hist-group-label { flex:1; } .notif-hist-group-count { font-size:var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:10px; background:rgba(0,0,0,0.08); } /* History filters bar */ .notif-hist-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--gray-border); background:var(--gray-bg); } .notif-hist-filter-select, .notif-hist-filter-date { font-family:inherit; font-size:var(--fs-sm); color:var(--text); border:1px solid var(--gray-border); border-radius:7px; padding:6px 9px; background:var(--white); cursor:pointer; transition:border-color .15s; } .notif-hist-filter-select { padding-right:28px; background-position:right 8px center; } .notif-hist-filter-select:hover, .notif-hist-filter-date:hover { border-color:var(--teal); } .notif-hist-filter-select:focus, .notif-hist-filter-date:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 2px rgba(0,169,157,0.15); } .notif-hist-date-group { display:flex; align-items:center; gap:6px; } .notif-hist-date-sep { font-size:var(--fs-sm); color:var(--text-muted); } .notif-hist-filter-clear { font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:6px 4px; margin-left:auto; transition:color .15s; } .notif-hist-filter-clear:hover { color:var(--brand-red); } .notif-hist-filter-result { font-size:var(--fs-xs); color:var(--text-muted); padding:0 16px 9px; background:var(--gray-bg); border-bottom:1px solid var(--gray-border); } .automation-cancel-btn { align-self:center; flex-shrink:0; padding:5px 10px; border-radius:7px; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:600; background:var(--red-100); border:1px solid #FECACA; color:var(--brand-red); transition:background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; } .automation-cancel-btn:hover { background:var(--red-300); border-color:var(--red-400); color:var(--red-900); box-shadow:0 2px 6px rgba(220,38,38,0.28); } .automation-team-chips { display:flex; flex-wrap:wrap; gap:4px; } .automation-team-chip { font-size:var(--fs-xs); font-weight:700; letter-spacing:0.2px; padding:2px 7px; border-radius:5px; line-height:1.5; } .automation-recurrence-pill { display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.2px; padding:2px 7px; border-radius:5px; margin-left:6px; background:rgba(124,58,237,0.10); color:var(--purple-800); border:1px solid rgba(124,58,237,0.25); } /* Automations list — modern card layout (overrides the flat notif-hist row) */ #automationsList { padding:12px 14px; display:flex; flex-direction:column; gap:10px; } #automationsList .notif-hist-empty { padding:40px 20px; } .automation-entry { border:1px solid var(--gray-border); border-radius:12px; padding:13px 14px; gap:13px; background:var(--card-bg, #fff); box-shadow:0 1px 2px rgba(0,0,0,0.04); position:relative; overflow:hidden; transition:box-shadow 0.18s, border-color 0.18s, transform 0.18s; } .automation-entry::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--auto-accent, var(--teal)); opacity:0.9; } .automation-entry:last-child { border-bottom:1px solid var(--gray-border); } .automation-entry:hover { box-shadow:0 4px 14px rgba(0,0,0,0.08); border-color:var(--auto-accent, var(--teal)); /* no translateY — stacked list; a lift makes the rows flicker (CLAUDE.md pitfall) */ } .automation-entry[data-failed="true"] { background:rgba(220,38,38,0.025); } body.dark .automation-entry { background:rgba(255,255,255,0.03); box-shadow:none; } body.dark .automation-entry:hover { box-shadow:0 4px 14px rgba(0,0,0,0.35); } /* Automations tabs (Pending / Failed) */ .automations-tabs { display:flex; gap:4px; padding:0 14px; border-bottom:1px solid var(--gray-border); background:var(--gray-bg); } body.dark .automations-tabs { background:rgba(255,255,255,0.03); } .automations-tab { background:transparent; border:none; border-bottom:2px solid transparent; padding:10px 4px; margin:0 8px 0 0; font-family:inherit; font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color 0.15s, border-color 0.15s; } .automations-tab:hover { color:var(--text); } .automations-tab.active { color:var(--lime-700); border-bottom-color:var(--brand-lime); } body.dark .automations-tab.active, body.dark .automations-tab.active .automations-tab-count { color:var(--lime-dark-accent); } .automations-tab-count { font-size:var(--fs-xs); font-weight:700; padding:1px 6px; border-radius:9px; min-width:16px; text-align:center; background:var(--gray-border); color:var(--text-muted); } .automations-tab.active .automations-tab-count { background:rgba(181,209,0,0.20); color:var(--lime-700); } .auto-failed-count[data-has-failures="true"] { background:rgba(220,38,38,0.15); color:var(--brand-red); } /* Failed entry adornments */ .automation-error-box { margin-top:6px; padding:7px 10px; background:rgba(220,38,38,0.07); border:1px solid rgba(220,38,38,0.20); border-radius:6px; font-size:var(--fs-xs); line-height:1.45; color:var(--red-900); font-family:ui-monospace,Consolas,Menlo,monospace; white-space:pre-wrap; word-break:break-word; max-height:80px; overflow-y:auto; } body.dark .automation-error-box { color:var(--red-300); background:rgba(220,38,38,0.10); border-color:rgba(220,38,38,0.30); } .automation-row-actions { display:flex; flex-direction:column; gap:5px; align-self:center; flex-shrink:0; } .automation-retry-btn { padding:5px 10px; border-radius:7px; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:600; background:rgba(124,58,237,0.10); border:1px solid rgba(124,58,237,0.30); color:var(--purple-800); transition:background 0.15s, border-color 0.15s; } .automation-retry-btn:hover { background:rgba(124,58,237,0.18); border-color:rgba(124,58,237,0.50); } body.dark .automation-retry-btn { background:rgba(167,139,250,0.14); color:#C4B5FD; border-color:rgba(167,139,250,0.30); } .automation-edit-btn { padding:5px 10px; border-radius:7px; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:600; background:rgba(0,169,157,0.10); border:1px solid rgba(0,169,157,0.30); color:var(--teal-700); transition:background 0.15s, border-color 0.15s; } .automation-edit-btn:hover { background:rgba(0,169,157,0.20); border-color:rgba(0,169,157,0.50); } body.dark .automation-edit-btn { background:rgba(0,169,157,0.16); color:var(--teal-300); border-color:rgba(0,169,157,0.40); } /* Frequency radio toggle in the schedule form */ .schedule-onb-freq-opt { flex:1; cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; background:#fff; border:1.5px solid var(--gray-border); border-radius:8px; font-size:var(--fs-sm); font-weight:600; color:var(--text); transition:border-color 0.15s, background 0.15s; } .schedule-onb-freq-opt:hover { border-color:var(--green); } .schedule-onb-freq-opt input[type=radio] { width:14px; height:14px; accent-color:var(--green); margin:0; } .schedule-onb-freq-opt:has(input[type=radio]:checked) { border-color:var(--green); background:rgba(181,209,0,0.10); } body.dark .schedule-onb-freq-opt { background:rgba(255,255,255,0.05); } body.dark .schedule-onb-freq-opt:has(input[type=radio]:checked) { background:rgba(181,209,0,0.14); } .schedule-itex-freq-opt { flex:1; display:flex; align-items:center; gap:7px; padding:9px 12px; border:1px solid var(--gray-border); border-radius:7px; background:var(--card-bg); cursor:pointer; font-size:var(--fs-sm); font-weight:500; transition:all 0.15s; } .schedule-itex-freq-opt:hover { border-color:var(--brand-teal); } .schedule-itex-freq-opt input[type=radio] { width:14px; height:14px; accent-color:var(--brand-teal); margin:0; } .schedule-itex-freq-opt:has(input[type=radio]:checked) { background:rgba(0,169,157,0.10); border-color:var(--brand-teal); color:var(--teal-800); } body.dark .schedule-itex-freq-opt { background:rgba(255,255,255,0.05); } body.dark .schedule-itex-freq-opt:has(input[type=radio]:checked) { background:rgba(0,169,157,0.18); color:var(--teal-300); }.cdot { width:28px; height:28px; flex-shrink:0; border-radius:7px; border:none; display:flex; align-items:center; justify-content:center; cursor:default; transition:all 0.15s; } #dotTooltip { position:fixed; z-index: var(--z-tooltip); background:rgba(10,16,44,0.97); color:rgba(255,255,255,0.92); font-size:var(--fs-xs); font-weight:500; white-space:nowrap; padding:4px 9px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity 0.13s; box-shadow:0 2px 8px rgba(0,0,0,0.25); } #dotTooltip.visible { opacity:1; } .cdot.done { background:rgba(16,185,129,0.10); color:var(--emerald-500); } .cdot.warn { background:rgba(239,68,68,0.10); color:var(--red); } .cdot.pend { background:rgba(148,163,184,0.14); color:var(--slate-400); } body.dark .cdot.done { background:rgba(16,185,129,0.16); color:var(--emerald-400); } body.dark .cdot.warn { background:rgba(239,68,68,0.16); color:var(--red-400); } body.dark .cdot.pend { background:rgba(148,163,184,0.16); color:var(--slate-400); } /* ── TASK SIDEBAR ────────────────────────────────────────────── */ /* Persistent full-height right column: direct child of #appBody (flex row), so it spans the whole content height in every view with .main to its left. */ #taskSidebar { width:280px; flex-shrink:0; background:transparent; border:none; box-shadow:none; display:flex; flex-direction:column; gap:8px; overflow:hidden; transition:width 0.15s cubic-bezier(0.4,0,0.2,1); padding:16px 12px 12px 0; } #taskSidebar.ts-hidden { display:none; } #taskSidebar.ts-collapsed { width:64px; } .ts-expanded { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; background:var(--modal-bg); border-radius:16px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.10); } .ts-itx-panel { display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; background:var(--modal-bg); border-radius:16px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.10); position:relative; } /* Collapsed rail: hide the launcher ROW, never the panel itself — #ts-itx-chat is a position:fixed child of .ts-itx-panel, and display:none on the parent hides fixed descendants too, so the rail's ITX button would open an invisible popup. display:contents drops the panel's box (card chrome + flex slot) but keeps the floating chat renderable. */ #taskSidebar.ts-collapsed .ts-itx-panel { display:contents; } #taskSidebar.ts-collapsed .ts-itx-row { display:none; } /* ── TASK SIDEBAR — compact hire calendar (mini version of Readiness calendar) ── */ .ts-cal-panel { display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; background:var(--modal-bg); border-radius:16px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.10); } #taskSidebar.ts-collapsed .ts-cal-panel { display:none; } .ts-cal-hdr { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:background 0.15s; } .ts-cal-hdr:hover { background:rgba(0,169,157,0.06); } body.dark .ts-cal-hdr:hover { background:rgba(0,169,157,0.10); } .ts-cal-hdr-icon { width:32px; height:32px; border-radius:9px; background:var(--brand-teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ts-cal-hdr-title { font-size:var(--fs-sm); font-weight:700; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ts-cal-hdr-sub { font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .ts-cal-chevron { color:var(--text-muted); flex-shrink:0; transition:transform 0.2s; } .ts-cal-panel.ts-cal-collapsed .ts-cal-chevron { transform:rotate(-90deg); } .ts-cal-wrap { padding:0 14px 12px; } .ts-cal-panel.ts-cal-collapsed .ts-cal-wrap { display:none; } .ts-cal-navrow { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; } .ts-cal-monthlbl { font-size:var(--fs-xs); font-weight:700; color:var(--text-main); } .ts-cal-nav-btn { background:none; border:1px solid var(--gray-border); border-radius:6px; width:22px; height:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:border-color .1s, color .1s; padding:0; } .ts-cal-nav-btn:hover { border-color:var(--brand-lime); color:var(--green-dark); } body.dark .ts-cal-nav-btn:hover { color:var(--lime-300); } .ts-cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px; } .ts-cal-dow > div { text-align:center; font-size:var(--fs-xs); font-weight:700; color:var(--text-muted); } .ts-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .ts-cal-day { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:28px; border-radius:6px; user-select:none; opacity:0.5; } .ts-cal-day > span { font-size:var(--fs-sm); color:var(--text-main); line-height:1; } .ts-cal-day.ts-cal-today > span { font-weight:800; } .ts-cal-day.ts-cal-has { opacity:1; cursor:pointer; box-shadow:inset 0 0 0 1.5px var(--brand-lime); } .ts-cal-day.ts-cal-has:hover { box-shadow:inset 0 0 0 1.5px var(--green-dark); background:rgba(181,209,0,0.10); } .ts-cal-dot { width:3px; height:3px; border-radius:50%; background:var(--brand-lime); margin-top:2px; } /* ── ONBOARDING SUMMARY TRIGGER CARD ──────────────────────────────────── */ .ts-summary-panel { display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; background:var(--modal-bg); border-radius:16px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.10); cursor:pointer; transition:background 0.15s, box-shadow 0.15s; } .ts-summary-panel:hover { background:rgba(59,130,246,0.06); box-shadow:0 4px 20px rgba(59,130,246,0.14); } body.dark .ts-summary-panel:hover { background:rgba(59,130,246,0.10); } #taskSidebar.ts-collapsed .ts-summary-panel { display:none; } .ts-summary-row { display:flex; align-items:center; gap:10px; padding:12px 14px; } .ts-summary-icon { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--blue-600),var(--brand-teal)); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ts-summary-title { font-size:var(--fs-sm); font-weight:700; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ts-summary-nums { font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } /* ── Readiness panel (expanded sidebar) — combined Readiness + Summary card */ .ts-readiness-panel { display:flex; flex-direction:column; flex-shrink:0; overflow:hidden; background:var(--modal-bg); border-radius:16px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.10); transition:box-shadow 0.15s; } .ts-readiness-panel:hover { box-shadow:0 4px 20px rgba(0,0,0,0.16); } #taskSidebar.ts-collapsed .ts-readiness-panel { display:none; } /* Two clickable rows nested in one card, split by a divider */ .ts-combo-row { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:background 0.15s; } .ts-combo-readiness:hover { background:rgba(181,209,0,0.07); } body.dark .ts-combo-readiness:hover { background:rgba(181,209,0,0.10); }/* Rounded-square readiness tile — matches .ts-summary-icon size/shape, with a progress border */ .ts-readiness-ring-wrap { position:relative; width:32px; height:32px; flex-shrink:0; border-radius:9px; background:linear-gradient(135deg,var(--purple-800),#2e1065); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07); } .ts-readiness-ring-svg { position:absolute; inset:0; width:32px; height:32px; display:block; } .ts-rr-bg { fill:none; stroke:rgba(255,255,255,0.13); stroke-width:2.5; } .ts-rr-fill { fill:none; stroke:var(--brand-lime); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.4s; filter:drop-shadow(0 0 2px rgba(0,0,0,0.35)); } .ts-rr-pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:800; color:#fff; letter-spacing:-0.4px; } /* ── Readiness rail button (collapsed sidebar) ──────────────────────────── */ .ts-rail-readiness { position:relative; width:36px; height:36px; border-radius:10px; background:#1a1a2e; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:opacity 0.15s; box-shadow:0 2px 8px rgba(0,0,0,0.30); flex-shrink:0; padding:0; } .ts-rail-readiness:hover { opacity:0.82; } .ts-rail-rr-svg { width:26px; height:26px; transform:rotate(-90deg); position:absolute; } .ts-rail-rr-svg .ts-rr-bg { stroke-width:4; } .ts-rail-rr-fill { fill:none; stroke:var(--brand-lime); stroke-width:4; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1), stroke 0.4s; } .ts-rail-rr-pct { position:relative; z-index:1; font-size:var(--fs-xs); font-weight:800; color:#fff; letter-spacing:-0.3px; line-height:1; }/* KPI row */ .ons-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .ons-kpi-card { border-radius:12px; padding:11px 14px 10px; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; display:flex; flex-direction:column; position:relative; overflow:hidden; user-select:none; } .ons-kpi-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.22); } .ons-kpi-card:active { transform:translateY(0); } .ons-kpi-sublabel { font-size:var(--fs-xs); font-weight:700; color:rgba(255,255,255,0.75); letter-spacing:0.7px; text-transform:uppercase; } .ons-kpi-num { font-size:28px; font-weight:900; line-height:1.05; color:#fff; margin:2px 0; } .ons-kpi-period { font-size:var(--fs-sm); font-weight:700; color:rgba(255,255,255,0.9); font-style:italic; } .ons-kpi-deco { position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,0.10); pointer-events:none; } .ons-blue { background:linear-gradient(135deg,var(--blue-700),var(--blue-500)); } .ons-purple { background:linear-gradient(135deg,#4c1d95,var(--brand-purple)); } .ons-teal { background:linear-gradient(135deg,#0a6b63,var(--brand-teal)); } .ons-dark { background:linear-gradient(135deg,#312e81,#4338ca); } /* Middle row */ .ons-mid-row { display:grid; grid-template-columns:1fr 1fr 240px; gap:10px; } .ons-cal-panel { flex-shrink:0; min-width:0; } .ons-panel { background:var(--card-bg,var(--modal-bg)); border:1px solid var(--gray-border); border-radius:12px; padding:10px 13px; display:flex; flex-direction:column; gap:7px; } body.dark .ons-panel { background:rgba(255,255,255,0.04); } .ons-panel-hdr { display:flex; flex-direction:column; gap:1px; } .ons-panel-title { font-size:var(--fs-sm); font-weight:800; color:var(--text-main); } .ons-panel-sub { font-size:var(--fs-xs); color:var(--text-muted); } /* Pending actions */ .ons-pending-list { display:flex; flex-direction:column; gap:6px; } .ons-task-item { display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:9px; background:var(--hover-bg,rgba(0,0,0,0.03)); cursor:pointer; transition:background 0.12s; } .ons-task-item:hover { background:rgba(59,130,246,0.08); } body.dark .ons-task-item { background:rgba(255,255,255,0.04); } body.dark .ons-task-item:hover { background:rgba(59,130,246,0.12); } .ons-task-icon-wrap { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ons-task-body { flex:1; min-width:0; } .ons-task-label { font-size:var(--fs-xs); font-weight:600; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ons-task-link { font-size:var(--fs-xs); color:var(--blue-600); font-weight:600; } .ons-task-count { font-size:var(--fs-md); font-weight:800; color:var(--text-main); flex-shrink:0; } .ons-no-tasks { font-size:var(--fs-sm); color:var(--text-muted); padding:10px 0; text-align:center; } /* Onboarding Status */ .ons-status-list { display:flex; flex-direction:column; gap:6px; } .ons-status-item { display:flex; align-items:center; gap:10px; cursor:pointer; padding:3px 2px; border-radius:8px; transition:background 0.12s; } .ons-status-item:hover { background:rgba(0,0,0,0.04); } body.dark .ons-status-item:hover { background:rgba(255,255,255,0.06); } .ons-status-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ons-si-blue { background:var(--blue-100); color:var(--blue-700); } .ons-si-amber { background:#fef3c7; color:var(--amber-600); } .ons-si-red { background:var(--red-100); color:var(--brand-red); } body.dark .ons-si-blue { background:rgba(37,99,235,0.22); color:#93c5fd; } body.dark .ons-si-amber { background:rgba(217,119,6,0.22); color:var(--amber-300); } body.dark .ons-si-red { background:rgba(220,38,38,0.22); color:var(--red-300); } .ons-status-body { flex:1; } .ons-status-num { font-size:var(--fs-xl); font-weight:900; color:var(--text-main); line-height:1; } .ons-status-lbl { font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); margin-top:1px; } #taskSidebar.ts-collapsed .ts-expanded { display:none; } .ts-rail { display:none; flex-direction:column; align-items:center; padding:12px 10px; gap:10px; flex:1; background:var(--modal-bg); border-radius:14px; border:1px solid var(--gray-border); box-shadow:0 4px 20px rgba(0,0,0,0.08); } #ts-rail-items { display:flex; flex-direction:column; align-items:center; gap:10px; } #taskSidebar.ts-collapsed .ts-rail { display:flex; } @keyframes ts-gradient-flow { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .ts-header { position:relative; overflow:hidden; padding:0 14px 0 8px; height:56px; display:flex; align-items:center; gap:6px; flex-shrink:0; } .ts-header::before { content:''; position:absolute; inset:0; width:200%; background: linear-gradient(90deg, var(--teal-700) 0%, var(--teal-600) 6.25%, var(--teal-600) 12.5%, var(--teal-500) 18.75%, var(--brand-teal) 25%, var(--teal-500) 31.25%, var(--teal-600) 37.5%, var(--teal-600) 43.75%, var(--teal-700) 50%, var(--teal-600) 56.25%, var(--teal-600) 62.5%, var(--teal-500) 68.75%, var(--brand-teal) 75%, var(--teal-500) 81.25%, var(--teal-600) 87.5%, var(--teal-600) 93.75%, var(--teal-700) 100%); animation: ts-gradient-flow 8s linear infinite; z-index:0; } .ts-header > * { position:relative; z-index:1; } .ts-header-icon { width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,0.22); border:1.5px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ts-header-title { flex:1; min-width:0; margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-xs); font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.9); } .ts-collapse-btn { background:rgba(255,255,255,0.18); border:none; color:#fff; cursor:pointer; padding:5px 7px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:background 0.15s; flex-shrink:0; } .ts-collapse-btn:hover { background:rgba(255,255,255,0.32); } .ts-min-btn { padding:5px 6px; min-width:25px; height:23px; } /* ── My Tasks / Activity minimized (side panel only) ── the panel folds to one row styled like the Readiness / Calendar cards; the cards below move up. Docked the class is inert: there, – closes the popup instead. */ .ts-min-row { display:none; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; transition:background 0.15s; } .ts-min-row:hover { background:rgba(0,169,157,0.06); } body.dark .ts-min-row:hover { background:rgba(0,169,157,0.10); } .ts-min-row:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; border-radius:16px; } .ts-min-icon { width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--teal-600),var(--teal-700)); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ts-min-text { flex:1; min-width:0; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; } .ts-min-lbl { font-size:var(--fs-sm); font-weight:700; color:var(--text-main); } .ts-min-sep { color:var(--text-muted); font-size:var(--fs-sm); } #taskSidebar.ts-tasks-min:not(.ts-dock):not(.ts-collapsed) .ts-expanded { flex:0 0 auto; } #taskSidebar.ts-tasks-min:not(.ts-dock):not(.ts-collapsed) .ts-expanded > :not(.ts-min-row) { display:none !important; } #taskSidebar.ts-tasks-min:not(.ts-dock):not(.ts-collapsed) .ts-min-row { display:flex; } /* ── AUTOMATION CENTER — sidebar launcher card (compact, matches Summary/Readiness) ── */ .ts-auto-icon-sq { background:linear-gradient(135deg,var(--brand-purple),var(--brand-teal)); } /* ── Calendar + Automation Center rail buttons (collapsed sidebar) ──────── */ .ts-rail-cal { width:36px; height:36px; border-radius:10px; background:var(--brand-teal); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:opacity 0.15s; box-shadow:0 2px 8px rgba(0,169,157,0.35); flex-shrink:0; padding:0; } .ts-rail-cal:hover { opacity:0.82; } /* Information Center (→ Documentation view). Shown in the collapsed side rail too, not only the dock (the dock restyles it via --db1/--db2 below). */ .ts-rail-info { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--yellow-500),var(--amber-600)); color:#fff; display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:opacity 0.15s; box-shadow:0 2px 8px color-mix(in srgb, var(--amber-600) 35%, transparent); flex-shrink:0; padding:0; } .ts-rail-info:hover { opacity:0.82; } .ts-auto-rail { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand-purple),var(--brand-teal)); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; transition:opacity 0.15s; box-shadow:0 2px 8px rgba(124,58,237,0.35); flex-shrink:0; padding:0; } .ts-auto-rail:hover { opacity:0.82; } /* Greeting, date and pending count on ONE line — the panel is tight. */ .ts-subheader { padding:10px 16px 6px; flex-shrink:0; } .ts-greeting { font-size:var(--fs-sm); font-weight:700; color:var(--text); } .ts-body { flex:1; overflow-y:auto; padding:4px 10px 14px; } /* ── My Tasks tones ── one --tt accent per item (icon tile, rail icon, the Readiness "Pending Actions" icons). Replaces inline hex backgrounds that had no dark-mode counterpart. */ .ts-tone-blue { --tt: var(--blue-600); } .ts-tone-purple { --tt: var(--brand-purple); } .ts-tone-amber { --tt: var(--amber-600); } .ts-tone-slate { --tt: var(--slate-500); } .ts-tone-teal { --tt: var(--teal-600); } .ts-tone-rose { --tt: var(--pink-600); } .ts-tone-orange { --tt: var(--orange-600); } .ts-tone-red { --tt: var(--brand-red); } body.dark .ts-tone-blue { --tt: var(--blue-400); } body.dark .ts-tone-purple { --tt: var(--purple-400); } body.dark .ts-tone-amber { --tt: var(--amber-400); } body.dark .ts-tone-slate { --tt: var(--slate-300); } body.dark .ts-tone-teal { --tt: var(--teal-400); } body.dark .ts-tone-rose { --tt: var(--pink-500); } body.dark .ts-tone-orange { --tt: var(--orange-500); } body.dark .ts-tone-red { --tt: var(--red-400); } .ts-item-icon, .ts-rail-item-icon, .ons-task-icon-wrap[class*="ts-tone-"] { background: color-mix(in srgb, var(--tt, var(--gray-500)) 14%, transparent); color: var(--tt, var(--gray-500)); } body.dark .ts-item-icon, body.dark .ts-rail-item-icon, body.dark .ons-task-icon-wrap[class*="ts-tone-"] { background: color-mix(in srgb, var(--tt, var(--gray-500)) 22%, transparent); } .ts-rail-item-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; } /* An item = a row (clickable main area + optional preview chevron) and, when open, a short list of the hires behind the count. */ .ts-item { border-radius:10px; margin-bottom:8px; background:var(--gray-bg); border:1.5px solid transparent; transition:border-color 0.18s, background 0.18s, box-shadow 0.18s; } .ts-item:hover { background:var(--gray-100); border-color:rgba(0,0,0,0.1); box-shadow:0 8px 24px rgba(0,0,0,0.10); } /* hover = shadow/border only — a translateY lift on a stacked list makes rows flicker (see CLAUDE.md pitfall) */ body.dark .ts-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.12); } /* The item currently filtering the dashboard — click it again to clear. */ .ts-item--active, .ts-item--active:hover { border-color:var(--brand-teal); background:color-mix(in srgb, var(--brand-teal) 8%, var(--gray-bg)); } body.dark .ts-item--active, body.dark .ts-item--active:hover { border-color:var(--teal-400); background:rgba(0,169,157,0.14); } .ts-item-row { position:relative; } .ts-item-main { display:flex; align-items:flex-start; gap:10px; padding:12px 10px; cursor:pointer; border-radius:10px; } .ts-item--has-prev .ts-item-main { min-height:68px; } .ts-item-main:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; } .ts-item-icon { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .ts-item-text { flex:1; min-width:0; } .ts-item-label { font-size:var(--fs-sm); font-weight:600; color:var(--text); display:block; white-space:normal; overflow:visible; } .ts-item-sub { font-size:var(--fs-xs); color:var(--text-muted); display:block; margin-top:2px; white-space:normal; overflow:visible; } .ts-item-when { font-size:var(--fs-xs); color:var(--text-muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:4px; } .ts-item-count { font-size:var(--fs-xs); font-weight:700; min-width:22px; text-align:center; background:rgba(0,0,0,0.07); color:var(--text); border-radius:20px; padding:2px 7px; flex-shrink:0; } body.dark .ts-item-count { background:rgba(255,255,255,0.11); } /* Due chip — earliest start date behind the item. */ .ts-due { font-size:var(--fs-xs); font-weight:700; padding:1px 7px; border-radius:10px; border:1px solid transparent; white-space:nowrap; } .ts-due--overdue { background:var(--danger-bg); color:var(--danger-text); border-color:var(--danger-border); } .ts-due--today { background:color-mix(in srgb, var(--amber-600) 12%, transparent); color:var(--amber-700); border-color:color-mix(in srgb, var(--amber-600) 30%, transparent); } .ts-due--tomorrow { background:color-mix(in srgb, var(--blue-600) 10%, transparent); color:var(--blue-700); border-color:color-mix(in srgb, var(--blue-600) 26%, transparent); } body.dark .ts-due--today { color:var(--amber-300); } body.dark .ts-due--tomorrow { color:var(--blue-400); } /* Sits in the count's column (bottom-right), so the text keeps its width. */ .ts-item-expand { position:absolute; right:9px; bottom:9px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0; background:var(--modal-bg); border:1px solid var(--gray-border); color:var(--text-muted); cursor:pointer; border-radius:6px; transition:background 0.12s, color 0.12s; } .ts-item-expand:hover { background:rgba(0,0,0,0.05); color:var(--text); } body.dark .ts-item-expand:hover { background:rgba(255,255,255,0.07); } .ts-item-expand svg { transition:transform 0.15s; } .ts-item--open .ts-item-expand svg { transform:rotate(180deg); } .ts-item-preview { border-top:1px solid var(--gray-border); padding:4px 6px 6px; display:flex; flex-direction:column; } .ts-prev-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; width:100%; padding:6px 6px; border:none; background:transparent; border-radius:6px; cursor:pointer; font-family:inherit; text-align:left; color:var(--text); } .ts-prev-row:hover { background:rgba(0,0,0,0.05); } body.dark .ts-prev-row:hover { background:rgba(255,255,255,0.07); } .ts-prev-name { font-size:var(--fs-xs); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ts-prev-meta { font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; flex-shrink:0; } .ts-prev-all { align-self:flex-start; margin:4px 6px 0; padding:0; border:none; background:none; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:700; color:var(--teal-700); } .ts-prev-all:hover { text-decoration:underline; } body.dark .ts-prev-all { color:var(--teal-400); } /* Admin team groups */ .ts-group { margin-bottom:6px; } .ts-group-hdr { display:flex; align-items:center; gap:6px; width:100%; padding:6px 4px; margin:2px 0 4px; background:none; border:none; cursor:pointer; font-family:inherit; color:var(--text-muted); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.6px; text-transform:uppercase; text-align:left; } .ts-group-hdr:hover { color:var(--text); } .ts-group-hdr svg { transition:transform 0.15s; } .ts-group--collapsed .ts-group-hdr svg { transform:rotate(-90deg); } .ts-group-name { flex:1; } .ts-group-count { font-weight:700; letter-spacing:0; background:rgba(0,0,0,0.07); color:var(--text); border-radius:10px; padding:0 7px; } body.dark .ts-group-count { background:rgba(255,255,255,0.11); } /* Offboarding view — says why the list changed */ .ts-context { display:flex; align-items:center; gap:6px; margin:2px 2px 8px; padding:5px 8px; border-radius:6px; font-size:var(--fs-xs); font-weight:700; color:var(--danger-text); background:var(--danger-bg); } .ts-allclear-checks { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px; } .ts-allclear-checks li { font-size:var(--fs-xs); color:var(--text-muted); background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:10px; padding:1px 8px; } .ts-allclear-checks li::before { content:'✓ '; color:var(--emerald-600); font-weight:700; } /* ── Sidebar tabs (My Tasks ↔ Activity) ─────────────────────────── */ .ts-tabs { display:flex; gap:6px; padding:0 10px 8px; flex-shrink:0; border-bottom:1px solid var(--gray-border); } .ts-tab { flex:1; padding:8px 10px; font-size:var(--fs-sm); font-weight:600; background:transparent; border:none; cursor:pointer; color:var(--text-muted); border-radius:8px 8px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; position:relative; transition:color 0.15s, background 0.15s; } .ts-tab:hover { color:var(--text); background:rgba(0,0,0,0.04); } body.dark .ts-tab:hover { background:rgba(255,255,255,0.06); } .ts-tab.active { color:var(--text); background:var(--gray-bg); } .ts-tab.active::after { content:''; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; background:var(--brand-lime); border-radius:2px; } .ts-tab-badge { font-size:var(--fs-xs); font-weight:700; min-width:18px; padding:1px 6px; background:var(--brand-red); color:#fff; border-radius:10px; display:none; } .ts-tab-badge.active { display:inline-block; } /* Activity filters: scope chips (who) + type select (what) + sound toggle. */ .ts-activity-filter { padding:8px 12px 6px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; } .act-scope-chips { display:flex; gap:2px; padding:2px; background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:8px; } .act-chip { flex:1 1 auto; min-width:0; padding:5px 4px; border:none; border-radius:6px; background:transparent; font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--text-muted); cursor:pointer; white-space:nowrap; transition:background 0.12s, color 0.12s; } .act-chip:hover { color:var(--text); } .act-chip.active { background:var(--modal-bg); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,0.12); } body.dark .act-chip.active { background:rgba(255,255,255,0.12); } .act-archived-bar { display:flex; align-items:center; justify-content:space-between; padding:4px 2px; } .act-archived-title { font-size:var(--fs-xs); font-weight:800; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-muted); } .act-filter-row { display:flex; gap:6px; align-items:stretch; } .act-type-select { flex:1 1 auto; min-width:0; padding:5px 28px 5px 8px; font-size:var(--fs-xs); border:1px solid var(--gray-border); border-radius:6px; background:var(--gray-bg); color:var(--text); font-family:inherit; background-position:right 8px center; } .act-type-select:hover { border-color:var(--teal); } .act-mute-btn { flex:0 0 30px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--gray-border); border-radius:6px; background:var(--gray-bg); color:var(--text-muted); cursor:pointer; transition:background 0.12s, color 0.12s, border-color 0.12s; } .act-mute-btn:hover { color:var(--text); border-color:var(--text-muted); } .act-mute-btn .act-bell-off { display:none; } .act-mute-btn.muted { color:var(--danger-text); border-color:var(--danger-border); background:var(--danger-bg); } .act-mute-btn.muted .act-bell-on { display:none; } .act-mute-btn.muted .act-bell-off { display:block; } /* Footer: archived view toggle + bulk read/archive */ .act-footer { flex-shrink:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2px 6px; padding:8px 12px; border-top:1px solid var(--gray-border); } .act-footer-sep { color:var(--text-muted); font-size:var(--fs-xs); } .act-link-btn { padding:2px 2px; border:none; background:none; cursor:pointer; font-family:inherit; font-size:var(--fs-xs); font-weight:600; color:var(--teal-700); } .act-link-btn:hover { text-decoration:underline; } body.dark .act-link-btn { color:var(--teal-400); } /* Day group heading (sticky within the scrolling feed) */ .act-day-hdr { position:sticky; top:-4px; z-index:var(--z-sticky); padding:8px 4px 4px; background:var(--modal-bg); font-size:var(--fs-xs); font-weight:800; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--gray-border); } /* ── Activity feed entries ──────────────────────────────────────── */ .act-entry { position:relative; display:flex; gap:9px; padding:11px 8px 11px 14px; cursor:pointer; transition:background 0.12s; align-items:flex-start; border-bottom:1px solid var(--gray-border); } .act-entry::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--gray-500); } .act-entry--audit::before { background:var(--brand-lime); } .act-entry--notif::before { background:var(--blue-500); } /* blue, not purple — purple means "unread mention" */ .act-entry--comment::before { background:var(--brand-teal); } .act-entry:last-child { border-bottom:none; } .act-entry--static { cursor:default; } .act-entry:hover { background:rgba(0,0,0,0.04); } body.dark .act-entry:hover { background:rgba(255,255,255,0.05); } /* Unread @mention — purple accent + faint tint so it reads as "needs attention" */ .act-entry--unread { background:rgba(124,58,237,0.07); } .act-entry--unread::before { background:var(--brand-purple); width:4px; } .act-entry--unread:hover { background:rgba(124,58,237,0.12); } body.dark .act-entry--unread { background:rgba(124,58,237,0.18); } body.dark .act-entry--unread:hover { background:rgba(124,58,237,0.26); } /* Unread, not a mention — must LOOK unread, or the tab badge counts rows the user can't find. Dot + stronger text, no tint (the tint is for mentions). */ .act-entry--new .act-line { font-weight:600; } .act-unread-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--brand-teal); margin-right:6px; vertical-align:1px; } .act-entry--unread .act-unread-dot { background:var(--brand-purple); } /* "Field: old → new" lines under an edit */ .act-diff { margin-top:3px; display:flex; flex-direction:column; gap:1px; } .act-diff-line { font-size:var(--fs-xs); color:var(--text-muted); word-wrap:break-word; } .act-diff-field { font-weight:600; color:var(--text); } .act-diff-from { text-decoration:line-through; text-decoration-color:color-mix(in srgb, currentColor 50%, transparent); } .act-diff-to { color:var(--text); font-weight:600; } .act-diff-arrow { color:var(--text-muted); } .act-diff-more { font-size:var(--fs-xs); color:var(--text-muted); font-style:italic; } .act-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; color:#fff; } .act-body { flex:1; min-width:0; line-height:1.45; } .act-line { font-size:var(--fs-sm); color:var(--text); word-wrap:break-word; } .act-line strong { font-weight:600; } .act-meta { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:6px; } .act-meta-txt { flex:1; min-width:0; } .act-target { font-weight:600; color:var(--text); } .act-empty { text-align:center; padding:30px 14px; color:var(--text-muted); font-size:var(--fs-sm); } /* Per-entry mark-read / archive — faint at rest so they're discoverable, full on hover/focus, always full on touch (no hover there). Buttons stopPropagation before the entry's own navigate-to-thread click. */ .act-actions { flex:0 0 auto; display:flex; gap:4px; opacity:0.4; transition:opacity 0.12s; } .act-entry:hover .act-actions, .act-entry:focus-within .act-actions { opacity:1; } @media (hover: none) { .act-actions { opacity:1; } } .act-action-btn { width:22px; height:22px; border-radius:5px; border:1px solid var(--gray-border); background:var(--modal-bg); color:var(--text-muted); line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background 0.12s, color 0.12s; } .act-action-btn:hover { background:var(--brand-teal); color:#fff; border-color:var(--brand-teal); } .act-entry--archived { opacity:0.62; } /* ── Comment thread (lavender card, in row-expand + addModal) ─────── */ .discussion-host { margin: 16px 18px 4px; padding: 16px 18px 18px; background: linear-gradient(180deg, rgba(124,58,237,0.07) 0%, rgba(124,58,237,0.02) 100%); border: 1px solid rgba(124,58,237,0.18); border-left: 3px solid var(--brand-purple); border-radius: 14px; position: relative; box-shadow: 0 1px 2px rgba(124,58,237,0.04); } body.dark .discussion-host { background: linear-gradient(180deg, rgba(124,58,237,0.14) 0%, rgba(124,58,237,0.05) 100%); border-color: rgba(124,58,237,0.30); border-left-color: var(--purple-400); } .discussion-section-hdr { font-size: var(--fs-sm); font-weight: 800; color: var(--purple-800); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } body.dark .discussion-section-hdr { color: #C4B5FD; } .cm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); margin-left: 6px; box-shadow: 0 0 0 0 rgba(22,163,74,0.5); animation: cm-live-pulse 2s ease-out infinite; } .cm-live-label { font-size: var(--fs-xs); font-weight: 700; color: var(--green-600); text-transform: lowercase; letter-spacing: 0.3px; } @keyframes cm-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .discussion-mount { display: flex; flex-direction: column; gap: 8px; } .cm-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; } /* Row-expand panel only: side-by-side discussion — thread on the left, compose on the right — so the compose is reachable without scrolling past a long thread. Stacks under 900px. */ .row-expand-panel .discussion-mount, .row-expand-panel .discussion-mount > [data-discussion-rec] { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; min-height: 0; } .row-expand-panel .cm-thread { flex: 1 1 0; min-width: 0; max-height: 340px; } .row-expand-panel .cm-compose { flex: 1 1 0; min-width: 0; margin-top: 0; padding-top: 0; padding-left: 16px; border-top: none; border-left: 1px solid rgba(124,58,237,0.18); align-self: stretch; } body.dark .row-expand-panel .cm-compose { border-left-color: rgba(167,139,250,0.25); } @media (max-width: 900px) { .row-expand-panel .discussion-mount, .row-expand-panel .discussion-mount > [data-discussion-rec] { flex-direction: column; } .row-expand-panel .cm-compose { flex: 0 0 auto; padding-left: 0; padding-top: 12px; margin-top: 14px; border-left: none; border-top: 1px solid rgba(124,58,237,0.18); } } .cm-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: var(--fs-md); border: 1.5px dashed rgba(124,58,237,0.25); border-radius: 12px; background: rgba(255,255,255,0.50); } body.dark .cm-empty { background: rgba(255,255,255,0.03); } .cm-bubble { display: flex; gap: 9px; padding: 9px 11px 10px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px 14px 14px 4px; box-shadow: 0 2px 6px rgba(124,58,237,0.06), 0 1px 2px rgba(0,0,0,0.04); max-width: 88%; align-self: flex-start; } body.dark .cm-bubble { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); box-shadow: 0 2px 6px rgba(0,0,0,0.20); } .cm-bubble.me { align-self: flex-end; flex-direction: row-reverse; background: linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-teal) 100%); border: none; border-radius: 14px 14px 4px 14px; box-shadow: 0 4px 14px rgba(124,58,237,0.22); color: #fff; } .cm-bubble.me .cm-author { color: #fff; } .cm-bubble.me .cm-meta { color: rgba(255,255,255,0.78); } .cm-bubble.me .cm-text { color: #fff; } .cm-bubble.me .cm-text .mention { background: rgba(255,255,255,0.22); color: #fff; box-shadow: none; } .cm-bubble.me .cm-act-btn { color: rgba(255,255,255,0.80); } .cm-bubble.me .cm-act-btn:hover { color: #fff; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); } .cm-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .cm-body { flex: 1; min-width: 0; } .cm-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; } .cm-author { font-weight: 700; color: var(--text); font-size: var(--fs-sm); } .cm-role-pill { font-size: var(--fs-xs); font-weight: 700; padding: 1.5px 6px; border-radius: 5px; color: #fff; letter-spacing: 0.2px; } .cm-text { font-size: var(--fs-md); color: var(--text); line-height: 1.55; word-wrap: break-word; white-space: pre-wrap; } .cm-text .mention { font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--purple) 0%, var(--brand-purple) 100%); padding: 1.5px 7px; border-radius: 6px; font-size: 0.92em; box-shadow: 0 1px 3px rgba(124,58,237,0.25); } .cm-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; } .cm-bubble:hover .cm-actions { opacity: 1; } .cm-act-btn { width: 22px; height: 22px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; transition: color 0.12s, background 0.12s, border-color 0.12s; } .cm-act-btn:hover { color: var(--brand-red); background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.25); } .cm-compose { display: flex; flex-direction: column; gap: 8px; position: relative; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(124,58,237,0.18); flex: 0 0 auto; } body.dark .cm-compose { border-top-color: rgba(167,139,250,0.25); } .cm-compose textarea { resize: none; min-height: 42px; max-height: 140px; padding: 10px 12px; border: 1.5px solid rgba(124,58,237,0.20); border-radius: 11px; background: #fff; color: var(--text); font-family: inherit; font-size: var(--fs-md); line-height: 1.5; transition: border-color 0.15s, box-shadow 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.03); } body.dark .cm-compose textarea { background: rgba(255,255,255,0.05); border-color: rgba(167,139,250,0.30); } .cm-compose textarea:focus { outline: none; border-color: var(--brand-purple); box-shadow: 0 0 0 4px rgba(124,58,237,0.13); } .cm-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cm-compose-hint { font-size: var(--fs-xs); color: var(--text-muted); } .cm-compose-hint kbd { background: rgba(124,58,237,0.10); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace,Consolas,monospace; font-size: var(--fs-xs); color: var(--purple-800); border: 1px solid rgba(124,58,237,0.18); } body.dark .cm-compose-hint kbd { background: rgba(167,139,250,0.18); color: #DDD6FE; border-color: rgba(167,139,250,0.30); } .cm-send-btn { padding: 7px 16px; border-radius: 9px; border: none; background: linear-gradient(135deg, var(--brand-purple) 0%, var(--purple-800) 100%); color: #fff; font-family: inherit; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.2px; cursor: pointer; box-shadow: 0 2px 6px rgba(124,58,237,0.25); transition: transform 0.12s, box-shadow 0.12s, background 0.12s; } .cm-send-btn:hover { background: linear-gradient(135deg, var(--purple) 0%, var(--purple-700) 100%); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(124,58,237,0.32); } .cm-send-btn:disabled { background: rgba(124,58,237,0.30); cursor: not-allowed; box-shadow: none; transform: none; } .cm-mention-popup { position:absolute; bottom:100%; left:0; margin-bottom:6px; background:var(--modal-bg); border:1px solid var(--gray-border); border-radius:9px; box-shadow:0 8px 24px rgba(0,0,0,0.18); overflow:hidden; min-width:200px; z-index: var(--z-inline-popup); } .cm-mention-popup-hdr { padding:6px 10px; font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--gray-border); background:var(--gray-bg); } .cm-mention-opt { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; font-size:var(--fs-sm); color:var(--text); transition:background 0.12s; } .cm-mention-opt:hover, .cm-mention-opt.active { background:rgba(124,58,237,0.08); } .cm-mention-opt-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .cm-mention-opt-name { font-weight:600; } .cm-mention-opt-key { margin-left:auto; font-size:var(--fs-xs); color:var(--text-muted); font-family:ui-monospace,Consolas,monospace; } /* Red dot on table rows with unread mentions */ tr.has-unread-mentions td:first-child { position:relative; } tr.has-unread-mentions td:first-child::before { content:''; position:absolute; top:50%; left:3px; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--brand-red); box-shadow:0 0 0 2px rgba(220,38,38,0.20); } .ts-allclear { text-align:center; padding:24px 10px 16px; color:var(--text-muted); } .ts-allclear-icon { width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,var(--brand-purple),var(--purple-800)); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; } .ts-allclear strong { font-size:var(--fs-md); color:var(--text); display:block; } .ts-allclear span { font-size:var(--fs-xs); display:block; margin-top:3px; } .ts-rail-section { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; padding-bottom:12px; border-bottom:1px solid var(--gray-border); } .ts-rail-section:last-child { border-bottom:none; padding-bottom:0; } .ts-rail-expand { background:linear-gradient(135deg,var(--brand-teal) 0%,var(--teal-700) 100%); border:none; color:#fff; cursor:pointer; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition:opacity 0.15s; box-shadow:0 2px 8px rgba(0,169,157,0.35); } .ts-rail-expand:hover { opacity:0.85; } .ts-rail-item { position:relative; width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; border:none; padding:2px; transition:background 0.15s; } .ts-rail-item:hover { background:var(--gray-bg); } .ts-rail-badge { position:absolute; top:-3px; right:-3px; min-width:15px; height:15px; padding:0 3px; background:var(--red); border:2px solid var(--modal-bg); border-radius:99px; color:#fff; font-size:var(--fs-xs); font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; } .ts-rail-divider { width:24px; height:1px; background:var(--gray-border); flex-shrink:0; margin:2px 0; } /* ── SIDEBAR DOCK (per-user "Dock Sidebar" preference) ─────────────────── */ /* The task sidebar leaves #appBody's flex row and floats centred at the bottom, re-using the collapsed rail laid out horizontally, so the views get the full width. Centred with left/right:0 + margin:auto, NOT transform: a transformed (or filtered) ancestor becomes the containing block for position:fixed descendants, and the ITX chat (#ts-itx-chat) is a fixed child of this element. Same reason the frosted backdrop-filter sits on .ts-rail, never here. */ #taskSidebar.ts-dock { --dock-h:62px; --dock-gap:12px; position:fixed; left:0; right:0; bottom:var(--dock-gap); margin:0 auto; width:max-content; max-width:calc(100vw - 24px); padding:0; gap:0; overflow:visible; z-index:var(--z-dock); transition:none; } /* readinessModal is a full-screen .modal-overlay (z-index:var(--z-modal)); while it's open from the dock, raise the dock above that backdrop so it stays visible and clickable instead of being dimmed/covered — same as the dock popups / ITX chat, whose shared backdrop (.ts-pop-backdrop) sits under the dock too. */ #taskSidebar.ts-dock.ts-dock-above-modal { z-index: var(--z-dock-above-modal); } /* Keep the readiness card's bottom edge clear of the dock bar it now renders above (same reserved-space idea as the ITX chat's dock-mode max-height, just above). */ #taskSidebar.ts-dock.ts-dock-above-modal ~ #readinessModal .readiness-card { max-height: calc(100vh - var(--dock-h, 62px) - 60px); } #taskSidebar.ts-dock .ts-expanded, #taskSidebar.ts-dock .ts-readiness-panel, #taskSidebar.ts-dock .ts-cal-panel, #taskSidebar.ts-dock .ts-itx-row, #taskSidebar.ts-dock .ts-collapse-btn, /* collapse + dock toggle: the dock has its own "Move to side" button */ #taskSidebar.ts-dock .ts-rail-divider { display:none; } #taskSidebar.ts-dock .ts-min-btn { display:flex; } /* the popup's – closes it, like the ITX chat's */ #taskSidebar.ts-dock .ts-itx-panel { display:contents; } /* keeps the fixed chat renderable — see the collapsed-rail note */ #taskSidebar.ts-dock .ts-rail { display:flex; flex:none; flex-direction:row; align-items:center; height:var(--dock-h); padding:0 12px; gap:10px; border-radius:20px; overflow-x:auto; overflow-y:hidden; /* Floats over the data (no reserved strip). OPAQUE on purpose: it used to be translucent frosted glass, so when a dock button opened a popup/modal the dimmed backdrop showed through and the dock went dark with it. A solid fill keeps it light. The navy hairline ring + deep shadow lift it off white cards. */ background:linear-gradient(180deg, #eef1f6 0%, #e2e6ee 100%); /* cool grey, slightly darker than the page */ border:1px solid rgba(255,255,255,0.50); /* Shadow spreads around the dock (small y-offset, wide blur): it sits 12px off the bottom edge, so a downward-cast shadow would fall off-screen unseen. */ box-shadow:0 0 0 1px rgba(15,22,56,0.18), 0 4px 36px 6px rgba(15,22,56,0.32), 0 2px 12px rgba(15,22,56,0.24), inset 0 1px 0 rgba(255,255,255,0.5); } body.dark #taskSidebar.ts-dock .ts-rail { background:linear-gradient(180deg, #2a2c34 0%, #1f2026 100%); border-color:rgba(255,255,255,0.20); box-shadow:0 0 0 1px rgba(0,0,0,0.55), 0 4px 36px 6px rgba(0,0,0,0.62), 0 2px 12px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); } /* In the dock, My Tasks and Activity are separate buttons, so the panel's tab bar goes. */ #taskSidebar.ts-dock .ts-tabs { display:none; } .ts-hicon-activity { display:none; } #taskSidebar.ts-dock-pop-activity .ts-hicon-tasks { display:none; } #taskSidebar.ts-dock-pop-activity .ts-hicon-activity { display:block; } /* One tile style for every dock button: same size, radius, top-lit gradient, tinted shadow and white icon — each button only sets its hue pair (--db1/--db2). */ #taskSidebar.ts-dock .ts-rail-section > button { position:relative; width:44px; height:44px; border-radius:13px; border:none; padding:0; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg, var(--db1) 0%, var(--db2) 100%); box-shadow:0 4px 12px color-mix(in srgb, var(--db2) 38%, transparent), inset 0 1px 0 rgba(255,255,255,0.22); overflow:visible; transition:transform 0.18s, box-shadow 0.18s; } #taskSidebar.ts-dock .ts-rail-section > button:hover { transform:translateY(-3px); box-shadow:0 10px 18px color-mix(in srgb, var(--db2) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.22); } #taskSidebar.ts-dock .ts-rail-section > button:active { transform:scale(0.96); transition:transform 0.08s; } #taskSidebar.ts-dock .ts-rail-section > button > svg:not(.ts-rail-rr-svg) { width:20px; height:20px; stroke:#fff; } #taskSidebar.ts-dock .ts-rail-itx img { width:26px; height:26px; } #taskSidebar.ts-dock .ts-rail-rr-svg { width:32px; height:32px; } #taskSidebar.ts-dock .ts-rail-expand { --db1:var(--brand-teal); --db2:var(--teal-700); } #taskSidebar.ts-dock .ts-rail-activity { --db1:var(--brand-purple); --db2:var(--purple-800); } #taskSidebar.ts-dock .ts-rail-readiness { --db1:#2b2b4a; --db2:#1a1a2e; } #taskSidebar.ts-dock .ts-rail-cal { --db1:var(--blue-500); --db2:var(--blue-700); } #taskSidebar.ts-dock .ts-rail-itx { --db1:var(--brand-lime); --db2:var(--brand-teal); } #taskSidebar.ts-dock .ts-rail-search { --db1:var(--orange-500); --db2:var(--orange-600); } #taskSidebar.ts-dock .ts-rail-info { --db1:var(--yellow-500); --db2:var(--amber-600); } #taskSidebar.ts-dock .ts-rail-undock { --db1:var(--gray-600); --db2:var(--gray-800); } /* The dock's one divider: destinations (…ITX) | utilities (Search, Info, Move to side). */ .ts-dock-sep { width:1px; height:30px; margin:0 3px; flex-shrink:0; background:rgba(15,22,56,0.22); } body.dark .ts-dock-sep { background:rgba(255,255,255,0.22); } #taskSidebar.ts-dock .ts-rail-section { flex-direction:row; width:auto; padding:0; border-bottom:none; gap:10px; } /* The dock shows destinations only — per-task icons stay in the side rail (My Tasks opens them all in the popup). */ #taskSidebar.ts-dock #ts-rail-items, #taskSidebar.ts-dock .ts-rail-items-div { display:none; } .ts-dock-only { display:none; } #taskSidebar.ts-dock .ts-dock-only { display:flex; } #taskSidebar.ts-dock #ts-rail-items { flex-direction:row; gap:8px; } /* My Tasks / calendar open as popups above the dock (toggled by _tsDockPop). */ #taskSidebar.ts-dock.ts-dock-pop-panel .ts-expanded, #taskSidebar.ts-dock.ts-dock-pop-cal .ts-cal-panel { display:flex; position:absolute; left:50%; bottom:calc(100% + 10px); box-shadow:0 18px 50px rgba(0,0,0,0.28); animation:ts-dock-pop 0.2s cubic-bezier(0.22,1,0.36,1); } #taskSidebar.ts-dock.ts-dock-pop-panel .ts-expanded { width:min(360px, calc(100vw - 24px)); margin-left:calc(min(360px, calc(100vw - 24px)) / -2); height:min(560px, calc(100vh - 200px)); } #taskSidebar.ts-dock.ts-dock-pop-cal .ts-cal-panel { width:min(340px, calc(100vw - 24px)); margin-left:calc(min(340px, calc(100vw - 24px)) / -2); } @keyframes ts-dock-pop { from { opacity:0; transform:translateY(8px) scale(0.98); } to { opacity:1; transform:none; } } /* The small (non-maximised) ITX chat opens right above its dock button, not in the bottom-right corner. --itx-dock-left is set by _placeITXOverDock(). */ #taskSidebar.ts-dock .ts-itx-chat:not(.ts-itx-maximized) { bottom:calc(var(--dock-h) + var(--dock-gap) * 2); max-height:calc(100vh - var(--dock-h) - 60px); transform-origin:bottom center; } @media (min-width:521px) { #taskSidebar.ts-dock .ts-itx-chat:not(.ts-itx-maximized) { left:var(--itx-dock-left, 50%); right:auto; } } /* ── SLACK TOOLBAR BUTTON ───────────────────────────────────── */ .btn-slack-toolbar { background:#4A154B; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; } .btn-slack-toolbar svg { animation: tb-spin 10s linear infinite; } .btn-slack-toolbar:hover { background:#3a1039; color:#fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74,21,75,0.45); } .btn-slack-toolbar:hover svg { animation: tb-spin 2.5s linear infinite; } .btn-slack-toolbar:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.08s !important; box-shadow: none !important; } /* ── ATTENDANCE TOOLBAR BUTTON + MODAL (TCBP roll call) ──────── */ .btn-attendance-toolbar { background:var(--brand-teal); color:#fff; border-color:transparent; display:inline-flex; align-items:center; gap:6px; } .btn-attendance-toolbar:hover { background:var(--teal-700); color:#fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,169,157,0.4); } .btn-attendance-toolbar:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.08s !important; box-shadow: none !important; } .att-modal { width:760px; max-width:95vw; overflow:hidden; } .att-modal-icon { width:42px; height:42px; border-radius:11px; background:rgba(255,255,255,0.15); border:1.5px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .att-modal-body { padding:16px 22px 20px; max-height:min(62vh, 560px); overflow-y:auto; } .att-modal-footer { justify-content:flex-end; } .att-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .att-nav-btn { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; padding:6px 10px; font-size:var(--fs-sm); } .att-nav-btn:disabled { opacity:0.4; cursor:default; } .att-nav-day { flex:1 1 auto; text-align:center; font-size:var(--fs-base); font-weight:800; color:var(--text); } .att-nav-today { font-size:var(--fs-xs); font-weight:700; padding:2px 7px; border-radius:999px; background:var(--brand-teal); color:#fff; margin-left:4px; vertical-align:middle; } .att-summary { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; } .att-summary-pill { font-size:var(--fs-xs); font-weight:700; padding:3px 9px; border-radius:999px; background:var(--gray-bg); border:1px solid var(--gray-border); color:var(--text-muted); } .att-summary-pill.ok { background:rgba(22,163,74,0.1); border-color:rgba(22,163,74,0.35); color:var(--green-700); } .att-summary-pill.bad { background:var(--danger-bg); border-color:var(--danger-border); color:var(--danger-text); } .att-row { display:flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--gray-border); border-radius:10px; background:var(--modal-bg); margin-bottom:6px; transition:border-color 0.12s; } .att-row:hover { border-color:var(--gray-300); } /* no transform — stacked list, see CLAUDE.md hover pitfall */ .att-row-main { flex:1 1 auto; min-width:0; } .att-row-name { font-size:var(--fs-md); font-weight:700; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .att-row-sub { font-size:var(--fs-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; } .att-row-type { flex-shrink:0; } .att-seg { display:inline-flex; flex-shrink:0; border:1px solid var(--gray-border); border-radius:8px; overflow:hidden; } .att-seg-btn { appearance:none; -webkit-appearance:none; border:none; background:transparent; color:var(--text-muted); font:inherit; font-size:var(--fs-xs); font-weight:700; padding:6px 10px; cursor:pointer; transition:background 0.12s, color 0.12s; } .att-seg-btn + .att-seg-btn { border-left:1px solid var(--gray-border); } .att-seg-btn:hover { background:var(--gray-bg); color:var(--text); } .att-seg-btn:focus-visible { outline:2px solid var(--brand-teal); outline-offset:-2px; } .att-seg-btn.is-on.v-yes { background:var(--green-600); color:#fff; } .att-seg-btn.is-on.v-no { background:var(--red); color:#fff; } .att-seg-btn.is-on.v-pend { background:var(--gray-200); color:var(--text); } body.dark .att-summary-pill.ok { color:var(--green-400); } body.dark .att-seg-btn.is-on.v-pend { background:var(--gray-600); color:#fff; } body.dark .att-row:hover { border-color:var(--gray-500); } @media (max-width: 520px) { .att-row { flex-wrap:wrap; } .att-seg { width:100%; } .att-seg-btn { flex:1 1 0; } } /* ── SLACK MODAL ─────────────────────────────────────────────── */ .slack-modal-hero { background:linear-gradient(135deg,#4A154B 0%,#7c2d7e 100%); padding:20px 22px; display:flex; align-items:center; gap:14px; } .slack-modal-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .slack-modal-icon svg { animation: tb-spin 10s linear infinite; } .slack-modal-title { font-size:var(--fs-lg); font-weight:800; color:#fff; letter-spacing:0.1px; } .slack-modal-sub { font-size:var(--fs-xs); color:rgba(255,255,255,0.6); margin-top:3px; } .slack-modal-focals { display:flex; flex-direction:column; gap:9px; background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:10px; padding:14px 16px; } .slack-focal-item { display:flex; align-items:baseline; gap:8px; font-size:var(--fs-md); color:var(--text); line-height:1.5; } .slack-focal-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; position:relative; top:1px; } .slack-focal-name { font-weight:700; min-width:140px; flex-shrink:0; } .slack-focal-desc { color:var(--text-muted); font-size:var(--fs-sm); }.ts-slack-title { font-size:var(--fs-sm); font-weight:700; color:var(--text); } .ts-slack-sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; } /* Interactive device chips (Asset / Yubikey) — open the Linked Devices modal. Accent identity matches the modal cards; ring + glow + hover lift make them read as actionable, distinct from the flat People Doc / Attendance dots. */ .nh-sdot--device { cursor:pointer; border:none; padding:0; appearance:none; -webkit-appearance:none; color:#fff; position:relative; box-shadow:0 0 0 1.5px rgba(255,255,255,0.55), 0 2px 8px rgba(0,0,0,0.32); transition:transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease; } .nh-sdot--device:hover { transform:translateY(-1px) scale(1.16); filter:brightness(1.08); } .nh-sdot--device:active { transform:scale(1.03); } .nh-sdot--device:focus-visible { outline:2px solid #fff; outline-offset:2px; } .nh-sdot--asset { background:var(--brand-teal); } .nh-sdot--asset.is-pending { background:var(--gray-400); box-shadow:0 0 0 1.5px rgba(255,255,255,0.4); } .nh-sdot--yubi { background:var(--brand-purple); } .nh-sdot--yubi.is-pending { background:var(--gray-400); box-shadow:0 0 0 1.5px rgba(255,255,255,0.4); } /* ═══════════════════════════════════════════════════════════════════════════ PEOPLE JOURNEY — Onboarding Documentation (People Doc) All selectors prefixed pj- to avoid collision with the rest of the app. ═══════════════════════════════════════════════════════════════════════════ */ /* ── view container ── */ #view-peoplejourney { flex-direction: column; overflow: clip; overflow-clip-margin: 16px; padding: 0; } .pj-scroll-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ── modal hero gradient (PJ purple theme) ── */ #pj-modal .modal-hero-header { border-radius: 14px 14px 0 0; } /* ── paperwork footer ── */ #pj-pw-footer { flex-shrink:0; border-radius:0 0 14px 14px; overflow:hidden; } /* ── table (split thead / scrollable tbody) ── */ .pj-table-outer { flex:1; display:flex; flex-direction:column; min-height:0; background:var(--white); border-radius:8px; box-shadow:0 1px 5px rgba(0,0,0,.07); overflow:hidden; margin-bottom:0px; } .pj-tbody-scroll { flex:1; overflow-y:auto; overflow-x:auto; scrollbar-width: auto; scrollbar-color: var(--brand-teal) var(--slate-200); } .pj-tbody-scroll::-webkit-scrollbar { width: 14px; height: 14px; -webkit-appearance: none; } .pj-tbody-scroll::-webkit-scrollbar-track { background: var(--slate-200); } .pj-tbody-scroll::-webkit-scrollbar-thumb { background: var(--brand-teal); border-radius: 99px; border: 2px solid var(--slate-200); transition: background 0.15s; } .pj-tbody-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-lime); } .pj-tbody-scroll::-webkit-scrollbar-corner { background: var(--slate-200); } body.dark .pj-tbody-scroll { scrollbar-color: var(--brand-teal) var(--graphite-700); } body.dark .pj-tbody-scroll::-webkit-scrollbar-track { background: var(--graphite-700); } body.dark .pj-tbody-scroll::-webkit-scrollbar-thumb { border-color: var(--graphite-700); } body.dark .pj-tbody-scroll::-webkit-scrollbar-corner { background: var(--graphite-700); } .pj-table { width:100%; border-collapse:collapse; table-layout:fixed; } .pj-table th { position:sticky; top:0; z-index:2; padding:9px 11px; text-align:left; font-size:var(--fs-xs); font-weight:600; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff !important; background:#141740; } .pj-table tbody tr { border-bottom:1px solid var(--gray-bg); cursor:pointer; transition:background .1s; } .pj-table tbody tr.pj-row:hover > td { background:var(--row-hover); } .pj-table tbody tr:last-child { border-bottom:none; } .pj-table td { padding:9px 11px; font-size:var(--fs-sm); vertical-align:middle; overflow:hidden; text-overflow:ellipsis; } .pj-id-cell { font-size:var(--fs-xs); color:var(--text-muted); font-family:monospace; } .pj-name-cell { font-weight:600; } .pj-date-cell { color:var(--text-muted); white-space:nowrap; } .pj-life-cell { } .pj-cell-sub { color:var(--text-muted); font-size:var(--fs-xs); } .pj-no-results { padding:0; } /* ── badges ── */ .pj-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:var(--fs-xs); font-weight:700; white-space:nowrap; } .pj-badge::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; } .pj-badge-ok { background:#dcfce7; color:var(--green-700); } .pj-badge-warn { background:#fef9c3; color:#a16207; } .pj-badge-na { background:var(--gray-bg); color:var(--text-muted); } .pj-badge-complete { background:#dcfce7; color:var(--green-600); } .pj-badge-incomplete { background:var(--red-100); color:var(--brand-red); } .pj-detail-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px; } .pj-detail-card { border:1.5px solid var(--gray-border); border-radius:8px; padding:13px; } .pj-dc-full { grid-column:1 / -1; } .pj-dc-label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:5px; display:flex; align-items:center; gap:5px; } /* Label icon — same visual language as .pj-doc-pip on the card meter (13px, currentColor, stroke-width 2), just inheriting the muted label colour here instead of the pip's own on/off state. */ .pj-dc-ico { display:inline-flex; flex-shrink:0; } .pj-dc-ico svg { display:block; width:13px; height:13px; } .pj-dc-value { font-size:var(--fs-sm); font-weight:600; color:var(--text); } .pj-dc-sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:3px; }.pj-no-doc { color:var(--text-muted); font-size:var(--fs-xs); } .pj-dc-email { word-break:break-all; } .pj-dc-muted { color:var(--text-muted); font-weight:500; font-style:italic; } /* compensation card — masked by default, revealed via the eye toggle */ .pj-comp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; } .pj-comp-head .pj-dc-label { margin-bottom:0; display:flex; align-items:center; gap:7px; } .pj-comp-tag { font-size:var(--fs-xs); font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#a16207; background:#fef9c3; border:1px solid #fde68a; border-radius:20px; padding:2px 7px; } .atlas-tag { display:inline-block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--brand-teal); background:#e6f7f5; border:1px solid #99e0db; border-radius:20px; padding:2px 7px; } .pj-comp-toggle { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:7px; border:1.5px solid var(--brand-teal); background:transparent; color:var(--brand-teal); font-family:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer; transition:background .12s ease, color .12s ease; } .pj-comp-toggle:hover { background:var(--brand-teal); color:#fff; } .pj-comp-toggle svg { flex-shrink:0; } .pj-comp-ico-hide { display:none; } /* ── LINKED DEVICES MODAL — per-asset-type inventory cards ── */ .dev-hire-name { font-size:var(--fs-lg); font-weight:700; color:var(--text); letter-spacing:-0.01em; margin-bottom:12px; } .dev-contact { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .dev-contact:empty { display:none; } .dev-contact-item { display:inline-flex; align-items:center; gap:9px; max-width:100%; text-align:left; font-family:inherit; color:var(--text); text-decoration:none; background:var(--gray-bg); border:1px solid var(--gray-border); border-radius:10px; padding:8px 12px; cursor:pointer; transition:border-color .12s ease, color .12s ease; } .dev-contact-item > svg { color:var(--text-muted); flex-shrink:0; transition:color .12s ease; } .dev-contact-text { display:flex; flex-direction:column; min-width:0; line-height:1.25; } .dev-contact-label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); } .dev-contact-val { font-size:var(--fs-md); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dev-contact-item:hover { border-color:var(--brand-teal); color:var(--brand-teal); } .dev-contact-item:hover > svg { color:var(--brand-teal); } .dev-contact-item:hover .dev-contact-label { color:var(--brand-teal); } .dev-contact-item:focus-visible { outline:2px solid var(--brand-teal); outline-offset:2px; } #dev-modal-list { display:grid; gap:12px; grid-template-columns:repeat(2, 1fr); } @media (max-width: 600px) { #dev-modal-list { grid-template-columns: 1fr; } } .dev-card { position:relative; border:1px solid var(--gray-border); border-radius:14px; background:var(--white); padding:15px 16px 16px; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .dev-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--dev-accent); background:linear-gradient(90deg, var(--dev-accent), color-mix(in srgb, var(--dev-accent) 55%, #fff)); } .dev-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,23,42,.12); border-color:var(--dev-accent); } .dev-card--yubikey { --dev-accent:var(--brand-purple); --dev-accent-soft:rgba(124,58,237,.12); } .dev-card--laptop { --dev-accent:var(--brand-teal); --dev-accent-soft:rgba(0,169,157,.13); } .dev-card--monitor { --dev-accent:var(--emerald-600); --dev-accent-soft:rgba(5,150,105,.13); } .dev-card--generic { --dev-accent:var(--slate-500); --dev-accent-soft:rgba(100,116,139,.15); } .dev-card--client-device { --dev-accent:var(--indigo-600); --dev-accent-soft:rgba(79,70,229,.13); } .dev-card--gaming-computer { --dev-accent:var(--orange-600); --dev-accent-soft:rgba(234,88,12,.13); } .dev-card--gaming-device { --dev-accent:var(--pink-600); --dev-accent-soft:rgba(219,39,119,.13); } .dev-card-head { display:flex; align-items:center; gap:12px; } .dev-icon { width:44px; height:44px; border-radius:12px; flex-shrink:0; background:var(--dev-accent-soft); color:var(--dev-accent); display:flex; align-items:center; justify-content:center; } .dev-titles { flex:1; min-width:0; } .dev-title { font-size:var(--fs-base); font-weight:700; color:var(--text); letter-spacing:-.01em; line-height:1.2; } .dev-sub { font-size:var(--fs-sm); color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dev-status { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; font-size:var(--fs-xs); font-weight:700; color:var(--dev-accent); background:var(--dev-accent-soft); padding:5px 11px; border-radius:999px; } .dev-status-dot { width:6px; height:6px; border-radius:50%; background:var(--dev-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dev-accent) 22%, transparent); } .dev-specs { margin-top:14px; padding-top:13px; border-top:1px dashed var(--gray-border); display:grid; gap:9px; } .dev-spec { display:flex; align-items:baseline; justify-content:space-between; gap:14px; } .dev-spec-label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); flex-shrink:0; } .dev-spec-value { font-size:var(--fs-md); color:var(--text); text-align:right; word-break:break-word; } .js-copy-spec-btn { opacity: 0.7; transition: opacity 0.15s, background 0.15s !important; } .js-copy-spec-btn:hover { opacity: 1; } .js-copy-spec-btn:focus-visible { outline: 2px solid var(--brand-teal); outline-offset: 2px; } .dev-spec-value.mono { font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace; font-size:var(--fs-sm); letter-spacing:.02em; } /* Device management platform buttons (JAMF, Intune, Sophos) */ .dev-mgmt-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: all 0.15s ease; white-space: nowrap; } .dev-mgmt-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .dev-mgmt-btn:active { transform: translateY(0); } .dev-mgmt-btn svg { flex-shrink: 0; } .dev-empty { text-align:center; padding:30px 16px; color:var(--text-muted); border:1px dashed var(--gray-border); border-radius:14px; } .dev-empty svg { opacity:.4; } .dev-empty-title { font-size:var(--fs-md); font-weight:600; margin-top:12px; color:var(--text); } .dev-empty-sub { font-size:var(--fs-sm); margin-top:4px; } body.dark .dev-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.42); } body.dark .dev-card--yubikey { --dev-accent:var(--purple-400); --dev-accent-soft:rgba(167,139,250,.16); } body.dark .dev-card--laptop { --dev-accent:var(--teal-400); --dev-accent-soft:rgba(45,212,191,.16); } body.dark .dev-card--monitor { --dev-accent:var(--emerald-400); --dev-accent-soft:rgba(52,211,153,.16); } body.dark .dev-card--generic { --dev-accent:var(--slate-400); --dev-accent-soft:rgba(148,163,184,.18); } body.dark .dev-card--client-device { --dev-accent:#818CF8; --dev-accent-soft:rgba(129,140,248,.18); } body.dark .dev-card--gaming-computer { --dev-accent:#FB923C; --dev-accent-soft:rgba(251,146,60,.18); } body.dark .dev-card--gaming-device { --dev-accent:#F472B6; --dev-accent-soft:rgba(244,114,182,.18); } .pj-comp-card.revealed .pj-comp-ico-show { display:none; } .pj-comp-card.revealed .pj-comp-ico-hide { display:inline-block; } .pj-comp-masked { font-size:var(--fs-lg); font-weight:800; letter-spacing:2px; color:var(--text-muted); line-height:1; padding:2px 0; } .pj-comp-real { display:none; } .pj-comp-card.revealed .pj-comp-masked { display:none; } .pj-comp-card.revealed .pj-comp-real { display:block; } /* hiring package card — sample data, derived from seniority + role */ .pj-pkg-card { border:1.5px solid var(--gray-border); border-radius:10px; padding:0; overflow:hidden; position:relative; } .pj-pkg-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--text-muted); } .pj-pkg-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px 11px 18px; background:var(--gray-bg); border-bottom:1px solid var(--gray-border); } .pj-pkg-head-left { display:flex; align-items:center; gap:11px; } .pj-pkg-ico { flex-shrink:0; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--gray-border); color:var(--text-muted); } .pj-pkg-title { font-size:var(--fs-md); font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px; letter-spacing:.2px; } .pj-pkg-summary { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; font-weight:600; } .pj-pkg-tier-badge { flex-shrink:0; font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.6px; padding:5px 12px; border-radius:20px; color:#fff; background:var(--text-muted); white-space:nowrap; } .pj-pkg-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--gray-border); } .pj-pkg-item { background:var(--white); padding:11px 15px; } .pj-pkg-item-label { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:4px; display:flex; align-items:center; gap:5px; } .pj-pkg-item-value { font-size:var(--fs-sm); font-weight:700; color:var(--text); } .pj-pkg-item-sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; } .pj-pkg-item .pj-doc-btn { margin-top:8px; } /* tier accents */ .pj-pkg-starter::before { background:var(--slate-500); } .pj-pkg-starter .pj-pkg-tier-badge { background:var(--slate-500); } .pj-pkg-starter .pj-pkg-ico { color:var(--slate-500); border-color:var(--slate-300); } .pj-pkg-standard::before { background:var(--brand-teal); } .pj-pkg-standard .pj-pkg-tier-badge { background:var(--brand-teal); } .pj-pkg-standard .pj-pkg-ico { color:var(--brand-teal); border-color:#99ddd7; } .pj-pkg-premium::before { background:#7a8c00; } .pj-pkg-premium .pj-pkg-tier-badge { background:#7a8c00; } .pj-pkg-premium .pj-pkg-ico { color:#7a8c00; border-color:#dbe89a; } .pj-pkg-leadership::before { background:var(--brand-purple); } .pj-pkg-leadership .pj-pkg-tier-badge { background:var(--brand-purple); } .pj-pkg-leadership .pj-pkg-ico { color:var(--brand-purple); border-color:#ddd0fb; } .pj-doc-btn { display:inline-flex; align-items:center; gap:6px; margin-top:9px; padding:7px 13px; border-radius:8px; border:1.5px solid var(--brand-teal); background:linear-gradient(180deg,var(--brand-teal) 0%,#008F84 100%); color:#fff; font-size:var(--fs-xs); font-weight:600; letter-spacing:.2px; text-decoration:none; cursor:pointer; box-shadow:0 1px 2px rgba(0,169,157,.25); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; } .pj-doc-btn:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,169,157,.32); filter:brightness(1.04); } .pj-doc-btn:active { transform:translateY(0); box-shadow:0 1px 2px rgba(0,169,157,.25); filter:brightness(.96); } .pj-doc-btn svg { flex-shrink:0; } .pj-pending-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:20px; font-size:var(--fs-xs); font-weight:600; background:#fef9c3; color:#a16207; border:1.5px solid #fde68a; } .pj-status-banner { display:flex; align-items:center; gap:14px; padding:16px 22px; } .pj-status-banner--complete { background:linear-gradient(135deg,#166534 0%,var(--green-600) 100%); color:#fff; } .pj-status-banner--incomplete { background:linear-gradient(135deg,var(--red-800) 0%,var(--brand-red) 100%); color:#fff; } .pj-sb-icon { flex-shrink:0; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; } .pj-sb-title { font-size:var(--fs-md); font-weight:700; letter-spacing:.2px; } .pj-sb-sub { font-size:var(--fs-xs); opacity:.8; margin-top:2px; } /* Sample-data notice — People Journey document statuses come from _pjGenDoc, not a live feed. Shown above the PJ stat cards and at the top of pj-modal. */ .pj-sample-note { margin: 0 0 12px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--amber-600) 38%, transparent); background: color-mix(in srgb, var(--amber-400) 14%, transparent); border-radius: 8px; font-size: var(--fs-sm); line-height: 1.45; color: var(--warn-text); } .pj-sample-note strong { font-weight: 700; } .pj-sample-note--modal { margin: 0 0 4px; font-size: var(--fs-xs); } body.dark .pj-sample-note { color: var(--amber-300); border-color: color-mix(in srgb, var(--amber-400) 40%, transparent); } /* ── dark mode ── */ body.dark .pj-table-outer { background:var(--white); } body.dark .pj-table tbody tr.pj-row:hover > td { background:var(--row-hover); } body.dark .pj-table tbody tr { border-bottom-color:var(--gray-border); } body.dark .pj-badge-ok { background:#064e3b; color:#6ee7b7; } body.dark .pj-badge-warn { background:#451a03; color:var(--amber-400); } body.dark .pj-badge-complete { background:#064e3b; color:#6ee7b7; } body.dark .pj-badge-incomplete { background:var(--red-900); color:var(--red-300); } body.dark .pj-detail-card { border-color:var(--gray-border); } body.dark .pj-pkg-card { border-color:var(--gray-border); } body.dark .pj-pkg-head { background:var(--gray-bg); border-bottom-color:var(--gray-border); } body.dark .pj-pkg-ico { background:var(--white); } body.dark .pj-pkg-grid { background:var(--gray-border); } body.dark .pj-pkg-item { background:var(--white); } body.dark .pj-comp-tag { background:#451a03; color:var(--amber-400); border-color:#78350f; } body.dark .atlas-tag { background:#04302d; color:var(--teal-300); border-color:var(--teal-700); } body.dark .pj-pending-tag { background:#451a03; color:var(--amber-400); border-color:#78350f; } body.dark .pj-status-banner--complete { background:linear-gradient(135deg,#064e3b 0%,var(--emerald-800) 100%); } body.dark .pj-status-banner--incomplete { background:linear-gradient(135deg,var(--red-900) 0%,var(--red-800) 100%); } /* ── responsive ── */ @media (max-width:820px) { .pj-detail-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .pj-detail-grid { grid-template-columns:1fr; } .pj-dc-full { grid-column:1; } .pj-pkg-grid { grid-template-columns:1fr; } } /* ── WELCOME / BE KIND POPUP ──────────────────────────────────────────────── */ .welcome-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-popup); display: flex; align-items: center; justify-content: center; animation: wpo-fade-in 0.35s ease both; } @keyframes wpo-fade-in { from { opacity: 0; } to { opacity: 1; } } .welcome-popup-card { position: relative; display: flex; flex-direction: column; width: min(900px, 96vw); border-radius: 20px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.28); background: #ffffff; animation: wpo-slide-up 0.45s cubic-bezier(0.22,1,0.36,1) both; animation-delay: 0.05s; } /* Inner row: left text + right image */ .welcome-popup-inner { display: flex; flex: 1; } @keyframes wpo-slide-up { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .welcome-popup-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,0.08); color: #444; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .welcome-popup-close:hover { background: rgba(0,0,0,0.18); } /* LEFT PANEL */ .welcome-popup-left { flex: 0 0 52%; padding: 48px 44px 15px; display: flex; flex-direction: column; justify-content: center; background: #ffffff; } .welcome-popup-tagline { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-lime); margin-bottom: 10px; } .welcome-popup-logo { height: 28px; width: auto; object-fit: contain; object-position: left center; align-self: flex-start; margin-bottom: 22px; display: block; } .welcome-popup-title { font-size: 38px; font-weight: 900; line-height: 1.15; color: #000000; margin: 0 0 16px 0; letter-spacing: -0.5px; } .welcome-popup-body { font-size: var(--fs-base); line-height: 1.7; color: var(--gray-600); margin: 0 0 20px 0; } .welcome-popup-geo { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 600; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; padding: 5px 12px 5px 10px; margin: 0 0 20px 0; } .welcome-popup-geo svg { color: var(--brand-teal); flex-shrink: 0; } .welcome-popup-geo .welcome-geo-flag { font-size: var(--fs-lg); line-height: 1; } .welcome-popup-geo img.welcome-geo-flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); vertical-align: middle; } body.dark .welcome-popup-geo { background: var(--gray-900); border-color: var(--gray-700); color: var(--gray-300); } .welcome-popup-dontshow { flex: 0 0 auto; margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-md); color: var(--gray-500); cursor: pointer; white-space: nowrap; user-select: none; } .welcome-popup-dontshow input { accent-color: var(--brand-lime); width: 15px; height: 15px; cursor: pointer; margin: 0; } body.dark .welcome-popup-dontshow { color: var(--gray-400); } .welcome-popup-actions { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; padding: 0 44px 28px 44px; background: #ffffff; } .welcome-popup-cta { flex: 0 0 auto; align-self: center; padding: 11px 26px; border-radius: 9px; border: none; background: #000000; color: #ffffff; font-size: var(--fs-base); font-weight: 700; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s, transform 0.12s; } .welcome-popup-cta:hover { background: var(--brand-lime); color: #000; transform: translateY(-1px); } /* RIGHT PANEL — Be Kind banner image */ .welcome-popup-right { flex: 0 0 50%; position: relative; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; } .welcome-popup-right-img { max-width: 100%; max-height: 340px; width: auto; height: auto; object-fit: contain; object-position: center; display: block; animation: wpo-fade-in 0.6s ease both; animation-delay: 0.2s; } /* BOTTOM BORDER — Globant rainbow stripe, animated */ @keyframes green-flow { from { background-position: 0% 0; } to { background-position: 100% 0; } } @keyframes rainbow-slide { from { background-position: 0% 0; } to { background-position: 200% 0; } } .welcome-popup-rainbow { height: 6px; width: 100%; flex-shrink: 0; background: linear-gradient( to right, var(--orange-500), var(--pink-500), var(--purple-500), var(--indigo-500), var(--blue-500), var(--cyan-500), var(--emerald-500), var(--lime-500), var(--brand-lime), var(--yellow-500), var(--orange-500), var(--pink-500), var(--purple-500), var(--indigo-500), var(--blue-500), var(--cyan-500), var(--emerald-500), var(--lime-500), var(--brand-lime), var(--yellow-500) ); background-size: 200% 100%; animation: rainbow-slide 3s linear infinite; } /* Dark mode adjustments */ body.dark .welcome-popup-card { background: var(--gray-800); } body.dark .welcome-popup-left { background: var(--gray-800); } body.dark .welcome-popup-title { color: var(--gray-50); } body.dark .welcome-popup-body { color: var(--gray-400); } body.dark .welcome-popup-close { background: rgba(255,255,255,0.1); color: var(--gray-200); } body.dark .welcome-popup-cta { background: var(--brand-lime); color: #000; } body.dark .welcome-popup-cta:hover { background: #ffffff; } body.dark .welcome-popup-right { background: var(--gray-900); } body.dark .welcome-popup-actions { background: var(--gray-800); } body.dark .welcome-popup-logo { filter: invert(1); } /* ── TAKE A TOUR BUTTON ───────────────────────────────────────────────── */ .welcome-tour-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border: none; border-radius: 9px; background: var(--brand-teal); font-size: var(--fs-base); font-weight: 700; color: #ffffff; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s, transform 0.12s; flex-shrink: 0; } .welcome-tour-btn:hover { background: #008f84; transform: translateY(-1px); } body.dark .welcome-tour-btn { background: var(--brand-teal); color: #fff; } body.dark .welcome-tour-btn:hover { background: #008f84; }/* ── GUIDED TOUR OVERLAY ──────────────────────────────────────────────── */ /* Four strips that surround the spotlight — each covers one side of the viewport */ .tour-bd-strip { display: none; position: fixed; z-index: var(--z-tour-strip); pointer-events: all; background: rgba(5, 8, 28, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: tourFadeIn 0.3s ease; } @keyframes tourFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Lime spotlight ring — positioned by JS over the target element */ #tourHighlightRect { display: none; position: fixed; z-index: var(--z-tour-highlight); /* Intercept (and swallow) clicks over the spotlight so the highlighted element underneath can't be interacted with during the tour. */ pointer-events: all; border-radius: 12px; box-shadow: 0 0 0 2px var(--brand-lime), 0 0 28px 6px rgba(181,209,0,0.22); animation: tourSpotPulse 1.8s ease-in-out infinite; } @keyframes tourSpotPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--brand-lime), 0 0 20px 4px rgba(181,209,0,0.18); } 50% { box-shadow: 0 0 0 3.5px rgba(181,209,0,0.85), 0 0 40px 12px rgba(181,209,0,0.08); } } /* ── Tooltip card ── */ #tourTooltip { display: none; position: fixed; z-index: var(--z-tour-tooltip); width: 360px; max-width: calc(100vw - 32px); border-radius: 18px; overflow: hidden; background: #ffffff; box-shadow: 0 32px 80px rgba(0,0,0,0.24), 0 0 0 1px rgba(0,0,0,0.06); pointer-events: all; font-family: inherit; } body.dark #tourTooltip { background: #141828; box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07); } @keyframes tourSlideIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } #tourTooltip.tour-animate { animation: tourSlideIn 0.26s cubic-bezier(0.22,1,0.36,1); } /* ── Welcome step: animated cross-functional handoff pipeline ───────────── */ #tourTooltip.tour-welcome { width: 680px; } .tour-hf-wrap { margin-top: 20px; } .tour-hf { display: flex; align-items: flex-start; padding: 2px 0; } .tour-hf-stage { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Node centered over the team title; connector spans to the next node */ .tour-hf-nodewrap { position: relative; width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .tour-hf-node { position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--c); color: var(--c); box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: background 0.3s, transform 0.3s, box-shadow 0.3s; z-index: 1; } body.dark .tour-hf-node { background: #1f2536; } .tour-hf-check { display: none; } .tour-hf-stage.tour-hf-active .tour-hf-node { transform: scale(1.1); box-shadow: 0 4px 14px rgba(0,0,0,0.2); } .tour-hf-stage.tour-hf-done .tour-hf-node { background: var(--c); color: #fff; } .tour-hf-stage.tour-hf-done .tour-hf-ico { display: none; } .tour-hf-stage.tour-hf-done .tour-hf-check { display: block; } /* Connector runs from this node's centre to the next node's centre */ .tour-hf-conn { position: absolute; top: 50%; left: 50%; width: 100%; height: 3px; transform: translateY(-50%); background: var(--gray-200); border-radius: 2px; overflow: hidden; z-index: 0; } body.dark .tour-hf-conn { background: rgba(255,255,255,0.12); } .tour-hf-conn-fill { display: block; height: 100%; width: 0%; background: var(--c); border-radius: 2px; transition: width 0.55s cubic-bezier(0.4,0,0.2,1); } .tour-hf-label { font-size: var(--fs-xs); font-weight: 700; line-height: 1.25; color: var(--gray-500); margin-bottom: 8px; min-height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .tour-hf-stage.tour-hf-active .tour-hf-label { color: var(--gray-900); } body.dark .tour-hf-label { color: #8b95a8; } body.dark .tour-hf-stage.tour-hf-active .tour-hf-label { color: var(--gray-100); } .tour-hf-bar { width: 78%; height: 6px; border-radius: 3px; background: #eef0f3; overflow: hidden; margin-bottom: 5px; } body.dark .tour-hf-bar { background: rgba(255,255,255,0.1); } .tour-hf-bar-fill { display: block; height: 100%; width: 0%; background: var(--c); border-radius: 3px; transition: width 0.7s cubic-bezier(0.22,1,0.36,1); } .tour-hf-pct { font-size: var(--fs-sm); font-weight: 800; color: var(--c); } /* ── Header ── */ .tour-header { background: linear-gradient(135deg, #2E1065 0%, var(--purple-800) 55%, var(--brand-purple) 100%); padding: 18px 20px 20px; position: relative; overflow: hidden; } .tour-header::before { content: ''; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.05); right: -34px; top: -50px; pointer-events: none; } .tour-header::after { content: ''; position: absolute; width: 90px; height: 90px; border-radius: 50%; border: 1px solid rgba(181,209,0,0.1); right: 18px; top: 18px; pointer-events: none; } /* Progress bar */ .tour-progress-bar { height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 18px; overflow: hidden; position: relative; z-index: 1; } .tour-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-lime), #d4f200); border-radius: 3px; transition: width 0.38s cubic-bezier(0.22,1,0.36,1); min-width: 8px; } /* Icon + title */ .tour-icon-row { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; } .tour-icon-box { width: 42px; height: 42px; border-radius: 12px; background: rgba(181,209,0,0.14); border: 1px solid rgba(181,209,0,0.32); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-lime); } .tour-title { font-size: var(--fs-base); font-weight: 800; color: #ffffff; letter-spacing: -0.15px; line-height: 1.25; } .tour-counter { font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,0.35); margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; } /* ── Body ── */ .tour-body-wrap { padding: 18px 20px 4px; } .tour-body { font-size: var(--fs-md); color: var(--gray-600); line-height: 1.65; margin: 0; } body.dark .tour-body { color: #8b95a8; } /* ── Navigation ── */ .tour-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 18px; margin-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); } body.dark .tour-nav { border-top-color: rgba(255,255,255,0.07); } .tour-btn-skip { background: none; border: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 500; color: #b0b8c8; padding: 4px 0; transition: color 0.15s; font-family: inherit; letter-spacing: 0.01em; } .tour-btn-skip:hover { color: var(--gray-500); } body.dark .tour-btn-skip { color: #3b4560; } body.dark .tour-btn-skip:hover { color: var(--gray-400); } .tour-step-nav { display: flex; align-items: center; gap: 8px; } .tour-btn-prev { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: transparent; border: 1.5px solid var(--gray-200); color: var(--gray-400); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; font-family: inherit; flex-shrink: 0; } .tour-btn-prev:hover { border-color: var(--gray-400); background: var(--gray-50); color: var(--gray-700); } body.dark .tour-btn-prev { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); } body.dark .tour-btn-prev:hover { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); } .tour-btn-next { display: inline-flex; align-items: center; gap: 6px; padding: 7px 17px; border-radius: 9px; background: var(--brand-lime); border: none; font-size: var(--fs-md); font-weight: 700; color: #000; cursor: pointer; transition: background 0.15s, transform 0.12s, box-shadow 0.15s; font-family: inherit; letter-spacing: 0.01em; } .tour-btn-next:hover { background: #a3bc00; box-shadow: 0 4px 14px rgba(181,209,0,0.45); transform: translateY(-1px); } .tour-btn-next:active { transform: scale(0.97) translateY(0); box-shadow: none; } /* Responsive */ @media (max-width: 680px) { .welcome-popup-inner { flex-direction: column; } .welcome-popup-left { flex: none; padding: 36px 28px 28px; } .welcome-popup-right { flex: none; min-height: 200px; } } /* ── LIVE ACTIVITY POPUPS ─────────────────────────────────────────────── */ .activity-popup-stack { position: fixed; top: 20px; right: 20px; z-index: var(--z-popup); display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: 360px; } .activity-popup { pointer-events: auto; cursor: pointer; width: 340px; max-width: 90vw; background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); border-left: 3px solid var(--brand-teal); box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06); padding: 11px 12px 11px 13px; display: flex; align-items: flex-start; gap: 10px; transform: translateX(120%); opacity: 0; transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .22s ease; } .activity-popup.show { transform: translateX(0); opacity: 1; } .activity-popup.dismiss { transform: translateX(120%); opacity: 0; } .activity-popup:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08); } .activity-popup-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); } .activity-popup-body { flex: 1; min-width: 0; } .activity-popup-actor { font-size: var(--fs-sm); font-weight: 700; color: #111; line-height: 1.3; } .activity-popup-role { font-size: var(--fs-xs); font-weight: 500; color: var(--gray-500); } .activity-popup-verb { font-size: var(--fs-sm); color: var(--gray-700); line-height: 1.42; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .activity-popup-time { font-size: var(--fs-xs); color: var(--gray-400); margin-top: 4px; } .activity-popup-close { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: transparent; border: none; cursor: pointer; padding: 0; color: var(--gray-400); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .activity-popup-close:hover { background: rgba(0,0,0,0.06); color: #111; } body.dark .activity-popup { background: var(--graphite-700); border-color: rgba(255,255,255,0.08); } body.dark .activity-popup-actor { color: #fff; } body.dark .activity-popup-verb { color: var(--gray-300); } body.dark .activity-popup-close { color: var(--gray-400); } body.dark .activity-popup-close:hover { background: rgba(255,255,255,0.08); color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ ONBOARDING READINESS MODAL ══════════════════════════════════════════════════════════════════════════ */ /* Card shell */ .readiness-card { position: relative; background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,0.18); width: 1100px; max-width: 96vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: wpo-fade-in 0.25s ease both; } /* Hero header — teal gradient matching modal-hero-header style */ .readiness-hero-header { background: linear-gradient(135deg, var(--brand-teal) 0%, var(--teal-700) 50%, #005f5a 100%); padding: 20px 22px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; position: relative; border-radius: 20px 20px 0 0; } .readiness-hero-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(to right, var(--brand-teal), var(--brand-lime), var(--brand-teal), var(--brand-lime), var(--brand-teal)); pointer-events: none; } .readiness-hero-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .readiness-hero-text { flex: 1; min-width: 0; } .readiness-hero-title { font-size: var(--fs-lg); font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .readiness-hero-sub { font-size: var(--fs-sm); color: rgba(255,255,255,0.82); margin-top: 2px; } body.dark .readiness-hero-header { background: linear-gradient(135deg, var(--teal-800) 0%, #004d4a 50%, #003330 100%); } /* Tab bar + panels (Readiness Check / Onboarding Summary) */ .rs-tabs { display: flex; gap: 8px; padding: 12px 18px; flex-shrink: 0; border-bottom: 1px solid #eef0f2; background: #f7f8fa; } .rs-tab { appearance: none; border: 1.5px solid #e3e6ea; background: #fff; font-family: inherit; font-size: var(--fs-base); font-weight: 800; letter-spacing: 0.01em; color: var(--gray-600); cursor: pointer; padding: 11px 20px; border-radius: 10px; display: flex; align-items: center; gap: 9px; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s; } .rs-tab svg { opacity: 0.85; } .rs-tab:hover { color: #111; border-color: var(--brand-teal); background: #f0fdfb; } .rs-tab.active { color: #fff; background: var(--brand-teal); border-color: var(--brand-teal); box-shadow: 0 4px 12px rgba(0,169,157,0.32); } .rs-tab.active svg { opacity: 1; } .rs-tab.active:hover { color: #fff; background: #00958b; } .rs-tabpanel { display: none; flex: 1; min-height: 0; } .rs-tabpanel.active { display: flex; flex-direction: column; } #rs-tab-summary { overflow-y: auto; padding: 12px 14px; gap: 10px; } body.dark .rs-tabs { background: #18222f; border-bottom-color: rgba(255,255,255,0.08); } body.dark .rs-tab { color: rgba(255,255,255,0.7); background: var(--gray-800); border-color: rgba(255,255,255,0.12); } body.dark .rs-tab:hover { color: #fff; border-color: var(--teal-400); background: #243140; } body.dark .rs-tab.active { color: #06231f; background: var(--teal-400); border-color: var(--teal-400); box-shadow: 0 4px 12px rgba(45,212,191,0.28); } body.dark .rs-tab.active:hover { color: #06231f; background: #25bda9; } /* Progress ring — now lives below the calendar */ .readiness-ring-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; } .rs-ring-svg { width: 80px; height: 80px; } .rs-ring-bg { fill: none; stroke: #f0f0f0; stroke-width: 7; } .rs-ring-fill { fill: none; stroke: var(--brand-teal); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 244.5; stroke-dashoffset: 244.5; transition: stroke-dashoffset 0.9s cubic-bezier(0.4,0,0.2,1), stroke 0.4s; } .rs-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 800; color: #111; transition: color 0.4s; } .rs-ring-below { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 16px; border-top: 1px solid #f0f0f0; margin-top: 4px; } .rs-ring-below-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-400); text-align: center; } body.dark .rs-ring-below { border-top-color: rgba(255,255,255,0.07); } body.dark .rs-ring-bg { stroke: var(--gray-700); } body.dark .rs-ring-pct { color: var(--gray-50); } /* Body layout */ .readiness-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* Calendar column */ .readiness-cal-col { width: 220px; flex-shrink: 0; border-right: 1px solid #f0f0f0; padding: 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .readiness-cal-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-400); } .readiness-cal-legend { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--gray-400); } /* Main stepper column */ .readiness-main-col { flex: 1; min-width: 0; padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } /* Cohort meta badges */ .readiness-cohort-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; } .rs-meta-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: var(--fs-sm); font-weight: 600; } .rs-meta-onsite { background: rgba(0,169,157,0.10); color: var(--teal-700); } .rs-meta-virtual { background: rgba(100,116,139,0.12); color: var(--slate-600); } body.dark .rs-meta-onsite { color: var(--teal-300); } body.dark .rs-meta-virtual { color: var(--slate-300); } /* Empty state */ .rs-empty-state { color: var(--gray-400); font-size: var(--fs-md); padding: 24px 0; text-align: center; } /* ── Stepper — six independent team tiles ─────────────────────────────── */ /* Teams work in parallel, so there are no left→right connectors: each tile is a button that opens its detail panel (#rs-seg-detail). Order matches the Operational Clearance stepper. Team colour = --seg-color (.rs-team-*). */ .rs-team-recruiting { --seg-color: var(--indigo-500); } .rs-team-people { --seg-color: var(--emerald-500); } .rs-team-workplace { --seg-color: var(--lime-700); } .rs-team-servicedesk { --seg-color: var(--brand-teal); } .rs-team-logistics { --seg-color: var(--cyan-500); } .rs-team-tcbp { --seg-color: var(--amber-600); } body.dark .rs-team-workplace { --seg-color: var(--lime-400); } .rs-stepper-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; width: 100%; } /* Each team tile (a