/* SectionLoader — Kendo-equivalent section loading overlay.
Pure CSS replica of k-loading-mask / k-loading-image from kendo.bootstrap-v4.
No jQuery or kendo-jquery-all.min.js required.
Usage: wrap the target container in position-relative, then render ) matches production
exactly. A previous .bsc-hf-btn override (position:absolute; left:100%)
used to live here and conflicted with those rules, shoving the icon over
the avatar/name — removed for that reason. Do not re-add positioning
overrides for .HF here. */
/* ── Sort icons for BSC tables ─────────────────────────────────────────
* Legacy m2dashboard.css adds ::before/::after with content:"\f0dd"/"\f0de"
* to EVERY th.sorting in ANY .dataTable table. In React (DataTables JS not
* running) those pseudo-elements render INLINE — no position:absolute, no
* padding-right on the th — so carets appear inline after the text and the
* column header looks like "Points Earned↓↑" crammed into a visible box.
* Fix: force position:relative + padding-right on the th, then re-pin the
* pseudo-elements absolutely (identical pattern to the leaderboard fix).
* Confirmed correct against prod — do not switch to plain Unicode arrows. */
#scorecard_details_table thead th.sorting,
#scorecard_details_table thead th.sorting_asc,
#scorecard_details_table thead th.sorting_desc,
#scorecard_ranking_table thead th.sorting,
#scorecard_ranking_table thead th.sorting_asc,
#scorecard_ranking_table thead th.sorting_desc {
position: relative !important;
padding-right: 20px !important;
background-image: none !important;
}
#scorecard_details_table thead th.sorting::before,
#scorecard_details_table thead th.sorting_asc::before,
#scorecard_details_table thead th.sorting_desc::before,
#scorecard_ranking_table thead th.sorting::before,
#scorecard_ranking_table thead th.sorting_asc::before,
#scorecard_ranking_table thead th.sorting_desc::before {
content: "\f0dd" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
right: 6px !important;
bottom: calc(50% - 7px) !important;
top: auto !important;
color: #6c757d;
}
#scorecard_details_table thead th.sorting::after,
#scorecard_details_table thead th.sorting_asc::after,
#scorecard_details_table thead th.sorting_desc::after,
#scorecard_ranking_table thead th.sorting::after,
#scorecard_ranking_table thead th.sorting_asc::after,
#scorecard_ranking_table thead th.sorting_desc::after {
content: "\f0de" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
right: 6px !important;
top: calc(50% - 8px) !important;
bottom: auto !important;
color: #6c757d;
}
/* Active direction — teal for the active caret, gray for the inactive one */
#scorecard_details_table thead th.sorting_asc::after,
#scorecard_ranking_table thead th.sorting_asc::after {
color: #22c7a9 !important;
}
#scorecard_details_table thead th.sorting_asc::before,
#scorecard_ranking_table thead th.sorting_asc::before {
color: #6c757d !important;
}
#scorecard_details_table thead th.sorting_desc::before,
#scorecard_ranking_table thead th.sorting_desc::before {
color: #22c7a9 !important;
}
#scorecard_details_table thead th.sorting_desc::after,
#scorecard_ranking_table thead th.sorting_desc::after {
color: #6c757d !important;
}
/* No blue background tint on sorted columns */
#scorecard_details_table thead th.sorting_asc,
#scorecard_details_table thead th.sorting_desc,
#scorecard_ranking_table thead th.sorting_asc,
#scorecard_ranking_table thead th.sorting_desc {
background-color: inherit !important;
}
/* ── Timeframe dropdown Cancel button — Bootstrap 5 .btn has no default text color so
it inherits white from some contexts; force dark explicitly to keep text visible */
.save_footer .btn-cancel {
color: #344054 !important;
background-color: #fff !important;
}
/* ── Responsive */
@media (max-width: 768px) {
.bsc-modal {
width: 98vw;
}
.bsc-content-row {
flex-direction: column;
}
.bsc-main-content {
width: 100%;
padding-right: 0;
}
.bsc-ranking-section {
width: 100%;
}
}/* ============================================================================
* MetricsBlock.css – Section 1.4 metric table
*
* Most styles come from the legacy CSS loaded in index.html
* (execagentdashboard.css, m2dashboard.css, m2dashboardnew.css, etc.).
* This file adds only what the legacy sheets don't already cover.
* ========================================================================== */
/* Overflow management so the T/P/A absolute markers are visible */
.metric_table {
overflow: visible;
}
.metric_table .table {
overflow: visible;
}
/* Keep table overflow visible when dropdown is open */
.metric_table .table tr td {
overflow: visible;
position: relative;
}
/* Dropdown trigger "⋮" icon */
.updated_through {
cursor: pointer;
user-select: none;
}
.updated_through img {
width: 20px;
height: 20px;
opacity: 0.6;
transition: opacity 0.15s;
}
.updated_through:hover img {
opacity: 1;
}
/* Dropdown panel */
.updated_through_dropdown {
position: absolute;
right: 0;
top: calc(100% + 4px);
min-width: 200px;
background: #fff;
border: 1px solid #e1e6ee;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
z-index: 200;
padding: 4px 0;
}
.updated_through_dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.updated_through_dropdown li {
padding: 8px 14px;
border-bottom: 1px solid #f4f6f9;
font-size: 13px;
}
.updated_through_dropdown li:last-child {
border-bottom: none;
}
.updated_through_dropdown .gray-text {
color: #98a3b5;
font-size: 12px;
}
.updated_through_dropdown .block {
text-align: right;
}
.updated_through_dropdown .ledaer {
padding: 4px 0;
}
/* Actual/Goal column layout */
.actual_goal {
min-width: 60px;
}
/* Override m2dashboardnew.css which sets .actual to 18px — prod uses 14px/12px */
.actual_goal .actual {
font-size: 14px !important;
}
.actual_goal .goal {
font-size: 12px !important;
}
/* Third column sizing */
.third-col {
white-space: nowrap;
width: 120px;
}
/* Performance bar container */
/* .performance-bar {
height: 24px;
display: flex;
align-items: center;
} */
/* Empty-state ("No Data Available") — the row itself is a fixed 100px
(.metric_table > .table tbody tr, legacy managerdashboardnew.css) and
Bootstrap's default table cell vertical-align:top otherwise leaves this
text sitting at the top of that tall row instead of centered in it.
Scoped to this modifier only, so the real 24px bar is untouched. */
.performance-bar.performance-bar-empty {
height: 100%;
align-items: center;
justify-content: center;
}
/* .agent_icon, .tean_icon — loaded from legacy/css/execagentdashboard.css */
/* .transparent_bg — loaded from legacy/css/execagentdashboard.css */
/* program_icon: legacy m2dashboard.css has background-color:#6ccc76 !important which prevents
inline style from applying dynamic programmetriccolor. Override here (component CSS loads
after legacy) using a CSS variable set via inline style on the element. */
.program_icon {
background-color: var(--program-icon-bg, #6ccc76) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Metric bar icon tooltips (T / P / AD bubbles)
───────────────────────────────────────────────────────────────────────────
.NET uses: data-bs-toggle="tooltip" title="…" + Bootstrap JS $().tooltip()
React uses: data-tooltip="…" + these pure-CSS rules — mirrors
amplifai_react_iframe/src/screens/l1Dashboard.css so all three
dashboards (L1/M1/M2) share the same tooltip design.
Visual target: Bootstrap tooltip — dark rounded box, white text, caret below.
(Replaces the old .amp-bubble-wrapper/.amp-bubble-tooltip design.)
═══════════════════════════════════════════════════════════════════════════ */
/* 1. Allow overflow so bubble icons escape the clipped bar container */
.team.position-absolute,
.program.position-absolute,
.agent.position-absolute {
overflow: visible;
}
.tean_icon,
.program_icon,
.agent_icon {
overflow: visible;
cursor: default;
}
/* 2. Tooltip bubble — appears above the icon (matches prod's real Bootstrap .tooltip-inner) */
.tean_icon[data-tooltip]::before,
.program_icon[data-tooltip]::before,
.agent_icon[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
letter-spacing: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 99999;
}
/* 3. Caret (downward arrow pointing at the icon) */
.tean_icon[data-tooltip]::after,
.program_icon[data-tooltip]::after,
.agent_icon[data-tooltip]::after {
content: '';
position: absolute;
bottom: calc(100% + -5px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 99999;
}
/* 4. Show on hover — prod's Bootstrap tooltip settles at 0.9 opacity (.tooltip.show), not fully opaque */
.tean_icon[data-tooltip]:hover::before,
.tean_icon[data-tooltip]:hover::after,
.program_icon[data-tooltip]:hover::before,
.program_icon[data-tooltip]:hover::after,
.agent_icon[data-tooltip]:hover::before,
.agent_icon[data-tooltip]:hover::after {
opacity: 0.9;
}
/* 5. Lift the entire stacking context of the hovered bar so the tooltip
clears sibling bubbles. */
.team.position-absolute:has(.tean_icon:hover),
.program.position-absolute:has(.program_icon:hover),
.agent.position-absolute:has(.agent_icon:hover) {
z-index: 99999 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Persona "High Performer" badge tooltip — same dark-bubble treatment,
real DOM span (not content: attr()) so bold text renders.
═══════════════════════════════════════════════════════════════════════════ */
/* Center the badge over its data point, matching prod. .NET's raw markup sets
only `left: X%` (left EDGE at X%, verified in
_partialGetMetricsM1_M2NewTimeFrame.cshtml:148 — no calc()/offset in the
server-rendered HTML), yet the live DOM shows `left: calc(X% - 20px)`,
i.e. the badge's CENTER sits at X% (20px ≈ half its own rendered width).
translateX(-50%) is the standard, width-agnostic CSS way to reproduce that
exact centering without hardcoding a pixel value that could drift if the
icon's size ever changes — team/program/agent markers don't need this
because their own nested icons (.tean_icon/.program_icon/.agent_icon)
already bake in a fixed centering offset via legacy CSS. */
.persona.position-absolute {
overflow: visible;
transform: translateX(-50%);
}
.persona_icon {
overflow: visible;
cursor: default;
position: relative;
}
.persona_icon .persona-tooltip-text {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
width: max-content;
max-width: none;
text-align: center;
letter-spacing: 0;
opacity: 0.9;
pointer-events: none;
z-index: 99999;
}
.persona_icon .persona-tooltip-text b {
font-weight: 700;
}
.persona_icon .persona-tooltip-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #000;
}
.persona_icon:hover .persona-tooltip-text {
display: block;
}
.persona.position-absolute:has(.persona_icon:hover) {
z-index: 99999 !important;
}
/* Bar segment base */
.regular,
.inverse {
height: 12px;
min-width: 1px;
}.amp-cal {
width: 280px;
background: #fff;
border: none;
border-radius: 4px;
font-family: sans-serif;
font-size: 13px;
color: var(--amp-text);
padding: 8px;
user-select: none;
}
.amp-cal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 4px 12px;
}
.amp-cal__title {
font-weight: 700;
font-size: 14px;
color: var(--amp-text);
}
.amp-cal__nav {
background: #fff;
border: none;
width: 36px;
height: 36px;
border-radius: 20px;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: var(--amp-text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.amp-cal__nav:hover {
background: #f8f9fa;
border-color: #adb5bd;
}
.amp-cal__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.amp-cal__wd {
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--amp-muted);
padding: 4px 0;
}
.amp-cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.amp-cal__day {
background: transparent;
border: 1px solid transparent;
border-radius: 50%;
padding: 0;
width: 34px;
height: 34px;
font-size: 12px;
font-weight: 700;
font-family: inherit;
color: var(--amp-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.amp-cal__day:hover:not(:disabled):not(.is-selected) {
background: rgba(34, 199, 169, 0.15);
}
.amp-cal__day.is-out {
color: #b6b9bf;
}
.amp-cal__day.is-disabled,
.amp-cal__day:disabled {
color: #c4c8ce;
background: transparent;
cursor: not-allowed;
}
/* Today — teal outline circle */
.amp-cal__day.is-today:not(.is-selected) {
background: #22c7a9;
border-color: #22c7a9;
color: #fff;
font-weight: 600;
}
/* Selected — filled teal circle */
.amp-cal__day.is-selected {
background: #22c7a9;
color: #fff;
font-weight: 600;
border-color: #22c7a9;
}/* Override m2dashboardnew.css .metric_detail_card>div { text-transform: uppercase }
Prod shows title-case labels ("Number of Coachings"), not uppercase. */
#leaderboard_modal .metric_detail_card>div {
text-transform: none !important;
}
/* ── main_header1 — agent name + metric title + close ── */
#leaderboard_modal .main_header1 {
padding: 10px 30px 10px 15px !important;
border-bottom: 1px solid #dee2e6;
}
#leaderboard_modal .main_header1 .light-text {
font-weight: 400;
}
/* ── Performance bar container (bar_main_block) ── */
#leaderboard_modal .bar_main_block {
border: 1px solid #dee2e6;
padding: 15px 20px !important;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
height: 100px;
}
#leaderboard_modal .bar_main_block .performance-bar {
height: 4px;
flex: 1;
min-width: 0;
}
#leaderboard_modal .bar_main_block .regular,
#leaderboard_modal .bar_main_block .inverse {
height: 4px;
}
#leaderboard_modal .bar_main_block .tean_icon,
#leaderboard_modal .bar_main_block .program_icon {
left: -9px;
}
/* Actual / Goal block to the right of the bar */
#leaderboard_modal .actual_goal {
flex-shrink: 0;
padding-right: 0;
}
#leaderboard_modal .Actual_value {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 14px;
white-space: nowrap;
}
#leaderboard_modal .Goal_value {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 12px;
white-space: nowrap;
}
/* modal_date — "Updated through" label */
#leaderboard_modal .modal_date {
font-size: 13px;
margin-bottom: 12px;
color: #6b7a8f;
}
/* padding resets matching .NET #leaderboard_modal overrides */
#leaderboard_modal .metric_detail_serach {
padding-left: 0 !important;
}
#leaderboard_modal .metric_details_block {
padding-left: 0 !important;
}
/* Metric Trend card height is controlled by Highcharts chart.height: 351 */
/* Metric Detail Trend card height is controlled by Highcharts chart.height: 351 */
/* Override m2dashboardnew.css:2180 margin-left: 25px on #leaderboard_modal .time_frame_block */
#leaderboard_modal .time_frame_block {
margin-left: 0 !important;
}
/* Override m2dashboardnew.css:2164 display:none on .timeframe_lable */
#leaderboard_modal .timeframe_lable {
display: block;
z-index: 1;
left: 50%;
transform: translateX(-50%);
}
/* Override m2dashboardnew.css underline-tab style — restore M1 pill-group style */
#leaderboard_modal #background-pills-tab {
background-color: #f9fafb;
border: 1px solid #eaecf0;
padding: 4px !important;
border-radius: 10px;
flex-wrap: nowrap;
}
#leaderboard_modal #background-pills-tab .nav-link {
border-bottom: none !important;
border-radius: 8px;
opacity: 0.6;
color: #323441;
font-weight: 600;
font-size: 14px;
width: 120px;
margin-right: 0;
padding: 8px 12px;
white-space: nowrap;
}
#leaderboard_modal #background-pills-tab .nav-link.active {
background-color: #fff !important;
border-bottom: none !important;
box-shadow: 0 0px 5px #ccc;
opacity: 1;
color: #323441;
font-weight: 600;
}
#leaderboard_modal #background-pills-tab .nav-link:hover {
background-color: rgba(0, 0, 0, 0.07) !important;
border-bottom: none !important;
}
#leaderboard_modal #background-pills-tab .nav-link.active:hover {
background-color: #fff !important;
border-bottom: none !important;
}
/* ============================================================================
* LeaderboardModal.css – Section 1.4 leaderboard / metric-details modal
*
* Legacy CSS (execagentdashboard.css, m2dashboard.css, etc.) covers most of
* the leaderboard inner layout. This file styles the modal shell and the
* Metric Details tab (which has no equivalent legacy class in the legacy sheets).
* ========================================================================== */
/* ── Leaderboard table (#leaderboard_table) borders + sort icons ─── */
/* In React, DataTables JS is not running so the #leaderboard_table_wrapper
div never exists — legacy rules scoped to that wrapper don't fire.
Replicate M1 m1Dashboard.css rules directly on #leaderboard_table. */
#leaderboard_table {
border-color: transparent !important;
/* Bootstrap's .table sets border-collapse:collapse, which merges the LAST
row's border-bottom with this table's own (transparent) outer border at
paint time — the transparent outer edge wins, so the final row's
separator silently disappears even though every other row shows one.
border-collapse:separate decouples cell borders from the table's own
border so each row's border-bottom always renders independently. */
border-collapse: separate !important;
border-spacing: 0;
}
#leaderboard_table thead tr th,
#leaderboard_table tbody tr td {
border-left-color: transparent !important;
border-right-color: transparent !important;
}
/* Header row — text styles from managerdashboardnew.css:2939 */
#leaderboard_table thead tr {
border-bottom: 1px solid #dfe3eb !important;
}
#leaderboard_table thead tr th {
background-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
padding-top: 5px !important;
padding-bottom: 14px !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
}
#leaderboard_table tbody tr td {
border-bottom: 1px solid #dfe3eb !important;
}
#leaderboard_table tbody tr {
border-top: none !important;
border-color: transparent !important;
}
.leaderboard_table table.dataTable thead th {
text-align: left !important;
border-right: none !important;
}
/* Sorted column: no blue tint — matches M1 (inherit, not #E5EFF8) */
#leaderboard_table thead th.sorting_asc,
#leaderboard_table thead th.sorting_desc {
background-color: inherit !important;
}
/* Sort icons — font-awesome pseudo-elements (no DataTables sprite) */
#leaderboard_table thead th.sorting,
#leaderboard_table thead th.sorting_asc,
#leaderboard_table thead th.sorting_desc {
position: relative !important;
cursor: pointer !important;
padding-right: 20px !important;
background-image: none !important;
}
#leaderboard_table thead th.sorting::before,
#leaderboard_table thead th.sorting_asc::before,
#leaderboard_table thead th.sorting_desc::before {
content: "\f0dd" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
text-transform: none !important;
right: 6px !important;
bottom: calc(50% - 8px) !important;
top: auto !important;
color: #6c757d !important;
}
#leaderboard_table thead th.sorting::after,
#leaderboard_table thead th.sorting_asc::after,
#leaderboard_table thead th.sorting_desc::after {
content: "\f0de" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
text-transform: none !important;
right: 6px !important;
top: calc(50% - 8px) !important;
bottom: auto !important;
color: #6c757d !important;
}
/* Active sort direction — teal for active arrow, gray for inactive */
#leaderboard_table thead th.sorting_asc::after {
color: #22c7a9 !important;
}
#leaderboard_table thead th.sorting_asc::before {
color: #6c757d !important;
}
#leaderboard_table thead th.sorting_desc::before {
color: #22c7a9 !important;
}
#leaderboard_table thead th.sorting_desc::after {
color: #6c757d !important;
}
/* Metric Details list view ("Contact Type" table) — same DataTables sort
icon treatment as #leaderboard_table above, but WITH the active-column
header tint (confirmed against prod: #E5EFF8), unlike #leaderboard_table's
inherit-only treatment. */
#list_view thead th.sorting_asc,
#list_view thead th.sorting_desc {
background-color: #E5EFF8 !important;
}
#list_view thead th.sorting,
#list_view thead th.sorting_asc,
#list_view thead th.sorting_desc {
position: relative !important;
cursor: pointer !important;
padding-right: 20px !important;
background-image: none !important;
}
#list_view thead th.sorting::before,
#list_view thead th.sorting_asc::before,
#list_view thead th.sorting_desc::before {
content: "\f0dd" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
text-transform: none !important;
right: 6px !important;
bottom: calc(50% - 8px) !important;
top: auto !important;
color: #6c757d !important;
}
#list_view thead th.sorting::after,
#list_view thead th.sorting_asc::after,
#list_view thead th.sorting_desc::after {
content: "\f0de" !important;
position: absolute !important;
font-family: FontAwesome !important;
font-size: 10px !important;
font-weight: normal !important;
text-transform: none !important;
right: 6px !important;
top: calc(50% - 8px) !important;
bottom: auto !important;
color: #6c757d !important;
}
#list_view thead th.sorting_asc::after {
color: #22c7a9 !important;
}
#list_view thead th.sorting_asc::before {
color: #6c757d !important;
}
#list_view thead th.sorting_desc::before {
color: #22c7a9 !important;
}
#list_view thead th.sorting_desc::after {
color: #6c757d !important;
}
#list_view tbody .dataTables_empty {
text-align: center !important;
}
/* ── List view table row borders ─────────────────────────────────── */
/* m2dashboard.css suppresses all .table-bordered borders then re-adds only
border-bottom on td. ID selector gives enough specificity to ensure rows
in the list view table always show a visible separator line. */
#list_view tbody tr td {
border-bottom: 1px solid #dfe3eb !important;
border-right: 0 !important;
}
#list_view thead tr th {
background-color: #f5f8fa !important;
color: #555 !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
border-bottom: 1px solid #dfe3eb !important;
border-right: 0 !important;
}
/* ── Modal container ─────────────────────────────────────────────── */
.lbm-modal {
background: #fff;
border-radius: 8px;
width: 90vw;
max-width: 1100px;
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
}
/* Override Bootstrap modal-header/body resets for our shell */
.lbm-modal .modal-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid #e1e6ee;
background: #fff;
flex-wrap: wrap;
gap: 8px;
}
.lbm-modal .modal-header b {
font-size: 15px;
color: #2b3a55;
white-space: nowrap;
}
/* scrollable body */
.lbm-body {
flex: 1;
overflow-y: auto;
padding: 20px;
}
/* ── Loading / error states ──────────────────────────────────────── */
.lbm-loading {
text-align: center;
color: #98a3b5;
font-style: italic;
padding: 40px 0;
}
.lbm-error {
background: #fdecea;
color: #b3271c;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 16px;
}
/* ── Avatar helpers ──────────────────────────────────────────────── */
.lbm-avatar-img {
border-radius: 50%;
object-fit: cover;
}
.lbm-initials {
border-radius: 50%;
background: #ddd2ec;
color: #4f2c7d;
font-weight: 700;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* HF hover button inside rank rows */
.lbm-hf-hover {
position: absolute;
left: 100%;
cursor: pointer;
z-index: 20;
}
/* ── Metric Details tab ──────────────────────────────────────────── */
.lbm-metric-details {
display: flex;
flex-direction: column;
gap: 20px;
}
.lbm-summary-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.lbm-summary-block {
background: #f8f9fb;
border: 1px solid #e1e6ee;
border-radius: 6px;
padding: 10px 16px;
min-width: 120px;
}
.lbm-summary-label {
font-size: 11px;
color: #98a3b5;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 4px;
}
.lbm-summary-value {
font-size: 15px;
font-weight: 700;
color: #2b3a55;
}
/* Larger performance bar in the details tab */
.lbm-bar-wrap {
padding: 12px 0 24px;
}
.lbm-bar-wrap .performance-bar {
height: 28px;
}
.lbm-bar-wrap .regular,
.lbm-bar-wrap .inverse {
height: 14px;
}
/* Metric type note */
.lbm-metric-type-note {
font-size: 12px;
color: #98a3b5;
margin: 0;
}
.lbm-coachable-badge {
display: inline-block;
margin-left: 8px;
background: #e8f5e9;
color: #2e7d32;
border-radius: 3px;
padding: 1px 8px;
font-size: 11px;
font-weight: 600;
}
/* ── Leaderboard tab layout ──────────────────────────────────────── */
.lbm-lb-layout {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* Left block sizing — match legacy leader_board_details .left_block { width: 40% } */
.lbm-lb-layout .left_block {
width: 40%;
flex-shrink: 0;
}
/* Right block takes remaining space */
.lbm-lb-layout .leader_board_progress {
flex: 1;
min-width: 0;
}
/* Team/Program rank tiles — override legacy align-items:start so both tiles
stretch to the same height when team_rank_tile grows due to 24px ordinal font */
#pills-leaderboard .team_program_rank {
align-items: stretch;
}
/* Tile label — "Team Rank" / "Program Rank" — normal weight to match prod */
.team_rank_tile>div:first-child,
.program_rank_tile>div:first-child {
font-weight: 400;
}
/* Rank value row — inherits normal weight; only the ordinal is large+bold */
.teamrank {
line-height: 21px;
margin-top: 4px;
}
/* Ordinal ("1st", "2nd") — 24px bold matching m2dashboardnew.css */
.team_rank_tile .teamrank b,
.program_rank_tile .teamrank b {
font-size: 24px;
line-height: 25px;
font-weight: 700 !important;
color: #2b3a55;
}
/* Games won card — fills the left_block width */
.game_notwon_block {
width: 100%;
}
.games_won {
width: 100%;
}
.games_won .card {
border-radius: 6px;
overflow: hidden;
/* Match legacy: .games_won .card { border: 1px solid transparent } — no visible outer box */
border: 1px solid transparent;
width: 100%;
}
/* Pagination wrapper inside games-not-won card — not a real DataTables wrapper,
so div.dataTables_wrapper flex rules don't apply. Apply center-align directly. */
.gamesnot_won_table .dataTables_wrapper {
border: none !important;
box-shadow: none !important;
}
.gamesnot_won_table .dataTables_paginate {
display: flex;
justify-content: center;
padding: 12px 0;
gap: 4px;
}
.games_won .card-header {
background: #f4f6f9;
padding: 10px 14px;
font-size: 13px;
border-bottom: 1px solid #e1e6ee;
}
.games_won .card-body {
padding: 10px;
}
/* Team ranking header */
.team_rank_description {
margin-bottom: 12px;
}
.team_rank_description h3 {
font-size: 14px;
font-weight: 700;
color: #2b3a55;
margin: 0 0 4px;
}
/* Highlighted top row */
.top_rank {
background: #f4f0fb;
border-radius: 6px;
margin-bottom: 8px;
overflow: hidden;
}
/* Rank progress bar */
.rank_progress {
height: 8px;
background: #e1e6ee;
border-radius: 4px;
overflow: hidden;
}
.current_progress {
height: 100%;
border-radius: 4px;
min-width: 2px;
}
/* Rank number */
.rank_number {
font-size: 13px;
color: #2b3a55;
}
/* Person details */
.ranked_person {
display: flex;
align-items: center;
gap: 10px;
}
.ranked_person_details {
min-width: 0;
}
.ranked_person_name {
font-size: 13px;
font-weight: 600;
color: #2b3a55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ranked_person_title {
font-size: 11px;
color: #98a3b5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Rank value score */
.rank_value {
font-size: 14px;
font-weight: 700;
color: #2b3a55;
}
/* HF container relative positioning */
/* .HF_metric_container {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
} */
/* ── Metric Details tab layout ───────────────────────────────────── */
/* Right-hand chart column inside the metric details row */
.metric_chart_col {
display: flex;
flex-direction: column;
}
.metric_detail_right_block {
display: flex;
flex-direction: column;
height: 100%;
}
/* Chart container — Highcharts renders inside here */
.metric_chart_unique {
width: 100%;
overflow: hidden;
}
/* Hid helper (mirrors .NET .hid class for expand/collapse) */
.lbm-modal .hid {
display: none !important;
}
/* ── View Details button in BSC header ───────────────────────────── */
.view_details .btn-bordered {
margin-right: 8px;
}
/* ── metric_detail_card label — bold to match .NET ───────────────── */
#leaderboard_modal .metric_detail_card>div {
font-weight: 600 !important;
}
/* ── Timeframe dropdown — save_footer (matches M1 m1summarynew.css) ─ */
/*
* M2 doesn't ship m1summarynew.css, so we define save_footer rules here.
* execagentdashboard.css already has .save_footer .btn-primary:hover.
*/
.save_footer {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 15px;
border-top: 1px solid #ebebeb;
background: #fff;
position: sticky;
bottom: -1px;
width: 100%;
}
.save_footer .btn {
padding: 6px 15px !important;
}
.save_footer .btn-cancel {
font-size: 12px;
border-radius: 5px;
text-align: center;
border: 1px solid #e6e9ed;
margin-right: 10px;
background: transparent;
color: #323441;
}
.save_footer .btn-cancel:hover {
background-color: #f9fafb !important;
}
.save_footer .btn-primary {
background-color: #21c7a9 !important;
border-color: #21c7a9 !important;
color: #fff;
}
.save_footer .btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── rank_number badge fix ───────────────────────────────────────────
* m2dashboardnew.css puts background/border on .rank_number (the outer
* div), making it stretch full-width as a block element.
* execagentdashboard.css + managerdashboardnew.css put the badge on
* .rank_number > div with width:fit-content — that is the correct layer.
* Cancel the m2 outer-div badge styles inside the leaderboard modal so
* only the inner > div renders the pill badge at fit-content width.
* Also cancel .top_rank .rank_number { width:15% } from execagentdashboard
* (td already has w-15, so inner div would get 15%*15% = tiny).
* ───────────────────────────────────────────────────────────────── */
#leaderboard_modal .rank_number {
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
font-size: inherit !important;
width: auto !important;
}
/* ── paginate_button spacing ─────────────────────────────────────────
* elements are inline — JSX produces no whitespace
* nodes between them, so they run together. Add display+margin to space.
* ───────────────────────────────────────────────────────────────── */
#leaderboard_modal a.paginate_button {
display: inline-block;
margin: 0 2px;
}
/* ── Team Rank tile min-height to match Program Rank tile ───────── */
#pills-leaderboard .team_program_rank .team_rank_tile {
min-height: 84px;
}
/* ── Games Not Won table row bottom border ───────────────────────── */
#gamesnot_won_table tr {
border-bottom: 1px solid #dee2e6;
}
/* ── Games Not Won table header bottom border ─────────────────────── */
/* Legacy managerdashboardnew.css sets
".gamesnot_won_table thead tr th { border-bottom-color: transparent !important; }"
— must out-specificity that with an ID selector + !important to override it. */
#gamesnot_won_table thead th {
border-bottom: 1px solid #dee2e6 !important;
}
/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
.lbm-modal {
width: 98vw;
}
.lbm-lb-layout {
flex-direction: column;
}
.lbm-lb-layout .left_block {
width: 100%;
}
.lbm-summary-row {
gap: 8px;
}
.lbm-summary-block {
min-width: 90px;
padding: 8px 12px;
}
.metric_chart_col {
margin-top: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
Metric bar icon tooltips (T / P / AD bubbles)
───────────────────────────────────────────────────────────────────────────
React uses: data-tooltip="…" + these pure-CSS rules — mirrors
amplifai_react_iframe/src/screens/l1Dashboard.css so all three
dashboards (L1/M1/M2) share the same tooltip design.
═══════════════════════════════════════════════════════════════════════════ */
/* 1. Allow overflow so bubble icons escape the clipped bar container */
.team.position-absolute,
.program.position-absolute,
.agent.position-absolute {
overflow: visible;
}
.tean_icon,
.program_icon,
.agent_icon {
overflow: visible;
cursor: default;
}
/* 2. Tooltip bubble — appears above the icon (matches prod's real Bootstrap .tooltip-inner) */
.tean_icon[data-tooltip]::before,
.program_icon[data-tooltip]::before,
.agent_icon[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
letter-spacing: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 99999;
}
/* 3. Caret (downward arrow pointing at the icon) */
.tean_icon[data-tooltip]::after,
.program_icon[data-tooltip]::after,
.agent_icon[data-tooltip]::after {
content: '';
position: absolute;
bottom: calc(100% + -5px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
z-index: 99999;
}
/* 4. Show on hover — prod's Bootstrap tooltip settles at 0.9 opacity (.tooltip.show), not fully opaque */
.tean_icon[data-tooltip]:hover::before,
.tean_icon[data-tooltip]:hover::after,
.program_icon[data-tooltip]:hover::before,
.program_icon[data-tooltip]:hover::after,
.agent_icon[data-tooltip]:hover::before,
.agent_icon[data-tooltip]:hover::after {
opacity: 0.9;
}
/* 5. Lift the entire stacking context of the hovered bar so the tooltip
clears sibling bubbles. */
.team.position-absolute:has(.tean_icon:hover),
.program.position-absolute:has(.program_icon:hover),
.agent.position-absolute:has(.agent_icon:hover) {
z-index: 99999 !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
Persona "High Performer" badge tooltip — same dark-bubble treatment,
real DOM span (not content: attr()) so bold text renders.
═══════════════════════════════════════════════════════════════════════════ */
/* Center the badge over its data point, matching prod — see MetricsBlock.css
for the full explanation (same .persona markup/data, same fix needed here
for the Metric Details modal's own performance bar). */
.persona.position-absolute {
overflow: visible;
transform: translateX(-50%);
}
.persona_icon {
overflow: visible;
cursor: default;
position: relative;
}
.persona_icon .persona-tooltip-text {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background-color: #000;
color: #fff;
font-size: .875rem;
font-weight: 400;
line-height: 1.5;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
width: max-content;
max-width: none;
text-align: center;
letter-spacing: 0;
opacity: 0.9;
pointer-events: none;
z-index: 99999;
}
.persona_icon .persona-tooltip-text b {
font-weight: 700;
}
.persona_icon .persona-tooltip-text::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #000;
}
.persona_icon:hover .persona-tooltip-text {
display: block;
}
.persona.position-absolute:has(.persona_icon:hover) {
z-index: 99999 !important;
}.lbhm-nav-icon {
width: 22px;
height: 22px;
display: block;
}
.lbhm-outer {
height: auto;
border: 1px solid #d2d8e1;
background: #f7f8fa;
overflow: auto;
padding: 14px;
box-sizing: border-box;
}
.lbhm-wrap {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px;
padding-bottom: 56px;
min-width: 1020px;
position: relative;
}
.lbhm-title {
margin: 0 0 6px 0;
font-size: 18px;
font-weight: 700;
color: #101828;
}
.lbhm-subtitle {
margin: 0;
font-size: 13px;
color: #667085;
}
.lbhm-note {
margin: 6px 0 14px 0;
font-size: 12px;
color: #475467;
}
.lbhm-table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 8px;
}
.lbhm-table thead th {
text-align: center;
background: #f5f8fa;
border-radius: 6px;
border: 0;
box-shadow: none;
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
color: #667085;
text-transform: uppercase;
vertical-align: middle;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.3;
}
.lbhm-table thead th:first-child {
text-align: left;
}
.lbhm-table thead th.lbhm-priority-th {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.3;
padding: 8px 6px;
word-break: normal;
overflow-wrap: anywhere;
}
.lbhm-table thead th.lbhm-priority-th .lbhm-priority-th-sub {
display: block;
font-size: 10px;
font-weight: 500;
color: #98a2b3;
text-transform: none;
letter-spacing: 0;
margin-top: 2px;
}
.lbhm-metric {
background: #f9fafb;
border-radius: 6px;
border: 0;
box-shadow: none;
padding: 12px 14px;
font-size: 14px;
font-weight: 700;
color: #101828;
vertical-align: middle;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.lbhm-priority {
background: #f9fafb;
border-radius: 6px;
border: 0;
box-shadow: none;
padding: 12px 8px;
font-size: 14px;
font-weight: 700;
color: #101828;
vertical-align: middle;
text-align: center;
white-space: nowrap;
}
.lbhm-cell {
position: relative;
border-radius: 6px;
height: 74px;
padding: 12px 12px 28px;
text-align: center;
vertical-align: middle;
font-size: 16px;
font-weight: 700;
border: 0;
box-shadow: none;
cursor: pointer;
transition: opacity 0.15s;
}
.lbhm-cell:hover {
opacity: 0.85;
}
.lbhm-cell.lbhm-cell-clickable:hover {
outline: 2px solid #1d4ed8;
outline-offset: -2px;
}
.lbhm-cell small {
position: absolute;
right: 8px;
bottom: 7px;
font-size: 10px;
font-weight: 600;
line-height: 1;
opacity: 0.9;
pointer-events: none;
}
.lbhm-table tbody tr.lbhm-sep td {
padding: 0;
height: 10px;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.lbhm-table tbody tr.lbhm-sep td::before {
content: "";
display: block;
height: 4px;
margin-top: 4px;
background: #edeef2;
}
.lbhm-critical {
background: #B3261E;
color: #fff;
}
.lbhm-poor {
background: #E5533D;
color: #fff;
}
.lbhm-warning {
background: #F2B705;
color: #fff;
}
.lbhm-good {
background: #8FD3A5;
color: #fff;
}
.lbhm-great {
background: #4CAB82;
color: #fff;
}
.lbhm-excellent {
background: #1B5E4B;
color: #fff;
}
.lbhm-neutral {
background: #A0A0A0;
color: #111111;
}
.lbhm-status {
/* Overlay the heatmap area instead of taking flow space, so showing/hiding
the loader during a refresh doesn't push the table down and create a flicker. */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 12px 24px;
background: rgba(255, 255, 255, 0.92);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(2, 6, 23, 0.12);
text-align: center;
color: #6b7280;
font-size: 14px;
z-index: 5;
pointer-events: none;
}
.lbhm-wrap {
position: relative;
}
.lbhm-wrap.lbhm-loading .lbhm-table {
opacity: 0.45;
transition: opacity 0.2s ease;
}
.lbhm-legend {
margin-top: 16px;
padding: 12px;
background: #f9fafb;
border-radius: 8px;
}
.lbhm-legend-title {
font-size: 12px;
font-weight: 600;
color: #344054;
margin-bottom: 10px;
text-transform: uppercase;
}
.lbhm-legend-items {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.lbhm-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.lbhm-legend-color {
width: 40px;
height: 24px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.lbhm-legend-label {
font-size: 13px;
font-weight: 500;
color: #344054;
}
.lbhm-aa-badge {
position: absolute;
right: 16px;
bottom: 14px;
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
color: #065f46;
background: #ecfdf3;
border: 1px solid #a6f4c5;
border-radius: 999px;
padding: 6px 10px;
}
.lbhm-tooltip {
position: fixed;
z-index: 9999;
width: 182px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #1e293b;
box-shadow: 0 14px 28px rgba(2, 6, 23, 0.35);
padding: 12px 14px;
display: none;
pointer-events: none;
color: #e2e8f0;
font-size: 10px;
line-height: 1.2;
}
.lbhm-tooltip-title {
font-size: 11px;
font-weight: 700;
color: #f8fafc;
margin-bottom: 8px;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.3;
}
.lbhm-tooltip-line {
margin-bottom: 8px;
}
.lbhm-tooltip-line:last-child {
margin-bottom: 0;
display: flex;
align-items: center;
gap: 8px;
}
.lbhm-tooltip-swatch {
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
flex: 0 0 auto;
}
.lbhm-tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -8px;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #1e293b;
}
#pills-heatmap {
height: auto;
}/* ============================================================================
* TasksTable.css — M2 My Tasks section
*
* Overrides legacy CSS conflicts scoped to #task_history.
*
* Load order (lowest → highest priority):
* 1. managerdashboardnew.css (public/legacy, via
tags (no href, onClick-only) — same element .NET uses — so they inherit
the legacy teal/bold link styling from
#activity_history_table_wrapper .table td a in managerdashboardnew.css.
No bespoke button styling needed here anymore. *//* ──────────────────────────────────────────────────────────────
RightHandTiles.css — Section 1.9
Uses amp-m2-rt-* namespace for custom styles.
Legacy class names (right_tile, next_best_action, action_box,
new_game_tile, etc.) kept for alignment with host app CSS.
────────────────────────────────────────────────────────────── */
/* ─── Tile list ─────────────────────────────────────────────── */
.amp-m2-rt-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.amp-m2-rt-list > li {
list-style: none;
}
.amp-m2-rt-empty {
color: #888;
font-size: 13px;
padding: 12px 0;
}
/* ─── Quick Scorecard card ──────────────────────────────────── */
.amp-m2-rt-quick-card {
border-radius: 8px;
padding: 14px 16px 0;
background: #fff;
border: 1px solid #e8e8e8;
position: relative;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
min-height: 80px;
}
.amp-m2-rt-quick-card h3 {
font-size: 12px;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 4px;
}
.amp-m2-rt-quick-card h1 {
font-size: 26px;
font-weight: 700;
color: #222;
margin: 0 0 2px;
line-height: 1.1;
}
.amp-m2-rt-quick-card p {
font-size: 12px;
color: #888;
margin: 0 0 10px;
}
/* Color bar at bottom */
.amp-m2-rt-quick-card .efx_color {
height: 5px;
margin: 0 -16px;
border-radius: 0 0 8px 8px;
}
/* ─── Game tile ─────────────────────────────────────────────── */
.amp-m2-rt-game-tile {
border-radius: 8px;
border: 1px solid #e8e8e8;
background: #fff;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.amp-m2-rt-game-tile a {
display: block;
text-decoration: none;
color: inherit;
}
.amp-m2-rt-game-tile a:hover {
background: #f9f9ff;
}
.amp-m2-rt-game-tile .tile_block {
padding: 12px 14px 8px;
}
.amp-m2-rt-game-tile .game_name {
font-size: 13px;
font-weight: 600;
color: #222;
}
.amp-m2-rt-game-tile .metric_name {
font-size: 12px;
color: #888;
margin-top: 2px;
}
.amp-m2-rt-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
}
.amp-m2-rt-game-tile .game_status_indication .med img {
width: 36px;
height: 36px;
object-fit: contain;
}
.amp-m2-rt-game-tile .chat_count {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #666;
margin-top: 8px;
}
.amp-m2-rt-game-tile .chat_count img {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 3px;
}
.amp-m2-rt-game-tile .tile_bottom {
background: #f5f6fa;
padding: 8px 14px;
border-top: 1px solid #eee;
font-size: 12px;
color: #555;
}
.amp-m2-rt-game-tile .tile_team_icon > div {
width: 28px;
height: 28px;
border-radius: 50%;
background: #1976d2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
}
/* ─── Incentive tile wrapper ────────────────────────────────── */
.amp-m2-rt-incentive-li {
cursor: pointer;
}
.amp-m2-rt-incentive-wrap {
border-radius: 8px;
overflow: hidden;
border: 1px solid #e8e8e8;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.amp-m2-rt-incentive-wrap:hover {
border-color: #1976d2;
}
/* ─── Incentive popup modal ─────────────────────────────────── */
.amp-m2-rt-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1050;
}
.amp-m2-rt-modal {
background: #fff;
border-radius: 8px;
padding: 24px;
width: 640px;
max-width: 95vw;
max-height: 85vh;
overflow-y: auto;
position: relative;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.amp-m2-rt-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: #555;
line-height: 1;
}
.amp-m2-rt-close:hover {
color: #000;
}
/* ─── Schedule tile ──────────────────────────────────────────── */
.amp-m2-rt-schedule-tile {
cursor: pointer;
transition: box-shadow 0.12s;
}
.amp-m2-rt-schedule-tile:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.amp-m2-rt-schedule-body {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 8px;
}
/* ============================================================================
* M2ActiveCoachingCommitments.css
*
* Legacy managerdashboardnew.css .coaching_table_header .sorting::before/after:
* - Has position:absolute + right:10px BUT no top/bottom → no vertical centering
* - .sorting_asc/.sorting_desc variants only set content/color/font — missing
* position:absolute entirely, so sorted icons flow inline.
*
* This file (Vite-injected after legacy with default browser
disc bullets (managerdashboardnew.css only styles li padding-bottom,
no list-style override). In this app that marker isn't rendering, so
it's restored explicitly here — scoped to #edit_profile_modal only so
no other component/screen reusing .upload_instrution_text is affected. */
#edit_profile_modal .upload_instrution_text ul {
list-style: disc outside;
margin: 0;
padding-left: 1.2em;
}
#edit_profile_modal .upload_instrution_text ul li {
display: list-item;
}
/* ── Delete sub-modal header ───────────────────────────── */
.ep-sub-dialog .modal-header h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.ep-sub-dialog .modal-header,
.ep-sub-dialog #delete_footer {
border-color: transparent;
}/* ──────────────────────────────────────────────────────────────
AgentSchedulingModal.css
Ports agent_scheduling_modal + _Partial_manager_agent_scheduling*.cshtml
Namespace: amp-m2-as-*
────────────────────────────────────────────────────────────── */
/* ─── Overlay ────────────────────────────────────────────────── */
.amp-m2-as-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1060;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
}
/* ─── Outer close button (matches .NET md_close pattern) ──────── */
.amp-m2-as-outer-close {
position: absolute;
top: -32px;
right: 0;
background: transparent;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
line-height: 1;
padding: 4px;
}
/* ─── Dialog ─────────────────────────────────────────────────── */
.amp-m2-as-dialog {
position: relative;
background: #fff;
border-radius: 6px;
width: 100%;
max-width: 580px;
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
overflow: hidden;
}
/* ─── Content area ───────────────────────────────────────────── */
.amp-m2-as-content {
padding: 20px;
overflow-y: auto;
flex: 1;
}
/* ─── Title ──────────────────────────────────────────────────── */
.amp-m2-as-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 16px;
}
/* ─── Date row ───────────────────────────────────────────────── */
.amp-m2-as-date-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.amp-m2-as-date-label {
font-size: 13px;
color: #555;
white-space: nowrap;
font-weight: 500;
margin: 0;
}
.amp-m2-as-date-input {
width: 160px;
font-size: 13px;
padding: 4px 8px;
height: 34px;
}
/* ─── List header ────────────────────────────────────────────── */
.amp-m2-as-list-header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: #888;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 4px;
}
/* ─── Agent list ─────────────────────────────────────────────── */
.amp-m2-as-list {
min-height: 60px;
}
.amp-m2-as-error {
font-size: 13px;
color: #c62828;
padding: 8px 0;
}
.amp-m2-as-empty {
font-size: 13px;
color: #888;
padding: 16px 0;
text-align: center;
}
/* ─── Agent row ──────────────────────────────────────────────── */
.amp-m2-as-agent-wrap {
border-bottom: 1px solid #f0f0f0;
}
.amp-m2-as-agent-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
padding: 10px 10px;
cursor: pointer;
border-radius: 4px;
transition: background 0.1s;
user-select: none;
}
.amp-m2-as-agent-row:hover {
background: #f5f5f5;
}
.amp-m2-as-agent-row.is-open {
background: #e8f0fe;
}
.amp-m2-as-agent-name {
font-size: 13px;
font-weight: 500;
color: #333;
}
.amp-m2-as-agent-shift {
display: flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: #555;
}
.amp-m2-as-hyphen {
color: #aaa;
}
.amp-m2-as-chevron {
font-size: 10px;
color: #aaa;
margin-left: 8px;
}
/* ─── Detail table ───────────────────────────────────────────── */
.amp-m2-as-detail {
padding: 0 10px 10px 20px;
background: #fafafa;
}
.amp-m2-as-no-detail {
font-size: 12px;
color: #888;
padding: 8px 0;
}
.amp-m2-as-table {
margin: 0;
font-size: 12px;
}
.amp-m2-as-table thead th {
font-size: 11px;
font-weight: 600;
color: #777;
padding: 6px 8px;
border-bottom: 1px solid #e0e0e0;
white-space: nowrap;
}
.amp-m2-as-table tbody td {
padding: 5px 8px;
vertical-align: middle;
border-top: 1px solid #f5f5f5;
font-size: 12px;
color: #444;
}
.amp-m2-as-th-shift {
display: flex;
flex-direction: column;
gap: 2px;
}
.amp-m2-as-th-times {
display: flex;
justify-content: space-between;
font-size: 10px;
color: #aaa;
padding: 0 4px;
}
.amp-m2-as-seg-times {
display: flex;
justify-content: space-between;
gap: 8px;
}
/* ─── Footer note ────────────────────────────────────────────── */
.amp-m2-as-note {
margin: 16px 0 0;
font-size: 12px;
color: #777;
font-style: italic;
line-height: 1.5;
}
/* ─── Responsive ──────────────────────────────────────────────── */
@media (max-width: 500px) {
.amp-m2-as-agent-row {
grid-template-columns: 1fr auto auto;
gap: 8px;
}
.amp-m2-as-dialog {
max-height: calc(100vh - 40px);
}
.amp-m2-as-overlay {
padding: 16px 8px;
}
}
/* ============================================================================
* AlertModal.css
* Generic single-message alert dialog — matches prod's swal()-styled popups:
* white rounded card, bold centered message, single teal OK button.
* ========================================================================== */
.amp-alert-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1080;
}
.amp-alert-dialog {
background: #fff;
border-radius: 6px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
padding: 32px 40px;
min-width: 320px;
max-width: 480px;
text-align: center;
}
.amp-alert-message {
font-size: 16px;
font-weight: 700;
color: #1f2937;
margin-bottom: 24px;
line-height: 1.4;
}
.amp-alert-ok {
background: #22c7a9;
border: 1px solid #22c7a9;
color: #fff;
font-weight: 600;
font-size: 14px;
padding: 8px 32px;
border-radius: 4px;
cursor: pointer;
}
.amp-alert-ok:hover {
background: #1caf94;
border-color: #1caf94;
}
/* ============================================================================
* M2 Senior-Manager Dashboard styles
*
* Mirrors m1Dashboard.css exactly — class names use amp-m2-* prefix.
* Layout classes (agent_profile_block, metric_commitment_block, etc.) are
* shared with the legacy CSS loaded in index.html:
* - /legacy/css/execagentdashboard.css
* - /legacy/css/managerdashboardnew.css
* - /legacy/css/modifiedagentdb.css
* ========================================================================== */
.amp-m2-shell {
background: #f4f6f9;
min-height: 100vh;
}
/* ── Sticky filter bar ──────────────────────────────────────────────────── */
/* Mirrors M1 .amp-m1-filterbar exactly:
- No display:flex at root level (inner org_prog_header > container-fluid > row handles layout)
- No padding (org_prog_header legacy CSS provides padding: 10px 0)
- No border-bottom (org_prog_header legacy CSS provides border-bottom via .org_prog_header) */
.amp-m2-filterbar {
position: sticky;
top: 0;
z-index: 5;
background: #f5f8fa;
padding: 0;
}
/* Left: org / program / timeframe / submit — legacy .org_block handles flex layout */
.amp-m2-filterbar__selectors {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
/* Right: manager KPI summary cards — mirrors M1 #managerCardDetails
padding-bottom: 15px centers cards within the filterbar height (matches M1) */
.amp-m2-filterbar__cards {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0;
padding-bottom: 15px;
}
/* KPI card title: 12px matches prod label size — mirrors M1 rule */
.amp-m2-filterbar__cards .top_right_tile div:first-child {
font-size: 12px;
}
/* KPI card value: keep prod 20px (legacy CSS sets this on b) — mirrors M1 rule */
.amp-m2-filterbar__cards .top_right_tile b {
font-size: 20px;
}
/* Labels — mirrors M1: 13px, 500 weight, 7px bottom margin, inline-block */
.amp-m2-filterbar label {
font-size: 13px;
font-weight: 500;
color: #344054;
margin-bottom: 7px;
display: inline-block;
}
/* form-select: mirrors M1 — target .form-select class so dropdown height/border/radius match .NET */
.amp-m2-filterbar .form-select {
color: #667085;
border: 1px solid #d0d5dd;
border-radius: 8px;
height: 42px;
font-size: 14px;
min-width: 200px;
}
/* Date input (non-select inputs) */
.amp-m2-filterbar input[type="date"] {
border: 1px solid #d0d5dd;
border-radius: 8px;
height: 42px;
font-size: 14px;
padding: 6px 10px;
min-width: 200px;
}
/* Submit button — matches M1, sized to align with the select height */
.amp-m2-filterbar__selectors .btn-primary,
.amp-m2-filterbar .org_block .btn-primary {
background: #21c7a9;
border-color: #21c7a9;
color: #fff;
font-weight: 600;
cursor: pointer;
padding: 6px 16px;
font-size: 13px;
line-height: 1.5;
}
.amp-m2-filterbar__selectors .btn-primary:hover,
.amp-m2-filterbar .org_block .btn-primary:hover {
background: #0c6857;
border-color: #0c6857;
}
.amp-m2-filterbar__selectors .btn-primary:disabled,
.amp-m2-filterbar .org_block .btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* TimeframeDropdown — min-width matches org/program selects (mirrors M1) */
.amp-m2-filterbar .time_frame_block {
min-width: 200px;
padding: 0;
}
/* ── Two-column grid ────────────────────────────────────────────────────── */
/* No outer padding here — individual sections (agent_profile_block,
metric_commitment_block, parent_block, collapsibles) each supply their own
padding/margin from legacy CSS, matching the M1 pattern exactly. */
.amp-m2-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 0;
}
/* Matches .NET .left_dashboard { border-right: 1px solid #dfe3eb }
No padding-right here — metric_commitment_block, agent_profile_block, and
parent_block each supply their own right spacing, matching M1 exactly. */
.amp-m2-left {
border-right: 1px solid #dfe3eb;
}
.amp-m2-right {
padding-left: 16px;
}
/* Prevent legacy left_dashboard/right_dashboard width rules from overriding
the CSS Grid track sizing. The grid defines column widths — width:auto
lets the grid algorithm win (higher cascade from webpack-injected CSS). */
.amp-m2-grid .left_dashboard {
width: auto;
}
.amp-m2-grid .right_dashboard {
width: auto;
}
@media (max-width: 990px) {
.amp-m2-grid {
grid-template-columns: 1fr;
}
.amp-m2-left {
border-right: none;
padding-right: 0;
}
}
/* ── Agent profile block ────────────────────────────────────────────────── */
/* Matches M1 exactly: padding: 30px 30px 30px 25px !important.
!important needed: managerdashboardnew.css (loaded later) sets the same value
but without !important — React injected CSS wins here to guarantee the match.
overflow: visible so scorecard_range_tooltip absolute popup can escape the boundary. */
.agent_profile_block {
padding: 30px 30px 30px 25px !important;
overflow: visible;
font-size: 12px;
}
/* agent_profile: ensure 200px min-height in local dev (legacy CSS sets height:200px in prod) */
.agent_profile {
min-height: 200px;
}
/* activity-tracker: use EXACT legacy dimensions (150×157px) so the ring SVGs fill
the dark pill correctly. All rings are position:absolute so the container collapses
to zero without explicit size in local dev. */
.activity-tracker {
width: 150px;
height: 157px;
position: relative;
display: inline-block;
}
/* All ring SVGs sit inside the activity-tracker (absolute) */
.activity-tracker .ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/* scorecard_circle: mirrors M1 — display:flex centers the ring in the dark pill */
.scorecard_circle {
display: flex;
justify-content: center;
align-items: center;
}
/* scorecard_circle_center: the small white dot at the BSC rings center.
managerdashboardnew.css uses position:absolute with no top/left — works only when
scorecard_circle has display:flex. We add explicit centering here as a fallback. */
.scorecard_circle_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
pointer-events: none;
}
/* scorecard_range_tooltip vertical position: mirrors M1 fix.
managerdashboardnew.css sets left:-305px but no top — without it the tooltip
sits at the natural (top) position of scorecard_circle, cutting off in the banner.
top:50% + translateY(-50%) centers it within the circle element. */
.scorecard_range_tooltip {
top: 50% !important;
transform: translateY(-50%) !important;
left: -305px;
z-index: 100;
}
/* Prevent title from wrapping inside the profile banner */
.agent_profile .agent_title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Push BSC scorecard to far-right of the profile banner */
.agent_profile .agent_scorecard {
margin-left: auto;
flex-shrink: 0;
}
/* Prevent "EXCEEDS MOST" from wrapping — single line like production */
.agent_profile .score_range {
white-space: nowrap;
}
/* ── Metrics + Tasks two-column block ───────────────────────────────────── */
/* align-items:flex-start so each column takes its own natural height.
padding: 0px 30px 30px 25px !important mirrors M1 m1Dashboard.css exactly.
Legacy managerdashboardnew.css supplies the same value without !important;
!important here ensures the React CSS wins over the late-loaded legacy CSS. */
.amp-m2-grid .metric_commitment_block {
margin-top: 0;
align-items: stretch;
/* stretch makes both columns equal height (height of taller) */
padding: 0px 30px 30px 25px !important;
}
/* Metrics column — stretches to fill column height */
.metrics_block {
display: flex;
flex-direction: column;
width: 100%;
}
.metrics_block .card {
display: flex;
flex-direction: column;
flex: 1;
/* card fills the full metrics_block height */
overflow: visible;
}
.metrics_block .card .card-body {
overflow: visible;
}
.metrics_block .metric_table {
min-height: 70vh;
overflow: visible;
}
/* Row border fix: managerdashboardnew.css sets .table tr { border-color: transparent }
suppressing Bootstrap 5 table-bordered borders. Enforce #dfe3eb dividers explicitly. */
.metric_table tbody tr td {
border-bottom: 1px solid #dfe3eb !important;
}
/* updated_through dropdown — mirrors M1 m1Dashboard.css legacy values */
.updated_through_dropdown {
position: absolute;
top: -30px;
right: 0;
background-color: #fff;
z-index: 999;
box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.19);
border-radius: 5px;
display: none;
min-width: 200px;
}
.updated_through:hover .updated_through_dropdown {
display: block;
}
.updated_through_dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.updated_through_dropdown ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 12px 10px;
text-align: left;
}
.updated_through_dropdown ul li b {
font-weight: 600;
color: #323441;
font-size: 16px;
}
.updated_through_dropdown ul li .btn {
background-color: #22c7a9 !important;
border-color: #22c7a9 !important;
padding: 7px 15px !important;
width: 100%;
font-weight: 600 !important;
border-radius: 5px !important;
color: #fff !important;
font-size: 14px !important;
}
.updated_through {
cursor: pointer;
position: relative;
}
/* Right column (My Tasks) — flex column so commitment_block stretches */
.commitment_learning_block {
display: flex;
flex-direction: column;
width: 100%;
}
/* My Tasks — stretches to fill full column height (matches Metrics card height) */
.commitment_learning_block .commitment_block {
flex: 1;
/* fills the commitment_learning_block height */
min-height: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.commitment_learning_block .commitment_block .card {
flex: 1;
/* card fills commitment_block */
display: flex;
flex-direction: column;
overflow: hidden;
}
.commitment_learning_block .commitment_block .card .card-body {
flex: 1;
/* body fills remaining card space */
overflow-y: auto;
/* scroll when task rows overflow */
}
/* ── Performance Trend ──────────────────────────────────────────────────── */
/* Legacy managerdashboardnew.css supplies:
.parent_block { margin: 30px 30px 30px 25px; border-radius: 5px; box-shadow: 0px 0px 5px #ccc }
Do NOT override margin here — let legacy apply naturally. */
.performance_trend_block.parent_block {
background: #fff;
}
.performance_trend_block .overflow-auto {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible;
}
.performance_trend_block .sub_block {
min-width: 260px;
flex-shrink: 0;
}
/* m2dashboardnew.css sets .scrollable_block .metric_user { background-color: gray }
which overrides the lighter value — reset to match prod white/light style. */
.performance_trend_block .scrollable_block .metric_user {
background-color: #f5f8fa;
}
/* ── Collapsible sections ───────────────────────────────────────────────── */
/* Each uses SectionHeader: .expand_bg (grey pill) + .view_all.cei (teal link)
Mirrors M1 exactly — no generic padding here; section-specific rules below. */
.amp-m2-collapsible {
background: transparent;
border-bottom: 1px solid #dfe3eb;
margin-bottom: 0;
overflow: visible;
}
/* Section header link — confirmed against prod: underlined by default,
underline removed on hover (opposite of the previous assumption below). */
a.view_all.cei {
text-decoration: underline !important;
}
a.view_all.cei:hover {
text-decoration: none !important;
}
/* Coaching Effectiveness Index section — matches M1 .amp-m1-collapsible.coaching_history */
.amp-m2-collapsible.cefx_block {
padding: 35px 20px 35px 15px !important;
border-top: 1px solid #dfe3eb;
}
/* Activity History section — matches M1 .amp-m1-collapsible.activity_history */
.amp-m2-collapsible.activity_history {
padding: 35px 20px 35px 15px !important;
border-top: 1px solid #dfe3eb;
}
/* Active Coaching Commitments section — same structure as cefx_block / activity_history */
.amp-m2-collapsible.active_coaching_block {
padding: 35px 20px 35px 15px !important;
border-top: 1px solid #dfe3eb;
}
/* ── Card styles ────────────────────────────────────────────────────────── */
.amp-m2-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
padding: 16px;
margin-bottom: 16px;
}
.amp-m2-card__placeholder {
color: #98a3b5;
font-size: 13px;
font-style: italic;
padding: 24px 0;
text-align: center;
}
/* ── Error banner ───────────────────────────────────────────────────────── */
.amp-m2-error {
background: #fdecea;
color: #b3271c;
padding: 12px 16px;
border-radius: 6px;
margin: 0 20px 16px;
}
/* ── Balance scorecard ring overrides ───────────────────────────────────── */
/* (activity-tracker and ring rules already defined above in Agent profile block) */
/* ── High-Five hover overlay on profile avatar ──────────────────────────── */
.HF_manager_agent_block {
display: none;
position: absolute;
left: 70px;
top: 0;
z-index: 10;
cursor: pointer;
}
.HF_manager_agent_container:hover .HF_manager_agent_block {
display: block;
}
/* ── Best practices wrapper ─────────────────────────────────────────────── */
.amp-m2-bp-wrapper {
padding-top: 15px;
}
/* Active Coaching header column widths matching legacy CSS */
/* .commitment_header .coaching_table_body_user {
width: 20%;
} */
/* .commitment_header .coaching_user2 {
width: 20%;
} */
.commitment_header .coaching_user3 {
width: 55%;
padding: 10px 20px 10px 20px;
}
/* ── Performance Trend card — restore #fff background (mirrors M1) ───── */
.performance_trend_block {
background-color: #fff;
}
.performance_trend_block .sub_block {
min-width: 260px;
flex-shrink: 0;
}
/* ── CEFx rank badge — mirrors M1 .efx_rank ──────────────────────────── */
.efx_rank {
position: absolute;
left: -3px;
top: -2px;
background-color: #dfe3eb;
border-radius: 3px;
padding: 0px 3px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
border: 1px solid #c7cdd5;
font-size: 10px;
z-index: 1;
}
/* ── coach_userpic — anchors .HF_coach position:absolute (mirrors M1) ── */
.coach_userpic {
position: relative;
}
/* ── Placeholders inside metric/task sections (mirrors M1) ───────────── */
.metrics_block .amp-m2-card__placeholder,
.commitment_block .amp-m2-card__placeholder {
padding: 16px;
}
/* ── DataTables pagination — mirrors M1 m1Dashboard.css ─────────────── */
div.dataTables_wrapper div.dataTables_paginate {
padding: 16px 0px;
text-align: center;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
margin: 2px 0;
font-size: 13px !important;
display: flex;
justify-content: center !important;
align-items: center;
}
li.paginate_button.page-item a.page-link {
border: 1px solid transparent !important;
padding: 4px 8px !important;
margin-left: 0px !important;
color: cadetblue;
font-weight: 600;
}
li.paginate_button.page-item a.page-link:hover {
border: 1px solid cadetblue !important;
background-color: rgba(34, 198, 171, 0.17);
color: #0e7e97;
font-weight: 700;
border-radius: 3px;
font-size: 13px;
}
li.paginate_button.page-item.active a.page-link {
border: 1px solid #0e7e97 !important;
background-color: rgba(34, 198, 171, 0.17);
color: #0e7e97;
font-weight: 700;
border-radius: 3px;
font-size: 13px;
}
li.paginate_button.page-item.disabled a.page-link {
color: #949494 !important;
border: 0 !important;
cursor: default;
}
li.paginate_button.page-item:not(.disabled) a.page-link {
cursor: pointer;
}
/* ── Modal HelpTip tooltip position fix (mirrors M1) ─────────────────── */
.modal .question_icon.tool .commit-tooltip {
top: 20px;
z-index: 9999;
}
.modal .modal-header {
overflow: visible;
}
/* ── Performance Trend table typography (mirrors M1) ─────────────────── */
.trend_perf_table th {
font-size: 14px !important;
font-weight: 600 !important;
}
.trend_perf_table td {
font-size: 12px !important;
font-weight: 600 !important;
}
.trend_perf_table tbody tr td {
border: none !important;
}
.trend_perf_table thead tr th {
border: none !important;
}
/* ── Activity History / CEFx table borders (mirrors M1) ─────────────── */
#activity_history_table tbody tr td {
border: none !important;
border-bottom: 1px solid #dfe3eb !important;
}
#coachingefx thead tr th,
#coachingefxbymetric thead tr th {
border-right: 1px solid #dfe3eb !important;
}
/* ── Metrics table row borders — enforce #dfe3eb dividers ────────────── */
.metrics_block .metric_table tbody tr td {
border-bottom: 1px solid #dfe3eb !important;
}
/* ── Performance bar column — anchor bar near top, reserve bottom space ─
Mirrors M1: col 2 = PERFORMANCE bar; vertical-align:top + padding adjustments
prevent the P bubble from overflowing into the next row. */
.metrics_block .metric_table>.table tbody tr td:nth-child(2) {
vertical-align: top !important;
padding-top: 36px !important;
padding-bottom: 55px !important;
}
/* Restore auto row height (M1 override for legacy 100px rule) */
.metrics_block .metric_table>.table tbody tr {
height: auto !important;
}
/* ── Recognition table ──────────────────────────────────────────────────── */
/* m2dashboard.css (public legacy) sets .table-bordered { border: 0px !important }
which strips all Bootstrap borders. Restore to match M1/NET:
- td: bottom border only, no right border (managerdashboardnew.css .table tbody tr td)
- th: right + bottom borders for column separators
Use #dfe3eb — the exact color from managerdashboardnew.css. */
/* Outer table border */
#recognition_table_wrapper table.table-bordered {
border: 1px solid #dfe3eb !important;
}
/* Header borders: right separator + bottom separator */
#recognition_table_wrapper table.table-bordered thead tr th {
border-right: 1px solid #dfe3eb !important;
border-bottom: 1px solid #dfe3eb !important;
}
/* Body borders: bottom only, no right (matches managerdashboardnew.css cascade) */
#recognition_table_wrapper table.table-bordered tbody tr td {
border-bottom: 1px solid #dfe3eb !important;
border-right: 0 !important;
}
/* ── Header styling — matches managerdashboardnew.css .table thead tr th exactly.
DataTables injects sorting/sorting_asc/sorting_desc classes that override legacy
font/color rules, so we target all variants with !important. */
#recognition_table_wrapper thead tr th,
#recognition_table_wrapper thead tr th.sorting,
#recognition_table_wrapper thead tr th.sorting_asc,
#recognition_table_wrapper thead tr th.sorting_desc {
color: #555 !important;
/* dark gray — matches managerdashboard th color */
font-size: 12px !important;
/* matches managerdashboardnew.css font-size: 12px */
font-weight: 500 !important;
/* matches managerdashboardnew.css font-weight: 500 */
text-transform: uppercase !important;
/* matches managerdashboardnew.css text-transform */
background-color: #f5f8fa !important;
/* matches managerdashboardnew.css background */
}
/* ── Body cell styling ── */
/* All td: font-weight 600, font-size 12px (managerdashboardnew.css .table tbody tr td) */
#recognition_table_wrapper .table tbody tr td {
font-size: 12px !important;
font-weight: 600 !important;
}
/* Column text alignment matching legacy DataTables initialization:
col 1 (RECOGNIZED BY): left — th:first-child { text-align: left }
col 2 (REASON): center — default center
col 3 (DATE): right — right-aligned per .NET table output */
#recognition_table_wrapper .table tbody tr td:first-child {
text-align: left !important;
}
#recognition_table_wrapper .table tbody tr td:nth-child(2) {
text-align: center !important;
}
#recognition_table_wrapper .table tbody tr td:last-child {
text-align: right !important;
pointer-events: none;
/* DATE column — no click interaction */
}
/* Reason column link color — matches legacy #recognition_table_wrapper .table td a */
#recognition_table_wrapper .table td a {
color: #0e7e97 !important;
font-weight: 600;
}
/* ── DataTables sort-icon sprite fix ────────────────────────────────────── */
/* Legacy CSS tries to load sort arrow sprites from .NET image paths that */
/* don't exist in React. Clearing background-image lets the pseudo-element */
/* FontAwesome icons (defined in each component's CSS) render cleanly. */
/* Covers all React-rendered dataTable instances not scoped by component CSS. */
#list_view thead th.sorting,
#list_view thead th.sorting_asc,
#list_view thead th.sorting_desc,
#games_won_table thead th.sorting,
#games_won_table thead th.sorting_asc,
#games_won_table thead th.sorting_desc,
#scorecard_details_table thead th.sorting,
#scorecard_details_table thead th.sorting_asc,
#scorecard_details_table thead th.sorting_desc,
#scorecard_ranking_table thead th.sorting,
#scorecard_ranking_table thead th.sorting_asc,
#scorecard_ranking_table thead th.sorting_desc {
background-image: none !important;
}
.highcharts-axis-title {
font-size: 12px !important;
font-weight: 500 !important;
color: #121212 !important;
font-family:
"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif !important;
}
.highcharts-axis-labels {
font-size: 11px !important;
}
.highcharts-axis-labels text {
font-size: 11px !important;
font-family:
Lucida Grande,
Lucida Sans Unicode,
Arial,
Helvetica,
sans-serif !important;
fill: #666666 !important;
}
.highcharts-legend-item text {
font-family:
"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: bold;
}
.highcharts-legend-item.highcharts-legend-item-hidden text {
color: #cccccc;
cursor: pointer;
font-size: 12px;
font-weight: bold;
fill: #cccccc !important;
text-decoration: none !important;
}
.highcharts-axis-line {
stroke: #e6e6e6 !important;
}
/* Line */
.highcharts-legend-item-hidden .highcharts-graph {
stroke: #cccccc !important;
}
/* Circle */
.highcharts-legend-item-hidden .highcharts-point {
fill: #cccccc !important;
stroke: #cccccc !important;
}/* Base reset / globals — mirrors the .NET layout colors and fonts. */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ── Global scrollbar — thin, subtle, matches .NET L1 dashboard appearance ──
The ExecAgentDashboard in .NET has no custom scrollbar CSS so the browser
renders its default OS-style scrollbar. We replicate that thin look:
8px wide, light grey track, medium grey rounded thumb. */
/* Chrome / Edge / Safari */
::-webkit-scrollbar {
width: 15px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #fff;
border-radius: 4px;
width: 15px;
}
::-webkit-scrollbar-thumb {
background: #c5c7cb;
border-radius: 10px;
background-clip: content-box;
border: 3px solid transparent;
}
/* ::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
} */
::-webkit-scrollbar-corner {
background: transparent;
}
/* Firefox */
/* * {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
} */
html,
body,
#root {
height: 100%;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 14px;
color: #212529;
background: #f5f8fa;
-webkit-font-smoothing: antialiased;
}
/* Prevent page scroll when any Bootstrap modal is open */
body:has(.modal.show) {
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
}
/* ===== Color tokens lifted from the .NET app ===== */
:root {
--amp-bg-page: #f5f8fa;
--amp-bg-dark: #54585b;
/* login page background */
--amp-bg-header: #323743;
/* topbar background */
--amp-orange: #fc8f13;
/* primary CTA color */
--amp-text: #212529;
--amp-muted: #666;
--amp-border: #e2e6ea;
--amp-sidebar-bg: #323743;
--amp-sidebar-active: #fc8f13;
--amp-sidebar-text: #d8dde6;
--amp-link-blue: #026eb6;
}
/* ===== Layout utility classes lifted from the .NET app's site.css =====
These are used by execagentdashboard.css partials, timeframe.css, and
throughout the CSHTML templates. Bootstrap 5 has its own equivalents
(.justify-content-between, .align-items-center, etc.) but the .NET templates
use the shorter non-Bootstrap names. */
.space-between {
justify-content: space-between;
}
.flex-start {
justify-content: flex-start !important;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.min-hei-40 {
min-height: 40px;
}
/* .cursor-pointer — removed; now loaded from legacy/css/execagentdashboard.css */
.cursor_pointer {
cursor: pointer;
}
.position-relative {
position: relative;
}
.pl-24 {
padding-left: 24px;
}
.pd-30 {
padding: 30px;
}
.ml-20 {
margin-left: 20px;
}
.border-right {
border-right: 1px solid #dfe3eb;
}
.border-left {
border-left: 1px solid #dfe3eb;
}
/* .border-transaprent — removed; now loaded from legacy/css/execagentdashboard.css */
/* ===== Additional utility classes used by ported React components =====
These were found to be missing from the legacy CSS files after audit.
Synced from M1 index.css. */
/* Used in CoachingHistory, ActivityHistory — wraps table cell text */
.cell-text {
overflow: hidden;
text-overflow: ellipsis;
}
/* Used in ActiveCoachingCommitments — metric name in coaching row */
.text_secondary {
color: #6b7a8f;
font-size: 13px;
}
/* General gray muted text */
.grayy {
color: #9aa5b4;
font-size: 12px;
}
/* Used in BSC modal, CoachingHistory — bold value */
.bold {
font-weight: 700;
}
/* Overflow utilities used in PerformanceTrend, BestPractices, etc. */
.overflow-auto {
overflow: auto;
}
/* Width utilities referenced in coaching section partials */
.w-55 {
width: 55%;
}
/* No-wrap used in coaching tooltip labels */
.no-wrap-text {
white-space: nowrap;
}
/* Loader (from the original Login page) */
.loader {
margin: 100px auto 0;
width: 0;
position: relative;
}
.loader ul li {
border-radius: 50%;
height: 30px;
width: 30px;
position: absolute;
animation: spin 1.2s ease-in-out infinite;
}
.loader ul li:nth-child(1) {
animation-delay: 0.125s;
}
.loader ul li:nth-child(2) {
animation-delay: 0.25s;
}
.loader ul li:nth-child(3) {
animation-delay: 0.375s;
}
.loader ul li:nth-child(4) {
animation-delay: 0.5s;
}
.loader ul li:after {
content: '';
position: absolute;
top: 100%;
left: 0;
background-color: #026eb6;
border-radius: 50%;
height: 10px;
width: 10px;
}
@keyframes spin {
0% {
transform: rotate(50deg);
}
100% {
transform: rotate(410deg);
}
}
/* ── Modal overlay backdrop ─────────────────────────────────────────────────
Used by BalanceScorecardModal and LeaderboardModal.
Mirrors the Bootstrap modal backdrop + centering logic from the .NET app. */
.amp-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1050;
display: flex;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: 20px 0;
}
.amp-modal {
background: #fff;
border-radius: 6px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 900px;
margin: auto;
}/* Sidebar removed — layout is now full-width with no left rail.
amp-shell__main fills the entire viewport width. */
.amp-shell__main {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--amp-bg-page);
}
/* ──────────────────────────────────────────────────────────────
M2Appraisal.css — Screen 2 list view
Mirrors appraisal.css layout from .NET host; new styles use
amp-m2-apr-* namespace.
────────────────────────────────────────────────────────────── */
.amp-m2-apr-wrap {
display: flex;
flex-direction: column;
height: 100%;
gap: 0;
}
/* ─── Filter bar ────────────────────────────────────────────── */
.amp-m2-apr-filter-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: #fff;
border-bottom: 1px solid #e8e8e8;
flex-wrap: wrap;
}
.amp-m2-apr-filter-toggle {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid #ddd;
border-radius: 4px;
padding: 6px 12px;
cursor: pointer;
font-size: 13px;
color: #444;
transition: background 0.12s;
}
.amp-m2-apr-filter-toggle:hover {
background: #f5f5f5;
}
.amp-m2-apr-filter-icon {
width: 16px;
height: 16px;
object-fit: contain;
}
.amp-m2-apr-filter-group {
display: flex;
align-items: center;
}
.amp-m2-apr-select {
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px 10px;
font-size: 13px;
color: #333;
background: #fff;
min-width: 180px;
}
.amp-m2-apr-filter-clear {
background: none;
border: none;
color: #1976d2;
font-size: 12px;
cursor: pointer;
padding: 4px 6px;
text-decoration: underline;
}
/* ─── Table wrapper ─────────────────────────────────────────── */
.amp-m2-apr-table-wrap {
flex: 1;
overflow: auto;
padding: 0;
position: relative;
min-height: 120px;
}
.amp-m2-apr-empty,
.amp-m2-apr-error {
padding: 24px 16px;
color: #888;
font-size: 13px;
}
.amp-m2-apr-error {
color: #c00;
}
.amp-m2-apr-error-note {
color: #888;
font-size: 12px;
margin-top: 4px;
}
/* ─── Table ─────────────────────────────────────────────────── */
.amp-m2-apr-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
min-width: 900px;
}
.amp-m2-apr-table thead tr {
background: #fafafa;
border-bottom: 2px solid #e0e0e0;
}
.amp-m2-apr-th {
padding: 9px 12px;
text-align: left;
font-weight: 600;
color: #555;
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.amp-m2-apr-th:hover {
background: #f0f0f0;
}
.amp-m2-apr-col-cb {
width: 36px;
text-align: center;
padding: 0 8px !important;
}
.amp-m2-apr-table tbody tr {
border-bottom: 1px solid #f0f0f0;
transition: background 0.1s;
cursor: default;
}
.amp-m2-apr-table tbody tr:hover {
background: #f5f7ff;
}
.amp-m2-apr-row-selected {
background: #e8f0fe !important;
}
.amp-m2-apr-table td {
padding: 8px 12px;
vertical-align: middle;
color: #333;
}
/* ─── ID link button ────────────────────────────────────────── */
.amp-m2-apr-id-link {
background: none;
border: none;
padding: 0;
color: #1976d2;
cursor: pointer;
font-size: 13px;
text-decoration: none;
}
.amp-m2-apr-id-link:hover {
text-decoration: underline;
}
/* ─── Days cell ─────────────────────────────────────────────── */
.amp-m2-apr-days-cell {
font-weight: 600;
text-align: center;
}
/* ─── Sort icon ─────────────────────────────────────────────── */
.amp-m2-apr-sort-icon {
display: inline-block;
margin-left: 4px;
font-size: 11px;
color: #bbb;
vertical-align: middle;
}
.amp-m2-apr-sort-icon.is-active {
color: #1976d2;
}
/* ─── Footer ────────────────────────────────────────────────── */
.amp-m2-apr-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #fff;
border-top: 1px solid #e8e8e8;
gap: 12px;
}
.amp-m2-apr-footer > div {
display: flex;
align-items: center;
gap: 10px;
}
.amp-m2-apr-sel-count {
font-size: 13px;
color: #555;
}
/* ─── Reuse legacy btn classes (mirrored from appraisal.css) ── */
.btn-bordered {
background: #fff;
border: 1px solid #1976d2;
color: #1976d2;
border-radius: 4px;
padding: 7px 18px;
font-size: 13px;
cursor: pointer;
transition: background 0.12s;
}
.btn-bordered:hover {
background: #e8f0fe;
}
.btn-gray {
background: #5c6bc0;
border: none;
color: #fff;
border-radius: 4px;
padding: 7px 18px;
font-size: 13px;
cursor: pointer;
transition: background 0.12s;
}
.btn-gray:hover {
background: #3949ab;
}
/* ──────────────────────────────────────────────────────────────
M2AppraisalPage.css — Screen 2 detail view
Mirrors appraisal.css from .NET host; new styles use
amp-m2-aprp-* namespace.
────────────────────────────────────────────────────────────── */
.amp-m2-aprp-wrap {
display: flex;
flex-direction: column;
height: 100%;
}
/* ─── Header ────────────────────────────────────────────────── */
.amp-m2-aprp-header {
padding: 14px 16px 12px;
background: #37474f;
color: #fff;
}
.amp-m2-aprp-header .appraise {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #fff;
}
/* ─── Body (scrollable) ─────────────────────────────────────── */
.amp-m2-aprp-body {
flex: 1;
overflow-y: auto;
padding: 0;
}
.amp-m2-aprp-error {
padding: 16px;
color: #c00;
font-size: 13px;
}
/* ─── Agent card ────────────────────────────────────────────── */
.amp-m2-aprp-agent-card {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 16px;
background: #fff;
border-bottom: 1px solid #e8e8e8;
gap: 16px;
}
.appraised_user .user_details {
display: flex;
align-items: center;
gap: 12px;
}
.appraised_user .user_details h3 {
margin: 0 0 2px;
font-size: 16px;
font-weight: 600;
color: #222;
}
.appraised_user .user_details p {
margin: 0;
font-size: 12px;
color: #888;
}
/* ─── Agent avatar (initials) ───────────────────────────────── */
.amp-m2-aprp-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: #5c6bc0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}
.amp-m2-aprp-empid {
font-size: 11px;
color: #aaa !important;
}
/* ─── Score strip ───────────────────────────────────────────── */
.amp-m2-aprp-score-strip {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
}
.amp-m2-aprp-score-block {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 20px;
border-left: 1px solid #e8e8e8;
min-width: 110px;
}
.amp-m2-aprp-score-block:first-child {
border-left: none;
}
.amp-m2-aprp-score-label {
font-size: 12px;
color: #888;
margin-bottom: 4px;
white-space: nowrap;
}
.amp-m2-aprp-score-value {
font-size: 20px;
font-weight: 700;
color: #222;
}
/* ─── API detail groups ─────────────────────────────────────── */
.amp-m2-aprp-detail-groups {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
background: #f9f9f9;
border-bottom: 1px solid #e8e8e8;
}
.amp-m2-aprp-detail-section {
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 6px;
padding: 12px 16px;
min-width: 200px;
flex: 1;
}
.amp-m2-aprp-detail-category {
margin: 0 0 8px;
font-size: 13px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.amp-m2-aprp-detail-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.amp-m2-aprp-detail-label {
color: #888;
padding: 3px 8px 3px 0;
white-space: nowrap;
}
.amp-m2-aprp-detail-value {
color: #222;
font-weight: 500;
padding: 3px 0;
}
/* ─── Subjective score section ──────────────────────────────── */
.amp-m2-aprp-subjective {
padding: 16px;
background: #fff;
}
.amp-m2-aprp-subjective h3 {
font-size: 15px;
font-weight: 600;
margin: 0 0 14px;
color: #333;
}
.amp-m2-aprp-sub-fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px 20px;
margin-bottom: 20px;
overflow-y: auto;
}
.amp-m2-aprp-subjective .form-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.amp-m2-aprp-subjective label {
font-size: 12px;
font-weight: 500;
color: #555;
}
.amp-m2-aprp-subjective .form-control {
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 10px;
font-size: 13px;
color: #333;
background: #fff;
width: 100%;
box-sizing: border-box;
}
.amp-m2-aprp-subjective select.form-control {
cursor: pointer;
}
.amp-m2-aprp-subjective input[readonly].form-control {
background: #f5f5f5;
color: #555;
}
.amp-m2-aprp-subjective textarea.form-control {
resize: vertical;
}
/* ─── Recommended rating ────────────────────────────────────── */
.amp-m2-aprp-rec-rating {
border-top: 1px solid #f0f0f0;
padding-top: 16px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px 20px;
}
/* ─── Submit message ────────────────────────────────────────── */
.amp-m2-aprp-submit-msg {
margin: 0 16px 8px;
padding: 10px 14px;
background: #e8f5e9;
border: 1px solid #a5d6a7;
border-radius: 4px;
color: #2e7d32;
font-size: 13px;
}
/* ─── Footer ────────────────────────────────────────────────── */
.amp-m2-aprp-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: #fff;
border-top: 1px solid #e8e8e8;
}
.amp-m2-aprp-submit-btn {
background: #5c6bc0;
border: none;
color: #fff;
border-radius: 4px;
padding: 8px 20px;
font-size: 13px;
cursor: pointer;
transition: background 0.12s;
}
.amp-m2-aprp-submit-btn:hover:not(:disabled) {
background: #3949ab;
}
.amp-m2-aprp-submit-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* ─── Legacy class overrides ────────────────────────────────── */
.bg-darkk {
background: #37474f !important;
}
.btn-bordered {
background: #fff;
border: 1px solid #1976d2;
color: #1976d2;
border-radius: 4px;
padding: 7px 18px;
font-size: 13px;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.btn-bordered:hover {
background: #e8f0fe;
}
.btn-next {
background: #5c6bc0;
border: none;
color: #fff;
border-radius: 4px;
padding: 8px 20px;
font-size: 13px;
cursor: pointer;
}
.btn-next:hover {
background: #3949ab;
}
/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
.amp-m2-aprp-agent-card {
flex-direction: column;
align-items: flex-start;
}
.amp-m2-aprp-score-strip {
width: 100%;
justify-content: flex-start;
}
.amp-m2-aprp-score-block {
min-width: 80px;
padding: 8px 12px;
}
.amp-m2-aprp-sub-fields,
.amp-m2-aprp-rec-rating {
grid-template-columns: 1fr;
}
}
/*$vite$:1*/